分類  >  Web前端 >

slider組件重構

tags:    時間:2013-12-09 23:16:43
slider組件重構【原創】
今天把網站的slider組件統一了一下,心得總結

1。像一般焦點圖,滾動字幕,相冊列表,包括自定義滾動條,其實原理都是一樣,組件的內部邏輯是可以共用的,不必弄很多組件出來,一個JS就可以搞定

2。對於組件我的習慣用法是直接綁定自定義屬性,讓頁面載入之後自動執行,不需要想JQUERY組件一樣,還需要穿一些配置參數進去,其實參數可以直接寫入標籤的自定義屬性上面

效果:
http://ceshi.sgamer.com/test/slider.html

優點:
1.載入即執行,頁面上可以存在N個slider組件
2.無需添加初始化代碼
3.用自定義事件用來解耦,切換會觸發change_silder事件
4.方法拆的很細,添加新的組件,寫少量JS即可完成

描述:
最為複雜也是功能最為強大的一個,將滾動的演算法和邏輯包裝成統一模塊,功能包含焦點圖,滾動信息,相冊列表

一共標籤分為:slider-list,slider-idxs, slider-idx, slider-scroll, slider-prev, slider-next

slider-list: 所有的配置信息都將配置在這個標籤上,滾動滑塊不管怎麼樣的表現形式,列表結構都是差不多

slider-idxs:只在焦點圖中使用,存放焦點圖button列表的容器,可以是小方塊也可以縮略圖

slider-idx :只在焦點圖,和相冊中使用,用來標記列表項,做關聯使用

slider-scroll:滑塊的滾動條事件

slider-prev:只在滾動信息,和相冊中使用到,表示上一頁

slider-next:只在滾動信息,和相冊中使用到,表示上一頁


焦點圖
<div class="slide" slider-list="s1" speed="500" delay="2000" direction="0" shownum="1" mode="focus" eventname="focus_index">

slider-list slider組件列表塊都是依據這個id名來做關聯的

eventname 因為列表分分兩種情況,一種是靜態,一種是動態寫入,對於動態寫入,就必須要加eventname屬性,裡面值為自定義事件的名字,動態寫入后
SG.PAGE_EVENT.fire("focus_index",{});即可

speed 執行動畫的毫秒數,設置越大,動畫效果越慢,相反則越快

delay 只在mode為focus,marquee時候有效,延遲多少秒執行播放

direction 方向是垂直還是橫向

shownum 顯示區域顯示幾個

mode 目前有focus,marquee,list

 <div slider-idxs="s1" class="slide_btn"> <span class="on" slider-idx="0">1</span> <span slider-idx="1">2</span> </div>

slider-idxs 為焦點圖的按鈕部分

slider-idx 為單個按鈕項,下標從0開始,當前選中,組件會默認給加上on的央視名嘴

滾動信息
<ul slider-list="s2" mode="marquee" shownum="1" direction="1" delay="3000" speed="500" > <div class="narrow fr"> <span class="up" slider-prev="s2"></span> <span class="down" slider-next="s2"></span> ... </div>

slider-prev 向上箭頭

slider-next 向下箭頭


相冊列表
<ul slider-list="s3" speed="500" delay="2000" movenum="3" offset="2" direction="0" shownum="4" mode="list">     <li slider-idx="0" class="on" style="background-color:red"></li>     <li slider-idx="1" style="background-color:red"></li>     ... </ul> <input type="button" value="左" slider-prev="s3"> <input type="button" value="右" slider-next="s3">


movenum 只在mode為list時候有效,每次移動幾個圖片,當movenum大於shownum,則movenum默認被設置為shownum
offset 只在mode為list時候有效,代表點擊圖片時候效果,默認為1,既是指點擊末尾兩端最後一張圖片會有效果,如果設置成2,點擊末尾兩端最後兩張會有動畫效果
通過id關聯,slider-idxs="s1" ,slider-list="s1" , slider-prev="s1" ,slider-next="s1" 必須唯一



註:如果要使用組件的話,做以下處理,引用JQUERY文件即可
SG   替換為   $
SG.PAGE_EVENT.on  替換為  $(document).bind
SG.PAGE_EVENT.fire  替換為  $(document).trigger

推薦閱讀文章

Bookmark the permalink ,來源:互聯網