Introduction to jQuery UI and feature introduction

　　　　　　　　　　　　　　　　　　　　　　　　　　　

Introduction to jQuery UI

jQuery UI is a widget and interaction library built on the jQuery JavaScript library that allows you to create highly interactive web applications. Whether you're creating a highly interactive web application or just adding a date picker to a form control, jQuery UI is a perfect choice. jQuery UI contains many widgets that maintain state, so it is slightly different from the typical jQuery plug-in usage pattern. All jQuery UI widgets use the same pattern, so once you learn how to use one, you know how to use the others.

jQuery UI features

Simple and easy to use:

Inherit jQuery’s easy-to-use features, provide a highly abstract interface, and improve website usability in the short term.

Open source and free

Adopts MIT & GPL dual agreement authorization, easily meeting various authorization needs from free products to enterprise products.

Widely compatible

Compatible with all major desktop browsers. Including IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome 1+.

Light and fast

The components are relatively independent and can be loaded on demand to avoid wasting bandwidth and slowing down the opening speed of web pages.

Standard Advanced

Supports WAI-ARIA and provides progressive enhancement through standard XHTML code to ensure accessibility in low-end environments.

Beautiful and changeable

Provides nearly 20 preset themes, and can customize up to 60 configurable style rules, providing 24 background texture choices.

Open and public

From structural planning to code writing, the entire process is open, and everyone can participate in documentation, code, and discussions.

Strong Support

Google provides CDN content delivery network support for publishing code.

Complete Chineseization

The development package has more than 40 language packages including Chinese.

Disadvantages, shortcomings

• 1. The code is not robust enough: it lacks comprehensive test cases, some components have many bugs, and cannot meet the requirements of enterprise-level product development.

• 2. Insufficient architecture planning: lack of coordination of APIs between components and lack of help for cooperative use.

• 3. Fewer controls: Compared with mature products such as Dojo, YUI, and Ext JS, there are fewer available controls and cannot meet the functional requirements of complex interfaces.

jQuery UI download

Download address:

jQuery UI use

Use

download in the web page After completion, you need to introduce at least 3 files

<link>
<script></script>
<script></script>

If you need the corresponding icon function, you need to put the images folder into your project css folder:

For example Figure:

jQuery UI practical example

Date picker

The date picker (Datepicker) is bound to a standard form input field.

HTML

<!--日期-->
<input>

JS

##

//日期控件
$("#data").datepicker({
    //月份可改变
    changeMonth: true,
    //年份可改变
    changeYear: true
});

Drag scrolling

Enable draggable functionality on any DOM element. Move a draggable object by clicking with the mouse and dragging it in the viewport.

CSS

#drag {
   width: 100px;
   height: 100px;
   background: red;
}

HTML

<!--拖动滚动-->
<div></div>

JS

//可拖拽 可拖动滚动
$("#drag").draggable({
    scroll: true
});

Zoom

Enable resizable functionality on any DOM element. Drag the right or bottom border with the mouse to the desired width or height.

HTML Share the previous div#drag

JS

##

//缩放
$("#drag").resizable({
    //有动画效果
    animate: true,
    //阴影效果
    ghost: true
});

Drag Sorting

Enable sortable functionality on any DOM element. By clicking and dragging an element with the mouse to a new position in the list, other items will automatically adjust. By default, each sortable entry shares the

draggable

attribute. HTML

<!--拖动排序-->

    
• 111111111
    
• 2222222222
    
• 33333333333

JS

//拖动排序
$("#sortable").sortable();

Collapse panel

Click the header to expand/collapse to be divided For the content of each logical part, just like tabs. You can optionally set whether to toggle sections on/off on mouseover.

HTML

<!--折叠面板-->
<div>
    <h3>部分 1</h3>
    <p>abitur malesuada.</p>
    <h3>部分 2</h3>
    <p>Sed non urna.</p>
</div>

JS

//折叠面板
$("#accordion").accordion();

对话框窗口

对话框窗口是一个定位于视区中的覆盖层，同时通过一个 iframe 与页面内容分隔开（就像 select 元素）。它由一个标题栏和一个内容区域组成，且可以移动，调整尺寸，默认可通过 'x' 图标关闭。

HTML

<!--对话框-->
<div>
<p>显示本内容,可以移动,点击x可关闭</p>
</div>

JS

//对话框
$("#dialog").dialog();

带有图标的菜单

一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。

CSS

//菜单栏的宽度
.ui-menu { width: 150px; }

HTML

　　//通过添加类名 ui-icon ui-icon-disk调用图标   
• 保存
  
• 放大
  
• 缩小
　　//通过添加类名实现选项不可用状态   
• 打印...
  
•     播放     
        
  • 上一个
        
  • 停止
        
  • 播放
        
  • 下一个
      
    

JS

//菜单栏
$( "#menu" ).menu();

预加载进度条

等待加载过程,并完成进度条。

CSS

.ui-progressbar {
    position: relative;
  }
  .progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
  }

HTML

//进度条初始状态
<div><div>加载...</div></div>

JS

 $(function() {
    var progressbar = $( "#progressbar" ),
      progressLabel = $( ".progress-label" );
 
    progressbar.progressbar({
      value: false,
      change: function() {
        progressLabel.text( progressbar.progressbar( "value" ) + "%" );
      },
      complete: function() {
        progressLabel.text( "完成！" );
      }
    });
 
    function progress() {
      var val = progressbar.progressbar( "value" ) || 0;
 
      progressbar.progressbar( "value", val + 1 );
 
      if ( val <div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><img src="https://img.php.cn/upload/article/000/000/001/853e474eaddc7199d3c5df618b42b689-12.gif" alt="Introduction to jQuery UI and feature introduction"></span></div>

jQuery UI API 文档

• Effects

• Effects Core

• Interactions

• Method Overrides

• Methods

• Selectors

• Theming

• UI Core

• Utilities

• Widgets

The above is the detailed content of Introduction to jQuery UI and feature introduction. For more information, please follow other related articles on the PHP Chinese website!