JQuery UI Common plug-in uses

First, what is a plugin

① is a program written in accordance with certain interface specifications

② is the extension and supplement of the original system platform function

③ can only be run under the specified system platform and not run alone

Note: Since the jquery plugin is based on the jquery Script Library extension, all jquery plug-ins must rely on the jquery Base Script library, in addition to the plug-in need to first introduce the jquery Foundation Script Library, and then introduce the plug-in library, we must pay attention to the order of introduction.

jquery plugin parameters are typically in JSON format

Second, commonly used plug-ins

Dialog plugin: Common dialog box presentation forms are divided into normal dialog box and Form dialog box

Common parameters:

Introducing the Jquery-ui Library:

"Text/javascript"Src=".. /jquery-ui-1.9.2/jquery-1.8.3.js"></script> <script type="Text/javascript"Src=".. /jquery-ui-1.9.2/ui/jquery-ui.js"></script> <link rel="stylesheet"href=".. /jquery-ui-1.9.2/themes/base/jquery.ui.all.css"Type="Text/css"></link> <script type="Text/javascript">$ (function () {$ ('#dlg'). dialog ({//set to False, which means the Open dialog box does not open automaticallyAutoOpen:false,              //Settings for Buttonsbuttons:{'Close': Function () {$ ('#dlg'). Dialog ('Close')              }              },               //sets whether the component uses modal windows. False background color by defaultModaltrue,              //Showshow:{Effect:'Blind', Duration: -              },              //Hiddenhide:{Effect:'Explode', Duration: -              }          })             }); </script> "openbut"onclick="$ (' #dlg '). Dialog (' Open ' )"> Open Window </button> <div id="Dlg"title="User Login">User name<br/> <input type="text"><br/>Password<br/> <input type="text"><br/> </div> </body>View Code
Implementation results:
Tabs plugin:
allows for rich tab effects. Common presentation form with mouse click trigger tab Toggle, mouse move trigger tab Toggle
Common Properties:
Common methods:
Common events:
$ (function () {$ (' #tabs '). Tabs ({//the collapsed state of the component. The default value is False, which is non-collapsibleCollapsible:true,            //sets the tab in the open state. The default value is 0Active:1, Event:' Hover '//triggered after opening            /*activate:function () {alert (1)},*/                         //triggered when open       /*beforeactivate:function () {alert (1)},*/                }); });</script>View Code
Implementation results:
Menu Plugin:
Common Properties:
$ (function () {$ ("#menu"). Menu ({//Trigger when focus is obtainedfocus:function () {//Background Color$( This). CSS ("Background", "Pink")           },         }); //disabled:true     }); </script> <style>. UI-menu{width:150px;} </style> View Code
Implementation results:
AutoComplete plug-in: Remote data source for automatic completion
Syntax: $ (selector). AutoComplete ([Settings])
Common Properties:
Common events:
$ (function () {var source=["ACCP", "apple", "Blue", "bus"]; $("#tags"). AutoComplete ({source:source,//automatically select the first itemAutoFocus:true,            //Minimum Length activation//Minlength:2,//Delay//delay:2000,//The first item is selected by default//Autofocus:true,//triggered when created           /*create:function () {alert (1)}*/                       //Start Find Request         /*search:function () {alert (1)},*/                               //triggered when the list is selected         /*select:function () {alert (1)}*/                    //trigger when any item in the list gets focus         /*focus:function () {alert (1)}*/        }); });</script>View Code
Implementation effect: Automatically finds values that match a
Lazyload plugin:
load images in batches on demand, Shorten user wait times, Relieve Server Pressure
Syntax: $ (selector). Lazyload ([Settings]);
Common parameters:
$ (function () {$ (". Lazy"). Lazyload ({//What effect is loaded in useEffect: "FadeIn", Effectspeed:2000,        //when it's 100 pixels from the next picture .threshold:100        });    }); </script> class= "lazy" src= ". /img/white.gif "Data-original=". /img/bmw_m1_hood.jpg "width=" 765 "height=" 574 "alt=" BMW M1 Hood "> class= "lazy" src= ". /img/white.gif "Data-original=". /img/bmw_m1_side.jpg "width=" 765 "height=" 574 "alt=" BMW M1 side "> class= "lazy" src= ". /img/white.gif "Data-original=". /img/viper_1.jpg "width=" 765 "height=" 574 "alt=" Viper 1 "> class= "lazy" src= ". /img/white.gif "Data-original=". /img/viper_corner.jpg "width=" 765 "height=" 574 "alt=" Viper Corner "> class= "lazy" src= ". /img/white.gif "Data-original=". /img/bmw_m3_gt.jpg "width=" 765 "height=" 574 "alt=" BMW M3 GT "> class= "lazy" src= ". /img/white.gif "Data-original=". /img/corvette_pitstop.jpg "width=" 765 "height=" 574 "alt=" Corvette Pitstop "> </body>View Code
JQuery UI Common plug-in uses