jQuery步骤条进度条插件setStep.js

所属分类:其他-杂项

 31907  237  查看评论 (33)
分享到微信朋友圈
X
jQuery步骤条进度条插件setStep.js ie兼容7

更新时间:2018/9/4 上午10:42:15

更新说明:增加横向箭头样式步骤条。

用法:

var step1 = new SetStep({
    skin: 3, //调节1,2,3 更换皮肤。
    content: '.skin1',
    showBtn: false,
    descripttionHeader: ['步骤一', '步骤二', '步骤三', '步骤四', '步骤五'],
    showBtn: true,
});

更新时间:2018/8/28 下午5:11:41

更新说明:添加了竖向步骤条,和步骤简单描述。

使用方法:

var step2 = new SetStep({
    stepY: true,
    content: '.stepCont2',
    showBtn: false,
    descripttionHeader: ['步骤一', '步骤二', '步骤三', '步骤四', '步骤五'],
    descripttion: ['对每一个步骤详细的描述', '对每一个步骤详细的描述', '对每一个步骤详细的描述', '对每一个步骤详细的描述', '对每一个步骤详细的描述'],
})

使用方法

需要引用3个文件

<link rel="stylesheet" href="css/ystep.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/setStep.js"></script>

html

<!-- 菜单及分页容器-->
<div class="stepCont stepCont3"> 
	<!-- 菜单导航显示-->
	<div class='ystep-container ystep-lg ystep-blue'></div>
	<!-- 分页容器-->
	<div class="pageCont">
		<div id="page1" class="stepPage">
			<h1>page1</h1>
		</div>
		<div id="page2" class="stepPage">
			<h1>page2</h1>
		</div>
		<div id="page3" class="stepPage">
			<h1>page3</h1>
		</div>
		<div id="page4" class="stepPage">
			<h1>page4</h1>
		</div>
		<div id="page5" class="stepPage">
			<h1>page5</h1>
		</div>
	</div>
</div>

js

var step3 = new SetStep({
    description:['步骤一','步骤二','步骤三','步骤四','步骤五'],
    content: '.stepCont3'
})

参数设置

function SetStep(arg){
    this.body=document.body;
    this.opt = {
        show:false,
        content:'.stepCont',
        pageCont:'.pageCont',
        imgWidth:20,
        stepContainerMar:20,
        nextBtn:'.nextBtn',
        prevBtn:'.prevBtn',
        steps:['1','2','3','4','5'],
        description:['步骤一','步骤二','步骤三','步骤四','步骤五'],
        //pageClass:'',//分页的类或则id
        stepCounts:5,//总共的步骤数
        curStep:1,//当前显示第几页
        animating:false,
        showBtn:true,//是否生成上一步下一步操作按钮
        clickAble:true,//是否可以通过点击进度条的节点操作进度
        onLoad: function(){

        }
    }
    this.init(arg)
}
相关插件-杂项

jquery在线客服

jquery在线客服代码
  杂项
 42447  305

jQuery弹出表单录入商品信息无刷新追加行

jQuery弹出表单录入商品信息无刷新追加行特效代码
  杂项
 21577  245

在线PDF预览插件PDFObject.js

PDFObject.js,是一个 JavaScript 库用来在HTML中动态嵌入 PDF 文档。
  杂项
 181656  411

鼠标移动监听

鼠标移动监听页面跳转
  杂项
 19481  199

讨论这个项目(33)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    xuezhongyu01 0
    2020/5/24 17:50:00
    不错,就是不知道能不能动态滚动 回复
    xuezhongyu01 0
    2020/5/24 17:48:04
    这个不知道可以将返回的数据作为滚动条不 回复
    Hélodie Jaqucline 0
    2020/4/8 20:29:42
    赞,正好是我需要的
    回复
    风来了 0
    2020/2/8 12:50:54
    正式目前系统中需要的东西 回复
    ?? 0
    2020/2/5 14:24:11
    步骤条太多时,怎么让他折行显示
    回复
    2053209800 0
    2020/1/14 8:36:12
    很好,挺好用的 回复
    U2 0
    2019/12/25 10:07:04
    666666666666666666666 回复
    103 0
    2019/9/3 9:59:24
    103 0
    2019/9/3 9:59:20
    Whatever 0
    2019/8/30 10:37:52
    非常好用
        Sevēn。0
        2019/12/2 14:49:46
        的确很好用
    回复
取消回复