登录
当前位置： 首页 > 编程笔记 >

基于jQuery实现网页进度显示插件

邵研
2023-03-14
本文向大家介绍基于jQuery实现网页进度显示插件，包括了基于jQuery实现网页进度显示插件的使用技巧和注意事项，需要的朋友参考一下

相信大家都见过类似的网站功能，这种形式的进度显示可以很方便的让用户去理解和操作，

以下是插件的测试截图 ，提供了两个皮肤

使用js编写 可以灵活的生成进度条 方便进对一些工作进度进行图形显示

1、简单的调用

//所有步骤的数据
var stepListJson=[{StepNum:1,StepText:“第一步”},
{StepNum:2,StepText:"第二步"},
{StepNum:3,StepText:"第三步"},
{StepNum:4,StepText:"第四步"},
{StepNum:5,StepText:"第五步"},
{StepNum:6,StepText:"第六步"},
{StepNum:7,StepText:"第七步"}];

//当前进行到第几步
var currentStep=5;
//new一个工具类
var StepTool = new Step_Tool_dc(“test”,“mycall”);
//使用工具对页面绘制相关流程步骤图形显示
StepTool.drawStep(currentStep,stepListJson);
//回调函数
function mycall(restult){
// alert(“mycall”+result.value+“:“+result.text);
StepTool.drawStep(result.value,stepListJson);
//TODO…这里可以填充点击步骤的后加载相对应数据的代码
}

2、自定义皮肤修改

插件提供了两套皮肤科共选择如果不能满足您的要求，则自己编写CSS代码即可

html代码


<title>无标题文档</title>

<!--<link rel="stylesheet" href="css/step-dc-style1.css" />-->

<link rel="stylesheet" href="css/step-dc-style1.css" />

<script type="text/javascript" src="./step-jquery-dc.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

</head>

<body>

<div class="step_context test">

</div>

当前步骤：第<input type="text"  value="5" id="currentStepVal" />步 <button onclick="StepTool.drawStep(jQuery('#currentStepVal').val(),stepListJson);" type="button">重新生成</button>

</body>

</html>

<script>

    //所有步骤的数据

    var stepListJson=[{StepNum:1,StepText:"第一步"},

    {StepNum:2,StepText:"第二步"},

    {StepNum:3,StepText:"第三步"},

    {StepNum:4,StepText:"第四步"},

    {StepNum:5,StepText:"第五步"},

    {StepNum:6,StepText:"第六步"},

    {StepNum:7,StepText:"第七步"}];

    //当前进行到第几步

    var currentStep=5;

//new一个工具类

var StepTool = new Step_Tool_dc("test","mycall");

//使用工具对页面绘制相关流程步骤图形显示

StepTool.drawStep(currentStep,stepListJson);

//回调函数

function mycall(restult){

//  alert("mycall"+result.value+":"+result.text);

    StepTool.drawStep(result.value,stepListJson);

    //TODO...这里可以填充点击步骤的后加载相对应数据的代码

}

</script>

javascript代码


/**

 * @auther DangChengcheng 请保留作者

 * @mailTo dc2002007@163.com

 */

var Step_Tool_dc =function(ClassName,callFun){

    this.ClassName=ClassName,

    this.callFun=callFun,

    this.Steps = new Array(),

    this.stepAllHtml="";

}

Step_Tool_dc.prototype={

    /**

     * 绘制到目标位置

     */

     createStepArray:function(currStep,stepListJson){

        this.currStep=currStep;

            for (var i=0; i<stepListJson.length;i++){

            var  Step_Obj =new Step( this.currStep,stepListJson[i].StepNum,stepListJson[i].StepText,stepListJson.length);

                Step_Obj.createStepHtml();

                this.Steps.push(Step_Obj);

            }

        },

    drawStep:function(currStep,stepListJson){

        this.clear();

        this.createStepArray(currStep,stepListJson);

        if(this.Steps.length>0){

        this.stepAllHtml+="<ul>";

        for (var i=0; i<this.Steps.length;i++){

            this.stepAllHtml+=this.Steps[i].htmlCode;

        }

        this.stepAllHtml+="</ul>";

        jQuery("."+this.ClassName).html(this.stepAllHtml);

            this.createEvent();

         } else{

            jQuery("."+this.ClassName).html("没有任何步骤");

        }

    },createEvent:function(){

        var self=this;

        jQuery("."+this.ClassName+" ul li a").click(function(){

            var num=jQuery(this).attr("data-value");

            var text=jQuery(this).attr("data-text");

            result={value:num,text:text} ;

            eval(self.callFun+"(result)");

        });

    }

    ,clear:function(){

        this.Steps=new Array();

        jQuery("."+this.ClassName).html("");

        this.stepAllHtml="";

    }

}

var Step=function(currStep,StepNum,StepText,totalCount){

        this.currStep=currStep,

        this.StepNum=StepNum ,

        this.StepText=StepText,

        this.totalCount=totalCount,

        this.htmlCode="";

}

Step.prototype={

    createStepHtml:function(){

         var stepHtml="\<span\>"+this.StepNum+"\</span\>";

        stepHtml=stepHtml+"\<a href=\"#\"    data-value=\""+this.StepNum+"\" data-text=\""+this.StepText+"\" \>"+this.StepText+"\</a\>";

        if(this.currStep>this.totalCount){

            this.currStep=this.totalCount;

        }else if(this.currStep<=0){this.currStep=1;}

        if(this.currStep>this.StepNum&&this.StepNum==1){

            classSype="firstFinshStep";

        } else if(this.currStep==this.StepNum&&this.StepNum==1){

            classSype="firstFinshStep_curr1";

        }

       else if(this.currStep==this.StepNum&&this.currStep!=this.totalCount){//当前步骤,下一个未进行,并且不是最后一个

            classSype="coressStep";

        }else  if(this.currStep==this.StepNum&&this.StepNum==this.totalCount){//当前步骤 并且是最后一步

            classSype="finshlast";

        }else if(this.currStep<this.StepNum&&this.StepNum==this.totalCount){//未进行步骤,并且是最后一个

            classSype="last";

        } else if(this.currStep<this.StepNum){//未进行的步骤

            classSype="loadStep";

        } else if(this.currStep>this.StepNum){//已进行的步骤

            classSype="finshStep";

        }

        stepHtml="\<li class=\""+classSype+"\"\>"+stepHtml+"\</a\>";

        this.htmlCode=stepHtml;

    }

}

附上源码下载 http://xiazai.jb51.net/201503/yuanma/step-jquery-dc(jb51.net).rar

以上就是本文的全部内容了，希望大家能够喜欢。

 类似资料：
  • 基于Jquery插件Uploadify实现实时显示进度条上传图片

    本文向大家介绍基于Jquery插件Uploadify实现实时显示进度条上传图片，包括了基于Jquery插件Uploadify实现实时显示进度条上传图片的使用技巧和注意事项，需要的朋友参考一下 先了解了解Uploadify，具体内容如下 Uploadify是一个简单易用的多文件上传方案。作为一个Jquery插件，Uploadify使用简单，并具有高度的定制性。 Uploadify特性： Upload

  • 基于Jquery+Ajax+Json实现分页显示附效果图

    本文向大家介绍基于Jquery+Ajax+Json实现分页显示附效果图，包括了基于Jquery+Ajax+Json实现分页显示附效果图的使用技巧和注意事项，需要的朋友参考一下 1.后台action产生json数据。 2.struts.xml相关配置 3.js获取json数据分页显示

  • jQuery插件实现控制网页元素动态居中显示

    本文向大家介绍jQuery插件实现控制网页元素动态居中显示，包括了jQuery插件实现控制网页元素动态居中显示的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery插件实现控制网页元素动态居中显示的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的jQuery程序设计有所帮助。

  • jQuery实现页面顶部显示的进度条效果完整实例

    本文向大家介绍jQuery实现页面顶部显示的进度条效果完整实例，包括了jQuery实现页面顶部显示的进度条效果完整实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现页面顶部显示的进度条效果。分享给大家供大家参考，具体如下： 具体代码如下： 完整实例代码点击此处本站下载。 希望本文所述对大家jQuery程序设计有所帮助。

  • 基于PHP实现数据分页显示功能

    本文向大家介绍基于PHP实现数据分页显示功能，包括了基于PHP实现数据分页显示功能的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了数据分页显示功能的PHP实现代码，供大家参考，具体内容如下 实现代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持呐喊教程。

  • 基于jquery实现页面滚动时顶部导航显示隐藏

    本文向大家介绍基于jquery实现页面滚动时顶部导航显示隐藏，包括了基于jquery实现页面滚动时顶部导航显示隐藏的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现页面滚动时顶部导航显示隐藏效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 引入核心文件 构建html，margint这个div中为了出现滚动条而建，并无实际作用。 写入CSS top

相关阅读

基于PHP实现数据分页显示功能基于jquery实现页面滚动时顶部导航显示隐藏基于C#实现网页爬虫基于jQuery Tipso插件实现消息提示框特效基于jQuery实现瀑布流页面

相关文章

[实例]爬虫抓取网页实现神经网络静态网页和动态网页25🐭🐭找实习进度【实习】百度-基础架构（OC）

相关问答

基于变量显示多个jPanel在带有分页的Codeigniter中基于查询显示结果角度2-基于所选选项值显示元素[重复]基于下拉选择显示文本C#基于用户ID显示数据

相关工具

FCKEditor的jQuery插件 jEditorjQuery天气预报插件jQuery异步上传插件Jquery表单验证插件进度条

相关文档

深度学习入门：基于 Python 的理论与实现Keras 基于 Python 的深度学习库如何实现自己的 jQueryIstio 服务网格进阶实战基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.