So verwenden Sie das Mobile-Select-Area-Plugin

Wie der Name schon sagt, handelt es sich beim Mobile-Select-Area-Plugin um ein Plug-in zur Regionsauswahl auf dem mobilen Endgerät, und ich erkläre Ihnen, wie ich es verwende

1. Vorbereitung

Zunächst müssen Sie die entsprechende CSS+JS-Datei herunterladen zum Plug-in,

Nachdem Sie diese Dinge heruntergeladen haben, ist alles bereit und Sie brauchen nur noch Dongfeng -> um Code zu schreiben. . . . Zunächst einmal handelt es sich um ein Plug-in, das auf dem mobilen Endgerät verwendet wird. Der Betrachtungswinkel muss auf dem mobilen Endgerät gesteuert werden. Andernfalls sieht es im Browser möglicherweise angenehm aus, auf dem mobilen Endgerät jedoch nicht

Dann importieren Sie die heruntergeladenen Dateien der Reihe nach. Ich mache einen Screenshot davon

Einige Freunde haben möglicherweise Fragen dazu, wofür diese dialog.js gedacht ist? Dies ist auch erforderlich, um den Popup-Inhalt zu realisieren, der beim Klicken auf das Textfeld angezeigt wird und Ihnen die Auswahl einer Region ermöglicht.

2 Methode + Wirkung

Einige Einführung in die Plug-in-API, die Einführung der API wird hier; enthält auch GitHub. Die Adresse kann Ressourcen herunterladenStandard:

0||1

0为空,true时默认选中第一项,默认1

Trigger:

触发弹窗的DOM元素 ，可以是input或其他

Wert:

初始值,

Ebene:

int

级别数，默认是3级的

Trennzeichen:

,

id值分隔符

eventName:

tap|click

触发事件名称，默认click,使用zeptojs的可以用tap事件

data:

callback:function(scroller, Text, Wert)

当data为json对象时可以直接解析,此时直接接收数组
当data为string发送ajax请求后返回json,格式如下：

{
    "data": [{
        "id": 1,
        "name": "浙江省",
        "child": [{
            "id": "1",
            "name": "杭州市",
            "child": [{
                "id": 1,
                "name": "滨江区"
            }]
        }]
    }, {
        "id": 2,
        "name": "江苏省",
        "child": [{
            "id": "1",
            "name": "南京",
            "child": [{
                "id": 1,
                "name": "解放区"
            }]
        }]
    }, {
        "id": 3,
        "name": "湖北省"
    }]
}

第一个是容器，第二个是选中后的text值，第三个参数是选中后的id。
并且this指向当前对象。
选中后的回调，默认有填充trigger的value值，以及赋值它后面紧跟着的hidden的value值，以逗号分隔id，空格分隔文字

Ich werde den Front-End-Kerncode einfügen, Sie können ihn grundsätzlich kopieren und verwenden, egal welchen Stil Sie haben Wenn Sie es erstellen möchten, müssen Sie es selbst entwerfen und implementieren. Ich werde es nicht bereitstellen.

Sie sollten den Abschnitt „js“ gesehen haben Ein neues Objekt und dessen Festlegung über die API. Dieser Code von mir steuert die Ausgabeposition über die ID in der Eingabe. Bestätigen Sie die Ausgabeposition der Region, indem Sie den ID-Wert des Triggers festlegen. Die Daten sind die Regionsinformationen, wenn das Popup angezeigt wird Fenster erscheint, Standard: 0 oder 1, was bedeutet, ob die erste Zeile standardmäßig ausgewählt ist, 3: Provinz-Stadt-Bezirk 1: Stadt; 🎜>

<p class="shopaddress spaing">
<i></i>
<input type="text" placeholder="地址：请选择省市区" id="check_area" >
<span id="_check" class="check"><i></i></span>
<script>
var selectArea = new MobileSelectArea();
selectArea.init({trigger:&#39;#check_area&#39;,data:&#39;js/data.json&#39;,default:1,level:3});
</script>
</p>

Das Folgende ist der spezifische Implementierungseffekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Mobile-Select-Area-Plugin. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!