夜光带你走进Jquery UI（七）擅长的领域

最新推荐文章于 2021-10-07 23:40:20 发布

GeniusTeam-夜光

最新推荐文章于 2021-10-07 23:40:20 发布

阅读量165

点赞数

分类专栏： Genius-Jquery UI

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102715519

版权

Genius-Jquery UI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

夜光序言：

本是青灯不归客，却因浊酒留风尘。

正文：使用鼠标调整列表中或者网格中元素的排序。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：可排序小部件（Sortable Widget）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<ul id="sortable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

<script>$("#sortable").sortable();</script>

</body>
</html>

jQuery UI API - 日期选择器部件（Datepicker Widget）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：日期选择器部件（Datepicker Widget）演示
    主要的东西和内容要看api,网上都有~~
    </title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<div id="datepicker"></div>

<script>
    $( "#datepicker" ).datepicker();
</script>

</body>
</html>

jQuery UI API - 菜单部件（Menu Widget）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：菜单部件（Menu Widget）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <style>
        .ui-menu {
            width: 200px;
        }
    </style>
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul>
            <li><a href="#">Item 3-1</a></li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

<script>
    $( "#menu" ).menu();
</script>

</body>
</html>

jQuery UI API - 对话框部件（Dialog Widget）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：对话框部件（Dialog Widget）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>

<script>
    $( "#dialog" ).dialog({ autoOpen: false });
    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
</script>

</body>
</html>

jQuery UI API - 进度条部件（Progressbar Widget）

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>夜光：进度条部件（Progressbar Widget）演示</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
    <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

<div id="progressbar"></div>

<script>
    $( "#progressbar" ).progressbar({
        value: false
    });
</script>

</body>
</html>

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进Jquery UI（七）擅长的领域

夜光序言：本是青灯不归客，却因浊酒留风尘。正文：使用鼠标调整列表中或者网格中元素的排序。<!doctype html><html lang="en"><head> <meta charset="utf-8...
复制链接

扫一扫

专栏目录