[粗心] html avoid side-effect when use jquery clone

我在動態新增element(購物車，搜尋結果等等頁面)時，
會先寫一個template用來clone用，

但是發現為何css的呈現都會用最後一筆的樣子
找了clone用法https://api.jquery.com/clone/
也跟他無關，後來發現是自己犯傻了.

原因說明詳見下面範例註解處.


範例

    template    += ' ';
    template    += '  
';
    template    += '  
';
    template    += '   ';
    template    += '   
';
    template    += '    
name
';
    template    += '    
';
    template    += '    
';
    template    += '   
';
    template    += '  
';
    template    += '  
';
    template    += ' ';


    $template = $(template);
    
    for (i = 0; i < channelItemJson.length; i++) {

        var $newItemCol = $template.clone();
        $newItemCol.find('img').attr('src', window.itemImgPreUrl + channelItemJson[i]['localCoverPath']);

        $newItemCol.find('p').text(channelItemJson[i]['name']);

        $newItemCol.find(".channel-item-detail").on("click", {
            elements: $newItemCol,

        }, handler2ItemDetail);
        
        //$('.search-all-price-group').show();
        //this strategy will cause side-effect
        //beacuse there are many '.search-all-price-group' class 
        
        //this is right
        $newItemCol.find('.search-all-price-group').show();
         
        $("#scroll-container").append($newItemCol.fadeIn());
    }

LiveReload with Sublime Text 3

1.
下載
https://github.com/Grafikart/ST3-LiveReload

2.
解壓縮後改名成LiveReload

3.
放到C:\Users\lewis\AppData\Roaming\Sublime Text 3\Packages\
(Preferneces->Browse Settings)

4.
改Settings-Default
Preferneces->Package settings ->Settings-Default
{
    "enabled_plugins": [
        "SimpleReloadPlugin",
        "SimpleRefresh"
    ]
}

5.
chrome的擴充套件
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

(成功後空心icon會變為實心)

difference between local storage and session storage / local storage session storage 的不同

在跳轉頁面時不想要跟server重要資料，
或是要將上個頁面的大量資料帶到下個頁面，
此時可以用 local storage  and session storage，
這兩這有何不同?

A:前者在瀏覽器關掉時資料還會被保存，後者則不會.

保存方式為key-value的形式，用法



參考:
http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
http://jerryzou.com/posts/cookie-and-web-storage/

CSS3 pointer-events

最近寫前端時想要一個功能是可以模仿bootstrap modal，
但又想做到可以支持上一頁下一頁的功能，
於是用了CSS3 pointer-events 這屬性，
有點像是android的frame layout
主要是參考這篇http://www.oxxostudio.tw/articles/201409/pointer-events.html


這邊直接在jsfiddle做測試

http://jsfiddle.net/P7c9q/534/

• pointer-events: none=> 此時ybox 不會有hover效果，並且將滑鼠移到 ybox& gbox交界處時gbox就會有反應.

• pointer-events: auto=>此時 ybox& gbox都會有hover效果，並且將滑鼠移到 ybox& gbox交界處時只有ybox才有反應.

.html

.js

.ybox {
    position: relative;
    width: 40px;
    height: 100px;
    background: rgba(255, 200, 0,1);
    z-index: 1;
    margin-top: 30px;
    pointer-events: none;
    //pointer-events: auto;
}

.ybox:hover{
  background: rgba(0, 50, 100, .8);
}

.gbox {
    
    position: absolute;
    top: 0; left: 0;
    width: 200px;
    height: 50px;
    background: rgba(0, 220, 170, 1);
    z-index: 0;
}
.gbox:hover{
  background: rgba(0, 50, 100, .8);
}

[jquery] prevent a parent's onclick event from firing when a child anchor is clicked

.html


this is test
    
    I don't want #clickable to handle this click event.

.js
$("#clickable a").click(function(e) {
   //do something
   e.stopPropagation();
})


$("#clickable").click(function(e) {
   //do something
   alert('clickable');
})

here is link that you test
http://jsfiddle.net/grp10d10/1/

用bootstrap grid中的offset的特性 達到元件置中的效果

在grid system row裡，一行滿的話是12(col-md-12).
如果現在要將一個元件(col-md-8)
放入此row，則此元件會靠左.

要如何將其置中?

首先把12格想成分成每2格為一個，
所以總共有6個.
所以col-md-8佔了4個，

此時在元件加入屬性(col-md-offset-2)
他就會往右兩格.
這樣就達到置中的效果了.

式意圖.
|--|==|==|==|==|--|

==================
參考http://getbootstrap.com/css/