jquery插件stepy的用法详解

来源：互联网发布：中科院软件所考研编辑：程序博客网时间：2024/06/06 19:26

1、首先去 http://www.jq22.com/jquery-info3178 这个网站下载所需要的插件。
2、然后把所需要的jquery.min.js、jquery.stepy.js、jquery.stepy.css这三个文件引入到你的项目中。
这里写图片描述
3、编写代码。引入需要的js、和css文件，不然看不到效果。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>stepy</title>        <link rel="stylesheet" href="css/jquery.stepy.css" />        <script type="text/javascript" src="js/jquery.min.js"></script>        <script type="text/javascript" src="js/jquery.stepy.js"></script>    </head>    <body>        <form>            <fieldset title="第一步">                <legend>这是我的1步</legend>                姓名：<input type="text" />         //这里是你自己想要编写的界面内容            </fieldset>            <fieldset title="第二步">                <legend>这是我的2步</legend>                电话：<input type="text" />            </fieldset>            <fieldset title="第三步">                <legend>这是我的3步</legend>                家庭住址：<input type="text" />            </fieldset>            <input type="submit" />        </form>        <script>            $("form").stepy();                          //默认            //$("form").stepy({titleClick:true});      //可以点击标题跳转界面            //$("form").stepy({description:false});     //标题下方的介绍可以不显示            //$('form').stepy({ enter: true });         //每一步都自动获取焦点            //$('form').stepy({ legend: false });       //legend标签里的内容不显示            /*$("form").stepy({                         //下一个页面的索引                next:function(index){                    alert(index);                }            })*/            /*$('form').stepy({                       //选择页面的索引                select: function(index) {                    alert('Rendered step: ' + index);                }            });*/        </script>    </body></html>

这里写图片描述

阅读全文

0 0