Jquery--ui type plug-in

1. draggable ()Drag the plugin, dragging the bound element, when this jquery UI plugin is bound to the element, you can invoke the Draggable () method to implement the effects of various drag elements, calling the format $ (selector). draggable ({options})

2 The options parameter is the configuration object at the time of the method invocation, according to which you can set various drag effects, such as the "containment" property specifying the drag area, the coordinate direction when the Axis property setting is dragged, such as adding two subclasses to the <div> element in the page <div> by binding with a drag plugin, these two subclasses <div> elements can only be dragged in the parent <div> element of the outer layer.

3. Droppable () Place the plugin, In addition to dragging any element with the Draggable plugin, you can also call the Droppable UI plugin to place any dragged element in the specified area, similar to the shopping cart effect, calling format $ (selector). droppable ({options})

4 Selector parameter for the receive drag element, options is the configuration object of the method, in the object, the drop function indicates that when the dragged element is received completely into the receiving element of the container, the call to trigger the function, such as in the page, by calling the Droppable plug-in to the "Product area" The elements in the "Shopping cart" and change the background color and quantity value of the "Shopping cart"

5. Sortable () Drag the sort plug-in, Drag a sequence element (for example <option>, <li>) anywhere to form a new sequence of elements that implements the function of dragging and sorting, calling the format $ (selector). Sortable ({options})

6 The selector parameter is the element for dragging and sorting, and options is the configuration object when the method is called . as in the page, the ability to drag and sort the various <li> table items in the <ul> element by loading the sortable plugin

7. Accordion () Panel folding plug-in, You can implement the folding effect of the "accordion" in the specified area of the page, that is, when you click on the title, expand the content, and then click Another heading, close the expanded content and call the format $ (selector). Accordion ({options}), The parameter selector is the entire panel element, and the options parameter is the corresponding configuration object for the method

8. Tabs () tab Plug-in, you can define the <li> option in <ul> as the option title, and then use the <a> element's "href" property to set the content of the option caption, calling format $ (selector). Tabs ({ Options})

9 The selector parameter is the overall peripheral element of the tab, which contains the tab title and contents, and the options parameter is a configuration object for the. Tabs () method, which also allows the contents of the tab to be loaded in AJAX mode. as in the page, add the tab title and content element, and bind the tabs plugin, when clicking on the title, cut the content in the way of the tab

dialog () dialog Plug-in, you can use the effect of animation to pop up a variety of types of dialog boxes, implemented in JavaScript code. Alert () and. Confirm () function, call format $ (Selector). dialog ({options})

The selector parameter is the element that displays the popup dialog box, usually the <div>,options parameter as the method's configuration object, where you can set the type of dialog box, the code that the OK, Cancel button executes, and so on . If you click the "Submit" button, if the contents of the text box is empty, the dialog plug-in pop-up prompt box, prompting the input content cannot be empty

menu () Menu Tool Plug-in, you can create multi-level inline or pop-up menu through <ul>, support by Keyboard direction key Control menu swipe, allow to add icon for menu's various options, call format $ (selector). Menu ({options})

The selector parameter is the outermost <ul> element in the menu list, and the options are the configuration object for the. Menu () method. as in the page, a three-layer navigation menu is built through the <ul> element inline, and the outermost <ul> element is passed through the . Menu () method to bind the plug-in to implement the navigation menu function

spinner () The spinner button plug-in can not only enter values directly in the text box, but also can change the value of the input box by clicking the Up and down buttons on the right side of the input box, and also support the keyboard's upper and lower arrow keys changing the input value and calling format $ (selector). Spinner ({options})

The selector parameter is a text input box element, and the option options parameter is the configuration object for the . Spinner () method, where you can set the maximum and minimum values for the input, get the change values, and set the corresponding events. if the three input text boxes in the page are bound to the spinner, the background color of the corresponding <div> elements will change when the three text box values are changed .

- The . ToolTip () ToolTip plugin, which can customize the appearance of hints for elements, prompts for content support variables, Ajax remote fetching, and can also customize the location where the cue content is displayed, calling format $ (selector). tooltip ({options})

Selector is the element that needs to display the prompt information, the option parameter options are . tooltip () method, in which you can set the popup, hidden effect, and location of the cue message. if three <a> elements are bound to the ToolTip plug-in, when moving the mouse in the <a> element content, the animated effect pops up the corresponding hint image, when moved out, the picture is automatically hidden

Jquery--ui type plug-in