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
随机推荐
- Presto通过RESTful接口新增Connector
在实际使用Presto的过程中,经常会有以下的一些需求. 添加一个新的Catalog 对不再使用的Catalog希望把它删除 修改某个Catalog的参数 但在Presto中如果进行上述的修改,需要重 ...
- Token报错问题
解决token报错,CSRF令牌问题: <form method="POST" action=""> {{ csrf_field() }} < ...
- Linux基础操作-分区概念
开启Linux系统前添加一块大小为20G的SCSI硬盘 开启系统,右击桌面,打开终端 为新加的硬盘分区,一个主分区大小为10G,剩余空间给扩展分区,在扩展分区上划分两个逻辑分区,大小各5G 进入分区工 ...
- 查看GCC的内置宏定义
开发过程中我们常常需要使用宏定义.. 为了尽可能多的使用GCC为我们提供的特性,首先我们需要知道gcc提供了那些特性... gcc -dM -E - < /dev/null 没错,就这么一句话就 ...
- CSS 实现单边阴影
box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 o ...
- 正则表达式基础->
描述:(grep) 正则表达式是一种字符模式,用于在查找过程中匹配指定的字符.在大多数程序里,正则表达式都被置于两个正斜杠之间,它匹配被查找的行中任何位置出现的相同模式 基础正则表达式 正则表达式 描 ...
- 消息 8101，级别 16，状态 1，第 1 行仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时，才能为表'CUSTOMER_TBL'中的标识列指定显式值。
像这样的问题怎么解决呢? 问题分析: 意思是你的主键是自动编号类型的,所以不能向该列插入数据. 解决办法: 执行 语句 :SET IDENTITY_INSERT CUSTOMER_TBL ON 然后在 ...
- 微信小程序地图模块
微信小程序的地图模块官方提供的API比较少,详情请见 官方文档 以下为一个示例 <!--pages/location/locati ...
- Ansible之tags介绍
本节内容: tags介绍 一.tags介绍 我们每次改完配置文件,比如上一篇博客中的的apache.yml,没必要把整个playbook都运行一遍,只需要运行改变了的task.我们可以给task一个标 ...
- 一步一步学习IdentityServer4 (6) Connect-OpenId Cookies SignIn SignOut 那些事
先来看下下面的配置: JwtSecurityTokenHandler.DefaultInboundClaimTypeMap.Clear(); services.AddAuthentication( o ...