JavaScript jQuery-8 jquery using plugins (ztree tree plugin, jquery UI plugin)

First, jQuery Ztree tree control

Ztree Introduction

-Ztree is using the core code of jquery to implement a tree plugin that accomplishes common functions

-compatible with IE, FireFox, Chrome and other mainstream browsers

-Supports JSON data

-Supports one-time static generation and Ajax asynchronous loading in two ways

-Supports tree nodes to move, edit, delete

Ztree Use steps

-Step 1: Download Ztree related files (JS, CSS)

-: http://www.ztree.me/

-Step 2: Introduction of relevant documents

-CSS: Style folders, include style files, and image folders

-JS: script files related to Ztree

Jquery.1.4.4.min.js jquery file Necessary

Jquery.ztree.core-3.5.js Ztree's core document necessary

Other files to import as needed

-Step 3: Development Ztree

Core functions

-$.fn.ztree.init (Obj,zsetting,znodes)

-initialization function, which can bind data to a tree control via the init function

-obj: Dom container for displaying ztree

-Zsetting:ztree configuration data, subject to setting configuration

-Znodes:ztree node data, support JSON

Setting Configuration

-Setting configuration, setting object properties, methods to the tree control to do the core configuration, tree control behavior, the effect will be setting configuration

-The properties of the setting object:

-Callback: Definitions related to tree control events

-check: definition related to check box style and operation

-Data: Definitions related to the database

-View: Definition related to the display effect

-View Ztree API for more information

Second, JQuery UI plugin

JQuery UI Introduction

-What the JQuery UI can do is all-encompassing. In fact, the JQuery UI is not a plug-in in a sense, but a complete plug-in library

-The JQuery UI consists of several features

-Effect (effect)

-Interactions (interactive component)

-Widgets (Widgets)

-also offers many advanced effects for jquery and core animations

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M02/7E/74/wKioL1cA5E2hu8arAADeG6_6sc8930.png "title=" Web.png "alt=" Wkiol1ca5e2hu8araadeg6_6sc8930.png "/>

Effect (effect)

-The extended. Animate () method accepts additional style properties when the document is introduced into the core effects file

-After the extended animate method accepts the following properties

-BackgroundColor

-borderBottomColor

-borderLeftColor

-borderRightColor

-borderTopColor

-Color

-OutlineColor

-Special effects can be achieved through functions such as effect (), hide (), show (), etc.

-Refer to the jquery UI manual for specific content

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/77/wKiom1cA5Vah6Z46AABbYlNtYwY027.png "title=" Web.png "alt=" Wkiom1ca5vah6z46aabbylntywy027.png "/>

Interactions (interactive component)

-In the JQuery UI interaction, sortable is one of the more distinctive, sortable can convert any element into a drag-and-drop style list

-Sortable support options, events up to dozens of effects, reference manuals

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/7E/74/wKioL1cA5orhUpW2AACcKrczAo4543.png "title=" Web.png "alt=" Wkiol1ca5orhupw2aacckrczao4543.png "/>

Widgets (Widgets)

-In addition to interactive components, a number of stable user interface parts are available in the JQuery UI library

-These parts are very similar to the corresponding elements of our familiar desktop applications

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/7E/74/wKioL1cA5x_x4c_HAAEmZXhMadM149.png "title=" Web.png "alt=" Wkiol1ca5x_x4c_haaemzxhmadm149.png "/>

Dialog

-a dialog widget that converts a DIV element on a page to a dialog component that can be dragged to close

-Syntax: $ ("#myDiv"). Dialog ()

-Options option

-AutoOpen

-Buttons

-Resizable

-Reference Manual

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/77/wKiom1cA57Gg8NldAACJfSMevYQ286.png "title=" Web.png "alt=" Wkiom1ca57gg8nldaacjfsmevyq286.png "/>

Summary: This chapter focuses on jQuery using plug-ins (ztree tree plugin, jquery UI plugin)

This article from the "Flying Ants" blog, declined to reprint!

JavaScript jQuery-8 jquery using plugins (ztree tree plugin, jquery UI plugin)