Jquery Slider UI系列,多次使用

时间:2012-12-14 19:16:51

标签: jquery class user-interface slider range

我需要在页面中多次使用函数jquery(UI滑块范围)。 不幸的是,我做不到! 你能救我吗?

我有一个脚本“main.js”如下:

jQuery(function($){
$('.range').each(function(){
   var cls      = $(this).attr('class');  
   var matches  = cls.split(/([a-zA-Z]+)\-([0-9]+)/g);
   var elem     = $(this).parent(); 
   var options  = {};
   var values   = new Array();
   var input    = elem.find('input'); 
   elem.append('<div class="uirange"></div>');

   options.range = true;
   options.orientation = "horizontal";
   options.disabled = false;
   for(i in matches){
       i = i * 1;
       if (matches[i] == 'min') {
           options.min = matches[i+1]*1;
       } 
       if (matches[i] == 'max') {
           options.max = matches[i+1]*1;
       } 
       if (matches[i] == 'prem') {
           options.values[0] = matches[i+1]*1;
       }
       if (matches[i] == 'dern') {
           options.values[1] = matches[i+1]*1;
       } 
       if (matches[i] == 'step') {
           options.step = matches[i+1]*1;
       } 
   }

   options.slide = function(event, ui){
       elem.find('label span').empty().append(ui.values[0] + "€ - " + ui.values[1] + "€");
       input.val(ui.values[0] + "€ - " + ui.values[1] + "€");
   }

   elem.find('.uirange').slider(options); 
   elem.find('label span').empty().append(input.val()); 
   input.hide(); 
});

});

此函数一次调用如下:

            <div class="choix">
            <div class="rubrique">Rubrique 01</div>
            <div class="input">
                <label for="">Valeur : <span></span></label>
                <input type="text" class"range min-0 max-100 prem-10 dern-80 step-10" />
            </div>
        </div>
        <div class="choix">
            <div class="rubrique">Rubrique 02</div>
            <div class="input">
                <label for="">Valeur : <span></span></label>
                <input type="text" class"range prem-1000 dern-10000 step-100" />
            </div>
        </div>
        <div class="choix">
            <div class="rubrique">Rubrique 03</div>
            <div class="input">
                <label for="">Valeur : <span></span></label>
                <input type="text" class"range prem-0 dern-1 step-0.1" />
            </div>
        </div>

0 个答案:

没有答案