JavaScript UI design based on jQuery

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:

Let’s look at the second effect (Events):

                                                                                         $(function()             -start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop'); "#draggable").draggable({

                                                                                                                                                                                                                           .

                                   updateCounterStatus($start_counter,counts[0]);

                            },

                            drag: function() {

                                   counts[1]++;

                                   updateCounterStatus($drag_counter,counts[1]);

                            },

                            stop: function() {

                                   counts[2]++;

                                   updateCounterStatus($stop_counter,counts[2]);

                            }

                     });

              });

 

              function updateCounterStatus($event_counter,new_count) {

                     // first update the status visually...

                     if (!$event_counter.hasClass('ui-state-hover')) {

                            $event_counter.addClass('ui-state-hover')

                                   .siblings().removeClass('ui-state-hover');

                     }

                     // ...then update the numbers

                     $('span.count',$event_counter).text(new_count);

              }

       

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

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

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

       $(function() {

              $("#draggable").draggable({ axis: 'y' });

              $("#draggable2").draggable({ axis: 'x' });

             

                    $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });

                                                                  ;

                                                                                                             Different parameters achieve different effects. The first method call allows the DOM to only move up and down, the second method call allows the DOM to only move left and right, the third method call allows the DOM to move only within the box specified for it, and the fourth method call allows the DOM to move only within the box specified for it. It can be moved outside the box, and the fifth method call allows the DOM to be moved only within its parent node.

The fourth effect (Delay start), code:

                                                                                                                                       20 });

                                                                                                                                                    ;

The parameters it gives have certain restrictions, such as distance:20, which means you must drag more than 20px to have an effect, otherwise it will not let you drag, and delay is a delay , means that you have to wait until 1000ms before you can drag it.

The fifth effect (Snap to element or grid)

                                                                           able" ).draggable({ snap: true }); snap: '.ui-widget-header', snapMode: 'outer' }); ).draggable({ grid: [80, 80] });

                   ); Let DOM be adsorbed on the edge of a large box, both inside and outside. The third parameter allows DOM to be adsorbed only on the outside of the box, but has no effect on the inside. The fourth parameter allows DOM to be moved only to 20,20. In places like multiples, the fifth parameter and the fourth parameter are the same, but the data given are different.

The sixth effect (Auto-scroll)

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

                                                                                                               

                                       $("#draggable"                                                                                                                                                                                                           -highlight').find('p').html('Dropped!');

The above code indicates that when the DOM is dragged Move to the specified DOM, the DOM background color changes, and a class effect is added.

The second one (Accepted elements), code:

                                                                                                                                                                                                       .draggable(); Class: 'ui-state-hover',

                                                                                                                                                      active ',                                        

                              }); ) method, and gives hoverCalss, so that it will also produce an effect when it is dragged to the specified DOM and floated, and will produce an effect again when the mouse is released.

The third (Prevent propagation), code:

                                                                                                                                                                                                                             

                                                                          hoverClass: 'ui-state-active',

event, ui) {

                                                                                                                                                               $(this).addClass('ui-state-highlight').find('> p').html('Dropped!');

                                                                                                                           });

                                                                          

                                 greedy: true,                                                                                                                                                                                                                                                                                                                                            . ui-state-highlight').find('> p').html('Dropped!');

                                                               ;/script>

First Give the first DOM a draggable effect, and then call the droppable() method on both the second large DOM and the third DOM. The difference is that the second method returns false when calling drop, and the third None is returned. The third DOM calls greedy:true at the beginning. They respectively indicate that when the first DIV is dragged to the second DIV of the same level, if it is dragged to the DIV of its same level, When it is up, only the outer DIV will have an effect. If you drag to the inner DIV, the entire DIV will have an effect, that is, including the outer DIV of the same level. After the third function is called, only the DIV you drag to Which layer of DIV, which layer of DIV produces the effect. ​​​​$ ("#droppable").droppable({

                                                                                                               $(this).addClass('ui-state-highlight') .find('p').html('Dropped!');

                                                               ggable2").draggable();

                        $("#droppable2"). droppable({

                                                                                                                                             ui) {

                                                                                        ').find('p').html('Dropped!');

                                                                        

This also makes two of the DOM You can drag the other two corresponding DOMs. This time the two corresponding DOMs call hoverCalss and activeClass respectively to produce different effects. They all behave differently when the mouse drags the DOM to float on it.

The fifth (Revert draggable position) code:

                                                                                 (Revert draggable position) code:

                                                                                                                                                 event, ui) {

                                                                                'ui-state-highlight').find('p').html('Dropped!');

                                                                   >

Similarly, Give two of the DOMs draggable effects, and then drag the two DOMs to the specified DOM respectively. They gave different revert parameters when calling the draggable() method, allowing them to drag to the specified DOM to produce different effects. The first effect is that after dragging to the specified DOM, it returns to its original position. , and the specified DOM also produces corresponding effects. The second effect is that when it is dragged to the specified DOM, the specified DOM produces corresponding effects. When it is dragged out again, it returns to the position of the original DOM.

The sixth one (Simple photo manager), code:

                                                               trash

                                                 = $('#gallery'), $trash = $('#trash');                                      ).draggable({

                                                                                                  : 'a.ui-icon',// clicking an icon won't initiate dragging

                                                              Containment: $('# demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present                                               cursor: 'move'

                                                                                              

                            // let the trash be droppable, accepting the gallery items

                            $trash.droppable({

                                   accept: '#gallery > li',

                                   activeClass: 'ui-state-highlight',

                                   drop: function(ev, ui) {

                                          deleteImage(ui.draggable);

                                   }

                            });

 

                            // let the gallery be droppable as well, accepting items from the trash

                            $gallery.droppable({

                                   accept: '#trash li',

                                   activeClass: 'custom-state-active',

                                   drop: function(ev, ui) {

                                          recycleImage(ui.draggable);

                                   }

                            });

 

                            // image deletion function

                            var recycle_icon = '

                            function deleteImage($item) {

                                   $item.fadeOut(function() {

                                          var $list = $('ul',$trash).length ? $('ul',$trash) : $('

').appendTo($trash);

 

                                          $item.find('a.ui-icon-trash').remove();

                                          $item.append(recycle_icon).appendTo($list).fadeIn(function() {

                                                 $item.animate({ width: '48px' }).find('img').animate({ height: '36px' });

                                          });

                                   });

                            }

 

                            // image recycle function

                            var trash_icon = '

                            function recycleImage($item) {

                                   $item.fadeOut(function() {

                                          $item.find('a.ui-icon-refresh').remove();

                                         $item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();

                                   });

                            }

 

                            // image preview function, demonstrating the ui.dialog used as a modal window