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


Posted in Javascript onMarch 04, 2015

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

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

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

基于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.3water.com/201503/yuanma/step-jquery-dc(3water.com).rar

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

Javascript 相关文章推荐
JAVASCRIPT函数作用域和提前声明 分享
Aug 22 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
layui实现三级导航菜单
Jul 26 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 #Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 #Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 #Javascript
JavaScript常用脚本汇总(三)
Mar 04 #Javascript
JavaScript常用脚本汇总(二)
Mar 04 #Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 #Javascript
JavaScript常用脚本汇总(一)
Mar 04 #Javascript
You might like
php csv操作类代码
2009/12/14 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
详解JavaScript中的异常处理方法
2015/06/16 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python使用type动态创建类操作示例
2020/02/29 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
金融专业应届生求职信
2013/11/02 职场文书
通用自荐信范文
2014/03/14 职场文书
六一儿童节主持词
2014/03/21 职场文书
2015年反腐倡廉工作总结
2015/05/14 职场文书
捐款仪式主持词
2015/07/04 职场文书
2015团员个人年度总结
2015/11/24 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
2019年大学推荐信
2019/06/24 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL