jQuery UIの概要と機能の紹介

零下一度

リリース： 2017-06-26 14:50:10

オリジナル

1626 人が閲覧しました

高度にインタラクティブな Web アプリケーションを作成する場合でも、フォームコントロールに日付ピッカーを追加するだけの場合でも、jQuery UI は最適な選択肢です。 jQuery UI には状態を維持するウィジェットが多数含まれているため、一般的な jQuery プラグインの使用パターンとは少し異なります。すべての jQuery UI ウィジェットは同じパターンを使用するため、1 つのウィジェットの使用方法を学習すれば、他のウィジェットの使用方法もわかります。

jQuery UI の機能

シンプルで使いやすい:

jQuery の使いやすい機能を継承し、高度に抽象化されたインターフェイスを提供し、短期的に Web サイトの使いやすさを向上させます。

オープンソースで無料

MIT と GPL の二重契約ライセンスを使用することで、無料の製品からエンタープライズ製品まで、さまざまなライセンスのニーズに簡単に対応できます。

幅広い互換性

すべての主要なデスクトップブラウザと互換性があります。 IE 6 以降、Firefox 2 以降、Safari 3 以降、Opera 9 以降、Chrome 1 以降を含みます。

軽量で高速

コンポーネントは比較的独立しており、帯域幅の無駄や Web ページを開く速度の低下を避けるためにオンデマンドでロードできます。

高度な標準

WAI-ARIA をサポートし、標準 XHTML コードを通じて段階的な拡張機能を提供して、ローエンド環境でのアクセシビリティを確保します。

美しく変更可能

約 20 のプリセットテーマが提供され、最大 60 の構成可能なスタイルルールをカスタマイズして、24 の背景テクスチャの選択肢を提供します。

オープンかつパブリック

構造計画からコード作成まで、プロセス全体がオープンであり、誰もがドキュメント、コード、ディスカッションに参加できます。

強力なサポート

Google は、コードを公開するための CDN コンテンツ配信ネットワークサポートを提供します。

完全な中国語バージョン

開発パッケージには中国語を含む40以上の言語パッケージが組み込まれています。

欠点と欠点

1. コードは十分に堅牢ではありません: 包括的なテストケースが不足しており、一部のコンポーネントには多くのバグがあり、エンタープライズレベルの製品開発要件を満たすことができません。

2. アーキテクチャ計画が不十分: コンポーネント間の API の調整が不足しており、連携して使用するための支援が不足しています。
3. コントロールが少ない: Dojo、YUI、Ext JS などの成熟した製品と比較すると、使用できるコントロールが少なく、複雑なインターフェイスの機能要件を満たすことができません。
jQuery UIのダウンロード

jQuery UIの使用

Webページで使用

ダウンロード後、少なくとも3つのファイルをインポートする必要があります

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

ログイン後にコピー

対応するアイコン機能が必要な場合は、画像ファイルフォルダーをプロジェクトの CSS フォルダーに追加する必要があります:

図に示すように:

jQuery UI の実践例

Date Picker

Datepicker (Datepicker) は標準フォーム入力フィールドにバインドされています。

HTML

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

ログイン後にコピー

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

ログイン後にコピー

ドラッグスクロール

任意の DOM 要素でドラッグ可能な機能を有効にします。ドラッグ可能なオブジェクトを移動するには、マウスをクリックしてビューポート内でドラッグします。

CSS

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

ログイン後にコピー

HTML

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

ログイン後にコピー

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

ログイン後にコピー

Zoom

任意の DOM 要素でサイズ変更可能な機能を有効にします。右または下の境界線をマウスでドラッグして、希望の幅または高さにします。

HTML 最後の div を共有 #drag

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

ログイン後にコピー

ドラッグ並べ替え

任意の DOM 要素で並べ替え可能な機能を有効にします。マウスで要素をクリックしてリスト内の新しい位置にドラッグすると、他の項目が自動的に調整されます。デフォルトでは、並べ替え可能な項目は

属性を共有します。

HTML

draggable

<!--拖动排序-->

ログイン後にコピー

111111111
2222222222
33333333333

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

ログイン後にコピー

パネルを折りたたむ

ヘッダーをクリックすると、タブと同じように論理的な部分に分割されたコンテンツを展開/折りたたみます。オプションで、マウスオーバー時にセクションのオン/オフを切り替えるかどうかを設定できます。

HTML

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

ログイン後にコピー

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

ログイン後にコピー

对话框窗口

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

HTML

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

ログイン後にコピー

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

ログイン後にコピー

带有图标的菜单

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

CSS

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

ログイン後にコピー

HTML

ログイン後にコピー

保存
放大
缩小
打印...
播放
- 上一个
- 停止
- 播放
- 下一个

//菜单栏
$( "#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>

ログイン後にコピー

 $(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="jQuery UIの概要と機能の紹介"></span></div>

ログイン後にコピー