Einführung in die jQuery-Benutzeroberfläche und Funktionseinführung

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　acle in jQuery UI Egal, ob Sie eine hochgradig interaktive Webanwendung erstellen oder einfach nur eine Datumsauswahl zu einem Formularsteuerelement hinzufügen, jQuery UI ist die perfekte Wahl. Die jQuery-Benutzeroberfläche enthält viele Widgets, die den Status beibehalten, sodass sie sich geringfügig vom typischen Verwendungsmuster für jQuery-Plug-ins unterscheidet. Alle jQuery-UI-Widgets verwenden dasselbe Muster. Wenn Sie also erst einmal gelernt haben, wie man eines verwendet, wissen Sie auch, wie Sie die anderen verwenden.

jQuery-UI-Funktionen

Einfach zu verwenden:

Erbt die benutzerfreundlichen Funktionen von jQuery, bietet eine hochgradig abstrakte Schnittstelle und verbessert kurzfristig die Benutzerfreundlichkeit der Website .

Open Source und kostenlos

Mit der MIT- und GPL-Doppellizenzierung können verschiedene Lizenzanforderungen von kostenlosen Produkten bis hin zu Unternehmensprodukten problemlos erfüllt werden.

Weitgehend kompatibel

Kompatibel mit allen gängigen Desktop-Browsern. Einschließlich IE 6+, Firefox 2+, Safari 3+, Opera 9+, Chrome 1+.

Leicht und schnell

Die Komponenten sind relativ unabhängig und können bei Bedarf geladen werden, um Bandbreitenverschwendung und eine Verlangsamung der Öffnungsgeschwindigkeit von Webseiten zu vermeiden.

Standard Advanced

Unterstützt WAI-ARIA und bietet progressive Erweiterung durch Standard-XHTML-Code, um die Zugänglichkeit in Low-End-Umgebungen sicherzustellen.

Schön und abwechslungsreich

Bietet fast 20 voreingestellte Themen und kann bis zu 60 konfigurierbare Stilregeln anpassen, sodass 24 Hintergrundtexturen zur Auswahl stehen.

Offen und öffentlich

Von der Strukturplanung bis zum Code-Schreiben ist der gesamte Prozess offen und jeder kann an Dokumentation, Code und Diskussionen teilnehmen.

Starker Support

Google bietet CDN-Content-Delivery-Netzwerk-Unterstützung für die Veröffentlichung von Code.

Vollständige chinesische Version

Das Entwicklungspaket verfügt über integrierte mehr als 40 Sprachpakete, darunter auch Chinesisch.

Nachteile und Mängel

1. Der Code ist nicht robust genug: Es fehlen umfassende Testfälle, einige Komponenten weisen viele Fehler auf und können die Anforderungen von Unternehmen nicht erfüllen. Ebene Produktentwicklung.

• 2. Unzureichende Architekturplanung: mangelnde Koordination der APIs zwischen Komponenten und fehlende Hilfe für die kooperative Nutzung.

• 3. Weniger Steuerelemente: Im Vergleich zu ausgereiften Produkten wie Dojo, YUI und Ext JS sind weniger Steuerelemente verfügbar und können komplexe funktionale Anforderungen an die Benutzeroberfläche nicht erfüllen.

• jQuery UI-Download

Download-Adresse:

jQuery UI-Verwendung

Verwendung

Download auf Webseiten Nach Abschluss müssen Sie mindestens 3 Dateien einführen

Wenn Sie die entsprechende Symbolfunktion benötigen, müssen Sie den Bilderordner in den CSS-Ordner Ihres Projekts einfügen:

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

Wie im Bild gezeigt:

jQuery UI-Praxisbeispiel

Datumsauswahl

Die Datumsauswahl (Datepicker) ist an ein Standard-Formulareingabefeld gebunden .

HTML

JS

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

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

Drag-Scrolling

Aktivieren Sie die ziehbare Funktionalität für jedes DOM-Element. Verschieben Sie ein ziehbares Objekt, indem Sie mit der Maus klicken und es im Ansichtsfenster ziehen.

CSS

HTML

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

JS

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

Zoom

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

Aktivieren Sie die Größenänderungsfunktion für jedes DOM-Element. Ziehen Sie den rechten oder unteren Rand mit der Maus auf die gewünschte Breite oder Höhe.

HTML geteilt letztes Div#Drag

JS

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

Drag Sort

Sortierbare Funktionalität für jedes DOM-Element aktivieren. Durch Klicken und Ziehen eines Elements mit der Maus an eine neue Position in der Liste werden andere Elemente automatisch angepasst. Standardmäßig hat jedes sortierbare Element das Attribut

gemeinsam.

HTML

draggable

JS

<!--拖动排序-->

    
• 111111111
    
• 2222222222
    
• 33333333333

Panel reduzieren

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

Klicken Sie auf die Kopfzeile, um Erweitern/Reduzieren Sie Inhalte, die in logische Abschnitte wie Registerkarten unterteilt sind. Sie können optional festlegen, ob Abschnitte beim Mouseover ein-/ausgeschaltet werden sollen.

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="Einführung in die jQuery-Benutzeroberfläche und Funktionseinführung"></span></div>

jQuery UI API 文档

• Effects

• Effects Core

• Interactions

• Method Overrides

• Methods

• Selectors

• Theming

• UI Core

• Utilities

• Widgets

Das obige ist der detaillierte Inhalt vonEinführung in die jQuery-Benutzeroberfläche und Funktionseinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!