JqueryUI-環境設定

この章では、JqueryUIライブラリのダウンロードとセットアップについて説明します。また、ディレクトリ構造とその内容についても簡単に学習します。 JqueryUIライブラリは、Webページで2つの方法で使用することができます-

link：/jqueryui/jqueryui_environment_setup＃download_officialwebsite [公式WebサイトからのUIライブラリのダウンロード]
リンク：/jqueryui/jqueryui_environment_setup＃download_cdn [CDNからのUIライブラリのダウンロード]

[download_officialwebsite]#

公式WebサイトからUIライブラリをダウンロードする

あなたがリンクhttps://jqueryui.com/[http://jqueryui.com/]を開くと、JqueryUIライブラリをダウンロードする3つのオプションがあることがわかります-

カスタムダウンロード-ライブラリのカスタマイズバージョンをダウンロードするには、このボタンをクリックします。
安定-このボタンをクリックして、安定した最新バージョンのJqueryUIライブラリを取得します。
レガシー-JqueryUIライブラリの以前のメジャーリリースを取得するには、このボタンをクリックします。

ダウンロードビルダーを使用したカスタムダウンロード

Download Builderを使用すると、必要なライブラリの部分のみを含めるカスタムビルドを作成できます。選択したテーマに応じて、JqueryUIのこの新しいカスタマイズバージョンをダウンロードできます。次の画面が表示されます（同じページが2つの画像に分割されています）-

JqueryUIカスタムダウンロードページ

これは、JqueryUIライブラリの特定のプラグインまたは機能のみが必要な場合に便利です。このバージョンのディレクトリ構造は、次の図に示されています-

JqueryUIカスタムディレクトリ構造ページ

非圧縮ファイルは_development-bundle_ディレクトリにあります。非圧縮ファイルは、開発時またはデバッグ時に最適に使用されます。圧縮ファイルは帯域幅を節約し、本番環境でのパフォーマンスを向上させます。

安定したダウンロード

Stableボタンをクリックすると、ソース、サンプル、および最新バージョンのJqueryUIライブラリのドキュメントを含むZIPファイルが直接表示されます。 ZIPファイルの内容を_jqueryui_ディレクトリに抽出します。

このバージョンには、すべての依存関係を含むすべてのファイル、デモの大規模なコレクション、さらにライブラリの単体テストスイートが含まれています。このバージョンは、開始するのに役立ちます。

レガシーダウンロード

[レガシー]ボタンをクリックすると、JqueryUIライブラリの以前のメジャーリリースのZIPファイルが直接表示されます。このバージョンには、すべての依存関係を含むすべてのファイル、デモの大規模なコレクション、さらにライブラリの単体テストスイートも含まれています。このバージョンは、開始するのに役立ちます。

[download_cdn]#

CDNからUIライブラリをダウンロードする

CDNまたはコンテンツ配信ネットワークは、ユーザーにファイルを提供するように設計されたサーバーのネットワークです。 WebページでCDNリンクを使用すると、ファイルをホストする責任が独自のサーバーから一連の外部サーバーに移ります。これには、Webページへの訪問者が同じCDNからJqueryUIのコピーを既にダウンロードしている場合、再ダウンロードする必要がないという利点もあります。

jQuery Foundation、https://developers.google.com/speed/libraries/devguide [Google]、およびhttps://www.asp.net/ajaxlibrary/cdn。 ashx [Microsoft]はすべて、jQuery UIと同様にjQueryコアをホストするCDNを提供します。

CDNでは、独自のバージョンのjQueryおよびjQuery UIをホストする必要がないため、デモや実験に最適です。

'_このチュートリアルでは、ライブラリのCDNバージョンを使用しています。_

例

ここで、JqueryUIを使用して簡単な例を作成しましょう。 HTMLファイルを作成して、次のコンテンツを<head>タグにコピーしましょう-

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
   rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

上記のコードの詳細は次のとおりです-

最初の行は、CSSを介してjQuery UIテーマ（この場合は_ui-lightness_）を追加します。このCSSはUIをスタイリッシュにします。
2行目は、jQuery UIがjQueryライブラリの上に構築されているため、jQueryライブラリを追加します。 *3行目は、jQuery UIライブラリを追加します。これにより、ページでjQuery UIが有効になります。

それでは<head>タグにコンテンツを追加しましょう-

<script type = "text/javascript">
   $(function () {
      $('#dialogMsg').dialog();
   });
</script>

<body>にこれを追加します-

<body>
   <form id = "form1" runat = "server">
      <div id = "dialogMsg" title = "First JqueryUI Example">
         Hello this is my first JqueryUI example.
      </div>
   </form>
</body>

完全なHTMLコードは次のとおりです。* myfirstexamplel *という名前で保存します

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script type = "text/javascript">
         $(function () {
            $('#dialogMsg').dialog();
         });
      </script>
   </head>

   <body>
      <form id = "form1" runat = "server">
         <div id = "dialogMsg" title = "First JqueryUI Example">
            Hello this is my first JqueryUI example.
         </div>
      </form>
   </body>
</html>

ブラウザで上記のページを開きます。次の画面が生成されます。

JqueryUI Fist Example Demo

Jqueryui-environment-setup

目次