您的位置：首页 > Web前端 > JQuery

jquery-ui.min.js 插件

2017-09-02 14:33 459 查看

1、导入js库：

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2、用法：

附赠案例一份：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">
    <title>折叠</title>

    <script src="../jquery-3.2.1.min.js"></script>

    <link rel="stylesheet"
href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>

<body>

<div id="div1">

    <h3>北京</h3>

    <p>北京（Beijing），简称京，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、

        国际交往中心、科技创新中心，是中国共产党中央委员会、

        中华人民共和国中央人民政府和全国人民代表大会的办公所在地。</p>

    <h3>南京</h3>

    <p>北京（Beijing），简称京，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、

        国际交往中心、科技创新中心，是中国共产党中央委员会、

        中华人民共和国中央人民政府和全国人民代表大会的办公所在地。</p>

    <h3>天京</h3>

    <p>北京（Beijing），简称京，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、

        国际交往中心、科技创新中心，是中国共产党中央委员会、

        中华人民共和国中央人民政府和全国人民代表大会的办公所在地。</p>

</div>

</body>

<script>

    $("#div1").accordion({
//折叠

        event:"mouseover",

        /*animate:false,*/

        /*header:"h3"*/

    });

   /*$("#div1").accordion("destroy");*/ //破坏折叠
</script>
</html>

jQuery UI 提供了一组用户界面交互、特效、小部件、实用工具及主题。通过实例演示、查看源代码、创建主题、阅读API
文档，开始学习使用 jQuery UI。

交互（Interactions）向任何元素添加基本的基于鼠标的行为。您可以只通过短短的几行代码即可创建排序列表、缩放元素、拖放行为等等。交互（Interactions）也作用于更复杂的小部件和应用程序。

·        拖动（Draggable）

·        放置（Droppable）

·        缩放（Resizable）

·        选择（Selectable）

·        排序（Sortable）

小部件（Widgets）

小部件（Widgets）有功能齐全的 UI 控件，使桌面应用程序也具备 Web 应用程序一样丰富的功能。所有的小部件（Widgets）提供了一个核心，带有定制行为的大量扩展以及完整的主题支持。

·        折叠面板（Accordion）

·        自动完成（Autocomplete）

·        按钮（Button）

·        日期选择器（Datepicker）

·        对话框（Dialog）

·        菜单（Menu）

·        进度条（Progressbar）

·        滑块（Slider）

·        旋转器（Spinner）

·        标签页（Tabs）

·        工具提示框（Tooltip）

特效（Effects）

特效（Effects）支持颜色动画和 Class 转换，同时也提供了一些额外的 Easings。另外，提供了一套完整的定制特效，供显示和隐藏元素时或者只是添加一些视觉显示时使用。

·        特效（Effect）

·        可见性（Visibility）

o
显示（Show）

o
隐藏（Hide）

o
切换（Toggle）

·        Class 动画（ClassAnimation）

o
添加 Class（Add Class）

o
移除 Class（Remove Class）

o
切换 Class（Toggle Class）

o
转换 Class（Switch Class）

·        颜色动画（Color Animation）

实用工具（Utilities）

jQuery UI 使用实体工具（Utilities）来创建交互（interactions）和小部件（widgets）。

· 定位（Position）

部件库（Widget Factory）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery-ui.min.js 插件

相关文章推荐

新的分享

章节导航