Jquery ui notes, jqueryui

Jquery ui notes, jqueryui
Preparation:
1. Download jquery ui Library: http://jqueryui.com/download/
2. Select theme
3. Build an environment (mysql and netbeans)
4. Create a database: jqueryui_db


I. jquery ui
1. autocomplete
1.1. Description: it is an automatic completion component of jQuery UI.
1.2 supported data sources: mainly supports two data formats: String Array and JSON.
1.2.1 for arrays in JSON format, the following attributes are required: label and value.
1.2.2. the label attribute is used to display in the autocomplete pop-up menu, while the value attribute is the value assigned to the text box after selection. If neither label nor value is specified, it cannot be used for autocomplete prompts.
1.2.3. Double quotation marks must be used for the JSON key output from the server.
1.3 Main Parameters
1.3.1. source: used to specify the data source. The data types include string, Array, and Function.
A) string: the server address used for ajax requests. The return value is in Array/JSON format.
B) Array: A String Array or a JSON Array.
C) Function (request, response): Get the input value through request. term, response ([Array]) to present data; (JSONP is in this way ).
1.3.2. minLength: When the string length in the input box reaches minLength, Autocomplete is activated.
1.3.3. autoFocus: When the Autocomplete menu is displayed, the first one is automatically selected. The default value is false.
1.3.4. delay: the delay in how many milliseconds to activate Autocomplete. The default value is 300 milliseconds.
1.4 Main callback Functions
1.4.1 select (event, ui): When any item in the Autocomplete result list is selected, ui. item is selected.
1.4.2. create (event, ui): triggered when Autocomplete is created.
1.4.3, search (event, ui): Before starting a request, you can return false in this event to cancel the request.
1.4.4. open (event, ui): triggered when the Autocomplete result list is displayed.
1.4.5 close (event, ui): triggered when the Autocomplete result list is closed.
2. tabs
2.1. Description: it has one content area and multiple panels. Each header is associated with a region.
2.2. Parameters
2.2.1. collapsible: foldable. The default value is false.
2.2.2. event: Switch condition. The default value is click, which can be set to mouseover or hover.
2.2.3. active:
A) Boolean: if it is set to false, all panels will be folded. The foldable panel must be set to true.
B) Integer: The Panel of the specified index will be opened. 0 is the first one.
2.2.4. disabled:
A) Boolean: enable or disable all tabs.
B) Integer: the tab contained in the array will be unavailable. E.g., [0, 2].
3. dialog
3.1. Description: dialog box.
3.2. Parameters
3.2.1 closeText: Closed title text.
3.2.2. draggable: indicates whether the image can be dragged. The default value is false.
3.2.3. modal: if it is set to true, It is the modal dialog box; false, non-modal dialog box.
3.2.4. resizable: true. The dialog box size can be dragged. false: the dialog box size cannot be changed.
3.2.5. title: the title of the dialog box.
3.3 Method
3.3.1. close (): close the dialog box.
3.3.2. open (): open the dialog box.
3.3.3. destroy (): delete dialog box.
4. datepicker
4.1. Description: Date control.
4.2: Parameters
4.2.1. dateFormat: date format. The default value is mm/dd/yy ".
4.2.2. monthNames: 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 backward button.
5. slider
5.1. Description: slider.
5.2. Parameters
5.2.1. disabled: true. The slider is unavailable.
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 sliding change.
5.2.6. value: current value.
5.3 Method
5.3.1. disable (): the slider is unavailable.
5.3.2. enable (): the slider is available.
5.3.3. create (event, ui): The callback function when the slider is created.
5.3.4. change (event, ui): triggered when the slider value is changed.
5.3.5. slide (event, ui): triggered when the slider is dragged.
5.3.6. start (event, ui): triggered when sliding starts.
5.3.7. stop (event, ui): triggered when the slide is stopped.
6. progressbar
6.1. Description: progress bar.
6.2. Parameters
6.2.1. max: maximum value.
6.2.2. value: the value of the progress bar.
A) Number: ranging from 0 ~ Value between max.
B) boolean: If it is false, it indicates the progress bar of the "transition" status.
6.3 Method
6.3.1. create (event, ui): triggered when the progress bar is created.
6.3.2. destroy (): remove the progress bar.
6.3.3. value (v): Set the progress bar value.
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 the maximum value.
7. menu
7.1. Description: menu. A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most common method is to use ul and li.
7.2. Parameters
7.2.1. disabled: true. The menu item is unavailable.
7.2.2. icons: Set the icon of the menu item
7.3 Method
7.3.1. create (event, ui): triggered when a menu is created.
7.3.2 select (event, ui): triggered when a menu item is selected.
7.4. Others
7.4.1 Add a split line: Divider elements can be created by including unlinked menu items that contain only spaces and/or dashes.
8. tooltip
8.1. Description: prompt tool.
8.2 classification: common tip tools and animated tip tools
9. button
9.1. Description: button
9.2. Type: Common button, single-choice button, Check button, and Icon button
10. ui-widget-header
11. ui-corner-all
Ii. html basic
1. iframe
1.1. Description: The iframe element creates an inline framework (intra-row framework) containing another document ).
1.2 attributes
1.2.1. src: the URL of the document displayed in iframe.
1.2.2. scrolling: whether to display the scroll bar in iframe. The values are yes, no, and auto.
1.2.3. frameborder: whether to display the border around the frame. The value is 0 or 1.
1.2.4, width: width.
1.2.5, height: height
2. table, label, div, span, id, class, form, a, img,
====>
Checkbox, radio, label