Changeset 15769
- Timestamp:
- Dec 18, 2011, 12:52:02 AM (13 years ago)
- Location:
- trunk
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
TabularUnified trunk/inc/js/jquery.webForms.js ¶
r15725 r15769 88 88 $("input", this).each(function() { 89 89 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 90 97 // DoubleRange 91 if (this.getAttribute("type") == "doublerange") {98 if (this.getAttribute("type") == 'doublerange') { 92 99 93 100 var cur = $(this); 94 101 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); 100 107 101 108 var iMin = cur.attr("min") ? parseInt(cur.attr("min"), 10) : 0; … … 103 110 var sRangeDv = cur.attr("range-divider") ? cur.attr("range-divider") : '-'; 104 111 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 }; 116 133 117 134 $slider.slider({ … … 120 137 max: iMax, 121 138 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()); 136 184 }); 137 185 … … 140 188 // Date picker 141 189 else if(this.getAttribute("type") == "datepicker") { 190 191 if ($(this).hasClass('bx-form-datepicker-processed')) 192 return; 193 $(this).addClass('bx-form-datepicker-processed'); 142 194 143 195 var sYearMin = '1900'; … … 163 215 } 164 216 } 217 165 218 // DateTime picker 166 219 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 167 225 $(this) 168 226 .dynDateTime({ -
TabularUnified trunk/templates/base/css/forms.css ¶
r15748 r15769 98 98 /* form inputs */ 99 99 100 .bx-form-input-wrapper-doublerange, 100 .bx-form-input-wrapper-range, 101 .bx-form-input-slider, 102 .bx-form-input-doublerange, 101 103 .bx-form-input-select_multiple, 102 104 .bx-form-input-select, … … 140 142 } 141 143 144 .bx-form-input-slider:focus, 145 .bx-form-input-doublerange:focus, 142 146 .bx-form-input-email:focus, 143 147 .bx-form-input-number:focus, … … 178 182 } 179 183 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; 187 194 } 188 195
Note: See TracChangeset
for help on using the changeset viewer.