jquery 横向滑动，下一步上一步。

来源：互联网发布：js时间戳转换成小时前编辑：程序博客网时间：2024/06/05 21:51

#wizard{border: 5px solid #789;font-size: 12px;height: 530px;margin: 20px auto;overflow: hidden;position: relative;}#wizard .items{width: 20000px;clear: both;position: absolute;}#wizard .right{float: right;}#wizard #status{height: 35px;background: #79B8E9;padding-left: 25px !important;}#status li{float: left;color: #fff;padding: 10px 30px;}#status li.active{background-color: #369;font-weight: normal;}.input{width: 240px;height: 18px;margin: 10px auto;line-height: 20px;border: 1px solid #d3d3d3;padding: 2px;}.page{padding: 20px 30px;width: 650px;float: left;}.page h3{height: 42px;font-size: 16px;border-bottom: 1px dotted #ccc;margin-bottom: 20px;padding-bottom: 5px;}.page h3 em{font-size: 12px;font-weight: 500;font-style: normal;}.page p{line-height: 24px;}.page p label{font-size: 14px;display: block;}.btn_nav{height: 36px;line-height: 36px;margin: 20px auto;}.prev, .next{width: 100px;height: 32px;line-height: 32px;background: url(btn_bg.gif) repeat-x bottom;border: 1px solid #d3d3d3;cursor: pointer;}

<script type="text/javascript">    $(function () {        $("#wizard").scrollable({            onSeek: function (event, i) { //切换tab样式                 $("#status li").removeClass("active").eq(i).addClass("active");            },            onBeforeSeek: function (event, i) { //验证表单                 if (i == 1) {                    var user = $("#user").val();                    if (user == "") {                        alert("请输入用户名！");                        return false;                    }                    var pass = $("#pass").val();                    var pass1 = $("#pass1").val();                    if (pass == "") {                        alert("请输入密码！");                        return false;                    }                    if (pass1 != pass) {                        alert("两次密码不一致！");                        return false;                    }                }            }        });    }); </script>

<div id="wizard">        <ul id="status">            <li class="active"><strong>1.</strong>创建账户</li>            <li><strong>2.</strong>填写联系信息</li>            <li><strong>3.</strong>填写联系信息1111</li>            <li><strong>4.</strong>完成</li>        </ul>        <div class="items">            <div class="page">                -----任意html内容-----                <div class="btn_nav">                    <input type="button" class="next right" value="下一步»" />                </div>            </div>            <div class="page">                -----任意html内容-----                <div class="btn_nav">                    <input type="button" class="prev" style="float: left" value="«上一步" />                    <input type="button" class="next right" value="下一步»" />                </div>            </div>            <div class="page">                -----任意htmlsasdasd内容-----                <div class="btn_nav">                    <input type="button" class="prev" style="float: left" value="«上一步" />                    <input type="button" class="next right" value="下一步»" />                </div>            </div>            <div class="page">                -----任意html内容-----                <div class="btn_nav">                    <input type="button" class="prev" style="float: left" value="«上一步" />                    <input type="button" class="next right" id="sub" value="确定" />                </div>            </div>        </div>    </div>

来源：http://www.helloweba.com/view-blog-134.html

上面代码只能限定，下一步个数，只能横向导航4个内容，如果需要添加横向菜单内容(会出现css乱，页面会显示2个上一步或者下一步)，可以才CSS里查询 page 修改宽度，
赋值 <div>

<script type="text/javascript" src="scrollable.js"></script>

0 0