Methods that encapsulate jQuery classes and plug ins into seajs modules
- 2020-03-30 02:20:33
- OfStack
Note: the seajs version used in this article is 2.1.1
1. Package Jquery into a module of seajs
define(function () {
//I'm going to put the jquery code in here and just put your favorite version of jquery in there
return $.noConflict();
});
Call method:
This will allow you to use jquery as before
define(function (require, exports, module) {
var $ = require('./js/jquery');
// $(document).ready(function () {
// $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
// $("tr").wyhhover();
// })
});2. Encapsulate jquery classes into seajs modules
define(function (require, exports, module) {
var $ = require("../js/jquery");
var weekday = new Array(7)
weekday[0] = " Monday ";
weekday[1] = " Tuesday ";
weekday[2] = " Wednesday ";
weekday[3] = " Thursday ";
weekday[4] = " Friday ";
weekday[5] = " Saturday ";
weekday[6] = " Sunday ";
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: //September 09, 2013 (Monday) 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 Monday 09:31:56
return month + "-" + td + "-" + year + " (" + d + ") " + h + ":" + m + ":" + s; break;
case 5: //09:31 minutes and 56 seconds on 09 September 2013
return year + " years " + month + " month " + td + " day " + h + " when " + m + " points " + s + " seconds "; break;
case 6: //Monday, 09 September 2013 09:31:56
return year + " years " + month + " month " + td + " day (" + d + ") " + h + " when " + m + " points " + s + " seconds "; break;
}
};
/*******************************************************
/* The function name: GetTime
/* Parameter: numerical value (including integer floating point type is ok, floating point type will be rounded, if it is not a number,
The function returns in the default time format! The time pattern is 15 【 1-15 Is a valid time pattern
Both exceed and less will take the default style style 1 】)
function GetTime(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(/ week /, ""); 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(/ week /, ""); break;
case 11: str = GetType(4); return str.replace(/ week /, ""); 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(/ week /, ""); break;
case 15: str = GetType(6); return str.replace(/ week /, "");
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();
};
function TimeSubMillisecond(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;
}
};
function TimeSubNormal(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 + " day ";
}
if (CHour > 0) {
str += CHour + " hours ";
}
if (CMinute > 0) {
str += CMinute + " minutes ";
}
if (CSecond > 0) {
str += CSecond + " seconds ";
}
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;
})
Call method:
define(function (require, exports, module) {
var $ = require('./js/jquery');
var a=require('./js/time');
alert(a.GetTime(3));
});Three, the jquery plug-in package into seajs module
The following is an example of encapsulating a jquery plug-in into a module
define(function (require, exports, moudles) {
return function (jquery) {
(function ($) {
//Highlight the current line
$.fn.wyhhover = function (options) {//Options often use this notation to have many arguments.
var defaultVal = {
BackColor: '#ccc',
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var tabObject = $(this); //Get the current object
var oldBgColor = tabObject.css("background-color"); //Gets the background color of the current object
tabObject.hover(//Define a hover method.
function (){tabObject.css("background-color", obj.BackColor);},
function () {tabObject.css("background-color", oldBgColor);});
});
}
//To make even and odd rows of different colors
$.fn.wyhinterlaced = function (options) {//Options often use this notation to have many arguments.
var defaultVal = {
odd: '#DDEDFB',
even: '#fff',
};
var obj = $.extend(defaultVal, options);
return this.each(function () {
var tabObject = $(this); //Get the current object
if(tabObject.index()%2==0)
{
tabObject.css("background-color", obj.odd);
}else
{
tabObject.css("background-color", obj.even);
}
});
}
})(jquery);
}
})
Call method:
Invoke the plug-in in a Shared manner
define(function (require, exports, module) {
var $ = require('./js/jquery');
require('./js/jquery_tr')($);//Shared with jquery
$(document).ready(function () {
$("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
$("tr").wyhhover();
})
});