The jquery UI is a set of user interface interactions, effects, widgets, and themes built on the jquery JavaScript library. Whether you are creating a highly interactive Web application or simply adding a date selector to a form control, the JQuery UI is the perfect choice.
The jquery UI contains many widgets (widgets) that maintain state, so it is slightly different from the typical jquery plug-in usage pattern. All JQuery UI Widgets (widgets) Use the same pattern, so as long as you learn to use one of them, you know how to use other widgets (widgets).
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"> <title>JQuery UI Drag (draggable)-Auto Scroll</title> <Linkrel= "stylesheet"href= "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Scriptsrc= "//code.jquery.com/jquery-1.9.1.js"></Script> <Scriptsrc= "//code.jquery.com/ui/1.10.4/jquery-ui.js"></Script> <Linkrel= "stylesheet"href= "Http://jqueryui.com/resources/demos/style.css"> <style>#draggable, #draggable2, #draggable3{width:100px;Height:100px;padding:0.5em;float: Left;margin:0 10px 10px 0; } </style> <Script> $(function() { $( "#draggable"). draggable ({scroll:true }); $( "#draggable2"). draggable ({scroll:true, scrollsensitivity: - }); $( "#draggable3"). draggable ({scroll:true, Scrollspeed: - }); }); $ (document). Ready (function () { $("#a_btn"). button ()})</Script></Head><Body><DivID= "Draggable"class= "Ui-widget-content"> <P>Scroll set to True, default setting</P></Div><DivID= "Draggable2"class= "Ui-widget-content"> <P>Scrollsensitivity set to 100</P></Div><DivID= "Draggable3"class= "Ui-widget-content"> <P>Scrollspeed set to 100</P></Div><Divstyle= "height:5000px; width:1px;"></Div><ahref= "https://www.baidu.com/"ID= "A_btn">Baidu</a></Body></HTML>
JQuery UI Exercises