Home > Developer > JavaScript
Jquery. callback. js
Plug-in Open Source Address: https://gist.github.com/4580276
Copy codeThe Code is as follows:
/**
* @ FileOverview this plug-in is used to add a callback function to the jQuery method. You can add any custom callback function to the class method or instance method without affecting the behavior of the original method.
* @ Dependency jQuery1.7 +
* @ Author huhai
* @ Since 2013-01-21
*/
(Function ($ ){
$. _ Callbacks = {};
$. _ Callbacks _ = {};
$. _ Alias = {};
$. _ Alias _ = {};
$. Extend ({
/**
* @ Decription Add a callback function to the Method
* @ Param funcName: string name of the callback function to be added
* @ Param callback: function callback function (if you want to remove it, do not use the anonymous method)
* @ Param static: whether the boolean is a class method. The default value is false.
*/
AddCallback: function (funcName, callback, static ){
If ("string" === typeof (funcName) & $. isFunction (callback )){
If (static = true ){
If ($ [funcName] & $. isFunction ($ [funcName]) {
If (! This. _ callbacks [funcName]) {
This. _ callbacks [funcName] = $. Callbacks ();
}
This. _ callbacks [funcName]. add (callback );
If (! $. _ Alias [funcName]) {
$. _ Alias [funcName] = $ [funcName]; // store the original Class Method
$ [FuncName] = function () {// proxy class method;
Var result = $. _ alias [funcName]. apply (this, arguments );
$. _ Callbacks [funcName]. fireWith (this, arguments );
Return result;
};
}
}
} Else {
If ($. fn [funcName] & $. isFunction ($. fn [funcName]) {
If (! This. _ callbacks _ [funcName]) {
This. _ callbacks _ [funcName] = $. Callbacks ();
}
This. _ callbacks _ [funcName]. add (callback );
If (! $. _ Alias _ [funcName]) {
$. _ Alias _ [funcName] = $. fn [funcName]; // Method for storing the original Instance
$. Fn [funcName] = function () {// proxy instance method;
Var result = $. _ alias _ [funcName]. apply (this, arguments );
$. _ Callbacks _ [funcName]. fireWith (this, arguments );
Return result;
};
}
}
}
}
},
/**
* @ Decription remove the callback function added to the Method
* @ Param funcName: name of the callback function added to the string
* @ Param callback: function callback function
* @ Param static: whether the boolean is a class method. The default value is false.
*/
RemoveCallback: function (funcName, callback, static ){
If ("string" === typeof (funcName) & $. isFunction (callback )){
If (static = true ){
If ($ [funcName] & $. isFunction ($ [funcName]) {
If (this. _ callbacks [funcName]) {
This. _ callbacks. remove (callback );
}
}
} Else {
If ($. fn [funcName] & $. isFunction ($. fn [funcName]) {
If (this. _ callbacks _ [funcName]) {
This. _ callbacks _. remove (callback );
}
}
}
}
}
});
}) (JQuery );
Usage example:
HTML
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh-CN" dir = "ltr">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script type = "text/javascript" src = "./js/jquery-1.7.1.js"> </script>
<Script type = "text/javascript" src = "./js/jquery. callback. js"> </script>
<Script type = "text/javascript" src = "./js/mustache. js"> </script>
<Script type = "text/tmpl" id = "dataTable">
<Table>
<Tr>
<Td> <a href = "javascript: void (0);"> 11 </a> </td>
<Td> <a href = "javascript: void (0);"> 12 </a> </td>
<Td> <a href = "javascript: void (0);"> 13 </a> </td>
<Td> <a href = "javascript: void (0);"> 14 </a> </td>
<Td> <a href = "javascript: void (0);"> 15 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 21 </a> </td>
<Td> <a href = "javascript: void (0);"> 22 </a> </td>
<Td> <a href = "javascript: void (0);"> 23 </a> </td>
<Td> <a href = "javascript: void (0);"> 24 </a> </td>
<Td> <a href = "javascript: void (0);"> 25 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 31 </a> </td>
<Td> <a href = "javascript: void (0);"> 32 </a> </td>
<Td> <a href = "javascript: void (0);"> 33 </a> </td>
<Td> <a href = "javascript: void (0);"> 34 </a> </td>
<Td> <a href = "javascript: void (0);"> 35 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 41 </a> </td>
<Td> <a href = "javascript: void (0);"> 42 </a> </td>
<Td> <a href = "javascript: void (0);"> 43 </a> </td>
<Td> <a href = "javascript: void (0);"> 44 </a> </td>
<Td> <a href = "javascript: void (0);"> 45 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 51 </a> </td>
<Td> <a href = "javascript: void (0);"> 52 </a> </td>
<Td> <a href = "javascript: void (0);"> 53 </a> </td>
<Td> <a href = "javascript: void (0);"> 54 </a> </td>
<Td> <a href = "javascript: void (0);"> 55 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 61 </a> </td>
<Td> <a href = "javascript: void (0);"> 62 </a> </td>
<Td> <a href = "javascript: void (0);"> 63 </a> </td>
<Td> <a href = "javascript: void (0);"> 64 </a> </td>
<Td> <a href = "javascript: void (0);"> 65 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 71 </a> </td>
<Td> <a href = "javascript: void (0);"> 72 </a> </td>
<Td> <a href = "javascript: void (0);"> 73 </a> </td>
<Td> <a href = "javascript: void (0);"> 74 </a> </td>
<Td> <a href = "javascript: void (0);"> 75 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 81 </a> </td>
<Td> <a href = "javascript: void (0);"> 82 </a> </td>
<Td> <a href = "javascript: void (0);"> 83 </a> </td>
<Td> <a href = "javascript: void (0);"> 84 </a> </td>
<Td> <a href = "javascript: void (0);"> 85 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 91 </a> </td>
<Td> <a href = "javascript: void (0);"> 92 </a> </td>
<Td> <a href = "javascript: void (0);"> 93 </a> </td>
<Td> <a href = "javascript: void (0);"> 94 </a> </td>
<Td> <a href = "javascript: void (0);"> 95 </a> </td>
</Tr>
<Tr>
<Td> <a href = "javascript: void (0);"> 101 </a> </td>
<Td> <a href = "javascript: void (0);"> 102 </a> </td>
<Td> <a href = "javascript: void (0);"> 103 </a> </td>
<Td> <a href = "javascript: void (0);"> 104 </a> </td>
<Td> <a href = "javascript: void (0);"> 105 </a> </td>
</Tr>
</Table>
</Script>
<Style type = "text/css">
Table {border-collapse: collapse; width: 100% ;}
Tr. zebra {background: # CCCCCC ;}
Td {border: 1px solid #000000; height: 30px ;}
# QueryResults {border: 1px solid # CCCCCC; min-height: 200px ;}
</Style>
</Head>
<Body>
<H1> html test <Div id = "queryResults">
</Div>
</Body>
<Script type = "text/javascript" src = "./js/test. js"> </script>
</Html>
Js
Copy codeThe Code is as follows:
JQuery (function ($ ){
$. AddCallback ("html", function (){
If (this. length = 1 & arguments. length> 0 & "string" = typeof (arguments [0]) {
If (/<table [^>] *>. * <\/table>/I. test (arguments [0]. replace (/\ n/g ))){
Console. log ("zebra table ");
$ ("Table: not (table. notZebra): tbody tr: odd", this). addClass ("zebra ");
}
}
});
$. AddCallback ("html", function () {console. log ("callback 2 ");});
$. AddCallback ("html", function () {console. log ("callback 3 ");});
$ ("# QueryResults" example .html (
Mustache. to_html ($ ("# dataTable" ).html ())
);
});
Running result:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
