Home >Web Front-end >JS Tutorial >JavaScript UI design based on jQuery

JavaScript UI design based on jQuery

高洛峰Original: 2016-11-28 13:37:391509browse

jQuery UI is an open source JavaScript web user interface code library based on jQuery. It is a collection of user interface components officially launched by jquery to be used with jquery! Contains many interface operation functions.

Whether it is jQuery UI or jQuery's EasyUI framework can help you, making it easy for you to build your web page.

jQuery UI or easyui is a collection of user interface plugins based on jQuery.

Using jQuery UI or easyui you don't need to write a lot of JavaScript code, you usually define the user interface by writing some HTML markup.

jQuery UI or easyui is easy yet powerful.

When using jQuery UI or easyui, you need to add some js and css files to your page. Of course, you can also define the css you need.

jQuery UI and easyui are tools that we can use. They are packaged and written in different versions, so that we don’t have to consider browser compatibility when using them, and we don’t have to worry about writing. The most common problem of incompatibility between different browsers when creating a page can be used directly, which is a true "use doctrine".

The functions of the plug-ins provided by jQuery UI and easyui are different.

There are three major categories of functions provided by jQuery UI, including Interactions, Widgets, and Effects.

Interactions includes Draggable, Droppable, Resizable, Selectable, and Sortable functions for us to choose from.

Widgets class includes different functions such as Accordion, Datepicker, Dialog, Progressbar, Slider, and Tabs.

The Effects class includes functions such as Add Class, Remove Class, Animate, Effect, show, Switch Class, Toggle, and Toggle Class.

Each function will have different attributes and different effects. I will explain the usage of each function in detail later.

And easyui contains a total of 7 categories.

The first category is Base, which includes four aspects: EasyLoader, Draggable, Droppable, and Resizable.

The second category is Layout, which includes four aspects: Panel, Tabs, Accordion, and Layout.

The third category is Menu and Button, which contains the four effects of creating buttons: Menu, Link Button, Menu Button, and Split Button.

The fourth category is Form, including Form, ComboBox, ComboTree, NumberBox, ValidateBox, DateBox, and Calendar.

The fifth category is Window, including window, Dialog, and Message.

The sixth category is DataGrid and Tree, including Pagination, DataGrid, and Tree.

Let’s first take a look at the specific usage of each function of jQuery UI.

We start with Draggable in Interactions.

"EN-US">Draggable has many effects. Different parameters of the methods it gives can achieve different effects. It requires jquery-1.3.2.js, ui.core.js, These three js files are ui.draggable.js. The method it provides is draggable(), and it can achieve different effects by giving it different parameters.

Let’s take a look at the first effect (Default functionality) first. You can drag a DOM element with the mouse on the page within the range you can see. The code used is:

这段代码比之前的代码要复杂，所实现的效果也更多，它可以计算你共拖动了多少次DOM和你共拖动了多少距离。

它通过在draggable方法内增加的一个数组counts来存储开始和结束时的次数，和你一共拖动的距离。

我们再看第三个效果（Constrain movement），代码：

The first DOM can be dragged normally, and the second DOM will return to its original position after being dragged. The helper attribute is mentioned above, and the opacity attribute sets the transparency of the DOM. The third DOM will display a DIV of I'm a custom helper to you when you implement dragging.

As for the next three DOMs, each time you drag a DOM, the dragged DOM will be on the outer layer of the other two DOMs, that is, on top. 🎙 });

$("#draggable2").

In these two DOMs, there is a p tag nested in each DIV. Each handle attribute indicates that the mouse can drag the DOM only when the mouse clicks on the P tag, and the second cancel indicates You have to click in a DIV that is not a P tag to drag the DOM.

The tenth effect (Cursor style)

The above code makes the ul and li elements in the page appear sortable while being dragged.

The second introduction is "EN-US">droppable, which contains six effects, which require the use of "EN-US">jquery-1.3.2.js, "EN-US" ">ui.core.js, "EN-US">ui.droppable.js, "EN-US">ui.draggable.js are four js files.

Let’s look at the first one (Default functionality) first