2016年6月25日 星期六

[javascript] location.origin not work on IE

 javascript    trouble-shooting    IE  



▌Problem

window.location.origin not works on some IE.



▌How to solve it

▋js

Use window.location.protocol, window.location.hostname, window.location.port to replace window.location.origin.

if (!window.location.origin) {           
window.location.origin = window.location.protocol + '//' + window.location.hostname + (window.location.port ? (':' + window.location.port) : '');
        }

var redirectUrl = window.location.origin.concat("/Area/Control/Edit", "?id=" + id);


張貼者： 於 沒有留言:

[AngularJS] AnguComplete-alt sample

 AngularJS    AnguComplete-alt    AnguComplete  



▌Introduction

AnguComplete-alt 是可以實作Auto-complete(自動完成)的angularjs directive。
It forks from AnguComplete.

至於AnguComplete-alt相比之下，我覺得以下多出來的功能很重要： (Extra features請參考作者ghiden的說明)

1.  A callback for tracking input changes
2.  Show scrollbar
3.  Custom remote API handler
4.  Can show all data when input nothing

基本的操作，就請參考原作者的GitHub和Demo page。
以下另外說明一些我比較常用的操作。


▌Implement

▋HTML

<div ng-app="app" ng-controller="AnguAltCtrl">
    <h3>Name</h3>
    <div class="col-md-5">
        <angucomplete-alt id="ex2" placeholder="Search people"
                          pause="100"
                          selected-object="selectedPerson"
                          local-data="people"
                          search-fields="firstName,surname"
                          title-field="firstName,surname"
                          description-field="company"
                          image-field="pic" minlength="1"
                          input-class="form-control  form-control-small"
                          match-class="highlight" />
    </div>
</div>


▋js

var app =
angular.module('app', ['angucomplete-alt'])
.controller("AnguAltCtrl", function ($scope, $http) {

    var imgUrl = "../../Content/images/gif/msn.gif";

    $scope.people = [
            { firstName: "JB", surname: "Lin", company: "Wahlee", pic: imgUrl },
            { firstName: "Lily", surname: "Yang", company: "Bank", pic: imgUrl },
            { firstName: "Leia", surname: "Lin", company: "Kid", pic: imgUrl },
            { firstName: "小翰", surname: "林", company: "Wahlee", pic: imgUrl },
            { firstName: "小儀", surname: "楊", company: "Bank", pic: imgUrl },
            { firstName: "小臻", surname: "林", company: "Kid", pic: imgUrl }
    ];
});


執行結果如下，另外中文也是可以支援的。 不過因為輸入法的關係，當輸入中文字後，必須再按一個按鍵才會帶出自動完成的資料。 PS. 我是習慣按空白鍵。

 


▋Feature : 不輸入值的情況下，帶出所有自動完成資料

作者很貼心的在issue 107加上了這個功能，我們只要將minlegth = 0 就可以了。

<angucomplete-alt id="ex2" placeholder="Search people"
                          pause="100"
                          selected-object="selectedPerson"
                          local-data="people"
                          search-fields="firstName,surname"
                          title-field="firstName,surname"
                          description-field="company"
                          image-field="pic"
minlength="0"
                          input-class="form-control  form-control-small"
                          match-class="highlight" />



▋Feature : 加上Scroll bar

打開angucomplete-alt.css， 在.angucomplete-dropdown 加入以下CSS設定。

.angucomplete-dropdown {
    border-color: #ececec;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
    width: 250px;
    padding: 6px;
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    margin-top: -6px;
    background-color: #ffffff;

    overflow-y: auto;
    max-height: 200px;
}








▌Reference
l   AnguComplete

l   AnguComplete-alt



張貼者： 於 沒有留言:

2016年6月23日 星期四

2016 大阪京都行 Day 2 (大阪環球影城USJ )


第二天的目的地是Universal Studio Japan 大阪環球影城 (以下簡稱USJ )~
非常期待呢!


到USJ的方式很多，我們是從JR難波搭大和路線到今宮(Imamiya)，到了今宮再轉環狀線到西九条轉JR西日本櫻島線 (又暱稱為JR夢咲線)，可以參考下面連結的環狀線各站圖就很清楚了。

環狀線的圖(來源：樂活的大方@旅行玩樂學~)



我們到的時候已經九點多了，排隊買票的人潮算是相當多。 另外為了能盡興的玩，這次除了門票也另外買了Express 4 (快速通關4) ； USJ 在快速通關票種和可玩種類在每一年會做調整，所以買票前建議還是到日本官網研究一下!

(上圖是快速通關的QR CODE，下圖是入園用的)

2016/06 Express 4：
ü   哈利波特園區保證入園
ü   事前預約* 的 哈利波特-禁忌之旅
ü   蜘蛛俠驚魂歷險記乘車遊
ü   大白鯊 或 侏儸紀公園 擇一
ü   魔鬼終結者2-3D 或 浴火赤子情

PS.
哈利波特-禁忌之旅盡量在約定的時間前往搭乘，我們有看到前方的遊客應超過時間而被請往一般通關排隊。
PS.
快速通關是否需要購買？ 以下是我們的熱門遊樂設施排隊時間參考：
n   哈利波特園區保證入園： 當天入園無任何限制，所以我也不清楚保證入園是否是在人潮更多的時候使用？
n   蜘蛛俠驚魂歷險記乘車遊： 一般通關 80 分鐘， 快速通關15分鐘。
n   哈利波特-禁忌之旅： 一般通關 90 分鐘， 快速通關20分鐘。




我們入園後當然是先滿足臻臻，所以是去史努比電影工作室先玩飛天史奴比。



USJ的一些設施是可以先抽預約搭乘卷，一張門票抽一次(不同設施也是要先等預約卷的時間過後才可再抽下一張!)

下圖是取得飛天史奴比預約搭乘卷的地方。



進去史奴比的兒童遊樂區後，在這裡有史努比雲霄飛車大競賽，如果是想搭霄飛車的爸爸媽媽，也可以搭乘這個小小的雲霄飛車唷! 我去玩的時候並沒有人在排隊 XD

(臻臻很好奇這個大玩偶是誰…)



 


在史奴比園區的附近就是Hello Kitty時尚大道，比較有趣的是Hello Kitty蝴蝶結大收藏。在Kitty粉紅色生日派對的這一天，臻臻被受邀參加她的派對，除了可以參觀Kitty的工作室，也可以和Hello Kitty單獨拍照唷!




接下來，臻臻看到旁邊小朋友在開車車，她也跑過去排隊。 不過這項設施是三歲以上使用且父母親無法陪同 :Q

果然臻臻不太會開車，一直卡住，真是辛苦工作人員了，一直教導她。
(疑？ 工作人員是和她說英文還是日文呢？)



今天的午餐我們選擇在史奴比快餐用餐，因為事先查過，這一家餐廳除了餐盒很可愛，重點是可以加價購買右下角這個圓型的Snoopy塑膠碗！




用餐後，我們就出發到老婆最喜歡的哈利波特魔法世界，這是我第四次來USJ，但是是第一次來哈利波特魔法世界； 整個造景和房子擬真度和精細度都非常高，這裡的人群也非常多。




舞台區會穿插一些小表演，看表演之前別忘了先買杯奶油啤酒!




另外禁忌之旅是必玩的遊樂設施，雖然我不是Harry porter fans，不過整體刺激度、速度感和畫面解析度都比我列為第一名的蛛蜘人驚魂歷險記來的好唷! 畢竟是新設施!


在哈利波特魔法世界睡著的臻臻終於起來了；如果是一天的行程，娃娃車是一定不能少帶的。


人潮並不會像去年玩的東京迪士尼那麼多，不玩設施走在街道上，或是像下圖左下角這群遊客躺在草地上玩自拍，都是非常愜意的一天。


 

後來我們又玩了蛛蜘人驚魂歷險記、大白鯊， 作為大人的回憶 J


總之最後我們還是回了環球奇境，玩玩杯子蛋糕、旋轉木馬和飛天史奴比； 下午的時候，這一區的人潮就相對比較少囉，幾乎排個十分鐘(小於)就可以玩到。




到了傍晚五點多，店鋪和餐廳已經陸陸續續關了。 建議請盡早去大門口左邊（從本園往出口的方向看）辦理退稅唷! 越晚可是排隊的人越多！

我們最後回到哈利波特魔法世界，來看夜晚的霍茲華格。 夜景和白天的氣氛相當不同呢，建議喜愛哈利波特的朋友在晚上離開前也要來參觀一下。




再見囉! 大阪環球影城!
至於晚餐，我們後來是回到難波的地下街用餐； 結束今天的行程！ 明天就要出發京都了！







<<2016 大阪京都行 Day 1 (關西機場/大阪難波/難波Walk/友都八喜/阿卡將 )
>>2016 大阪京都行 Day 3 (京都宇治抹茶 京都水族館)
>>2016 大阪京都行 Day 4 (琵琶湖 長浜 MITSUI OUTLET PARK)
>>2016 大阪京都行 Day 5 (京都動物園 日航關西機場酒店)



張貼者： 於 沒有留言:
訂閱： 文章 (Atom)