素材网 素材网

移动端手机横向百分比内容选项卡滚动切换特效

下载资源()次

阅读次数()次

发布时间:2014-03-15

移动端手机横向百分比内容选项卡滚动切换特效
分享到:

用法简介:

来源:xw素材网

移动端手机横向百分比内容选项卡滚动切换特效。
文件引用:

<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/mobileevent2pc.js"></script>		<!--此js为在PC端方便查看效果,用在手机上,可去掉此js-->
<script type="text/javascript" src="js/touch.js"></script>      <!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="js/zepto.extend.js"></script>
<script type="text/javascript" src="js/zepto.ui.js"></script>
<script type="text/javascript" src="js/zepto.highlight.js"></script>
<script type="text/javascript" src="js/widget/tabs.js"></script>

页面结构:

<div class="section">
    <div id="container">
        <div id="tabs1">
            <ul>
                <li><a href="#conten1">Tab1</a></li>
                <li><a href="#conten2">Tab2</a></li>
                <li><a href="#conten3">Tab3</a></li>	<!-- 如需要,可继续添加,href和id都需要修改。但不建议多加,手机屏幕上三个选项卡比较适中 -->
            </ul>
            <div id="conten1">content1</div>
            <div id="conten2"><input type="checkbox" id="input1" /><label for="input1">选中我后tabs不可切换</label></div>
            <div id="conten3">content3</div>
        </div>
    </div>
</div>

调用代码:

<script>
    $('#tabs1').tabs();
    $('#tabs1').on('beforeActivate', function(e){
        $('#input1').prop('checked') && e.preventDefault();
    });
</script>


   

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。