jQuery UIの使用経験とskill_jqueryについて

1 jQuery UI
2 私にとってはうまくいきます
2.1 タブ
2.2 アコーディオン
2.2.1 基本的なアコーディオンの使用
2.2.2 複数のタブを開く
2.2.3 アコーディオン埋め込みセット
3 プラグインにテーマを適用する——テーマローラー
3.1 カラースキームを変更する
3.2 アイコンを変更する
4 関連リンク

jQuery UI

グラデーション アニメーション効果を実現するためだけに、JavaScript を学び直して大量のコードを記述する必要がある場合があります。 jQuery が登場するまで、開発者は多くの退屈な js コードから解放され、数行の jQuery コードに置き換えていました。現在、jQuery は間違いなく最も人気のある JavaScript ライブラリの 1 つになっています。
jQuery UI は、jQuery に基づいて開発されたインターフェイス ツールのセットであり、Web ページ上で考えて使用できるほとんどすべてのプラグインとアニメーション特殊効果が含まれており、センスのないプログラマでも使いやすくなっています。芸術の知識があり、コーディングの方法だけを知っていれば、素晴らしいインターフェイスを作成するのにほとんど労力がかかりません。もう 1 つのポイントは、これが無料でオープンソースであり、ユーザーがニーズに応じてカスタマイズしたり、再設計したりできることです。

私にとっては 2 つが効果的です
Tabs プラグインと Accordion プラグインを使用して、プロジェクトで jQuery UI を使用する方法を見てみましょう。他のプラグインの詳しい使用方法のドキュメントとデモはここで学ぶことができますが、それらは英語のみです。
2.1タブ
タブの形式のプラグインは、Web ページやデスクトップ アプリケーションで広く使用されており、コンテンツの一部のメニューまたはタブとして使用できます。

まず、VS2010 で新しい MVC プロジェクトを作成します。jQuery UI を使用するには、まずプロジェクトに jQuery および jQuery UI スクリプト ファイルを含める必要があります。また、関連するページを <script> で参照する必要があります。タグ。 MVC プロジェクトを作成すると、Scripts フォルダーに、システムによって jQuery および jQuery UI スクリプト ファイルが自動的にプロジェクトに組み込まれます (図 1)。 </script>

図 1

注: 図の jquery-1.5.1-vsdoc.js は、VS でコードを記述するときに、プロンプト情報とコメントがインテリジェントに表示されるバージョンです。 ; jquery-1.5.1.js は標準バージョンで、min が付いているものは、クライアントでのダウンロード時間を短縮するために圧縮された合理化されたバージョンです。一般的なページでは簡易バージョンを使用します。プロジェクト フォルダーに jquery-1.5.1-vsdoc.js が含まれている限り、VS は内部のプロンプト情報を自動的に呼び出します。
あとはそれをページに含めるだけです。プロジェクトの作成後、システムは既に Site.Mater ページ内のページに対して jQuery を参照しているため、マスター ページを使用するすべてのページがデフォルトで jQuery を参照することになるため、jQuery UI ファイルをインデックスに追加するだけで済みます。ステートメント:

コードをコピーします コードは次のとおりです:

順ページ プラグインでタブをレンダリングするには、Div を定義し、<script> スクリプト コードでそれを選択し、それに tabs メソッドを適用する必要があります。 <br><BR><div class="codetitle"><span><a style="CURSOR: pointer" data="3334" class="copybut" id="copybut3334" onclick="doCopy('code3334')">コードをコピー<U> コードは次のとおりです: <div class="codebody" id="code3334"><div id="tabs"&gt ; <BR> <BR><script type="text/javascript"> <BR>$(document).ready(function () { <BR>$("#tabs") (); <BR>}) <BR></script>

メインに表示するタブを定義していないため、何も表示されません。 Div、タブを配置する場所を定義しました。ここで、タブ Div に順序なしリストを定義します。リスト項目によって、表示されるタブの数と表示されるタブ名が決まります。

コードをコピー コードは次のとおりです:

• Tabs1 /li>
  
• タブ2


• Tabs3

タブ 1 の内容

> ;

タブ 2

タブ 3

🎜> ここでは、Tabs1、Tabs2、および Tabs3 という名前の 3 つのリスト項目が定義されています。リストの下の 3 つの Div は、上で定義した 3 つのラベルに対応し、各ラベルに表示されるテキストを表示するために使用されます。ページ部分は基本的に完成です。プログラムを実行します:




写真 2

図 0 の効果はこのステップでは表示されず、タブ スタイルは適用されないことに注意してください。理由は 1 つだけあり、それはスタイル シートです。その後、Google で検索したところ、対応するスタイル シートがページに含まれていないことが判明しました。これについては公式のデモでは言及されておらず、ここでのデモでは重要なコード行を省略すべきではないと思います。すべての初心者は、このステップに到達する前に、Google で効果が出ない理由を調べる必要があります。問題が見つかったら、修正するのは簡単です。ページに jQuery UI スタイルシートへの参照を追加します。

写真 3

最終的に完成したコードはおそらく次のようになります。

コードをコピー

コードは次のとおりです:

< ;ul>

Tabs1

タブ 2

タブ 3

> ;

タブ 1

タブ 2 の内容

内容タブ 3 の

プロジェクトは MVC テンプレートを使用して生成されているため、jQuery UI CSS スタイル シートは Content/themes/base フォルダーに配置されています。そうでない場合は、別途ダウンロードしてプロジェクトに配置し、追加する必要があります。ページへ 正しく引用してください。

ここでページを再度更新すると、効果が表示されます。

写真 4

スタイルシートで制御されているので、色を変えたり、自由にカスタマイズできるということです。これは後ほどアプリケーションスタイルで紹介します。

2.2アコーディオン

アコーディオン コントロールについては言うべきことがあります。なぜなら、物事が十分な柔軟性を持たず、拡張が困難であると、ユーザーに多大な不便をもたらすからです。

写真 5

2.2.1 基本的なアコーディオンの使用

まず、Accordion プラグインを適用する方法を見てみましょう。 Tabs1 ページに置きます。タブと同様、適用するのは非常に簡単です。対応する Div を定義するだけで済みます。その後、スクリプト内で行う必要がある作業は 1 文だけです。 jQuery UIがもたらす利便性を体験したことがありますか?

前の tabs-1 Div の

タグとコンテンツを削除し、次のコードに置き換えます。

コードをコピー コードは次のとおりです:

セクション 1

セクション 1

/a>

a href= "#">セクション 3

セクション 3

🎜>

スクリプトコード内でそれを選択し、それにアコーディオンメソッドを適用します。

コードをコピー

コードは次のとおりです: $(document).ready(function () { $("#tabs").tabs();

$("#accordion").accordion();

})



その後、内部の各 タグがクリック可能なタイトルに解析され、 が続きます。 div> このナゲットのコンテンツを配置するために使用されます。最終的な効果は以下の通りです。

写真 6

注意点が2点あります。 1 つ目はスタイルです。すべての jQuery UI は実際に上記のスタイル シートを使用します。これまでにページ内で参照されていない場合、ここでのアコーディオン効果は表示されません。第 2 に、ここでの形式は、 タグとそれに続く

タグの形式に従う必要があります。このようなクロス形式が崩れると、望ましくない結果が生じます。たとえば、 の後に 2 つの

がある場合:

コード

をコピーすると、コードは次のようになります。

セクション 1 h3>

セクション 1.1

1.2

セクション 2 div>

セクション 2

;

当初、これら 2 つの div は最初のセクションでラップされると考えていましたが、実際には、実際の効果は少しとんでもないものになります。

写真 7

ちょっとズルくないですか？したがって、セクション内にレイアウトする必要がある場合は、2 つ以上の Div を配置する必要があります。次に、間違いがないように、これらのコンテンツを div にインストールしてから、section1 に配置する必要があります。実際に 2 つの Div があることを示すには、各 Div に境界線を追加します。

コードをコピー コードは次のとおりです:

セクション 1

セクション 1.1

セクション 1.2

>セクション 2

セクション 3

セクション 3

写真 8

2.2.2 複数のタブを開く実装

jQuery UI Accordion の最大の欠点であり、最も迷惑な機能は、同時に開くことができるタブが 1 つだけであることです。たとえば、Section1 をクリックした場合、他のセクションを閉じる必要があります。複数のタブを同時に開きたいが、別のタブをクリックしたために開いているタブが閉じられたくない場合はどうすればよいでしょうか。残念ながら、このプラグインには対応するオプションがありません。さらにすごいのは、複数のタブを同時に開いたままにしておく必要がある場合は、アコーディオンを使用しないでくださいと、公式デモに明記されていることです。とにかく、私たちはそれを作りたいだけです。開かれるタブは 1 つだけサポートされます。

写真9

まあ、私にはこの Accordion プラグインを書き換えるほどの力はないので、Google で「expander」「multi open accordion」などと検索してみます。確かに、そのようなニーズを持っている友人はまだ多く、優秀な人々もいます。解決策はいくつかありますが、どれも少し複雑です。最後に、各セクションをアコーディオンとして定義すれば十分であることに突然気づきました。アクションで同時に開くことができるのは 1 つのセクションのみです。他のセクションに影響を与えずに各セクションを自由に開閉したい場合は、各セクションをアコーディオンに置き換え、アコーディオン内に 1 つのセクションのみを定義します。

以下の以前のコードを変更し、accordion1、accordion2、および accordion3 の ID を持つ 3 つの div を定義し、対応するコンテンツを追加します。

コードをコピーします。

コードは次のとおりです。

🎜>

セクション 1

セクション 1

セクション 2

セクション 2 div>

セクション 3

:




コードをコピー

コードは次のとおりです:

プログラムを実行すると、3 つのセクションが同時に開いており、閉じることができないことがわかります。これは明らかに私たちが望んでいる結果ではありません。理由は非常に簡単です。上記のアコーディオン プラグインでセクションが 1 つだけ開かれており、各アコーディオンでセクションを 1 つだけ定義する場合、 の後にセクションが 1 つしかないため、このセクションは間違いなく開く必要があります。これを閉じると他のセクションを開くことができなくなるため、閉じたくても閉じることができません。
しかし幸いなことに、アコーディオンの折りたたみを true に設定することで、このセクションだけを折りたたみ可能にして開くことができます。次のようにスクリプトを変更するだけです:

コードをコピーします コードは次のとおりです:

< ;script type=" text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1") .accordion({ 折りたたみ可能 : true });
$("#accordion2").accordion({ 折りたたみ可能: true });
$("#accordion3").accordion({ 折りたたみ可能: true });
})

プログラムを再度実行します。わかりました。すべて予想どおりです。

写真 10

2.2.3 アコーディオンネスト

もう 1 つの問題は、アコーディオンの入れ子です。私もこの機能を最初に実装しようとしたときにいくつかのトラブルに遭遇しました。

たとえば、セクション 1 に別のアコーディオンを配置したいとします。これにサブアコーディオンという名前を付けます。注意する必要があるのは、このサブアコーディオンは、Div「セクション 1 のコンテンツ」に配置する必要があることです。他の形式の配置が適切です。再生しても効果は現れません。 タグと

を Accordion 1 に直接追加すると、Section1 の Accordion1 に埋め込まれた Accordion が正しく解析されると考えている場合、それは間違いです。最終的なコードと効果は次のとおりです。

コードをコピー コードは次のとおりです:

セクション 1

サブアコーション

サブアコーション div>

図 11

少し不完全なのは、Section1 に表示されるスクロールバーです。次に、高さ属性を設定し、その中のサブアコーションを最初は折りたたまれた状態にします。

スクリプト コードを次のように変更します:

コードをコピーしますコードは次のとおりです:

$(document).ready(function () {

$("#tabs").tabs();
$("# accordion1").accordion( { collapsible: true, autoHeight: false });
$("#subaccortion").accordion({ collapsible: true, active:false });
$("#accordion2" ).accordion({ 折りたたみ可能: true, autoHeight: false });
$("#accordion3").accordion({ 折りたたみ可能: true, autoHeight: false });
スクリプト>

図 12

ここから、最初にラベルを折りたたんだ状態にするか開いた状態にするかを設定できることがわかります。もちろん、タイトルをクリックしても折りたたんだり開いたりするアクションが発生しないように、調整を無効にすることもできます。

3 プラグインにテーマを適用する——テーマローラー 3.1 色の変更

これで、jQuery UI を使用してインターフェイスを簡単に作成できるようになりました。しかし、想像してみてください。これほど多くの人が使用していると、インターネット全体が同じになるのでしょうか? ユーザーがブラウザを開くと、どこにいても同じものが表示され、少し混乱するでしょう。また、これらのプラグインを使用する場合は、自分の Web サイトのテーマやトーンなどに合わせて調整する必要があります。

jQuery UI はユーザー定義のスタイルをサポートしており、能力があれば実装コードを変更してより高度なカスタマイズを行うこともできます。

スタイルを変更するという目的を達成するために、対応する CSS ファイルを変更することはできますが、これは公式 Web サイトの テーマ Web サイト にアクセスして必要なテーマをダウンロードすることほど優れたものではありません。必要なテーマをオンラインで編集します。

テーマローラーに入ったら、好きなテーマスタイルを選択してダウンロードします。

写真 13

解凍後、css フォルダーに移動し、jquery-ui-1.8.24.custom.css ファイルとimages フォルダーをプロジェクト内の適切な場所にコピーし、ページ上でそれを正しく参照して、スタイル。どのテーマを使用しても、テーマで使用される画像名は同じで、色が異なるだけです。この例は、MVC テンプレートを使用して生成されたプロジェクトであるため、プロジェクト内の imge フォルダーに既に存在するピクチャと、ダウンロードしたピクチャは部分的に同じ名前になる可能性があります。コピーする際に、置き換えるかどうかを尋ねられるので、[OK] をクリックします。

図 14

図 15

このとき、先ほど書いたスタイルシート参照を顧客スタイルシートへの参照に変更します

コードをコピー コードは次のとおりです:

次にページを更新すると、次のような効果が得られます:

図 16

CSS ファイルは画像フォルダーを呼び出すため、jquery-ui-1.8.24.custom.css と画像フォルダーの相対位置を変更しない、つまりこれらをまとめないことをお勧めします。画像の相対位置を変更する場合、テーマを適切に機能させるには、CSS で画像へのすべての呼び出しパスを変更する必要があります。

3.2 アイコン変更

色だけでなく、jQuery UI テーマには、Web ページ上で選択できる多数のアイコンもプリセットされています。これらのアイコンの色は、ダウンロードしたテーマに対応しており、images フォルダーに含まれています。

図 17

問題は、非常に多くのアイコンの中から必要なものを正確に指定する方法です。たとえば、アコーディオンのタイトルの左側にある三角形のアイコンを直線の尖った形に変更したいとします。

以下は私が提供したちょっとしたヒントです。マウスを目的のアイコンにポイントすると、そのアイコンに対応するツールヒントのテキストが表示されます。

図 18

名前がわかったので、スクリプト コードに移動して変更を加えることができます。

コードをコピー コードは次のとおりです:

最後に、完璧な効果を見てみましょう。

写真19

ここでは、jQuery UI の使用方法の基本を紹介します。もちろん、jQuery UIにはタブとアコーディオンの2つのプラグインが含まれているだけではなく、他のプラグインやエフェクトの使用方法も同様です。詳細な使用方法や設定方法は、公式ドキュメントやデモに記載されています。

追記: jQuery はすでに普及しているので、jQuery UI と組み合わせるとプログラマーの負担は大幅に軽減されます。これらの利便性を享受しながら、私たちは jQuery と UI に貢献してくれた同僚に黙って感謝しなければなりません。同時に、jQuery のプラグインと UI ライブラリを充実させ、拡張する役割も果たす必要があります。

サンプルソースコードのダウンロード:

http://xiazai.jb51.net/201210/yuanma/jQueryUIExample_jb51.rar
関連リンク
jQuery UI 公式 Web サイト

http://jqueryui.com/ テーマ ローラー

http://jqueryui.com/themeroller/ jQuery 学習: Zhang Ziqiu の「ゼロから学ぶ jQuery」 「シリーズ：

http://www.jb51.net/article/24908.htm」