一、概述

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的基本使用方法与技巧的更多相关文章

  1. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》勘误收集

    此书由程学彬 (http://weibo.com/ironbin)和我合译完成,此篇博客作为勘误收集而用,若译文有误或者有任何疑问,欢迎留下评论,或者给我发邮件(地址:gzooler@gmail.co ...

  2. 关于jQuery UI 使用心得及技巧

    1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码.直到jQuery的出现,让开发人员从一大堆繁琐的js代码中解脱,取而代之几行j ...

  3. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  4. jQuery UI resizble、draggable的div包含iframe导致缩放和拖拽的不平滑解决方法

    前言 不仅仅是jQuery UI resizble的div包含iframe会导致缩放的不平滑,draggable也会出现包含iframe会导致拖放的不平滑,但是因为jQuery UI有为draggab ...

  5. jquery ui中 accordion的问题及我的解决方法

    原文:jquery ui中 accordion的问题及我的解决方法 jquery有一套所谓的ui组件,很不错的.如果有兴趣的朋友,可以参考http://jqueryui.com/ 但其中的accord ...

  6. jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题

    今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...

  7. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  8. jQuery UI基本使用方法

    其实jQuery UI早就在我的学习计划中,只不过因为计划安排始终处于待命状态,最近项目要用到jQuery UI,就提前学习一下,也想能够封装自己的UI库,这样就不用老按照别人的套路走了,像使用jQu ...

  9. Jquery UI的datepicker插件使用方法

    原文链接;http://www.ido321.com/375.html Jquery UI是一个非常丰富的Jquery插件,并且UI的各部分插件可以独自分离出来使用,这是其他很多Jquery插件没有的 ...

随机推荐

  1. 【HDU】 1018 Big Number

    大意就是求 : log10(n!) = log10(1 * 2 *  3 * .......*n) = log10(1) + log10(2) + ........+log10(n); 打表的话会ML ...

  2. boost 无锁队列

    一哥们翻译的boost的无锁队列的官方文档 原文地址:http://blog.csdn.net/great3779/article/details/8765103 Boost_1_53_0终于迎来了久 ...

  3. 玩转Nodejs日志管理log4js(转)

    转自:http://blog.fens.me/nodejs-log4js/ 前言 日志对任何的应用来说都是至关重要的.在Nodejs中使用express框架并没有自带的日志模块,我们可以选择log4j ...

  4. jquery.validate的使用

    在页面上面引用 <script type="text/JavaScript" src="js/jQuery.js"></script> ...

  5. 基础命名空间:反射 using System.Reflection

    反射概念:       .Net的应用程序由几个部分:‘程序集(Assembly)’.‘模块(Module)’.‘类型(class)’组成,程序集包含模块 模块包含类型,类型又包含 成员,而反射提供一 ...

  6. oracle11gr2 netca 无法启动 报错

    安装oracle软件后,必须要先配置listener才能dbca建库,但是netca却报下面的错误. Oracle Net Services Configuration: # # An unexpec ...

  7. C语言获取键盘按键

    在写控制台游戏的时候,发现不管用cin,scanf还是getchar,都不能实时的输入按键,必须要按回车才能读进去,而按回车的话会导致输入异常,所以要使用获取键盘按键的函数. 加入头文件#includ ...

  8. (原+译)win7远程连接ubuntu16.04

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5711214.html 原始网址: http://ubuntuhandbook.org/index.ph ...

  9. cmd下操作mysql

      将mysql 安装目录下 的bin 添加到 windows 环境变量        步骤:        我的电脑 ->高级->环境变量->path->选择一个用户-> ...

  10. Oracle创建主键自增表

    Oracle创建主键自增表   1.创建表    create table Test_Increase(            userid number(10) NOT NULL primary k ...