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
随机推荐
- 【Linux 命令】sed 命令
文章转载自:https://www.jianshu.com/p/779f40985b20 文本分隔:------ # 在每一行后面增加一空行. sed G # 在每一行后面增加两行空行. sed &q ...
- HDU 2722 Here We Go(relians) Again (最短路)
题目链接 Problem Description The Gorelians are a warlike race that travel the universe conquering new wo ...
- 矩阵 matrix
传送门 注意这题时限是2s [问题描述] 有一个n × m的矩阵,你从左上角走到右下角,只能向下和向右走. 每个点上有一个重量v i,j 价值w i,j 的物品,你有一个容量为S的背包,经过一个点你可 ...
- gcc 编译 + 选项【转】
转自:http://blog.csdn.net/princess9/article/details/6567678 一般来说要现有项目中的编译选项,设置新的project的编译选项 编译器 就是将“高 ...
- MySQL 5.7半同步复制after sync和after commit详解【转】
如果你的生产库开启了半同步复制,那么对数据的一致性会要求较高,但在MySQL5.5/5.6里,会存在数据不一致的风险.有这么一个场景,客户端提交了一个事务,master把binlog发送给slave, ...
- Linux学习笔记-Linux系统简介
Linux学习笔记-Linux系统简介 UNIX与Linux发展史 UNIX是父亲,Linux是儿子. UNIX发行版本 操作系统 公司 硬件平台 AIX IBM PowerPC HP-UX HP P ...
- .net开源框架开源类库（整理）
源:http://www.cnblogs.com/chinanetwind/p/3715809.html 常用库 Json.NET https://github.com/JamesNK/Newtons ...
- python 之sqlite3库学习
# -*- coding:utf-8 -*- # 导入SQLite驱动:>>> import sqlite3# 连接到SQLite数据库# 数据库文件是test.db# 如果文件不存 ...
- RabbitMQ--Publish/Subscribe（三）
前言 在先前例子中我们创建了一个work queue,封装一个task到一个message中并发送到queue.一个worker(consumer)取出任务并执行. 像这种producer把messa ...
- Win2003不显示移动硬盘、U盘解决方法
Win2003已经识别出了“移动硬盘”,只是没有分配盘符. 解决方法:插入移动硬盘,右键单击“我的电脑”,选择“管理”,进入“计算机管理”,点击“存储”下面的“磁盘管理”.可以看到现在计算机中有两个磁 ...