jQueryのリアライズの地方連携アドレスピッカー

アドレスピッカー

jqueryのアドレスセレクタは、非常にシンプルな使用します。A jQueryのは、ちょうどそれを試して、CSSやJSファイルが唯一の8キロバイトあり、中国の地域を選ぶためのプラグイン。

プロジェクトへのフォルダの下に三つのファイルdistのフォルダ（CSSやJSファイルの相対位置を変更しないように注意してください）

HTMLで導入されたJSファイル

    <スクリプトSRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"タイプ= "テキスト/ javascriptの"> </ SCRIPT>   

   <スクリプトSRC = "JS /アドレスピッカー。 JS」タイプ= "テキスト/ javascriptの"> </ SCRIPT>

私は、ページ要素は、私たちはどんな要素となることができる要素のidが渡されるポップアップ・パネルのアドレス表示したい（例えばDIV /スパン/ボタンなどを...など）

以下の例のスパンで：

    <スパンID = "address_picker_text">セレクトアドレス</ span>の

道を合理化

 VAR addressPicker1は新しいaddressPicker（ "address_picker_textを"）=; //デフォルトディスプレイ3リンケージ

カスタムパラメトリック

addressPicker1新しい新しいaddressPickerは= VAR（{ 
        上記IDの上：「address_picker_text」、//ページ要素ここで表示したい
        レベル：3、//は、いくつかのレベルのリンケージ、デフォルトの3を設定するには、1-5サポートすることができます
        "、[「地方」：levelDescを都市「」郡「」郷「」コミュニティ『表示テキスト、左のようにデフォルト表示へ] //すべてのレベルの相互作用のタイトル
        インデックス：』 996」、Zインデックスの//フローティングパネル、デフォルト996`` 
        セパレータ：「/」、//など`四川/成都/ Wuhou`のデフォルトの` / `と、選択したテキスト値の区切りを返す
        isInitClick：trueに、//かどうかの要素のidのクリックイベントに自動的にバインド、デフォルトtrue`を` 
        isWithMouse：falseを、マウスに追従するかどうか//フローティングパネルディスプレイ座標（代わりの要素IDの座標に従って）false`のデフォルト」をクリックする
        offsetX：0、// x座標フローティングパネル、default`をオフセット0 '
        offsetY：0、//フローティングパネルのy座標オフセットを、デフォルトの'0' 
        emptyText：「データなし」、//表示テキストデータが空で、デフォルトの『いいえデータ』
        色：「＃56b4f8」、//テーマカラー、デフォルト56b4f8＃
        のfontSize： '14px'、//フォントサイズ、デフォルト14px 
        のisAsync：偽、//非同期ロード・データ、デフォルトはfalseかどうか、セットtrueの場合、その後、asyncUrlが通過します
        asyncUrlを： ""、//非同期ロードのURL 、データ無効データ
        btnConfig：[]、後述するようにフォーマット//カスタムボタン・パネル・セットを以下に示します。デフォルトでは合格しない
        データを：「」//┌──未指定のisAsync時間をデータ対象に、1回の負荷は、すべてのデータが
                                                      //├──、合格しません
    }）; //└──着信JSONファイルパス（データタイプ文字列）、またはデータ自体（データ型オブジェクト）をサポート

イベントメソッド

ショー（）表示パネルの
非表示（）を隠すパネル
リロードアドレスデータにrefreshdataを（データ）
ON（タイプ、関数の）バインドアドレス選択パネルイベント
ノードgetCurrentObjectは（）現在のクリックデータを取得します
getTotalValueAsText（）は、すべてのノード選択したテキスト文字列を取得します。
getTotalValueAsArray（）すべての選択されたノードのアレイ構造を取得
clearSelectedData（）を選択したすべての値をクリア
setSelectedData（ARR）セット値が選択されている
以下は、いくつかのコードの例である：
addressPicker1.show（）; //表示パネル
addressPicker1.hide（）; //皮パネル
addressPicker1.on（ "クリック"、機能（）{ 
    //ビジネスロジックあなたは... DOたいwhaterver 
    はconsole.log（addressPicker1.getCurrentObject（））; // {コード：1101、テキスト： "都市エリア"、レベル： } 2 
    にconsole.log（addressPicker1.getTotalValueAsText（））; //北京/市区
    console.log（addressPicker1.getTotalValueAsArray（））; // {コード：[ '11'、 '1101']、テキスト： ' 北京'、 '市街地']} 
    $（ '＃1 address_picker_text'）テキスト（。 addressPicker1.getTotalValueAsText（））; 
}）;
 
//リロードアドレスデータ
VAR NEW_DATA = [{名： '名1'、コード： '110' 、子供：[{名： ' 名前息子1'、コード'1101'}]}、
    {名： '名前2'、コード： '111'}]; 
address_picker.refreshData（NEW_DATA）; 
address_picker.show（）; 

//選択された値に設定
address_picker.setSelectedData（[11,1101,110105を]）;ここで、完全なパスを通過すること//注意
$（「位address_picker_text "）、テキスト（address_picker.getTotalValueAsText（））;. 

//明確には選択したすべての
address_picker.clearSelectedData（）; 
$（" ＃地域を選択address_picker_text "）"）、テキスト（ "。 ;

https://github.com/huchuanfu/address-picker

ダウンロード

https://files.cnblogs.com/files/mqingqing123/address-picker-master.zip

jQueryのリアライズの地方連携アドレスピッカー

おすすめ