Introduction à l'interface utilisateur jQuery et introduction aux fonctionnalités

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　acle dans l'interface utilisateur jQuery Que vous créiez une application Web hautement interactive ou que vous ajoutiez simplement un sélecteur de date à un contrôle de formulaire, jQuery UI est un choix parfait. L'interface utilisateur de jQuery contient de nombreux widgets qui conservent l'état. Elle est donc légèrement différente du modèle d'utilisation typique du plug-in jQuery. Tous les widgets jQuery UI utilisent le même modèle, donc une fois que vous avez appris à en utiliser un, vous savez comment utiliser les autres.

Fonctionnalités de jQuery UI

Facile à utiliser :

Hérite des fonctionnalités faciles à utiliser de jQuery, fournit une interface hautement abstraite et améliore la convivialité du site Web à court terme .

Open source et gratuit

Grâce aux licences à double accord MIT et GPL, il peut facilement répondre à divers besoins de licences, des produits gratuits aux produits d'entreprise.

Largement compatible

Compatible avec tous les principaux navigateurs de bureau. Y compris IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome 1+.

Léger et rapide

Les composants sont relativement indépendants et peuvent être chargés à la demande pour éviter de gaspiller de la bande passante et de ralentir la vitesse d'ouverture des pages web.

Standard Advanced

Prend en charge WAI-ARIA et fournit une amélioration progressive via le code XHTML standard pour garantir l'accessibilité dans les environnements bas de gamme.

Beau et varié

Fournit près de 20 thèmes prédéfinis et peut personnaliser jusqu'à 60 règles de style configurables, offrant 24 choix de textures d'arrière-plan.

Ouvert et public

De la planification structurelle à l'écriture du code, l'ensemble du processus est ouvert et tout le monde peut participer à la documentation, au code et aux discussions.

Support solide

Google fournit une prise en charge du réseau de diffusion de contenu CDN pour la publication de code.

Version chinoise complète

Le package de développement intègre plus de 40 packages linguistiques, dont le chinois.

Inconvénients et lacunes

1 Le code n'est pas assez robuste : il manque de cas de test complets, certains composants présentent de nombreux bugs et ne peuvent pas répondre aux exigences de l'entreprise. développement de produits de niveau.

• 2. Planification de l'architecture insuffisante : manque de coordination des API entre les composants et manque d'aide pour une utilisation coopérative.

• 3. Moins de contrôles : par rapport aux produits matures tels que Dojo, YUI et Ext JS, il y a moins de contrôles disponibles et ne peuvent pas répondre aux exigences fonctionnelles d'interface complexes.

• Téléchargement de jQuery UI

Adresse de téléchargement :

Utilisation de jQuery UI

Utilisation

téléchargement dans les pages Web Une fois terminé, vous devez introduire au moins 3 fichiers

Si vous avez besoin de la fonction d'icône correspondante, vous devez mettre le dossier images dans le dossier CSS de votre projet :

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

Comme le montre l'image :

Exemple pratique de jQuery UI

Sélecteur de date

Le sélecteur de date (Datepicker) est lié à un champ de saisie de formulaire standard .

HTML

JS

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

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

Défilement par glisser

Activer la fonctionnalité déplaçable sur n'importe quel élément du DOM. Déplacez un objet déplaçable en cliquant avec la souris et en le faisant glisser dans la fenêtre.

CSS

HTML

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

JS

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

Zoom

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

Activer la fonctionnalité redimensionnable sur n'importe quel élément DOM. Faites glisser la bordure droite ou inférieure avec la souris jusqu'à la largeur ou la hauteur souhaitée.

Dernier div partagé HTML#drag

JS

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

Tri par glisser

Activer la fonctionnalité triable sur n'importe quel élément du DOM. En cliquant et en faisant glisser un élément avec la souris vers une nouvelle position dans la liste, les autres éléments s'ajusteront automatiquement. Par défaut, chaque élément triable partage l'attribut

.

HTML

draggable

JS

<!--拖动排序-->

    
• 111111111
    
• 2222222222
    
• 33333333333

Réduire le panneau

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

Cliquez sur l'en-tête pour développer/réduire le contenu divisé en sections logiques, comme des onglets. Vous pouvez éventuellement définir s'il faut activer/désactiver les sections au survol de la souris.

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 à linterface utilisateur jQuery et introduction aux fonctionnalités"></span></div>

jQuery UI API 文档

• Effects

• Effects Core

• Interactions

• Method Overrides

• Methods

• Selectors

• Theming

• UI Core

• Utilities

• Widgets

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!