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‘)