jquery (データ、ステップ、コード)_jquery に基づいて中国の大学を選択するためのポップアップボックス-jsチュートリアル-php.cn

1. データ には全国の合計 3049 の大学が含まれています。これは Renren からコピーされたものです (学習および交流のみを目的としており、商用プロジェクトには使用しないでください)。学校情報が保存されます。形式は次のとおりです:

コードをコピーします コードは次のとおりです: var schoolList=[ { "id":1, //県 ID "school": [ { "id": 1001, //学校 ID "name": "u6e05u534eu5927u5b66" // 学校名 } /.... ], //この州の学校 "name": "u5317u4eac" }, //... ]; 2. 手順 2.1 ポップアップフレームの構造とポップアップメソッド Frame は iframe と div の 2 つの形式に分かれています。この例では、ポップアップ フレームとして div を使用することを選択します。ポップアップ フレームの構造は次のとおりです。 コードをコピー コードは次のとおりです。 ;div id="地域を選択"> ;div id="choose-box-bottom">

ユーザーが時間をトリガーした後、ポップアップ ボックスは最初は非表示になります (表示:なし)。ポップアップ ボックスを開くと、ポップアップ ボックスがページの中央に表示されます。中央揃え効果を実現するには、次のコードを使用します:

Copy code

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

function makeCenter() { $('#choose-box-wrapper').css( "display","block"); $('#choose-box-wrapper').css("position","absolute"); $('#choose-box-wrapper'); css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) $(window).scrollTop() ) "px"); $('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose- box-wrapper').outerWidth()) / 2) $(window).scrollLeft()) "px"); } 2.2 都道府県リストと学校リストをロードする ポップアップ ボックスが初めて表示されるときは、デフォルトでリストの最初の州が表示されます。この州のリストをすべてロードした後、ユーザーがクリックした後、クリック関数を各項目にバインドする必要があります。選択した地域の大学のリストが更新されます。 地域の大学のリストを更新した後、ユーザーは大学を選択した後に対応する操作を実行することもできます。テキスト ボックスに値を入力し、ページ リダイレクトなど)

コードをコピー

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

2.3 ポップアップ ウィンドウと非表示ウィンドウ この例では、ユーザーが学校の入力を必要とするテキスト ボックスをクリックすると、ポップアップ ボックスがポップアップ表示されます。ページには、ポップアップ ボックスを閉じるための閉じるボタンが含まれています。

コードをコピーします。は次のとおりです: //ポップアップウィンドウ function Pop(){ //ウィンドウを中央に配置します makeCenter() //州リストを初期化します initProvince(); ; //デフォルトでは、選択したスタイルを最初の州に追加します $('[province-id="1"]').addClass('choosen'); //大学を初期化します。 list initSchool(1); } //ウィンドウを非表示 function Hide() { $('#choose-box-wrapper').css("display "," none"); } 3. デモとダウンロード http://demo.jb51.net/js/2012/jquery_school/ ダウンロード: jquery_school.rar

jquery (データ、ステップ、コード)_jquery に基づいて中国の大学を選択するためのポップアップ ボックス

jquery (データ、ステップ、コード)_jquery に基づいて中国の大学を選択するためのポップアップボックス