教程地址:http://www.superslide2.com/TouchSlide/howToUse.html?tdsourcetag=s_pcqq_aiomsg
附上个人使用实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/flexible.min.js"></script>
<script language="javascript" type="text/javascript" src="js/TouchSlide.js"></script>
<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/fengxianchuli/fengxianchuli_daichuli.js"></script>
<title>遵义市交通局数据铁笼</title>
</head>
<body>
<div class="mobile_wrapper max_wrapper">
<div class="mobile_header max_wrapper"><a href="javascript:void(0)" class="back_icon"><img src="images/back_icon.png" alt="" style="height:0.6rem; margin-top:0.5rem;"/></a><a href="javascript:void(0)" class="add_icon"> </a>风险处理</div>
<div class="mobile_container mobile_fixpad_top max_wrapper">
<div class="mobile_content index_bj">
<div class="index_content">
<div id="leftTabBox" class="tabBox">
<div class="hd">
<ul class="three_columns">
<li class="on"><a href="javascript:void(0)">待处理 20</a></li>
<li class=""><a href="javascript:void(0)">待审核 10</a></li>
<li class=""><a href="javascript:void(0)">已处理 50</a></li>
</ul>
</div>
<div class="tempWrap">
<div class="bd">
<ul>
<li class="scrollHeight">
<div class="sxlb_block">
<div class="searchblock clearfix rel"><a href="#" class="search_btn abs"><img src="images/searchblock_input.png" alt=""/></a>
<input type="text" placeholder="请输入关键字搜索" style="width:100%"></div>
<a href="#" class="sxlb_list"><span class="csbtn">环节超时</span>
<table class="sxlb_list_table table_fix">
<tbody>
<tr>
<td><h3><small></small><a href="#" id="user_shenhe">林地使用审核</a></h3>
<p id="user_bumen">所属部门:环境影响评价处</p>
<p id="user_happen_time">风险发生时间:2017年10月3日 09:45:06</p></td>
</tr>
</tbody>
</table>
</a>
<!-- <a href="#" class="sxlb_list"><span class="csbtn">环节超时</span>-->
<!-- <table class="sxlb_list_table table_fix">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td><h3><small></small><a href="#">林地使用审核</a></h3>-->
<!-- <p>所属部门:环境影响评价处</p>-->
<!-- <p>风险发生时间:2017年10月3日 09:45:06</p></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </a>-->
<!-- <a href="#" class="sxlb_list"><span class="csbtn">环节超时</span>-->
<!-- <table class="sxlb_list_table table_fix">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td><h3><small></small><a href="#">林地使用审核</a></h3>-->
<!-- <p>所属部门:环境影响评价处</p>-->
<!-- <p>风险发生时间:2017年10月3日 09:45:06</p></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </a>-->
<!-- <a href="#" class="sxlb_list"><span class="csbtn">环节超时</span>-->
<!-- <table class="sxlb_list_table table_fix">-->
<!-- <tbody>-->
<!-- <tr>-->
<!-- <td><h3><small></small><a href="#">林地使用审核</a></h3>-->
<!-- <p>所属部门:环境影响评价处</p>-->
<!-- <p>风险发生时间:2017年10月3日 09:45:06</p></td>-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<!-- </a>-->
</div>
</li>
</ul>
<ul>
<li class="scrollHeight">
2
</li>
</ul>
<ul>
<li class="scrollHeight">
3
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script>
</div>
</div>
</div>
</div>
</body>
</html>