Changeset 15848 for trunk

Timestamp:

01/07/12 23:00:41 (5 months ago)

Author:

Alexander Trofimov

Message:

Form - clear input button

Location:

trunk

Files:

• inc/js/jquery.webForms.js (modified) (4 diffs)
• templates/base/css/forms.css (modified) (2 diffs)

trunk/inc/js/jquery.webForms.js

@@ -11 +11 @@
 
         $(this).addNonWebForms();
-        
+
         // switchers
         $('.bx-switcher-cont', this).each(function() {
@@ -34 +34 @@
 
             eInput.on('enable', function () {
-                if ('checked' != $(this).attr('checked')) {
-                    console.log('onEnable');
+                if ('checked' != $(this).attr('checked'))
                     $(this).attr('checked', 'checked').trigger('change');
-                }
                 if (!eSwitcher.hasClass('on'))
                     eSwitcher.removeClass('off').addClass('on');
@@ -43 +41 @@
 
             eInput.on('disable', function () {
-                if (undefined != $(this).attr('checked')) {
-                    console.log('onDisable');
+                if (undefined != $(this).attr('checked'))
                     $(this).removeAttr('checked').trigger('change');
-                }
                 if (!eSwitcher.hasClass('off'))
                     eSwitcher.removeClass('on').addClass('off');
@@ -253 +249 @@
             }
 
+            // add clear input button
+            var eInput = $(this);
+            var aClearInputClassSelectors = ['.bx-form-input-wrapper-datetime', '.bx-form-input-wrapper-datepicker', '.bx-form-input-wrapper-text', '.bx-form-input-wrapper-password'];
+            for (var i in aClearInputClassSelectors) {
+                var sClassSelector = aClearInputClassSelectors[i];
+
+                var eWrapper = $(this).parents().filter(sClassSelector);
+                if (!eWrapper.length)
+                    continue;
+                if (eWrapper.hasClass('bx-form-input-btn-cross-processed'))
+                    return;
+                eWrapper.addClass('bx-form-input-btn-cross-processed');
+
+                if ('relative' != eWrapper.css('position') && 'absolute' != eWrapper.css('position'))
+                    eWrapper.css('position', 'relative');
+                eWrapper.append('<a href="javascript:void(0);"><div class="bx-form-input-btn-cross"></div></a>');
+                eInput.css('padding-right', parseInt(eInput.css('padding-right')) + 10 + 'px');
+                var eBtnCross = eWrapper.find('.bx-form-input-btn-cross');                
+                var iLeft = eInput.outerWidth() - eBtnCross.outerWidth() - 8;
+                eBtnCross.css('left', iLeft + 'px').on('click', function () {
+                    eInput.val('');
+                    if (!eInput.hasClass('bx-form-input-datetime') && !eInput.hasClass('bx-form-input-datepicker'))
+                        eInput.focus();
+                });
+            }
+
         });
         return this;

trunk/templates/base/css/forms.css

@@ -187 +187 @@
 
 .bx-form-input-datepicker {
-    width:110px;
+    width:120px;
 }
 
 .bx-form-input-datetime {
-    width:190px;
+    width:180px;
 }
 
@@ -354 +354 @@
 }
 
+.bx-form-input-btn-cross {
+    position:absolute;
+    top:11px;
+    left:10px;
+    width:16px;
+    height:16px;
+    
+    background-image:url(../images/icons/cross-script.png);
+}
+
 /* extra features */