Ich baue ein JavaScript/jQuery-Plugin, das ein JSON-Array von Objekten nimmt und einen Popover-Listenelement Selektor/Picker generiert. Sie klicken auf ein Element/eine Eingabe auf der Seite und das Popover wie das Bild unten öffnet sich mit Ihren JSON-Listendaten.jQuery-Plugin mit mehreren Instanzen, um Ereignisse auf das aktuelle Element zu wirken
Key Features:
- Suchfilter
- Paging und pro Seite Option
- Kategorien und Registerfeld/DIVs die Listenelemente in verschiedene Bildschirme auf dem organisieren popover
- Wenn Sie auf ein Element klicken, wird dieses Element ausgewählt, indem Sie ein benutzerdefiniertes DOM-Ereignis auslösen kann eingesteckt werden, um den ausgewählten Wert in einem DB zu speichern oder damit zu tun, was immer Sie wollen.
- Makes Listenelemente aus JSON Array von Objekten
- Kategorien aus den gleichen JSON-Daten gezupft werden können und für jede Kategorie
JSON-Datenformat
Gerade jetzt separate Liste Objekte bauen die JSON Array von Objekten sieht wie folgt aus:
var mock_data_types = [{
"type": "first_name",
"name": "First Name1",
"description": "Random generated First Name",
"example": "Jason",
"category": "person"
}, {
"type": "address",
"name": "address2",
"description": "Random generated Last Name",
"example": "Davis",
"category": "address"
}, {
"type": "domain",
"name": "Domain Name3",
"description": "Random generated WWW Domain Name",
"example": "google.com",
"category": "it"
}];
Aktuelle Probleme
1)
Wenn mehrere popover Pflücker auf der Seite, wenn Sie ein Element auswählen aktualisiert er diesen ausgewählten Wert für alle Eingabefelder, die die popover statt nur die aktuelle haben eins öffnen.
Ich glaube, der Code vielleicht muss den Überblick über mehrere Instanzen halten
Ich habe versucht, dies zu tun, sondern halten scheitern. Kann jemand mit diesem Problem hepen?
2)
Die komplette Code-Basis ist Mist und verbessert werden kann, wie ich ein PHP-Entwickler bin und JS lernt immer noch!
Demo JSFiddle
https://jsfiddle.net/jasondavis/9fpc3LLo/
Das Plugin erhält alle Elemente, auf denen das Plugin läuft, als '$ (this)'. Sie sollten die Elemente durchlaufen, und Sie können '.data()' verwenden, um Informationen mit jedem Element zu verknüpfen. – Barmar
Problem 2 sollte auf CodeReview.stackexchange.com angesprochen werden, sobald Sie die grundlegenden Funktionen funktionieren. – Barmar