ホームページ > 記事 > ウェブフロントエンド > jquery (データ、ステップ、コード)_jquery に基づいて中国の大学を選択するためのポップアップ ボックス
jquery (データ、ステップ、コード)_jquery に基づいて中国の大学を選択するためのポップアップ ボックス
- WBOYオリジナル
- 2016-05-16 17:51:321142ブラウズ
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 都道府県リストと学校リストをロードする
ポップアップ ボックスが初めて表示されるときは、デフォルトでリストの最初の州が表示されます。この州のリストをすべてロードした後、ユーザーがクリックした後、クリック関数を各項目にバインドする必要があります。選択した地域の大学のリストが更新されます。
地域の大学のリストを更新した後、ユーザーは大学を選択した後に対応する操作を実行することもできます。テキスト ボックスに値を入力し、ページ リダイレクトなど)
コードをコピー
コードは次のとおりです:
function initProvince( ) { //元の州リストをクリアします$('#choose-a-province').html(''); =0;i{ $('#choose-a-province').append(''); }
//県リスト項目のクリックイベントを追加します$('.州項目').bind('クリック ', function(){
var item=$(this);
var 州 = item.attr('州 ID');
var selectedItem = item.parent().find('.choosen');
if(choosenItem)
$(choosenItem).removeClass('choosen');
item.addClass('choosen'); >//大学リストを更新
initSchool (province);
}
);
function initSchool(provinceID)
{
//元の学校リストをクリアします
$('#choose-a-school').html('');
var school = schoolList[provinceID-1].school;
for(i=0;i{
$ ('#choose-a-school').append(' ' school[i].name '< /a>');
}
//大学リスト項目のクリックイベントを追加します
$('.school-item').bind(' click', function(){
var item =$(this);
var school = item.attr('school-id');
//選択した大学のテキスト ボックスの値を更新します
$('#学校名').val (item.text());//ポップアップウィンドウを閉じる
}
); >}
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
var item=$(this);
var 州 = item.attr('州 ID');
var selectedItem = item.parent().find('.choosen');
if(choosenItem)
$(choosenItem).removeClass('choosen');
item.addClass('choosen'); >//大学リストを更新
initSchool (province);
}
);
function initSchool(provinceID)
{
//元の学校リストをクリアします
$('#choose-a-school').html('');
var school = schoolList[provinceID-1].school;
for(i=0;i
$ ('#choose-a-school').append(' ' school[i].name '< /a>');
}
//大学リスト項目のクリックイベントを追加します
$('.school-item').bind(' click', function(){
var item =$(this);
var school = item.attr('school-id');
//選択した大学のテキスト ボックスの値を更新します
$('#学校名').val (item.text());//ポップアップウィンドウを閉じる
}
); >}
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
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。