-
前言
TouchSlide 可以說是 SuperSlide 手機簡化版，不同的地方在于：
1、TouchSlide是純javascript開發的，不依賴任何js庫，鑒于此，TouchSlide調用方法和SuperSlide有點不同。
調用方法為：TouchSlide({slideCell:"#slider",effect:"leftLoop"});（slideCell必須為id對象）;同樣效果，SuperSlide調用方法為：jQuery("#slider").slide({ effect:"leftLoop" });
2、為了方便使用，我用js模擬了簡單的jQuery選擇器，只支持“#”“.”“標簽名稱”，用空格隔開。除了slideCell必須用id選擇器外，其它titCell等都可以使用，例如：titCell:".title li"
3、除了上述2個不同，其它是一致的，想了解更多可以下載demo研究。 -
1、引用TouchSlide.js
具體路徑自行設置。
-
<head> <script type="text/javascript" src="../TouchSlide.1.0.js"></script> </head>
-
2、編寫HTML
以下是默認的HTMl結構，分別是 ".hd" 里面包含ul， ".bd" 里面包含ul
-
- 國內
- 國際
- 時事
-
3、編寫CSS，為HTML賦予樣色
因為現在大部分手機瀏覽器都支持 html5，所以你的css兼容chrome就無大問題了
-
.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#f4f4f4; border-bottom:1px solid #F5AB38; position:relative; } .tabBox .hd ul{ position:absolute; height:41px; top:0; overflow:hidden; } .tabBox .hd ul li{ float:left; padding:0 10px; color:#666; } .tabBox .hd ul .on{ border:2px solid #F5AB38; border-bottom-color:#fff; background:#fff; color:#CF7F21; } .tabBox .bd ul{ padding:10px 0 10px 10px; } .tabBox .bd li{ height:33px; line-height:33px; } .tabBox .bd li a{ color:#666; } -
4、調用TouchSlide
在本例中，請在 “.tabBox” div結束后立刻調用 TouchSlide，這樣會得到最好的效果，避免整個頁面加載后再調用 TouchSlide；
因為是默認HTML結構，所以參數都為默認值，不用填寫titCell、mainCell等。 -
<script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script>