总结:总的来说,这些控件可以在官网找到列子,
部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script src='/images/loading.gif' data-original="../jquery-2.2.4.min.js"></script> <script src='/images/loading.gif' data-original="jquery-ui.min.js"></script> <link rel="stylesheet" href="jquery-ui.min.css" type="text/css"/> <script> var current = 0; var max = 100; function changePro() { current++; if (current > max) { current = 0; } $('#pro').progressbar('option', 'value', current); } $(function () { //列表Section控件 $('#acc').accordion({ collapsible: true }); //自动补全控件 var autoArray = ['herry', 'right', 'i love you', 'hehe']; $('#auto').autocomplete({ source: autoArray, }) //日期控件 $('#date').datepicker(); //对话框控件 $('#btn1').button().on('click', function () { $('#dio').dialog(); }) //进度条 $('#pro').progressbar({max: 100}); updatePro(); //菜单 $('#menu').menu( { role: null, position: { at: "left bottom" } }); //滑动进度条 $('#slider').slider({ slide:function (event,ui) { $('#show_value').text(ui.value); } }); //列表标签切换 $('#tabs').tabs(); }) function updatePro() { setInterval(changePro, 100); } </script> <style> /*Chome查看源码后,CSS再加工*/ .ui-menu { width: 217.3px; } .ui-menu:after{ content: ''; display: block; overflow: hidden; clear: both; } .ui-menu-item{ display: inline-block; float: left; width: 50px; padding: 5px 10px; margin: 0; text-align: center; } .ui-front{ width: 100px; } .ui-icon{ width: 0; height: 0; } </style></head><body><div id="acc"> <h1>标题1</h1> <div> <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久 </p> </div> <h1>标题2</h1> <div> <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久 </p> </div> <h1>标题3</h1> <div> <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久 </p> </div> <h1>标题4</h1> <div> <p>傲娇攻骄傲公积金垃圾哦我日记噢 哈多喝点大哥大哥更让人哥哥了个个人也好久 </p> </div></div><br/><!--输入自动补全,或输入自动查找--><label for="auto">自动补全输入:</label><input type="text" id="auto"><br/><!--日期控件--><label for="date">输入日期:</label><input type="text" id="date"><br/><!--对话框--><div id="dio" > <p>这是对话框</p></div><br/><a id="btn1">弹出对话框</a><br/><br/><!--进度条--><div id="pro"></div><br/><!--菜单--><ul id="menu"> <li><a href="#">People</a> <ul> <li>工人</li> <li>农民</li> <li>医生</li> <li>军人</li> </ul> </li> <li><a href="#"> People</a> <ul> <li>工人</li> <li>农民</li> <li>医生</li> <li>军人</li> </ul> </li> <li><a href="#">People</a> <ul> <li>工人</li> <li>农民</li> <li>医生</li> <li>军人</li> </ul> </li></ul><br/><br/><span id="show_value">0</span><div id="slider"></div><br/><br/><div id="tabs"> <ul> <li><a href="#hello1">Hello</a></li> <li><a href="#hello2">Hello</a></li> <li><a href="#hello3">Hello</a></li> </ul> <div id="hello1">案件管理及爱国家案经过两个</div> <div id="hello2">;观看开关 山沟沟</div> <div id="hello3">晴天气突破期投票</div></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></body></html>
原标题:jQueryUI 之控件们
关键词:jquery