Chemis
Grünschnabel
Dabei seit: 16.01.2017
Beiträge: 1
 |
|
| jQueryMobile: Durch Button Eingabefeld hinzufügen, welches Link zu einer Unterliste darstellt und du |
     |
Meine Frage:
Hallo alle zusammen 
Ich soll das erste mal eine App gestalten und bin total aufgeschmissen, da ich nie zuvor jQuery benutzt habe.
Die Seite, die ich erstelle, soll zwei Listen untereinander (getrennt durch div-container) beinhalten. Bei beiden sollen Listenpunkte durch Klicken eines "+"-Buttons hinzugefügt werden können. Dieser soll sich jedoch entweder komplett oberhalb der Listenpunkte oder eben komplett unterhalb der Liste befinden.
Zusätzlich soll ein Listenpunkt, sobald er erstellt wurde, ein Link zu einer weiteren Seite darstellen, auf der noch eine eigene Liste erstellt werden kann. Die Listenpunkte sind also quasi alles eigene Listen, auf die durch einen Klick zugegriffen werden kann.
Die einzelnen, selbst erstellten Eingabefelder sollen durch Halten (oder nach links Wischen wie bei iOS) bearbeitet oder gelöscht werden können.
Einige Ansätze hab ich mir schon im Internet angeschaut, aber das ganze so umzusetzen wie ich es mir vorstelle ist für mich dann doch noch etwas zu schwer. Da fehlt noch so Einiges, leider 
Habe jetzt mehrfach versucht ein Designbeispiel hochzuladen, aber leider bekomme ich jedes Mal eine Fehlermeldung. Hoffe ich habe es genau genug beschrieben
Freue mich über jede Hilfe.
Danke für eure Antworten im Voraus!
Meine Ideen:
<body>
<div> <h> Wunschlisten Übersicht <h> </div>
<div class="input_fields_wrap">
<button class="add_field_button">+</button>
<div> <input type="text" name="mytext[]"> </div>
</div>
<script>
$(document).ready(function() {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initial text box count
$(add_button).click(function(){ //on add input button click
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">X</a></div>'); //add input box
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
</body>
|
|
