流程图工具

所属分类:导航-其他导航

 61498  565  查看评论 (30)
分享到微信朋友圈
X
流程图工具 ie兼容8

ystep 流程、步骤插件

=============

简介

`ystep`是一款`jQuery`流程、步骤插件。在网站设计中,经常会用到步骤指示,做某件事一共需要几个步骤,现在正处于哪个步骤,对用户而言是非常有帮助的,不仅能让用户思路清晰,也能带给用户一种无形的激励。  

鉴于目前并无经典易用的类似插件,`ystep`就此诞生。  

特点

  1. 设计简洁,方便易用。  

  2. 体积小巧,便于集成。  

  3. 代码稳重,安全可靠。  

  4. 自由定制,步骤无限制。

  5. 兼容性强,`Webkit`(谷歌)、`Gecko`(火狐)内核系列全兼容,`IE`系列除了极品`IE6`,其它全兼容。   

使用说明

引入ystep的`js`、`css`文件    

<!-- 引入ystep样式 -->
<link rel="stylesheet" href="css/ystep.css">
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入ystep插件 -->
<script src="js/ystep.js"></script>

 加载ystep  

//根据jQuery选择器找到需要加载ystep的容器
//loadStep 方法可以初始化ystep
$(".ystep1").loadStep({
	//ystep的外观大小
	//可选值:small,large
	size: "small",
	//ystep配色方案
	//可选值:green,blue
	color: "green",
	//ystep中包含的步骤
	steps: [{
		//步骤名称
		title: "发起",
		//步骤内容(鼠标移动到本步骤节点时,会提示该内容)
		content: "实名用户/公益组织发起项目"
	},
	{
		title: "审核",
		content: "乐捐平台工作人员审核项目"
	}]
});

  操作ystep   

//所有跳转操作,仅需在加载ystep的容器上调用即可
//跳转到下一个步骤
$(".ystep1").nextStep();
//跳转到上一个步骤
$(".ystep1").prevStep();
//跳转到指定步骤
$(".ystep1").setStep(2);
//获取当前在第几步
$(".ystep1").getStep();

  完整示例

<!DOCTYPE html>
<html>
	<head>
		<title>
			ystep流程、步骤插件 ―― Powerd By YangYuan
		</title>
		<meta name="keywords" content="ystep,jQuery流程、步骤插件" />
		<meta name="description" content="ystep,jQuery流程、步骤插件" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 引入ystep样式 -->
		<link rel="stylesheet" href="css/ystep.css">
	</head>
	<body>
		<br>
		<br>
		<br>
		<br>
		<br>
		<!-- ystep容器 -->
		<div class="ystep1">
		</div>
		<!-- 引入jquery -->
		<script src="js/jquery.min.js">
		</script>
		<!-- 引入ystep插件 -->
		<script src="js/ystep.js">
		</script>
		<script>
			//根据jQuery选择器找到需要加载ystep的容器
			//loadStep 方法可以初始化ystep
			$(".ystep1").loadStep({
				//ystep的外观大小
				//可选值:small,large
				size: "small",
				//ystep配色方案
				//可选值:green,blue
				color: "green",
				//ystep中包含的步骤
				steps: [{
					//步骤名称
					title: "发起",
					//步骤内容(鼠标移动到本步骤节点时,会提示该内容)
					content: "实名用户/公益组织发起项目"
				},
				{
					title: "审核",
					content: "乐捐平台工作人员审核项目"
				},
				{
					title: "募款",
					content: "乐捐项目上线接受公众募款"
				},
				{
					title: "执行",
					content: "项目执行者线下开展救护行动"
				},
				{
					title: "结项",
					content: "项目执行者公示善款使用报告"
				}]
			});
			//跳转到下一个步骤
			//$(".ystep1").nextStep();
			//跳转到上一个步骤
			//$(".ystep1").prevStep();
			//跳转到指定步骤
			//$(".ystep1").setStep(2);
			//获取当前在第几步
			//$(".ystep1").getStep();			
		</script>
	</body>
</html>
相关插件-其他导航

流程图工具

简单易用的流程图设计工具
  其他导航
 61499  565

圆形的动画导航用CSS和jQuery

一个实验性的全屏导航、动画使用CSS和jQuery,扩大在一个循环。 支持所有主流浏览器。
  其他导航
 36084  399

手机移动端可滚动的导航代码

这是一款基于移动端滑动导航
  其他导航
 59350  483

纯CSS3扇形导航

纯CSS3打造动感漂亮的扇形菜单
  其他导航
 44374  558

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

    明眸° Sunshine 0
    2018/12/6 17:47:55
    下载了,这个怎么增加步骤呢,我想要7步,而这个上只有5步。 回复
    makeboluo000 0
    2018/9/5 12:27:10
    好用!!
        xiaopangweizi13140
        2018/11/27 14:03:50
        蛮好用的耶
    回复
    L 0
    2018/6/17 11:52:20
    怎么拉长这个流程图阿 回复
    * 深爱及海 0
    2018/1/22 20:08:39
    M"s暖┝、 0
    2017/9/7 14:23:47
    只知→坚持Extreme 0
    2017/8/4 17:23:17

    如何让弹出框自动显示出来?捉鸡呀!!!

        MrLin25860
        2021/3/2 20:09:02
        同问!
    回复
    小狼丶 0
    2017/6/28 16:23:20

    我想问一下 content里面的内容怎么展示到页面上呢?

        小狼丶0
        2017/6/28 16:26:07

        补充一下 我是说所有的content里面的内容 再页面打开时展示到页面上

        只知→坚持Extreme0
        2017/8/4 17:24:27
        好像需要修改源码
        三木的冬天0
        2017/10/31 11:18:56

        你好,请问下你的问题解决了么?能否分享下,谢谢

        三木的冬天0
        2017/10/31 11:20:44

        不好意思,网页反应太慢了,点击了多次

    回复
    Marlboro 0
    2017/4/16 16:59:07
    nomad77 0
    2017/2/14 12:01:14

    哪位大神解答一下 怎么给每个节点加超链接呢

    回复
    大包 0
    2016/8/7 10:08:39
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复