jQuery UI的基本使用方法与技巧
一、概述
jQuery UI is a widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. This guide is designed to get you up to speed on how jQuery UI works. Follow along below to get started.
二、下载步骤
下载jquery ui需要3个步骤:
1.选择要下载的控件;
2.选择样式,theme;
3.选择版本,点击下载,可以里。
三、UI使用方法
1.基本使用方法
you'll need to include these 3 files on any page to use jQuery UI widgets and interactions:
<link type="text/css" href="css/themename/jquery-ui-1.8.22.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom.min.js"></script>
Once you've included the necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you'll add a text input element to your page and then call .datepicker(); on it. Like this: HTML: <input type="text" name="date" id="date" />
JS:
$('#date').datepicker();
2.定制样式
jQuery UI basics: using options
Each plugin in jQuery UI has a default configuration which is catered to the most basic and common use case. But if you want a plugin to behave different from its default configuration, you can override each of its default settings using "options". Options are a set of properties passed into a jQuery UI widget as an argument. For example, the slider widget has an option for orientation, which allows you to specify whether the slider should be horizontal or vertical. To set this option for a slider on your page, you just pass it in as an argument, like this:
$('#mySliderDiv').slider({
orientation: 'vertical'
});
You can pass as many different options as you'd like by following each one with a comma (except the last one):
$('#mySliderDiv').slider({
orientation: 'vertical',
min: 0,
max: 150,
value: 50
});
Just remember to surround your options with curly brackets { }, and you're well on your way.
四、相关控件的使用
1.按钮
Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.
<script>
$(function() {
$( "input:submit, a, button", ".demo" ).button();
$( "a", ".demo" ).click(function() { return false; });
});
</script>
<div class="demo">
<button>A button element</button>
<input type="submit" value="A submit button">
<a href="www.nuoya66.com">An anchor</a>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
</div><!-- End demo-description -->
2.对话框
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.
If the content length exceeds the maximum height, a scrollbar will automatically appear.
A bottom button bar and semi-transparent modal overlay layer are common options that can be added.
A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')
jQuery UI的基本使用方法与技巧的更多相关文章
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》勘误收集
此书由程学彬 (http://weibo.com/ironbin)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.co ...
- 关于jQuery UI 使用心得及技巧
1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法
前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...
- jquery ui中 accordion的问题及我的解决方法
原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- jQuery UI基本使用方法
其实jQuery UI早就在我的学习计划中,只不过因为计划安排始终处于待命状态,最近项目要用到jQuery UI,就提前学习一下,也想能够封装自己的UI库,这样就不用老按照别人的套路走了,像使用jQu ...
- Jquery UI的datepicker插件使用方法
原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...
随机推荐
- C. Robot(BFS)
C. Robot Time Limit: 3000ms Case Time Limit: 3000ms Memory Limit: 262144KB 64-bit integer IO format: ...
- Java中String直接赋字符串和new String的区别
解析Java中的String对象的数据类型 1. String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. 2. ...
- [汇编学习笔记][第十七章使用BIOS进行键盘输入和磁盘读写
第十七章 使用BIOS进行键盘输入和磁盘读写 17.1 int 9 中断例程对键盘输入的处理 17.2 int 16 读取键盘缓存区 mov ah,0 int 16h 结果:(ah)=扫描码,(al) ...
- JavaScript ----------------- 寄生式继承
寄生式继承 寄生式继承是于原型式继承紧密相关的一种思路.寄生式基础的思路与寄生构造函数和工厂模式类似,既创建一个仅用于封装继承过程的函数,该函数内部以某种方式来增强对象,最后再像真地是它做了所有工作一 ...
- EF搭建可扩展菜单
EF实现可扩展性菜单 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !impo ...
- TortoiseSVN和VisualSVN-下载地址
isualSVN的下载地址http://www.visualsvn.com/visualsvn/ 它可以以插件的形式嵌入到visual studio里面,让团队协作更轻松,最新的版本已经支持Visua ...
- java序列化ClassNotFoundException
简单的想从保存的对象中重新解析出对象,用了逆序列化,可是报错: java.lang.ClassNotFoundException: xxxxxxxxxxxx at java.net.URLClassL ...
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...
- 优化:代码移动code motion
代码移动code motion-一种常见的优化-这种优化是把(一种需要执行多次但计算结果不会改变)的计算移到前面-这种优化一般需要程序员自行移动代码,不能依靠编译器(编译器担心会有副作用) 看看代码就 ...
- Gengxin讲STL系列目录
引言:有人催我写关于STL的博客#(滑稽) STL嘛,昨晚有人一直逼问我STL名字的由来——STL = Standard Template Library,标准模板库,惠普实验室开发的一 ...