Changeset 15769


Ignore:
Timestamp:
Dec 18, 2011, 12:52:02 AM (13 years ago)
Author:
Alexander Trofimov
Message:

Forms - slider

Location:
trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • TabularUnified trunk/inc/js/jquery.webForms.js

    r15725 r15769  
    8888        $("input", this).each(function() { 
    8989 
     90            var onCreateRange = function (event, ui) { 
     91                var eInput = $(this).parent().find('input'); 
     92                var iSliderWidth = eInput.innerWidth() - 100; 
     93                $(this).css('width',  iSliderWidth + 'px').css('top', (eInput.innerHeight() - $(this).outerHeight())/2 + 1 + 'px'); 
     94                eInput.css('padding-right', (iSliderWidth + parseInt($(this).css('margin-right')) + 10) + 'px');                         
     95            }; 
     96 
    9097            // DoubleRange 
    91             if(this.getAttribute("type") == "doublerange") { 
     98            if (this.getAttribute("type") == 'doublerange') { 
    9299 
    93100                var cur = $(this); 
    94101 
    95                 var $slider = $("<div></div>").insertAfter(cur); 
    96  
    97                 $slider.addClass(cur.attr('class')); 
    98  
    99                 cur.css({ position: "absolute", opacity: 0, top: "-3000px", left: "-3000px" }); 
     102                if (cur.hasClass('bx-form-doublerange-processed')) 
     103                    return; 
     104                cur.addClass('bx-form-doublerange-processed'); 
     105 
     106                var $slider = $('<div class="bx-def-margin-right"></div>').insertAfter(cur); 
    100107 
    101108                var iMin = cur.attr("min") ? parseInt(cur.attr("min"), 10) : 0; 
     
    103110                var sRangeDv = cur.attr("range-divider") ? cur.attr("range-divider") : '-'; 
    104111 
    105                 var values = cur.val().split(sRangeDv, 2); // get values 
    106  
    107                 if (typeof(values[0]) != 'undefined' && values[0].length) 
    108                     values[0] = parseInt(values[0]); 
    109                 else 
    110                     values[0] = iMin; 
    111  
    112                 if (typeof(values[1]) != 'undefined' && values[1].length) 
    113                     values[1] = parseInt(values[1]); 
    114                 else 
    115                     values[1] = iMax; 
     112                var funcGetValues = function (e) { 
     113 
     114                    var values = e.val().split(sRangeDv, 2); // get values 
     115 
     116                    if (typeof(values[0]) != 'undefined' && values[0].length) 
     117                        values[0] = parseInt(values[0]); 
     118                    else 
     119                        values[0] = iMin; 
     120 
     121                    if (typeof(values[1]) != 'undefined' && values[1].length) 
     122                        values[1] = parseInt(values[1]); 
     123                    else 
     124                        values[1] = iMax; 
     125 
     126                    return values; 
     127                }; 
     128 
     129                var onChange = function(e, ui) { 
     130                    values = ui.values; 
     131                    cur.val( values[0] + sRangeDv + values[1] ); 
     132                }; 
    116133 
    117134                $slider.slider({ 
     
    120137                    max: iMax, 
    121138                    step: parseInt(cur.attr("step")) | 1, 
    122                     values: values, 
    123  
    124                     change: function(e, ui) { 
    125                         values = ui.values; 
    126                         cur.val( values[0] + sRangeDv + values[1] ); 
    127                     }, 
    128                     slide: function(e, ui) { 
    129                         $(ui.handle).html(ui.value); 
    130                     } 
    131  
    132                 }); 
    133  
    134                 $('.ui-slider-handle', $slider).each(function(i){ 
    135                     $(this).html(values[i]); 
     139                    values: funcGetValues(cur), 
     140                    change: onChange, 
     141                    slide: onChange, 
     142                    create: onCreateRange 
     143                }); 
     144 
     145                cur.bind('change', function () { 
     146                    var values = funcGetValues($(this)); 
     147                    $slider.slider("option", "values", values); 
     148                }); 
     149 
     150            } 
     151 
     152            // Single range or slider 
     153            else if (this.getAttribute("type") == 'slider') { 
     154 
     155                var cur = $(this); 
     156 
     157                if (cur.hasClass('bx-form-range-processed')) 
     158                    return; 
     159                cur.addClass('bx-form-range-processed'); 
     160 
     161                var $slider = $('<div class="bx-def-margin-right"></div>').insertAfter(cur) 
     162 
     163                $slider.css('width', ($slider.parent().innerWidth() - cur.outerWidth() - 50) + 'px'); 
     164 
     165                var iMin = cur.attr("min") ? parseInt(cur.attr("min"), 10) : 0; 
     166                var iMax = cur.attr("max") ? parseInt(cur.attr("max"), 10) : 100; 
     167 
     168                var onChange = function(e, ui) { 
     169                    cur.val( ui.value ); 
     170                }; 
     171 
     172                $slider.slider({ 
     173                    min: iMin, 
     174                    max: iMax, 
     175                    step: parseInt(cur.attr("step")) | 1, 
     176                    value: cur.val(), 
     177                    change: onChange, 
     178                    slide: onChange, 
     179                    create: onCreateRange 
     180                }); 
     181 
     182                cur.bind('change', function () { 
     183                    $slider.slider("option", "value", $(this).val()); 
    136184                }); 
    137185 
     
    140188            // Date picker 
    141189            else if(this.getAttribute("type") == "datepicker") { 
     190 
     191                if ($(this).hasClass('bx-form-datepicker-processed')) 
     192                    return; 
     193                $(this).addClass('bx-form-datepicker-processed'); 
    142194 
    143195                var sYearMin = '1900'; 
     
    163215                }  
    164216            } 
     217 
    165218            // DateTime picker 
    166219            else if(this.getAttribute("type") == "datetime") { 
     220 
     221                if ($(this).hasClass('bx-form-datetime-processed')) 
     222                    return; 
     223                $(this).addClass('bx-form-datetime-processed'); 
     224 
    167225                $(this) 
    168226                .dynDateTime({ 
  • TabularUnified trunk/templates/base/css/forms.css

    r15748 r15769  
    9898/* form inputs */ 
    9999 
    100 .bx-form-input-wrapper-doublerange, 
     100.bx-form-input-wrapper-range, 
     101.bx-form-input-slider, 
     102.bx-form-input-doublerange, 
    101103.bx-form-input-select_multiple, 
    102104.bx-form-input-select, 
     
    140142} 
    141143 
     144.bx-form-input-slider:focus, 
     145.bx-form-input-doublerange:focus, 
    142146.bx-form-input-email:focus, 
    143147.bx-form-input-number:focus, 
     
    178182} 
    179183 
    180 .bx-form-input-wrapper-doublerange > .ui-slider { 
    181     margin:5px 17px 0px 7px; 
    182 } 
    183  
    184 .ui-slider-handle { 
    185     font-size:12px; 
    186     padding:0px 2px 1px 2px; 
     184.bx-form-input-wrapper-slider, 
     185.bx-form-input-wrapper-doublerange { 
     186    position:relative; 
     187} 
     188 
     189.bx-form-input-wrapper-slider .ui-slider, 
     190.bx-form-input-wrapper-doublerange .ui-slider { 
     191    position:absolute; 
     192    top:0px; 
     193    right:0px; 
    187194} 
    188195 
Note: See TracChangeset for help on using the changeset viewer.
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
Fork me on GitHub