zoukankan      html  css  js  c++  java
  • jquery ui中文说明(使用方法)

    在网上找了圈,分享给大家

    jquery ui是jquery官方推出的配合jquery使用的用户界面组件集合!包含了许多的界面操作功能,如我们常用的表格排序,拖拽,TAB选项卡,滚动条,相册浏览,日历控件,对话框等JS插件~~可以很方便的开发用户界面上的功能,使得您的开发工作事半功倍~~不用写繁琐的JS代码~
    下载地址:http://ui.jquery.com/download
    下载后会发现里面有很多的JS文件,也有DOME,您可以一一演示,现在,我介绍一些常用的UI库的使用

    基本的鼠标互动:

    拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

    各种互动效果:

    手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条

    (sliders)、表格排序(table sorters)、页签(tabs)

    放大镜效果(magnifier)、阴影效果(shadow)

    第一部分:鼠标交互

    1.1 Draggables:拖拽

    所需文件:

    ui.mouse.js

    ui.draggable.js

    ui.draggable.ext.js

    用法:文件载入后,可以拖拽class = “block”的层

    1. $(document).ready(function(){             
    2.         $(".block").draggable();          
    3. });      

    draggable(options)可以跟很多选项

    选项说明:http://docs.jquery.com/UI/Draggables/draggable#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/draggable.html

    1.2 Droppables

    所需要文件,drag drop

    ui.mouse.js

    ui.draggable.js

    ui.draggable.ext.js

    ui.droppable.js

    ui.droppable.ext.js

    用法:

    1. $(document).ready(function() {     
    2.      $(".block").draggable({ helper: 'clone' });     
    3.      $(".drop").droppable({     
    4.         accept: ".block",     
    5.          activeClass: 'droppable-active',     
    6.          hoverClass: 'droppable-hover',     
    7.          drop: function(ev, ui) {     
    8.              $(this).append("Dropped!");     
    9.          }     
    10.      });     
    11. });  

    选项说明:http://docs.jquery.com/UI/Droppables/droppable#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/droppable.html

    1.3 Sortables 排序

    所需要的文件

    jquery.dimensions.js

    ui.mouse.js

    ui.draggable.js

    ui.droppable.js

    ui.sortable.js

    用法:

    1. $(document).ready(function(){     
    2.      $("#myList").sortable({});     
    3. });   

    dimensions文档http://jquery.com/plugins/project/dimensions

    选项说明:http://docs.jquery.com/UI/Sortables/sortable#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.sortable.html

    1.4 Selectables 选择

    所需要的文件

    jquery.dimensions.js

    ui.mouse.js

    ui.draggable.js

    ui.droppable.js

    ui.selectable.js

    用法:

    1. $(document).ready(function(){     
    2.      $(”#myList”).selectable();     
    3. });   

    选项说明:http://docs.jquery.com/UI/Selectables/selectable#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/selectable.html

    1.5 Resizables改变大小

    所需要的文件 ,此例子需要几个css文件

    jquery.dimensions.js

    ui.mouse.js

    ui.resizable.js

    用法:

    1. $(document).ready(function(){       
    2.           $(”#example”).resizable();         
    3. });     

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/UI/Resizables/resizable#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.resizable.html

    第二部分:互动效果

    2.1 Accordion 折叠菜单

    所需要的文件:

    ui.accordion.js

    jquery.dimensions.js

    用法:

    1. $(document).ready(function(){       
    2.        $(”#example”).accordion();         
    3. });      

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/UI/Accordion/accordion#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/accordion/?p=1.1.1

    2.2 dialogs 对话框

    所需要的文件:

    jquery.dimensions.js

    ui.dialog.js

    ui.resizable.js

    ui.mouse.js

    ui.draggable.js

    用法:

    JavaScript代码
    1. $(document).ready(function(){     
    2.          $("#example").dialog();     
    3. });   

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/UI/Dialog/dialog#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/dialog.html

    2.3 sliders 滑动条

    所需要的文件

    jquery.dimensions.js

    ui.mouse.js

    ui.slider.js

    用法:

    1. $(document).ready(function(){     
    2.       $("#example").slider();     
    3. });   

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/UI/Slider/slider#options

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.slider.html

    2.4 Tablesorter表格排序

    所需要的文件

    ui.tablesorter.js

    用法:

    JavaScript代码
    1. $(document).ready(function(){     
    2.        $("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});     
    3. });   

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/Plugins/Tablesorter/tablesorter#options

    选项实例:http://tablesorter.com/docs/#Demo

    2.5 tabs页签(对IE支持不是很好)

    所需要的文件

    ui.tabs.js

    用法:

    1. $(document).ready(function(){     
    2.      $("#example > ul").tabs();     
    3. });   

    CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css

    选项说明:http://docs.jquery.com/UI/Tabs/tabs#initialoptions

    选项实例:http://dev.jquery.com/view/trunk/plugins/ui/tests/tabs.html

    tabs ext http://stilbuero.de/jquery/tabs_3/rotate.html

    第三部分:效果

    3.1 Shadow 阴影

    实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.shadow.html

    3.2 Magnifier 放大

    实例http://dev.jquery.com/view/trunk/plugins/ui/demos/ui.magnifier.html

  • 相关阅读:
    【2021-01-01】爱自己等于爱家人
    【2020-12-31】2020的收获与2021的挑战
    【2020-12-30】说别人辛苦,其实是自己辛苦
    【一句日历】2021年1月
    最大子序和
    判断子序列
    下载安装 ethereal
    6812. 【2020.10.05提高组模拟】战争
    6816. 【2020.10.06提高组模拟】随机的排列
    python 版本及pip安装相关
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/1503611.html
Copyright © 2011-2022 走看看