jquery ポップアップ レイヤー selector_jquery に基づく boxy ポップアップ レイヤー ダイアログ プラグイン拡張アプリケーション

デザインには人気のjqueryを使用し、同時に拡張効果に優れたboxyポップアッププラグインを選択しました（boxyについては、Zhang Xinxuのブログを参照してください http://www.zhangxinxu.com/ wordpress/?p=318)。以下では、セレクター フレームワークとして boxy を適用する方法を紹介します。

採用サイトを利用したことがある人なら、セレクター（業界、職種、地域を選択する際にクリックすると出てくるやつです）の難しさはご存知かと思います。スタイルのデバッグにあり、主に IE6 を対象としています。ここでは、業界、位置、地域のセレクターを紹介します。ダウンロードしたデモには、これら 3 つのセレクターが含まれています。

業界セレクター: 関連付けなし、呼び出しステートメントは Boxy.industry(value, callback, options)、パラメーター値は選択された値の数値のセット (文字列型、カンマで区切られる)、コールバックはコールバック関数を定義できます。コールバックに渡される値は、業界セレクターで選択された項目の数値のセット (カンマで区切られた文字列タイプ) であり、オプションは boxy プラグインのオプションのパラメーターです。

呼び出し例: 番号 1 と 2 の業界を選択し、セレクターのタイトルを「業界カテゴリ セレクター」として定義します

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

$("#industry").click(function() {
Boxy.industry("1,2", function(val) {
alert("選択しました: " val);
}, { title: "業界カテゴリ セレクター" });

ジョブ セレクター: 2 レベルの接続、呼び出しステートメントは Boxy.job(value, show, callback, options)、パラメーター値は選択された値の数値のセット (文字列型、数値の間) です。区切られており、b で始まるはメジャー ジョブ カテゴリの選択を示し、s で始まるはサブカテゴリの選択を示します)、表示されているパラメーターは表示されているジョブ カテゴリの番号を示します。パラメーター callback は定義可能なコールバック関数であり、callback に渡される値は次のとおりです。位置セレクター。選択された項目の一連の数値 (カンマで区切られた文字列タイプ)、オプションは boxy プラグインのオプションのパラメーターです。
呼び出し例: 番号 1 のジョブ サブカテゴリ、番号 2 のジョブ カテゴリを選択し、セレクターの名前をポジション カテゴリ セレクターとして定義します。

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

$("#job").click(function() {

Boxy.job("s1,b2" , "2", function(val) {
alert("選択しました: " val);
}, { title: "位置カテゴリ セレクター" });




位置セレクター: 3 つのカスケード、呼び出しステートメントは Boxy.area(value, show, callback, options)、パラメーター値は選択された値です 数値セット (文字列型) 、カンマで区切られ、p で始まるのは州の選択を意味し、c で始まるのは都市の選択を意味し、d で始まるは郡の選択を意味します)、表示されるパラメーターは表示される地域の番号を表し、パラメーターのコールバックは定義可能なコールバック関数です。コールバックに渡される値は、領域セレクターで選択された項目の数値セット (文字列タイプ、数値はカンマで区切られます) であり、options は boxy プラグインのオプションのパラメーターです。

呼び出し例: 番号 1 と 2 の郡または地区を選択し、セレクターの名前を作業領域セレクターとして定義します



コードをコピー

コードは次のとおりです: $("#city").click(function() { Boxy.area("d1,c7", "1,724", function (val) {

alert("選択しました: " val); { title: "作業領域セレクター" }); 🎜>

バグがあります:

1. IE6 のチェックボックスの余白設定は歪んでしまいますが、IE6 のチェックボックスの境界線をクリアすることは無効ですが、他のブラウザーや多くのブラウザーでは有効です。スタイルを統一するには、IE6 を無視するしかありません。

2. IE8 環境では、CSS 設定オプション のホバー効果が遅いか、応答しなくなることがあります。この問題は他のブラウザー (IE6 を含む) には存在しません。JS コードによる解決策は次のとおりです。コードホバーはオプションではありません。応答はまだ少し遅いです。 IE8 でなぜこの問題が発生するのか本当にわかりません。詳しい人が教えてください。

3. IE6では長すぎる選択項目の表示領域が足りなくなり、自動的に親タグで折り返されず、選択項目自体で表示テキストが折り返されます。スタイルのエイリアスが発生します。この問題の解決方法がわかりません、誰か教えてください。

4. まだ見つかりません (IE6 での [OK] ボタンのホバー効果について話すかもしれません。これはバグではありませんが、無関係であり、変更するのが面倒です。ただ、ラベルを に変更しますが、私は があまり好きではなく、IE6 で無駄な作業に一日中費やしています。

利点:

1. もちろん美しいです!

2. 3 つのセレクターは、それぞれ 3 つのカスケード関係のセレクターを表しており、デモのデータ ソースとメイン フレームのテキストを直接変更して、他のセレクターに変更できます。

3. まだ改善の余地があります。デモの CSS スタイルを統合して投稿できるのは誰ですか?

セレクターの外枠の角丸効果は PNG 画像を使用して実現されているので、IE6 をそのままにしておきたい場合は、画像をやり直す必要があることを静かに伝えておきます。 、別の一般的に使用される方法 (画像なし、CSS スタイルのみ) を使用することもできます。この方法はボックス型プラグインに書き込まれています (スタイル ファイルも含めてコメントアウトしました)。デモのround-corner.htmlファイルでも紹介されている角丸メソッド さて、ExtendedBoxy.htmlがセレクタのデモファイルです。 Boxy に関する他の 2 つの HTML ファイルは、Zhang Xinxu によって作成されました。Zhang Xinxu のブログ http://www.zhangxinxu.com/php/ には、良いことがたくさんあります。時間があるときにチェックしてください。

デモのダウンロード アドレス: /201011/yuanma/jquery-plugin-ExtendedBoxy.rar