1.插件
taskStaticBar.js
/**自定义任务进度条插件，用于发布任务单的显示进度
* 先初始化init()
* 配置项type:1,任务发布方；type=2,生产方
* 然后传入showByTask(task)
* */ (function($) {
//设置任务单状态流程进度条,num从1开始
var setTaskStaticBar=function (num)
{
$(".task_static_wrap").find(".task_static_l").each(function(index,element){
if(index<num)
{
$(this).find(".task_static_text").addClass("maincolor3");
$(this).prev().removeClass("task_static_r");
$(this).prev().addClass("task_static_r_curr");
$(this).next().find(".task_static_tip").css("display","none");
if(index==num-1)
{
$(this).next().find(".task_static_tip").css("display","block");
}
}
}); };
//设置显示时间
var showTaskTime=function (task){
var $taskDivStatic = $(".task_static_wrap .task_static_desc");
if(defaults.type==1){
if(task.state>=5 && task.czsj!=null && task.state < 40){
$taskDivStatic.eq(0).html(task.czsj);
}
if(task.state>=10 && task.send_time!=null && task.state < 40){
$taskDivStatic.eq(1).html(task.send_time);
}
if(task.state>=15 && task.receive_time!=null && task.state < 40){
$taskDivStatic.eq(2).html(task.receive_time);
}
if(task.state>=20 && task.finish_product_time!=null && task.state < 40){
$taskDivStatic.eq(3).html(task.finish_product_time);
}
if(task.state>=25 && task.finish_task_time!=null && task.state < 40){
$taskDivStatic.eq(4).html(task.finish_task_time);
}
if( task.state >= 40){
$taskDivStatic.eq(0).html(task.czsj);
$taskDivStatic.eq(1).html(task.send_time);
$taskDivStatic.eq(2).html(task.receive_time);
$taskDivStatic.eq(3).html(task.endTaskTime);
}
}else{
if(task.state>=10 && task.send_time!=null && task.state < 40){
$taskDivStatic.eq(0).html(task.send_time);
}
if(task.state>=15 && task.receive_time!=null && task.state < 40){
$taskDivStatic.eq(1).html(task.receive_time);
}
if(task.state>=20 && task.finish_product_time!=null && task.state < 40){
$taskDivStatic.eq(2).html(task.finish_product_time);
}
if(task.state>=25 && task.finish_task_time!=null && task.state < 40){
$taskDivStatic.eq(3).html(task.finish_task_time);
}
if( task.state >= 40){
$taskDivStatic.eq(0).html(task.send_time);
$taskDivStatic.eq(1).html(task.receive_time);
$taskDivStatic.eq(2).html(task.endTaskTime);
}
} }; //默认配置
var defaults = {
name: '自定义任务进度条插件',
type:1,
onSomeEvent: function() {}
};
//初始化
$.fn.taskStaticBar_init = function(options) {
//配置参数覆盖
var options = $.extend(defaults, options); return $(this).each(function() {
var $this = $(this);
if(defaults.type==1){
$this.html(
"<div class='task_static_wrap clearfix'>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text maincolor3'>创建任务单</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+" <div class='task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip' style='display:block'>请完善资料后派发</div>"
+" </div>"
+" </div>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text'>派发任务单</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+" <div class='task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip'>等待对方确认</div>"
+" </div>"
+" </div>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text'>任务单生产</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+" <div class='task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip'>任务在执行</div>"
+" </div>"
+" </div>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text'>在验收</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+" <div class='task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip'>等待全部验收</div>"
+" </div>"
+" </div>"
+" <div class='task_static_l' style='width:100px;'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text'>验收完成</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+"</div>"
);
}else if(defaults.type==2){
$this.html(
"<div class='task_static_wrap clearfix'>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text maincolor3'>创建任务单</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+" <div class='task_static_r_curr'>"
+" <div class='task_static_linner_wrap'>"
+" </div>"
+" </div>"
+" <div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text maincolor3'>已取消</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+" </div>"
+"</div>"
);
}else{
$this.html(
"<div class='task_static_wrap clearfix'>"
+"<div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text maincolor3'>等待接受</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+"</div>"
+"<div class='p_task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip' style='display:block'>请确认接受任务</div>"
+" </div>"
+"</div>"
+"<div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text''>任务执行</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+"</div>"
+"<div class='p_task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip'>生产进行中</div>"
+" </div>"
+"</div>"
+"<div class='task_static_l'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text''>在验收</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+"</div>"
+"<div class='p_task_static_r'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_tip'>等待对方合格验收</div>"
+" </div>"
+"</div>"
+"<div class='task_static_l' style='width:100px;'>"
+" <div class='task_static_linner_wrap'>"
+" <div class='task_static_text''>验收完成</div>"
+" <div class='task_static_desc'> </div>"
+" </div>"
+"</div>"
+"</div>"
);
}
}); };
/*var taskparam = {
state:5//默认状态5
};*/
//通过任务单显示界面
$.fn.taskStaticBar_showByTask=function (task) {
/*$.extend(taskparam, task);//将任务单参数赋值入 taskparam
*/ return $(this).each(function() {
if(task==null) {
$.error( '请输入任务单号' );
return this;
}
var state=task.state;
var sel_index=1;
if(defaults.type==1){
switch(state){
case 5:
sel_index=1;
break;
case 10:
sel_index=2;
break;
case 15:
sel_index=3;
break;
case 20:
sel_index=4;
break;
case 25:
sel_index=5;
break;
case 40:
sel_index=4;
endStausChange();
break;
default:
sel_index=1;
break;
} }else{
switch(state){
case 10:
sel_index=1;
break;
case 15:
sel_index=2;
break;
case 20:
sel_index=3;
break;
case 25:
sel_index=4;
break;
case 40:
sel_index=3;
endStausChange();
break;
default:
sel_index=1;
break;
}
}
setTaskStaticBar(sel_index);
showTaskTime(task);
});
};
/**
* 任务单终止状态的改变
*/
var endStausChange = function(){
var $topStateView = $(".task_static_wrap").find(".task_static_l");
if(defaults.type==2){
$topStateView.eq(2).find(".task_static_text").html("任务终止");
$topStateView.eq(2).nextAll("div").hide();
}
if(defaults.type==1){
$topStateView.eq(3).find(".task_static_text").html("任务终止");
$topStateView.eq(3).nextAll("div").hide();
}
}; })(jQuery);
2.调用
$("#outsourceTaskStaticBar").taskStaticBar_init({type:2});
3.总结
3.1 基础模板
(function($) {
//设置显示时间 内部方法，内部调用
var showTaskTime=function (task){
};
//默认配置
var defaults = {
name: '自定义任务进度条插件',
type:1,
onSomeEvent: function() {}
};
//初始化 外部可调用
$.fn.taskStaticBar_init = function(options) {
var options = $.extend(defaults, options);//传入参数与默认参数合并
//TODO
};
//外部可调用
$.fn.taskStaticBar_showByTask=function (task) {
//TODO
};
})(jQuery);//括号包起来防止变量外流
jQuery 插件写法示例的更多相关文章
-
[转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
-
Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
-
jQuery插件写法总结以及面向对象方式写法总结
前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...
-
jQuery 插件写法2
转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...
-
jQuery 插件写法
一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...
-
jquery插件写法
//传统写法 //全局方法 ;(function($){ $.method = function(){ } //or $.obj = { method1:function(){}, method2:f ...
-
Jquery 自定义插件写法(示例)
(function ($) { $.SmsHelper = $.SmsHelper || {}; $.extend($.SmsHelper, { //插件具体实现代码 yzmnum: 60, Ajax ...
-
table切换jquery插件 jQuery插件写法模板 流程
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通过$.extend()来扩展jQuery $. ...
-
简单的jquery插件写法之一
http://jsfiddle.net/kyu0hdmx/embedded/#HTML
随机推荐
-
Nginx 颁发自签证书
首先,确保安装了OpenSSL库,并且安装Nginx时使用了–with-http_ssl_module参数. 1:进入生成证书的目录 cd /usr/local/nginx/conf 2:使用open ...
-
最简单的视音频播放示例3：Direct3D播放YUV，RGB（通过Surface）
上一篇文章记录了GDI播放视频的技术.打算接下来写两篇文章记录Direct3D(简称D3D)播放视频的技术.Direct3D应该Windows下最常用的播放视频的技术.实际上视频播放只是Direct3 ...
-
DevExpress之时间控件
dateEdit和timeEdit 基本属性 DisplayFormat.FormatString-------失去焦点是控件显示的格式,timeEdit用不上 EditMask----------- ...
-
Hibernate问题之&#39;hibernate.dialect&#39; not set
继前文:Hibernate4中buildSessionFactory方法废弃问题.后 继续有问题.本来之前好好的项目,用了这种新的方法后发现问题. 出现 Connection cannot be n ...
-
Nginx的try_files指令和命名location使用实例
Nginx的配置语法灵活,可控制度非常高.在0.7以后的版本中加入了一个try_files指令,配合命名location,可以部分替代原本常用的rewrite配置方式,提高解析效率. 下面是一个使用实 ...
-
SpringMVC 框架系列之组件概述与配置详解
在上一篇文章 SpringMVC 框架系列之初识与入门实例 的实例中,我们已经知道,SpringMVC 框架是一个 web 层的框架,本篇文章就详细解释一下 SpringMVC 框架具体文件的配置以及 ...
-
Java 初始化、final、清理
1 为什么需要无参构造器? 第一个是继承需要 super 调用父类的构造器(父类构造器必须存在且不为 private.可以是无参/默认构造器,也可以是有参构造器),特别的如果父类不包含无参构造器的话, ...
-
马加爵遗书 VS 药家鑫遗书
前言:今天是贰零壹柒年最后一个工作日,亦是2017年12月29日,因为明天就放元旦假了,公司同事比往常相对轻松些.中午吃完午饭,在办公室大家有说有笑,有人说姓马的人都挺牛X啊,比如:马云, ...
-
01-css的引入方式和常用选择器
一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
-
JavaScript基础-DAY2
JavaScript对象 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String.Math.Array.Date.Re ...