jQuery 插件写法示例
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
随机推荐
- TED_Topic6：How to raise a black son in America
By Clint Smith As kids, we all get advice from parents and teachers that seems strange, even confusi ...
- don't run elasticsearch as root.
因为安全问题elasticsearch 不让用root用户直接运行,所以要创建新用户 第一步:liunx创建新用户 adduser XXX 然后给创建的用户加密码 passwd XXX ...
- 图片压缩之 PNG
作者:程志达链接:https://zhuanlan.zhihu.com/p/19570424来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. PNG(Portable N ...
- 【codeforces】【比赛题解】#960 CF Round #474 (Div. 1 + Div. 2, combined)
终于打了一场CF,不知道为什么我会去打00:05的CF比赛…… 不管怎么样,这次打的很好!拿到了Div. 2选手中的第一名,成功上紫! 以后还要再接再厉! [A]Check the string 题意 ...
- mysql备份参数--master-data和--dump-slave的介绍
[mysql@db2 ~]$ mysqldump -A --master-data=2 > master2.sql[mysql@db2 ~]$ mysqldump -A --master-dat ...
- 自定义ProgressBar的加载效果
三种方式实现自定义圆形页面加载中效果的进度条 To get a ProgressBar in the default theme that is to be used on white/light b ...
- Python解决八皇后问题的代码【解读】
八皇后问题 来自于西方象棋(现在叫 国际象棋,英文chess),详情可见百度百科. 在西方象棋中,有一种叫做皇后的棋子,在棋盘上,如果双方的皇后在同一行.同一列或同一斜线上,就会互相攻击. 八皇后问题 ...
- mybatis待研究
1. mapper 中_parameter 的含义,是 参数? 为什么?
- Python版飞机大战
前面学了java用java写了飞机大战这次学完python基础后写了个python版的飞机大战,有兴趣的可以看下. 父类是飞行物类是所有对象的父类,setting里面是需要加载的图片,你可以换称自己的 ...
- tensorflow session 和 graph
graph即tf.Graph(),session即tf.Session(),很多人经常将两者混淆,其实二者完全不是同一个东西. graph定义了计算方式,是一些加减乘除等运算的组合,类似于一个函数.它 ...