jQuery流程、步骤插件ystep.js使用(一)

最新推荐文章于 2024-04-19 23:54:04 发布
最新推荐文章于 2024-04-19 23:54:04 发布
阅读量1.3w 收藏 8
点赞数 2
分类专栏： Jquery及其组件 文章标签： jquery ystep
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WuLex/article/details/79508189
版权

stepFirst.html

<!DOCTYPE html>
<html>
<head>
    <title>ystep流程、步骤</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 href="Content/ystep.css" rel="stylesheet" />
</head>
<body>

    <!-- ystep容器 -->
    <div class="ystep1" style="margin: 100px"></div>
    <hr />
    <input id="btnPre" type="button" value="上一步" />
    <input id="btnNext" type="button" value="下一步" />
    <!-- 引入jquery -->
    <script src="Scripts/jquery-1.10.2.js"></script>
    <!-- 引入ystep插件 -->
    <script src="Scripts/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: "项目执行者公示善款使用报告"
            }, {
                title: "结项1",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项2",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项3",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项4",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项5",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项6",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项7",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项8",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项9",
                content: "项目执行者公示善款使用报告"
            }, {
                title: "结项10",
                content: "项目执行者公示善款使用报告"
            }]
        });


        $("#btnPre").click(function () {
            //跳转到上一个步骤
            $(".ystep1").prevStep();

        });

        $("#btnNext").click(function () {
            //跳转到下一个步骤
            $(".ystep1").nextStep();

        });
        $(".ystep1").setStep(5);

        //跳转到下一个步骤
        //$(".ystep1").nextStep();
        //跳转到上一个步骤
        //$(".ystep1").prevStep();
        //跳转到指定步骤
        //$(".ystep1").setStep(2);
        //获取当前在第几步
        //$(".ystep1").getStep();

    </script>
</body>
</html>

运行结果如图:

这里写图片描述

.NET跨平台
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jq步骤条 java,jQuery步骤条进度条插件setStep.js
weixin_35869703的博客
03-16 838
插件描述：一款简单额步骤条，可点击 也可按钮控制。更新时间：2018/9/4 上午10:42:15更新说明：增加横向箭头样式步骤条。用法：varstep1=newSetStep({skin:3,//调节1,2,3更换皮肤。content:'.skin1',showBtn:false,descripttionHeader:['步骤一','步骤二','步骤三','步骤四',...
jQuery工作流程步骤进度插件
12-10
jQuery工作流程步骤进度插件ystep是一款适合做注册或者工作流程图的jQuery特效代码，jQuery工作流程步骤进度插件ystep是一款适合做注册或者工作流程图的jQuery特效代码
分享我经常用的3个vscode插件
最新发布
和AI一起写代码的程序猿
04-19 687
vscode-drawio是一款允许用户在VS Code中直接绘制流程图的插件，支持动态效果。vscode使用Remote Development后左边可以查看文件结构，还可以新建terminal运行命令。要远程机器进行远程开发的时候，一般在命令窗口用ssh的方式远程过去，但是远程过去后有几个不方便的地方。安装完成后，新建一个drawio为后缀名的文件。3 使用vscode远程过去后，代码开发过程中可以使用各种vs插件。这款插件适合在vs code中不想用git命令，习惯于用图形化命令进行代码提交的同学。
jQuery流程、步骤插件ystep.js使用(二)
极客神殿
03-10 4203
stepDemo.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></ti
bootstrap插件—ystep使用
StevenJie9035的博客
08-13 390
实现效果： 代码实现： Web前端： <div id="progress_show"></div> <script src="/theme/<?=T_D?>/assets/ystep-master/js/ystep.js" type="text/javascript" ></script> &l...
bootstrap插件—ystep—节点流的使用
01-29 2800
1.下载ystep相关配合文件 2.页面展示 //此处是jsp页面 &lt;div id="ystepDiv" class="ystep"&gt;&lt;/div&gt; //js $(".ystep").loadStep({ size:"large",//流程节点的大小(small,large) color:"green&q
ystep jQuery流程、步骤插件
weixin_33757609的博客
06-07 218
         今天小菜给大家带来又一款给力jQuery插件：ystep。          从名称上大致可以看出，这是一个流程步骤插件。          如果无意外的话，这可能是小菜近期最后一个作品了。。。苦逼的小菜即将创业，可能就没时间折腾啦~好，废话少说~          简介               ystep是一款jQuery流程、步骤插件。在网站设计中，经常会用到...
jQuery工作流程步骤进度插件ystep.zip
07-05
总结来说，jQuery工作流程步骤进度插件ystep是一个实用的前端工具，它简化了工作流程展示的实现，增强了用户界面的互动性。通过合理运用ystep，开发者可以创建出更加直观和友好的用户体验，提高用户对网站或应用的...
jQuery工作流程步骤进度插件ystep特效代码
03-20
ystep插件的设计理念是将复杂的步骤流程以可视化的方式呈现，通常表现为一系列带有进度指示的步骤条。用户在完成每个步骤后，进度条会相应更新，提供清晰的导航路径。这种设计不仅提高了用户体验，还能确保用户按照...
jQuery结合ystep插件实现的工作流程步骤进度条特效源码.zip
11-18
本资源"jQuery结合ystep插件实现的工作流程步骤进度条特效源码.zip"提供了一个利用jQuery和ystep插件创建工作流程步骤进度条的示例代码，帮助开发者在网页中实现类似的效果。下面我们将详细讨论jQuery和ystep插件...
jQuery网页步骤流程图进度代码.zip
07-04
`说明.htm`提供了示例的HTML结构，而`jQuery网页步骤流程图进度代码.js`则包含了实现流程图和进度效果的核心JavaScript代码。 流程图的实现通常涉及以下关键点： 1. **HTML结构**：首先，我们需要在HTML中定义流程...
ystep流程，扩展驳回功能，BootstrapTooltip动态加载html
08-17
ystep流程，扩展驳回功能，BootstrapTooltip动态加载html
基于jquery开发的步骤条step.zip
08-31
步骤条在原来基础之上做了相应扩展，代码的地方都做了相应的标注，可以在此基础之上根据自己的需求进行更改，注意使用之前要引入相应的jq包，此插件兼容性很好能够兼容IE8以上，更多插件案例可以查看www.jq22.com网站
jquery分步操作插件step.js
03-31
jquery分步操作插件step.js,代码注释全修改方便，网上基本链接都已经崩掉了，无法访问，幸亏本地有备份文件，这次放上来以供大家使用
流程进度插件
01-11
ystep是一款jQuery流程、步骤插件。在网站设计中，经常会用到步骤指示，做某件事一共需要几个步骤，现在正处于哪个步骤，对用户而言是非常有帮助的，不仅能让用户思路清晰，也能带给用户一种无形的激励。设计简洁，方便易用。 •体积小巧，便于集成。 •代码稳重，安全可靠。 •自由定制，步骤无限制。 •兼容性强，Webkit(谷歌)、Gecko(火狐)内核系列全兼容，IE系列除了极品IE6，其它全兼容。
jQuery ystep插件实现多流程分步、多步骤
Junit的博客
08-12 4406
jQuery ystep插件实现多流程分步、多步骤 时间：2014-06-11 00:00:00 编辑：简简单单 来源：转载 今天小菜给大家带来又一款给力Jquery插件：ystep。 从名称上大致可以看出，这是一个流程步骤插件。 如果无意外的话，这可能是小菜近期最后一个作品了。。。苦逼的小菜即将创业，可能就没时间折腾啦~好，废话少说~ 简介    y
steps.js 步骤条、时间轴
热门推荐
樊小书生
09-22 2万+
介绍 steps.js是基于原生JavaScript的组件，可用于展示步骤条、时间轴等，功能支持： 自适应 支持横向和纵向显示，并且横向还支持居中显示 支持自定义间距 主轴线上下左右单方向及多方向分布 支持数字和圆点及自定义图标，也可以使用图片 如果标题和详情还不足以满足您的需求，你还可以插入自定义的html代码 如果样式不满意，可以加入自定义的父类class，然后根据css的权重重新定义样式 ...
js实现流程动态显示
YQ的博客
03-14 1万+
对于有很多流程的东西，我们希望能够根据不同的阶段，用流程条对应地进行显示，如下所示： 以上功能对应的html代码如下： 漏洞处理状态
class RandomWalk(): def __init__(self,point_num=5000): self.point_num = point_num self.xval = [0] self.yval = [0] def fill_walk(self): while len(self.xval)<self.point_num: x_direction = choice([1,-1]) step_num = choice([0,1,2,3,4]) xstep = x_direction * step_num y_direction = choice([1,-1]) step_num = choice([0,1,2,3,4]) ystep = y_direction * step_num if xstep == 0 and ystep==0: continue x_next = self.xval[-1] + xstep y_next = self.yval[-1] + ystep self.xval.append(x_next) self.yval.append(y_next) rw = RandomWalk(50000) rw.fill_walk() point_numbers = list(range(rw.point_num())) plt.scatter(rw.x_val,rw.y_val,c=point_numbers,cmap=plt.cm.Blues,edgecolor = 'none',s=2) plt.scatter(0,0,c='green',edgecolors='none',s=100) plt.scatter(rw.x_val[-1],rw.y_val[-1],c='red',edgecolor='none',s=100) plt.axes().get_xaxis().set_visible(False) plt.axes().get_xaxis().set_yisible(False) plt.show()修改代码
05-27
以下是修改后的代码： ```python import matplotlib.pyplot as plt from random import choice class RandomWalk(): def __init__(self, point_num=5000): self.point_num = point_num self.x_val = [0] self.y_val = [0] def fill_walk(self): while len(self.x_val) < self.point_num: x_direction = choice([1, -1]) x_step = choice([0, 1, 2, 3, 4]) x_val = x_direction * x_step y_direction = choice([1, -1]) y_step = choice([0, 1, 2, 3, 4]) y_val = y_direction * y_step if x_val == 0 and y_val == 0: continue next_x = self.x_val[-1] + x_val next_y = self.y_val[-1] + y_val self.x_val.append(next_x) self.y_val.append(next_y) rw = RandomWalk(50000) rw.fill_walk() point_numbers = list(range(rw.point_num)) plt.scatter(rw.x_val, rw.y_val, c=point_numbers, cmap=plt.cm.Blues, edgecolor='none', s=2) plt.scatter(0, 0, c='green', edgecolors='none', s=100) plt.scatter(rw.x_val[-1], rw.y_val[-1], c='red', edgecolor='none', s=100) plt.axes().get_xaxis().set_visible(False) plt.axes().get_yaxis().set_visible(False) plt.show() ``` 主要的修改包括： 1. `xval` 和 `yval` 改为 `x_val` 和 `y_val`，以符合 Python 的命名规范。 2. `rw.point_num()` 改为 `rw.point_num`，因为 `point_num` 是一个属性而不是方法。 3. `plt.axes().get_xaxis().set_yisible(False)` 改为 `plt.axes().get_yaxis().set_visible(False)`，因为原来的代码中打错了单词。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值