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
随机推荐
- Sparse AutoEncoder简介
1. AutoEncoder AutoEncoder是一种特殊的三层神经网络, 其输出等于输入:\(y^{(i)}=x^{(i)}\), 如下图所示: 亦即AutoEncoder想学到的函数为\(f_ ...
- 转载： 开源整理：Android App新手指引开源控件
http://blog.coderclock.com/2017/05/22/android/open-source-android-app-guide-view-library/ 开源整理:Andro ...
- Java 并发--线程创建
随着处理器的多核化,为提高处理器的资源利用率应用程序的并发变应运而生了.现在的操作系统是多任务操作系统,多线程是实现多任务的一种方式. 进程是指一个内存中运行的应用程序,每个进程都有自己独立的内存空间 ...
- MongoDB-MongoDB重装系统后恢复
重装系统后,把原mongoDB安装目录和原mongoDB的data目录拷贝到新硬盘的D盘上. 恢复的方法如下. 1.D:\Mongodb里放着mongod.cfg和data C:\Users\Admi ...
- 在虚拟机（vmware）上安装CentOS
第一步是安装虚拟机,这个比较简单就不讲了. 第二步准备CentOS的镜像文件准备安装 第三步安装CentOS: 新建虚拟机 选择自定义配置 选择硬件兼容标准 选择是否让vmware安装操作系统 选择将 ...
- HDU 3613 Best Reward(扩展KMP求前后缀回文串)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3613 题目大意: 大意就是将字符串s分成两部分子串,若子串是回文串则需计算价值,否则价值为0,求分割 ...
- Centos7.3安装和配置jre1.8
在正式环境里 我们可以不安装jdk ,仅仅安装Java运行环境 jre即可: 第一步:下载jre 我们去oracle官方下载下jre http://www.oracle.com/technetwork ...
- SQLSERVER中的非工作时间不得插入数据的触发器的实现
create trigger trigger_nameon table_namefor insert,update,deleteasif (datepart(yy,getdate())%4=0 or ...
- Linux学习笔记：ps -ef、ps aux、kill -9
一.查看进程命令 1.ps命令 Linux中的ps命令是Process Status的缩写. ps命令用来列出系统中当前运行的那些进程. ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻 ...
- MySQL通过rpm安装及其单机多实例部署
1. CentOS 下安装 MySQL Oracle 收购 MySQL 后,CentOS 为避免 MySQL 闭源的风险,改用 MySQL 的分支 MariaDB:MariaDB 完全兼容 MySQL ...