Of Stack

jquery Plug in Format Instance Analysis

  • 2021-06-28 10:51:43
  • OfStack

The jquery plug-in format is illustrated with examples.Share it for your reference, as follows:

Now I plan to write a public component to my company. Most of the tools I use are jquery. Many times some plug-in effects are also based on jquery, so I will encounter plug-ins to expand others'writing.

Here's a brief description of the format of the plug-in under 1: 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
// simulation 1 A small plugin for everyone to learn 
(function($){
  $.fn.huangbiao=function(userSetting){
  // utilize jquery Of extend Method to extend plug-in configuration parameters, which should be exposed to users 
    settings = jQuery.extend($.fn.huangbiao.defaultSetting,userSetting);
    function init(){
      alert(" Initialize here on me ");
      myFunction(this);
    }
    function myFunction(obj){
      alert(" I'm a developer's own encapsulated function ");
      showSetting();
      privateFunc();
    }
    function showSetting(){
      alert(this.settings.name);
    }
    this.unbind('click').click(init);
    return this;
  }
  // Here is the private function of the closure 
  function privateFunc(){
    alert("i am private function!");
  }
  // Functions Exposed to Users 
  $.fn.huangbiao.openFunc=function(obj){
    alert("test");
  }
  /*
     Define defaults exposed to users 
     this 1 Must be placed in $.fn.huangbiao Behind the object, otherwise the script will fail 
  */
  $.fn.huangbiao.defaultSetting={
    name:"huangbiao",
    sex:"boy",
    age:24
  };
})($);
function useUndefault(){
  // Use your own configured parameters 
  $("#undefault").huangbiao({name:"liumei",sex:"girl",age:24});
}
function useUndefault2(){
alert($.fn.huangbiao.defaultSetting.name);
  $.fn.huangbiao.defaultSetting.name="hanmeimei";
  alert($.fn.huangbiao.defaultSetting.name);
  // Use your own configured parameters 
  $("#undefault2").huangbiao();
}
function useDefault(){
  // Use default configuration parameters 
  $("#default").huangbiao();
}
function openFunction(){
  $("#default").huangbiao.openFunc();
}
</script>
<title> Untitled Document </title>
</head>
<body>
<input type="button" value="useUndefault" id="undefault" onclick="useUndefault();"><br>
<input type="button" value="useUndefault2" id="undefault2" onclick="useUndefault2();"><br>
<input type="button" value="useDefault" id="default" onclick="useDefault();"><br>
<input type="button" value=" Use functions provided to users " id="openFuncId" onclick="openFunction();"><br>
</body>
</html>

In addition, here is another document about jquery, I believe it will be helpful for you to learn jQuery plug-in!

Download from this site: jQuery Plug-in Development.pdf.

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Drag and Skills Summary, jQuery Extension Skills Summary, jQuery Common Classic Skills Summary, andjQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.

Related articles: