jquery UI Notes

Get ready:
1. Download jquery UI Library: http://jqueryui.com/download/
2. Select Theme
3, to establish a good development environment (MySQL, NetBeans)
4. Create DATABASE: jqueryui_db


One, jquery UI
1, AutoComplete
1.1, descriptive narrative: is the jquery UI self-active completion of the component.

1.2. Supported data sources: The main support string array, json two data formats.

1.2.1, for the JSON-formatted array, it is required to have: Label, Value property.

1.2.2, in which the Label property is used to display the AutoComplete pop-up menu, and the Value property is selected to assign to the text box. Assume that neither label nor value is specified. You will not be able to use the AutoComplete prompt.
1.2.3, the key for the JSON output from the server side must be double-cited.

1.3. Basic number of references
1.3.1, Source: Used to specify the data source, type string, Array, Function.

A) string: The server-side address used for the AJAX request, returning the Array/json format.
b) Array: A string array or a JSON array.

c) Function (Request, Response): Obtains the input value by Request.term, response ([Array]) to render the data, (Jsonp is the way).
1.3.2, MinLength: Activates AutoComplete when the string length in the input box reaches minLength.
1.3.3, AutoFocus: When the AutoComplete selection menu pops up, the first one is selected on its own initiative. The default value is False.
1.3.4, Delay: The number of milliseconds to activate AutoComplete. The default is 300 milliseconds.

1.4. Main callback function
1.4.1, select (Event, UI): AutoComplete The result list whenever a selection is selected, Ui.item is the selected item.
1.4.2, create (event, UI): triggered when AutoComplete was created.
1.4.3, Search (event, UI): the ability to return false in this event to cancel the request before the request is started.
1.4.4, open (event, UI): triggered when the AutoComplete results list pops up.
1.4.5, Close (event, UI): triggered when the result list of AutoComplete is closed.
2, Tabs
2.1, descriptive narrative: have a content area and a plurality of panels, each header and the area associated.
2.2. Number of references
2.2.1, collapsible: collapsible. I feel false.

2.2.2, event: Toggle condition.

I feel the click. Can be set to mouseover. Hover
2.2.3, Active:
A) Boolean: set to False. All the panels will be folded. The collapsible panel must be set to true.

b) Integer: The panel that specifies the index will be opened. 0 for the first one.
2.2.4, Disabled:
A) boolean:enable or disable all tabs.
b) Integer: The tab included in the array will not be available.

e.g.,[0,2].
3, Dialog
3.1, Descriptive narrative: dialog box.

3.2. Number of references
3.2.1, Closetext: The title text that is closed.

3.2.2, draggable: Whether you can drag. I feel false.
3.2.3, modal: If set to True, the modal dialog box. False, non-modal dialog box.

3.2.4, Resizable:true, dialog box size can be dragged; false, the dialog box size is immutable.
3.2.5, Title: The caption of the dialog box.

3.3. Methods
3.3.1, Close (): Closes the dialog box.
3.3.2, open (): Opens the dialog box.

3.3.3, Destroy (): Removes the dialog box.
4, DatePicker
4.1, descriptive narrative: date control.

4.2: Number of references
4.2.1, DateFormat: Date format.

I feel "mm/dd/yy".

4.2.2, MonthNames: The name of the month.

            4.2.3, DayNames: the title of the week.
            4.2.4, Daynamesmin: The label of the week.
            4.2.5, Prevtext: The title text of the Forward button.
            4.2.6, Nexttext: The title text of the Back button.

5. Slider
5.1, Descriptive narrative: slider.
5.2. Number of references
5.2.1, Disabled:true, slider not available.
5.2.2, min: Minimum value.
5.2.3, Max: Maximum value.
5.2.4, orientation:vertical, vertical slider, horizontal, horizontal slider.

Default level.
5.2.5, Step: The minimum value of each slide change.

            5.2.6, Value: Current value.
       5.3, method
            5.3.1, disable (): The slider is not available.
            5.3.2, enable (): Slider available.
            5.3.3, create (event, UI): The callback function when the slider is created.
            5.3.4, Change (event, UI): triggered when the value of the slider changes.
            5.3.5, Slide (event, UI): triggered when the slider is dragged.
            5.3.6, Start (event, UI): triggered when the swipe starts.

5.3.7, Stop (event, UI): triggered when a slide is stopped.
6, ProgressBar
6.1, descriptive narrative: progress bar.
6.2. Number of references
6.2.1, Max: Maximum value.
6.2.2, Value: The values of the progress bar.
A) Number: the value between 0~max.

b) Boolean: If False, the "transition" status progress bar.

       6.3, method
            6.3.1, create (event, UI): Fires when a progress bar is created.
            6.3.2, Destroy (): Remove the progress bar.
            6.3.3, Value (V): Sets the value of the progress bar.
            6.3.4, Change (event, UI) : triggered when the value of the progress bar changes.
            6.3.5, complete (event, UI) : triggered when the progress bar reaches its maximum value.
    7, menu
       7.1, descriptive narrative: menu. A menu can be created from any valid markup as long as the elements has a strict parent/child relationship.

The most common way is through the creation of UL, Li.
7.2. Number of references
7.2.1, Disabled:true, menu items are not available.

7.2.2, Icons: Setting Icons for menu items
7.3. Methods
7.3.1, create (event, UI): Triggered when the menu is created.
7.3.2, select (Event, UI): Triggered when a menu item is selected.
7.4. Other
7.4.1, join the cutting line: Divider elements can be a created by including unlinked menu items, contain only spaces and/or dashes.
8. tooltip
8.1. Descriptive narrative: Hint tool
8.2. Classification: General prompt tool, prompting tool for drawing
9. Button
9.1. Descriptive narration: button
9.2. Type: Normal button, radio button, check button, icon button
10, Ui-widget-header
11, Ui-corner-all
Second, HTML basic
1. iframe
1.1. Descriptive narration: The IFRAME element creates an inline frame (inline frame) that includes another document.
1.2. Properties
1.2.1, src: The URL of the document that is displayed in the IFRAME.
1.2.2, scrolling: Whether scroll bars are displayed in the IFRAME. The value is yes, no, auto.
1.2.3, frameborder: whether to display the border around the frame. The value is 0 or 1.
1.2.4, Width: wide.
1.2.5, Height: high
2. Table, label, Div, span, id, class, form, A, IMG,
====>
CheckBox, Radio, label

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

jquery UI Notes