Changeset 15769 for trunk/inc

Timestamp:

12/17/11 18:52:02 (5 months ago)

Author:

Alexander Trofimov

Message:

Forms - slider

File:

• trunk/inc/js/jquery.webForms.js (modified) (5 diffs)

trunk/inc/js/jquery.webForms.js

@@ -88 +88 @@
         $("input", this).each(function() {
 
+            var onCreateRange = function (event, ui) {
+                var eInput = $(this).parent().find('input');
+                var iSliderWidth = eInput.innerWidth() - 100;
+                $(this).css('width',  iSliderWidth + 'px').css('top', (eInput.innerHeight() - $(this).outerHeight())/2 + 1 + 'px');
+                eInput.css('padding-right', (iSliderWidth + parseInt($(this).css('margin-right')) + 10) + 'px');                        
+            };
+
             // DoubleRange
-            if(this.getAttribute("type") == "doublerange") {
+            if (this.getAttribute("type") == 'doublerange') {
 
                 var cur = $(this);
 
-                var $slider = $("<div></div>").insertAfter(cur);
-
-                $slider.addClass(cur.attr('class'));
-
-                cur.css({ position: "absolute", opacity: 0, top: "-3000px", left: "-3000px" });
+                if (cur.hasClass('bx-form-doublerange-processed'))
+                    return;
+                cur.addClass('bx-form-doublerange-processed');
+
+                var $slider = $('<div class="bx-def-margin-right"></div>').insertAfter(cur);
 
                 var iMin = cur.attr("min") ? parseInt(cur.attr("min"), 10) : 0;
@@ -103 +110 @@
                 var sRangeDv = cur.attr("range-divider") ? cur.attr("range-divider") : '-';
 
-                var values = cur.val().split(sRangeDv, 2); // get values
-
-                if (typeof(values[0]) != 'undefined' && values[0].length)
-                    values[0] = parseInt(values[0]);
-                else
-                    values[0] = iMin;
-
-                if (typeof(values[1]) != 'undefined' && values[1].length)
-                    values[1] = parseInt(values[1]);
-                else
-                    values[1] = iMax;
+                var funcGetValues = function (e) {
+
+                    var values = e.val().split(sRangeDv, 2); // get values
+
+                    if (typeof(values[0]) != 'undefined' && values[0].length)
+                        values[0] = parseInt(values[0]);
+                    else
+                        values[0] = iMin;
+
+                    if (typeof(values[1]) != 'undefined' && values[1].length)
+                        values[1] = parseInt(values[1]);
+                    else
+                        values[1] = iMax;
+
+                    return values;
+                };
+
+                var onChange = function(e, ui) {
+                    values = ui.values;
+                    cur.val( values[0] + sRangeDv + values[1] );
+                };
 
                 $slider.slider({
@@ -120 +137 @@
                     max: iMax,
                     step: parseInt(cur.attr("step")) | 1,
-                    values: values,
-
-                    change: function(e, ui) {
-                        values = ui.values;
-                        cur.val( values[0] + sRangeDv + values[1] );
-                    },
-                    slide: function(e, ui) {
-                        $(ui.handle).html(ui.value);
-                    }
-
-                });
-
-                $('.ui-slider-handle', $slider).each(function(i){
-                    $(this).html(values[i]);
+                    values: funcGetValues(cur),
+                    change: onChange,
+                    slide: onChange,
+                    create: onCreateRange
+                });
+
+                cur.bind('change', function () {
+                    var values = funcGetValues($(this));
+                    $slider.slider("option", "values", values);
+                });
+
+            }
+
+            // Single range or slider
+            else if (this.getAttribute("type") == 'slider') {
+
+                var cur = $(this);
+
+                if (cur.hasClass('bx-form-range-processed'))
+                    return;
+                cur.addClass('bx-form-range-processed');
+
+                var $slider = $('<div class="bx-def-margin-right"></div>').insertAfter(cur)
+
+                $slider.css('width', ($slider.parent().innerWidth() - cur.outerWidth() - 50) + 'px');
+
+                var iMin = cur.attr("min") ? parseInt(cur.attr("min"), 10) : 0;
+                var iMax = cur.attr("max") ? parseInt(cur.attr("max"), 10) : 100;
+
+                var onChange = function(e, ui) {
+                    cur.val( ui.value );
+                };
+
+                $slider.slider({
+                    min: iMin,
+                    max: iMax,
+                    step: parseInt(cur.attr("step")) | 1,
+                    value: cur.val(),
+                    change: onChange,
+                    slide: onChange,
+                    create: onCreateRange
+                });
+
+                cur.bind('change', function () {
+                    $slider.slider("option", "value", $(this).val());
                 });
 
@@ -140 +188 @@
             // Date picker
             else if(this.getAttribute("type") == "datepicker") {
+
+                if ($(this).hasClass('bx-form-datepicker-processed'))
+                    return;
+                $(this).addClass('bx-form-datepicker-processed');
 
                 var sYearMin = '1900';
@@ -163 +215 @@
                 } 
             }
+
             // DateTime picker
             else if(this.getAttribute("type") == "datetime") {
+
+                if ($(this).hasClass('bx-form-datetime-processed'))
+                    return;
+                $(this).addClass('bx-form-datetime-processed');
+
                 $(this)
                 .dynDateTime({