Maison > Article > interface Web > Introduction à l'interface utilisateur jQuery et introduction aux fonctionnalités
Introduction à l'interface utilisateur jQuery et introduction aux fonctionnalités
- 零下一度original
- 2017-06-26 14:50:101545parcourir
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 :
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 CSS
HTML#drag {
width: 100px;
height: 100px;
background: red;
}<!--拖动滚动--> <div></div>
//可拖拽 可拖动滚动
$("#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 glisserdraggable
<!--拖动排序-->
- 111111111
- 2222222222
- 33333333333
//拖动排序
$("#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
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!