Question

如何制作具有固定最大值的jQuery滑块...完全如下：

http://jqueryui.com/demos/slider/#rangemin

我设法做到了一半：

$slider = new ZendX_JQuery_Form_Element_Slider('amount');
$slider->setLabel('Set Amount: ');
$slider->setJQueryParams(array('min' => 0, 'max' => 60, 'value' => 15));

我不知道如何显示该值，因为它有自己的代码：

$(function() {
  $("#amount-slider").slider({
   range: "min",
   value: 15,
   min: 1,
   max: 60,
                        // !!! HOW TO
   slide: function(event, ui) {
    $("#amount").val('$' + ui.value);
   }
  });
  // !!! HOW TO
                $("#amount").val('$' + $("#amount-slider").slider("value"));
});

Answer 1

解决方案

我用jQuerySlider的selectToUISlider.jQuery.js插件解决了我的问题，它会劫持你在Form类中定义的select标签。所以只需打电话：

$('select').selectToUISlider();

真的很优雅的解决方案。

这是链接：

<击> http://www.jquerylabs.com/selecttouislider-plugin.html

http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

Answer 2

JQuery代码添加在ZendX_JQuery_View_Helper_Slider中。将其替换为自定义实现，并使用它而不是常规的ViewHelper。

Answer 3

试试这个

$slider->setJQueryParams(array(
  'min' => 0,
  'max' => 60,
  'value' => 15,
  'slide' => new Zend_Json_Expr('function(event, ui) {
    $("#amount").val('$' + ui.value);
   }')
));

Zend_Form jQuery滑块

3 个答案: