[verworfen - unbrauchbar] Textfield to Slider für mehrere Felder in Profil Kategorie nutzen?
Eingetragen von Herr Lich (109)am 02.04.2012 - 11:30 Uhr in
Hallo zusammen,
da ich gerade die Formulare überarbeite, die bei den Profil Kategorien auszufüllen sind, habe ich bei meiner Suche "textfield to slider" gefunden und nach anfänglichen Problemen (falsche jQuery Versionen usw) auch in mein Modul einbinden können.
Bisher bin ich soweit gekommen, daß ich zuerst einmal generell mittels hook_form_alter ein Formularelement ändern konnte und mir der Slider entsprechend angezeigt wird. Das Ganze habe ich dann erweitern wollen, um für jedes Element der Kategorie einen Slider zu bekommen. Das hat auch bisher geklappt. Doch leider arbeitet der Slider so, daß er die Werte nicht über die ID sondern über die Klasse ändert. Und hier ist das Problem, welches ich bisher noch nicht gelöst bekommen habe: Alle Divs haben die gleiche Klasse und somit werden alle Slider mit EINEM Wert gefüllt und es bewegen sich demnach auch alle Slider synchron, statt einzeln.
Ich hab echt eine Denkblockade, wie ich das nun so hinbekomme, daß eben nicht die Klasse, sondern die ID entscheidend ist. Denn die ID ist schonmal logisch aufgebaut und natürlich unterschiedlich.
Der Code der slider_textfield.js sieht so aus:
$(function() {
$('.slider_callout').hide();
window.calloutVisible = false;
$.each(Drupal.settings.slider_settings, function(elem_id, settings) {
settings.start = function(e, ui) {
$(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
if (settings.callbacks && settings.callbacks.start) {
try {
eval(settings.callbacks.start)(e, ui);
}
catch (err) {
};
};
};
settings.stop = function(e, ui) {
if (window.calloutVisible == false) {
$(this).find('.slider_callout').fadeIn('fast', function() { window.calloutVisible = true;});
$(this).find('.slider_callout').css('left', ui.handle.css('left')).text(Math.round(ui.value));
}
$(this).find('.slider_callout').fadeOut('fast', function() { window.calloutVisible = false; });
$('#' + elem_id).val(ui.value);
if (settings.callbacks && settings.callbacks.stop) {
try {
eval(settings.callbacks.stop)(e, ui);
}
catch (err) {
};
};
};
settings.slide = function(e, ui) {
var slider_marginLeft;
slider_marginLeft = parseInt(settings.width) * ui.value / settings.max;
slider_marginLeft = Math.round(slider_marginLeft);
slider_marginLeft = slider_marginLeft - 10;
slider_calloutMarginLeft = slider_marginLeft - 10;
$('.slider_callout').css("margin-left", slider_calloutMarginLeft);
$('.slider_callout').text(ui.value);
$(settings.handle).css("margin-left",slider_marginLeft);
if (settings.callbacks && settings.callbacks.slide) {
try {
eval(settings.callbacks.slide)(e, ui);
}
catch (err) {
};
};
};
settings.handle = '.slider_handle';
settings.steps = settings.max - settings.min;
var slider_wrapper = $('<div />').addClass('slider_wrapper');
var slider_bar = $('<div />').addClass('slider_bar').attr({'id':'slider_bar_' + elem_id}).appendTo(slider_wrapper);
slider_bar.append(
$('<div />').addClass('left')
).append(
$('<div />').addClass('right')
).append(
$('<div />').addClass('slider_callout')
).append(
$('<div />').addClass('slider_handle')
);
$('#' + elem_id).after(slider_wrapper);
slider_wrapper.siblings('.field-prefix').prependTo(slider_wrapper);
slider_wrapper.siblings('.field-suffix').appendTo(slider_wrapper);
$('.large_label, .small_label').show();
slider_bar.parents('.fieldset-wrapper').addClass('slider');
slider_bar.width(parseInt(settings.width)).slider(settings);
var slider_marginLeft;
slider_marginLeft = parseInt(settings.width) * $('#' + elem_id).val() / settings.max;
slider_marginLeft = Math.round(slider_marginLeft);
slider_marginLeft = slider_marginLeft - 10;
$(settings.handle).css("margin-left",slider_marginLeft);
});
});So lasse ich den Typ für jedes Element ändern:
foreach ($pfields as $pfield) {
$form[$category_field][$pfield]['#type'] = 'slider_textfield';
$form[$category_field][$pfield]['#slider_settings'] = array(
'min' => $field['min'] ? $field['min'] : 0,
'max' => $field['max'] ? $field['max'] : 10,
'width' => $field['widget']['slider_width'] ? $field['widget']['slider_width'] : 400,
);
}Wie gesagt, klappt die Umwandlung in Slider ja perfekt. Nur habe ich eben das Problem, daß alle Slider gleichzeitig reagieren und dementsprechend identische Werte bei den Feldern gespeichert würden.
Sollte jemand ein ähnliches Problem schon gelöst haben oder einen völlig anderen Weg gegangen sein, würde ich gerne erfahren, wie und wo ich was ändern muss.
Oder müsste ich statt eines Moduls eher eine theme Funktion einsetzen, um ans Ziel zu kommen?
Gruß
Rainer
- Anmelden oder Registrieren um Kommentare zu schreiben
Da der Textfield Slider mit
am 05.04.2012 - 11:10 Uhr
Da der Textfield Slider mit jquery leider nicht nach elementID differenzieren kann, musste ich einen anderen Weg finden. Daher habe ich den jquery.ui slider wieder verworfen und bin auf den früher von mir schon verwendeten prototype slider zurück gekommen.
Nach anfänglichen Schwierigkeiten läuft er nun absolut sauber und stellt die entsprechenden Felder genau einer Kategorie als Slider dar. Auch speichern klappt perfekt in der Tabelle profile_values. Ich habe ebenso neben dem Slider noch ein Textfeld abgelegt, welches mir je nach Wert einen (noch festen) Alternativtext anzeigt. Hier werde ich noch im Modul eine Möglichkeit einbinden, diese Anzeige nach Admin-Vorgabe ausgeben zu lassen. Das sollte nicht wirklich problematisch werden, da bei jedem Slider ein kleines Script zur Steuerung mit ausgegeben wird. Hier kann ich über php dann die entsprechenden Arrays definieren.
Vorteil daran ist, daß das Modul dann flexibel auch für andere Bereiche genutzt werden kann und nicht nur spezifisch für meine Seite ein Einzelfall bleibt.
Da es aber nun vollständig abgeändert wurde, beende ich hier das Thema jquery slider für mehrere Felder.
MfG
Rainer