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

所属分类:其他-杂项

 53576  377  查看评论 (36)
分享到微信朋友圈
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)
}
相关插件-杂项

vue.js实现增删改查(原创)

bootstrap布局,vue.js实现增删改查功能,模态框新增与编辑
  杂项
 35971  397

css3画板

使用html+css3+js模拟画板,提供绘画线条,矩形,圆形等功能
  杂项
 29630  338

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

一款简单额步骤条,可点击 也可按钮控制。
  杂项
 53577  377

jQuery字体自适应插件textfit

优点:体积小,使用方法简单,一看就会
  杂项
 24825  337

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

    坤? 0
    2021/12/13 14:26:32
    测试😀
        ycc2583740
        2022/2/17 16:24:59
        no💔
    回复
    xuezhongyu01 0
    2020/5/24 17:50:00
    不错,就是不知道能不能动态滚动 回复
    xuezhongyu01 0
    2020/5/24 17:48:04
    这个不知道可以将返回的数据作为滚动条不
        ycc2583740
        2022/2/17 16:25:26
        no💔
    回复
    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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复