你的位置:首页 > Java教程

[Java教程]jQueryUI 之控件


总结:总的来说,这些控件可以在官网找到列子,

         部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title></title>  <script src="../jquery-2.2.4.min.js"></script>  <script src="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>