jQueryMobile: Durch Button Eingabefeld hinzufügen, welches Link zu einer Unterliste darstellt und durch halten gelöscht/bearbeitet werden kann

Neue Frage »

Auf diesen Beitrag antworten »
Chemis jQueryMobile: Durch Button Eingabefeld hinzufügen, welches Link zu einer Unterliste darstellt und du

Meine Frage:
Hallo alle zusammen smile

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 großes Grinsen

Habe jetzt mehrfach versucht ein Designbeispiel hochzuladen, aber leider bekomme ich jedes Mal eine Fehlermeldung. Hoffe ich habe es genau genug beschrieben smile

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>
 
 
Neue Frage »
Antworten »


Verwandte Themen

Die Beliebtesten »
Die Größten »
Die Neuesten »