jquery UI入门
http://docs.jquery.com/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"的层
$(document).ready(function(){
$(".block").draggable();
});
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
用法:
$(document).ready(function(){
$(".block").draggable({helper: 'clone'});
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(this).append("<br>Dropped!");
}
});
});
选项说明: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
用法:
$(document).ready(function(){
$("#myList").sortable({});
});
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
用法:
$(document).ready(function(){
$("#myList").selectable();
});
选项说明: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
用法:
$(document).ready(function(){
$("#example").resizable();
});
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
用法:
$(document).ready(function(){
$("#example").accordion();
});
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
用法:
$(document).ready(function(){
$("#example").dialog();
});
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
用法:
$(document).ready(function(){
$("#example").slider();
});
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
用法:
$(document).ready(function(){
$("#example").tablesorter({sortList:[[0,0],[2,1]], widgets: ['zebra']});
});
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
用法:
$(document).ready(function(){
$("#example > ul").tabs();
});
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
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/koushenglong/archive/2008/06/13/2543673.aspx
分享到:
相关推荐
**jQuery UI 入门指南** jQuery UI 是一个基于 jQuery JavaScript 库的开源用户界面插件集合,它提供了各种丰富的交互式元素和可自定义的主题,包括对话框、拖放功能、日期选择器、滑块、进度条等。这个库极大地...
《jQuery UI 中文版 入门到精通》是一本针对jQuery UI框架的全面教程,旨在帮助初学者快速掌握这一强大的用户界面库。jQuery UI是基于jQuery JavaScript库的扩展,提供了丰富的交互式组件和设计模式,使得网页开发...
2. **插件应用**: jQuery生态系统中有大量的插件,如jQuery UI和EasyUI,它们扩展了jQuery的功能,如表单验证、日期选择器、对话框等。在项目中引入这些插件可以提高开发效率。 **jQuery EasyUI** jQuery EasyUI是...
**jQuery中文手册**是针对...总的来说,jQuery中文手册和jQuery UI入门手册是提升jQuery技能、构建交互式Web界面的重要资源。通过深入学习和实践,开发者可以充分利用这些工具,创造出色且用户友好的Web应用。
**jQuery入门基础** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。这个教程将引导你从零开始掌握jQuery的基本概念和使用方法。 1. **jQuery的选择器** ...
jQuery UI 是一个基于 jQuery 库的用户界面交互框架,它提供了丰富的组件,帮助开发者实现复杂的交互和视觉效果,而无需依赖第三方插件。本篇文章主要关注于jQuery UI的实战应用,特别是常用功能的实现。 首先,...
- **第1章:快速入门**:介绍了如何安装和配置 jQuery UI,以及如何创建第一个简单的 jQuery UI 应用。 - **第2章:组件概述**:概览了 jQuery UI 提供的主要组件,如按钮、对话框、滑块等,并简要介绍了每个组件...
- **实现丰富的UI效果**:通过jQuery,可以轻松实现渐变弹出、图层移动等复杂的视觉效果,提升用户体验。 - **纠正错误的脚本知识**:jQuery提倡标准的编程实践,帮助开发者摒弃错误的JavaScript知识,如直接在...
《jQuery UI 1.9.2:构建交互式网页的强大工具》 jQuery UI 是一个开源的 JavaScript 库,它是基于广泛使用的 jQuery JavaScript 库构建的。这个库专注于提供丰富的用户界面组件,使得开发者能够轻松创建出功能强大...
编辑推荐 JQuery堪称动态Web应用程序领域...本书还介绍jQuery UI库的用法,指导您使用jQuery UI库创建赏心悦目的专业用户界面。书中包含极富启迪意义的指南和紧贴实际的练习,以引导读者在实际中得心应手地使用jQuery。
jQuery UI 有一个活跃的开发者社区,提供了大量的文档、示例代码和讨论论坛,便于初学者入门和高级用户深入研究。 总的来说,jQuery UI 1.11.1 是一款功能强大且易用的前端开发工具,它简化了用户界面的创建过程,...
jQuery UI DownloadBuilder & ThemeRoller ...使用配置文件来定义 DownloadBuilder 应该提供哪个 jQueryUI 版本。 例如: "jqueryUi": [ { "version": "1.10.0" "dependsOn": "jQuery 1.7+", "label": "Stable",
jquery UI主要是用于是UI能变的能容易实现,不需要太多的css,里面已经写了很多类,可以直接使用,常见的图标,方向键头,实现滑动,切换,动画等等都很容易,方便开发在速度上的提升,入门容易,很快上手,
2. jQuery UI:官方提供的UI库,包含多种拖放、排序和对话框等功能。 3. jQuery Validation Plugin:表单验证插件,简化用户输入的检查。 **案例实践** 在学习过程中,你需要通过实际案例来巩固理解,如: 1. ...
"jQueryUI常用功能实战"将深入到jQueryUI库,这是一个扩展jQuery的UI组件集合,包含了大量的用户界面元素,如对话框、日期选择器、拖放功能等。 最后,"实战表单验证与自动完成提示插件"会讲解如何使用jQuery和...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 ...从零开始学习jQuery (十) jQueryUI 常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
这些插件极大地扩展了jQuery的功能,比如`jQuery UI`提供了丰富的用户界面组件。 ### 8. jQuery的兼容性 jQuery对各种浏览器的良好兼容性是其受欢迎的一大原因。它处理了不同浏览器之间的差异,使得开发者无需关心...