Pages

0

JQuery 清單特效 plugin


點選上面這張圖片就可以看到效果~

這是延續之前自己寫過的 JQuery 清單排序特效原始模型，
所修改出來的 plugin，
修改的地方其實不少，包含了標籤與相關的篩選機制，
而這個 plugin 的版用起來非常方便，
可以應用的地方也很廣，例如相簿、秀圖篩選...等，
對於前端設計師來說是相當方便的~
設定的方式很簡單，
主要在需要套用的 list 上套用這個 plugin，
在 li 的標籤內增加一個 tag 的標籤，
在選單的標籤內增加 menuTag 的標籤，大小寫須注意~
(li、td、th、div、span 皆可)
menuTag = tag 的話，
點選後就會只出現該 tag 的 li，其他就會消失，
若要全部出現，tag 和 menuTag 的值等於 "all" 就可以~
而 tag 內可不限只有一種標籤，以空白做為區隔，
例如：tag="blue yellow red"
而 menuTag 只能有一組標籤，例如：menuTag="blue"
諸如此類依此類推ㄎㄎ嘿嘿~

oxxo_listBoxEffect_v1.js 下載 (右鍵下載)
屬性：
divWidth : 305,                 // 外圍區塊寬度(高度隨內容變化)
divborderWidth : 2,             // 外圍區塊邊框粗細
divborderStyle : "solid",       // 外圍區塊邊框樣式
divborderColor : "#000",        // 外圍區塊邊框顏色
listWidth : 50,                 // 內容區塊寬度
listHeight : 50,                // 內容區塊高度
listPadding : 5,                // 內容區塊邊介值 
listBorder : "0px solid #000" , // 內容區塊邊框樣式
time : 300                      // 動畫過程時

html參考原始碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>jquery oxxo-listBoxEffect plugin</title>
   <style>
    .b1{background-color:#06c; color:#fff; font-size:30px; text-align:center;}
    .y1{background-color:#fa0; font-size:30px; text-align:center;} 
   </style>
   <script src="jquery-1.7.1.min.js"></script>
   <script src="plugin/oxxo_plugin/oxxo_listBoxEffect_v1.js"></script>
   <script>
    $(function(){
     $("#test"). oxxolistBoxEffect({
      divWidth : 305,                 // 外圍區塊寬度(高度隨內容變化)
      divborderWidth : 2,             // 外圍區塊邊框粗細
      divborderStyle : "solid",       // 外圍區塊邊框樣式
      divborderColor : "#000",        // 外圍區塊邊框顏色
      listWidth : 50,                 // 內容區塊寬度
      listHeight : 50,                // 內容區塊高度
      listPadding : 5,                // 內容區塊邊介值 
      listBorder : "0px solid #000" , // 內容區塊邊框樣式
      time : 300                      // 動畫過程時間
     });
    });
   </script>
</head>
<body>
   <ul>
    <li menuTag="all">顯示全部</li>
    <li menuTag="blue">藍色方塊</li>
    <li menuTag="yellow">黃色方塊</li>
    <li menuTag="odd">奇數方塊</li>
    <li menuTag="even">偶數方塊</li>
   </ul>
   <ul id="test">
    <li tag="blue odd"><div class="b1">01</div></li>
    <li tag="yellow even"><div class="y1">02</div></li>
    <li tag="yellow odd"><div class="y1">03</div></li>
    <li tag="blue even"><div class="b1">04</div></li>
    <li tag="yellow odd"><div class="y1">05</div></li>
    <li tag="yellow even"><div class="y1">06</div></li>
    <li tag="blue odd"><div class="b1">07</div></li>
    <li tag="yellow even"><div class="y1">08</div></li>
    <li tag="blue odd"><div class="b1">09</div></li>
    <li tag="yellow even"><div class="y1">10</div></li>
   </ul>
</body>
</html>

oxxo

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

沒有留言:

張貼留言