rince1984
Mitglied
Hallo zusammen,
ich habe Bootstrap Popovers erstellt in dem mehrere Dropdown Listen zur Anpassung von Eingabefeldern sind (Schriftenformatierung des Eingabefeld-Inhalts). Ich habe es soweit hinbekommen, dass die Dropdown-Auswahl aus dem Popover an das Eingabefeld übergeben werden (mit Hilfe von jQuery).
Mein Problem ist, dass ich bei einem erneuten Aufruf des vorher aufgerufen Popovers wieder die Default-Auswahlwerte in den Dropdown-Listen habe. Ich möchte aber, dass die letzte Auswahl ausgewählt ist.
Beispiel:
Ich wähle in meinem Popover eine andere Schriftart und -größe aus und übernehme die Werte in mein Eingabefeld, dass auch entsprechend "umformatiert" wird. Nun möchte ich noch die Schriftfarbe anpassen und öffne das Popover erneut. Nun muss ich zusätzlich zur Schriftfarbe auch wieder die Schriftart und -größe anpassen.
Ich habe bereits versucht mit jQuery der ausgewählten Dropdown-Option ein "Selected" hinzuzufügen. Dies habe ich mit attr() und danach mit prop() versucht, beides scheint aber nicht übertragen zu werden.
Über einen Lösungsvorschlag wäre ich sehr dankbar.
Mein HTML-Code:
Mein jQuery-Code:
https://jsfiddle.net/rince/fygzxbje/
Danke vorab an alle die sich die Zeit nehmen um mir zu helfen.
rince
ich habe Bootstrap Popovers erstellt in dem mehrere Dropdown Listen zur Anpassung von Eingabefeldern sind (Schriftenformatierung des Eingabefeld-Inhalts). Ich habe es soweit hinbekommen, dass die Dropdown-Auswahl aus dem Popover an das Eingabefeld übergeben werden (mit Hilfe von jQuery).
Mein Problem ist, dass ich bei einem erneuten Aufruf des vorher aufgerufen Popovers wieder die Default-Auswahlwerte in den Dropdown-Listen habe. Ich möchte aber, dass die letzte Auswahl ausgewählt ist.
Beispiel:
Ich wähle in meinem Popover eine andere Schriftart und -größe aus und übernehme die Werte in mein Eingabefeld, dass auch entsprechend "umformatiert" wird. Nun möchte ich noch die Schriftfarbe anpassen und öffne das Popover erneut. Nun muss ich zusätzlich zur Schriftfarbe auch wieder die Schriftart und -größe anpassen.
Ich habe bereits versucht mit jQuery der ausgewählten Dropdown-Option ein "Selected" hinzuzufügen. Dies habe ich mit attr() und danach mit prop() versucht, beides scheint aber nicht übertragen zu werden.
Über einen Lösungsvorschlag wäre ich sehr dankbar.
Mein HTML-Code:
HTML:
<!-- Mein Popover Inhalt mit den Dropdown-Listen -->
<div class='hidden' id='div_scoreselector'>
<div>
<div class="row">
<div class="col-md-12">
<div class="row div-scorerange">
<div class="col-md-12">
<div class="form-group">
<span class="glyphicon glyphicon-font"></span> <label class="control-label">Schriftart</label>
<select id='popoverSchriftart' class='arial form-control'>
<option value='Arial' class='arial'>Arial</option>
<option value='Times New Roman' class='times'>Times New Roman</option>
<option value='Comic Sans MS' class='comic'>Comic Sans</option>
</select>
<br />
<span class="glyphicon glyphicon-text-size"></span> <label class="control-label">Schriftgröße</label>
<select id="popoverSchriftgroesse" class="arial form-control">
<option value="12px">9pt</option>
<option value="13px">10pt</option>
<option value="15px">11pt</option>
<option value="16px">12pt</option>
<option value="17px">13pt</option>
<option value="19px">14pt</option>
<option value="21px">15pt</option>
<option value="22px">16pt</option>
<option value="23px">17pt</option>
<option value="24px">18pt</option>
<option value="25px">19pt</option>
<option value="26px">20pt</option>
</select>
<br />
<span class="glyphicon glyphicon-bold"></span> <label class="control-label">Schriftformatierung</label>
<select id="popoverSchriftformatierung" class="arial form-control">
<option value="normal">Normal</option>
<option value="bold">Fett</option>
</select>
<br />
<span class="glyphicon glyphicon-text-color"></span> <label class="control-label">Schriftfarbe</label>
<br /><input type="color" id="popoverSchriftfarbe" />
<br /><br />
<span class="glyphicon glyphicon-align-center"></span> <label class="control-label">Textausrichtung</label>
<select id="popoverTextausrichtung" class="arial form-control">
<option value="left">Links</option>
<option value="center" selected="selected">Mittig</option>
<option value="right">Rechts</option>
</select>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-6 col-md-offset-6">
<button class="btn btn-success ownSave">Übernehmen</button>
<button class="btn btn-danger ownClose">Abbrechen</button>
</div>
</div>
</div>
</div>
</div>
<!-- Mein HTML-Code für die tatsächliche Seite mit den Eingabefeldern -->
<divclass="main-attributes">
<inputtype="text"name="Überschrift"value="Musikrichtungen"class="arial text-container"style="color: orange"/><imgsrc="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png"class="btnTextStil"data-toggle="popover"data-placement="bottom"/>
</div>
<br/>
<divclass="main-attributes">
<inputtype="text"name="Register 1"value="Rock"class="arial text-container"/><imgsrc="http://img1.wikia.nocookie.net/__cb20140129172620/lieblingsbuecher/de/images/e/e8/Stift_-_Vector-Icon.png"class="btnTextStil"data-toggle="popover"data-placement="bottom"/>
</div>
Mein jQuery-Code:
Javascript:
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
content: function(){
var H = $('#div_scoreselector');
return $(H).html();
}
});
});
$('.btnTextStil').on('click', function (e) {
$(this).prev('.text-container').attr('id', 'mainattr');
var ma = $(this).parents('.main-attributes');
$('.popover').not(this).hide();
e.stopPropagation();
});
$('.main-attributes').on('shown.bs.popover', function () {
$('.ownSave').click( function() {
var schriftart = $('.popover #popoverSchriftart option:selected').val();
var schriftgroesse = $('.popover #popoverSchriftgroesse option:selected').val();
var schriftformatierung = $('.popover #popoverSchriftformatierung option:selected').val();
var schriftfarbe = $('.popover #popoverSchriftfarbe').val();
var textausrichtung = $('.popover #popoverTextausrichtung').val();
$('#mainattr').css({
'font-family': schriftart,
'font-size': schriftgroesse,
'font-weight': schriftformatierung,
'color': schriftfarbe,
'text-align': textausrichtung
});
$('.popover #popoverSchriftart option:selected').prop('selected', true);
$('.text-container').removeAttr('id');
$('[data-toggle="popover"]').popover('hide');
});
$('.ownClose').click(function(){
$('.popover').hide();
});
});
https://jsfiddle.net/rince/fygzxbje/
Danke vorab an alle die sich die Zeit nehmen um mir zu helfen.
rince