码迷,mamicode.com
首页 > Web开发 > 详细

jQueryUI 之控件

时间:2016-06-18 15:30:22      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:

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

         部分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>

  

jQueryUI 之控件

标签:

原文地址:http://www.cnblogs.com/yqlog/p/5596153.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!