Home > Developer > Web Develop
Introduction to the JQuery UI plugin:
The jquery UI is an open source JavaScript Web user interface code base based on jquery. Visual controls that contain underlying user interaction, animations, effects, and replaceable themes. We can use it directly to build Web applications that have a good interactive nature. All plug-in tests can be compatible with IE 6.0+, Firefox, Safari 3.1+, Opera 9.6+, and GoogleChrome.
jQuery UI Common plugins:1.dialog Plug-in
2.tabs Plug-in
3.menu Plug-in
4.AutoComplete plug-in
5.Lazyload Plugin:
Basic steps:
(1). Add the required jquery plugin and style file to the project.
(2). Introduce jquery plugins and style files on the page.
1.dialog Plug-in
Introducing jquery plugins and styles:
<script type= "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>
Body Code:
<body><button id= "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>JS Style operation:
<script type= "Text/javascript" > $ (function () { $ (' #dlg '). Dialog ({ //set to False, means not automatically open Autoopen:false, //Button settings buttons:{ ' off ': function () { $ (' #dlg '). Dialog (' Close ');} , modal:true, //out show:{ effect: ' blind ',//special effects style duration:2000 }, //Receive hide:{ effect: ' Explode ', duration:2000 } }) ; </script>Operating effect:
Common parameters:
2.tabs plug-in
Inside the body tag:
<body><div id= "tabs" ><ul><li><a href= "#tabs-1" >tabs1</a></li><li ><a href= "#tabs-2" >tabs2</a></li><li><a href= "#tabs-3" >tabs3</a></li ></ul><div id= "tabs-1" ><p>content of tab One</p></div><div id= "Tabs-2" ><p >content of tab Two</p></div><div id= "tabs-3" ><p>content of Tab Three</p></div ></div></body<script type= "Text/javascript" >
$ (function () {$ (' #tabs '). Tabs ({//sets the collapsed state of the component. The default value is False, which is non-collapsible collapsible:false,//boolean type value: Set the parameter value to false and all tabs will be collapsed. The collapsible parameter must be set to True //integer Type value: A positive integer representing the tab position starting at 0, and a negative integer representing the tab position from the last Countdown active:1,// Sets the trigger event of the Toggle tab. The default value is "click", which triggers the toggle event when the tab is clicked : ' hover ');}); </script> Common Properties:
Common Events and methods:
3.menu Plugins:
<script type= "Text/javascript" > $ (Function () {$ ("#menu"). Menu (Trigger focus:function when the focus is acquired) () {//Background color $ (this). CSS ("Background", "pink"); }//Settings menu not available//disabled:true}); }); </script> <style> ui-menu{width:150px;} </style> Run:
AutoComplete plugin:
<script type= "Text/javascript" >//json$ (function () {var Source = [{"label": "AA", "value": "123"}, {"label": "AAA" , "value": "456"}, {"label": "BB", "Value": "789"}];//var source=["ACCP", "apple", "Blue", "Bus"];$ ("#tags"). AutoComplete ({source:source,//automatically selects the first item autofocus:true, //The list triggers focus:function when any one of the items gets the focus ( ) { alert ( "1");}); }); </script>Display the effect, the search engine carries on the automatic assembly.
Lazyload plugin:
<script type= "Text/javascript" >$ (function () {$ (". Lazy"). Lazyload ({effect: "FadeIn", effectspeed:2000,// 100 pixels from the next picture threshold:100}); </script> Lazy loading reduces unnecessary waste of resources and improves performance.
To make a difference is the highest state of life. --Engels
jquery Common Plugins
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
