jQueryUI 之控件们

来源：互联网发布：淘宝交易高仿人民币编辑：程序博客网时间：2024/05/21 08:08
总结：总的来说，这些控件可以在官网找到列子，
部分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" style="display: none">    <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>
0 0