展会信息港展会大全

把jQuery的类、插件封装成seajs的模块的方法
来源:互联网   发布日期:2016-01-27 15:14:51   浏览:3127次  

导读:这篇文章主要介绍了把jQuery的类、插件封装成seajs的模块的方法,需要的朋友可以参考下注:本文使用的seajs版本是2 1 1一、把Jquery封装成seajs的模块代码如下:define(function () { 这里放置jquery代码 把 ...

这篇文章主要介绍了把jQuery的类、插件封装成seajs的模块的方法,需要的朋友可以参考下

注:本文使用的seajs版本是2.1.1

一、把Jquery封装成seajs的模块

代码如下:define(function () {

//这里放置jquery代码 把你喜欢的jquery版本放进来就好了

return $.noConflict();

});

调用方法:

这样引进就可以像以前一样使用jquery

代码如下:define(function (require, exports, module) {

var $ = require('./js/jquery');

// $(document).ready(function () {

//$("tr").wyhinterlaced({ "odd": "red", "even": "blue" });

//$("tr").wyhhover();

// })

});

二、把jquery的类封装成seajs模块

代码如下:define(function (require, exports, module) {

var $ = require("../js/jquery");

var weekday = new Array(7)

weekday[0] = "星期一";

weekday[1] = "星期二";

weekday[2] = "星期三";

weekday[3] = "星期四";

weekday[4] = "星期五";

weekday[5] = "星期六";

weekday[6] = "星期日";

function GetType(arg) {

var today = new Date();

var year = today.getFullYear();

var month = today.getMonth() + 1;

var td = today.getDate();

var d = weekday[today.getDay() - 1];

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

switch (arg) {

case 1://2013-09-09 09:31:56

return year + "-" + month + "-" + td + "" + h + ":" + m + ":" + s; break;

case 2://2013-09-09 (星期一) 09:31:56

return year + "-" + month + "-" + td + " (" + d + ") " + h + ":" + m + ":" + s; break;

case 3://09-09-2013 09:31:56

return month + "-" + td + "-" + year + "" + h + ":" + m + ":" + s; break;

case 4://09-09-2013 星期一 09:31:56

return month + "-" + td + "-" + year + " (" + d + ") " + h + ":" + m + ":" + s; break;

case 5://2013年09月09日 09时31分秒56

return year + "年" + month + "月" + td + "日" + h + "时" + m + "分" + s + "秒"; break;

case 6://2013年09月09日 星期一 09时31分秒56

return year + "年" + month + "月" + td + "日(" + d + ")" + h + "时" + m + "分" + s + "秒"; break;

}

};

/*******************************************************

/*函数名:GetTime

/*参数:数值(包括整形浮点型都可以,浮点型会做四舍五入处理,如果不是数字,

函数将采用默认的时间格式返回!时间样式有15【1-15是有效的时间样式

超出或小于都将采用默认的样式 样式1】中)

/*功能获取当前的系统时间 可定制格式

*******************************************************/

functionGetTime(arg) {

if (!isNaN(arg)) {

var num = Math.round(arg);

if (num < 7 && num > 0) {

return GetType(num);

}

else {

var str;

var str2;

switch (num) {

case 0: return GetType(1); break;

case 7: str = GetType(2); return str.replace(/星期/, ""); break;

case 8: str = GetType(1); return str.replace(/-/, "/").replace(/-/, "/"); break;

case 9: str = GetType(2); return str.replace(/-/, "/").replace(/-/, "/");

case 10: str = GetType(2); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;

case 11: str = GetType(4); return str.replace(/星期/, ""); break;

case 12: str = GetType(3); return str.replace(/-/, "/").replace(/-/, "/"); break;

case 13: str = GetType(4); return str.replace(/-/, "/").replace(/-/, "/");

case 14: str = GetType(4); str2 = str.replace(/-/, "/").replace(/-/, "/"); return str2.replace(/星期/, ""); break;

case 15: str = GetType(6); return str.replace(/星期/, "");

default: return GetType(1); break;

}

}

}

else {

return GetType(1);

}

};

/* 获取系统的当前年数*/

function GetYear() {

var today = new Date();

return today.getFullYear();

};

/*获取系统的当前的月数*/

function GetMonth() {

var today = new Date();

return today.getMonth() + 1; ;

};

/*获取系统的当前的天数*/

function GetDay() {

var today = new Date();

return today.getDate(); ;

};

/*获取系统的当前的小时*/

function GetHours() {

var today = new Date();

return today.getHours();

};

/*获取系统的当前的分钟*/

function GetMinute() {

var today = new Date();

return today.getMinutes();

};

/*获取系统的当前的秒数*/

function GetSecond() {

var today = new Date();

return today.getSeconds();

};

/************************************************************

*函数名:TimeSubMillisecond

*参数:endtime(结束时间) starttime(起始时间)

*功能:获取两个时间的毫秒级的差值,必须写一个参数 第二个参数(起始时间)可以

*不写默认是系统当前时间

************************************************************/

functionTimeSubMillisecond(endtime, starttime) {

var end = new Date(endtime).getTime();

if (!endtime) {

return -1;

}

if (!starttime) {

start = new Date().getTime();

}

else {

start = new Date(starttime).getTime();

}

if (start > end) {

return -1;

}

else {

return end - start;

}

};

/************************************************************

*函数名:TimeSubNormal

*参数:endtime(结束时间) starttime(起始时间)

*功能:获取两个时间的差值,必须写一个参数 第二个参数(起始时间)可以

*不写默认是系统当前时间

************************************************************/

functionTimeSubNormal(endtime, starttime) {

var end = new Date(endtime).getTime();

var start;

if (!starttime) {

start = new Date().getTime();

}

else {

start = new Date(starttime).getTime();

}

if (start > end) {

return -1;

}

else {

var alltime = end - start;

var seconds = alltime / 1000;

var minutes = Math.floor(seconds / 60);

var hours = Math.floor(minutes / 60);

var days = Math.floor(hours / 24);

var CDay = days;

var CHour = hours % 24;

var CMinute = minutes % 60;

var CSecond = Math.floor(seconds % 60);

var str = "";

if (CDay > 0) {

str += CDay + "天";

}

if (CHour > 0) {

str += CHour + "小时";

}

if (CMinute > 0) {

str += CMinute + "分钟";

}

if (CSecond > 0) {

str += CSecond + "秒";

}

return str;

}

};

exports.GetTime = GetTime;

exports.GetYear = GetYear;

exports.GetMonth = GetMonth;

exports.GetDay = GetDay;

exports.GetHours = GetHours;

exports.GetMinute = GetMinute;

exports.GetSecond = GetSecond;

exports.TimeSubMillisecond = TimeSubMillisecond;

exports.TimeSubNormal = TimeSubNormal;

})

调用方法:

代码如下:define(function (require, exports, module) {

var $ = require('./js/jquery');

var a=require('./js/time');

alert(a.GetTime(3));

});

三、把jquery 插件的封装成seajs模块

下面是把jquery的一个插件封装成模块的例子

代码如下:define(function (require, exports, moudles) {

return function (jquery) {

(function ($) {

//给当前行高亮

$.fn.wyhhover = function (options) {//options 经常用这个表示有许多个参数。

var defaultVal = {

BackColor: '#ccc',

};

var obj = $.extend(defaultVal, options);

return this.each(function () {

var tabObject = $(this); //获取当前对象

var oldBgColor = tabObject.css("background-color"); //获取当前对象的背景色

tabObject.hover(//定义一个hover方法。

function (){tabObject.css("background-color", obj.BackColor);},

function () {tabObject.css("background-color", oldBgColor);});

});

}

//使奇偶行不同的颜色

$.fn.wyhinterlaced = function (options) {//options 经常用这个表示有许多个参数。

var defaultVal = {

odd: '#DDEDFB',

even: '#fff',

};

var obj = $.extend(defaultVal, options);

return this.each(function () {

var tabObject = $(this); //获取当前对象

if(tabObject.index()%2==0)

{

tabObject.css("background-color", obj.odd);

}else

{

tabObject.css("background-color", obj.even);

}

});

}

})(jquery);

}

})

调用方法:

使用共享的方式调用插件

代码如下:define(function (require, exports, module) {

var $ = require('./js/jquery');

require('./js/jquery_tr')($);//共享给jquery

$(document).ready(function () {

$("tr").wyhinterlaced({ "odd": "red", "even": "blue" });

$("tr").wyhhover();

})

});

赞助本站

人工智能实验室

相关热词: 插件 封装 jQuery

上一篇:没有了...
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港