"Serial" bootstrap development of a beautiful front-end interface

Related articles:

1. "Teach you to develop beautiful front-end interface with Bootstrap"

2. "Bootstrap development of a beautiful front-end interface of the implementation principle"

3. "Bootstrap development Beautiful front-end interface of the custom right-click menu"

What is a jquery plugin?

First, let's look at how we typically use jquery, the first way: $.trim ("Hello World"), directly using the method in jquery, the second way: $ ("#myinput"). Val (), gets the elements in the page, Then use the methods in the JQuery object. The difference between the two is that the first way to call a method generally does not involve the DOM, whereas the second method needs to get the elements in the page before making a method call, and the execution of the method revolves around the DOM element. The trim and Val methods are all provided by jquery primitives, but we can also write our own methods, and the methods we write ourselves are generally called jquery plugins.

Now let's write two getting started plugins:

Requirement One: Gets the file name of the string path, and the requirement does not involve any DOM, so we can write our plug-in using the mode-one pattern.

$ would have been a function, everything in JavaScript is object, so $ is also an object, then adding a new method to a jquery object can be done.

<script type= "Text/javascript" >    //jquery Object Add custom method    $.getfilename=function(path) {        if (!  return//return/(?!. *\/). */.exec (path+ "") [0//var fileName = $.getfilename ("f:/abc/source code education Top Secret Information"); Console.debug ( FileName);</script>          

The first simple plugin should be completed, of course, if your requirements are complex, your code may be more.

　　　　　　　

Requirement Two: Gets the name of the element in the page; The requirement requires DOM elements before it can get the name of the DOM element.

First gets the element object in the page through the $ (selector), in fact the return value of the $ (selector) function returns a jquery instance object, each object in JS has its own prototype object, the jquery instance object's prototype object is Jquery.prototype or $.fn, If you do not know "prototype object" is what the children's shoes Baidu a bit, this JS master necessary knowledge. (You can try to execute: $.fn={}; then go to the method of calling the JQuery object, and you will find that it is unusable.)

the JQuery instance object's prototype object adds a custom method $.fn.tagname=function() {    this[0].nodename;}; $ (function  Call the custom plug-in Console.debug ($ ("#mydiv"). TagName ());});        

The function of the second plug-in mainly relates to the access of DOM elements;

Right-click menu plug-in development, this plugin is based on the "bootstrap development beautiful front-end interface of the custom context menu", so the details of the right-click menu will not be described in this article.

　　　　Carefully compared to the plug-in code and non-plug-in code subtle differences, in fact, the previous writing dead things using this to replace;

$ (function() {        // Call code        $ ("#contextMenu"). ContextMenu ();});    

"Serial" bootstrap development of a beautiful front-end interface