JQM調整標籤寬度

Question

我們想要調整jquery移動表單中的所有標籤標記，並使用來自最大標籤的with。在這裏，人們codesample一個領域：

... <fieldset data-role="fieldcontain"> 
    <label for="fusrName">Benutzername/E-Mail<b class="kontoman-mandatory">*</b></label> 
    <input id="fusrName" name="fusrName" type="text" placeholder="Benutzername/E-Mail" value=""> 
</fieldset>... 

這是jQuery函數：

$.fn.labelWidth = function() { 
    var maxWidth = 0; 
    $('fieldset').each(function() { 
     $(this).find('label').each(function() { 
      var width = $(this).width(); 
      if (width > maxWidth) { 
       maxWidth = width; 
      } 
     }); 
    }); 
    $('fieldset').each(function() { 
     $(this).find('label').each(function() { 
      $(this).css({width:maxWidth}); 
     }); 
    }); 
} 

...這是函數調用：

$(document).on('pageshow',function(event,ui) { 
$('#kontoman-form').labelWidth(); 

如果我們調試： 進入變量maxWith，我們有正確的寬度...但形式dosn't改變？ 我們的錯誤是什麼？

Answer 1

你很接近但不夠接近。假設每個標籤都有一個單獨的寬度並且不正確，您的插件就會生成。標籤總是有20％的寬度，輸入有78％的寬度，它們之間有2％的餘量。

工作例如：

你改變插件代碼：

$.fn.labelWidth = function() { 
    // This will override preset 20% width 
    $('.ui-input-text').style('width', 'auto', 'important'); 

    var maxWidth = 0; 
    var contentWidth = $('.ui-content').width(); 
    $('fieldset').each(function() { 
     $(this).find('label').each(function() { 
      var width = $(this).width(); 
      if (width > maxWidth) { 
       maxWidth = width; 
      } 
     }); 
    }); 

    var finalLabelWidth = Math.ceil((maxWidth/contentWidth)*100); 
    var finalInputWidth = 100 - finalLabelWidth - 2; 

    $('fieldset').each(function() { 
     $(this).find('label').each(function() { 
      $(this).style('width', finalLabelWidth+'%', 'important'); 
      $(this).next().style('width', finalInputWidth+'%', 'important'); 
     });  
    }); 
} 

另外一個插件，重要的是這個插件的工作，可以發現here。我不是第二個插件開發者。

這裏的第二個插件：

// For those who need them (< IE 9), add support for CSS functions 
var isStyleFuncSupported = CSSStyleDeclaration.prototype.getPropertyValue != null; 
if (!isStyleFuncSupported) { 
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) { 
     return this.getAttribute(a); 
    }; 
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) { 
     this.setAttribute(styleName,value); 
     var priority = typeof priority != 'undefined' ? priority : ''; 
     if (priority != '') { 
      // Add priority manually 
      var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*' + RegExp.escape(value) + '(\\s*;)?', 'gmi'); 
      this.cssText = this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';'); 
     } 
    } 
    CSSStyleDeclaration.prototype.removeProperty = function(a) { 
     return this.removeAttribute(a); 
    } 
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) { 
     var rule = new RegExp(RegExp.escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?', 'gmi'); 
     return rule.test(this.cssText) ? 'important' : ''; 
    } 
} 

// Escape regex chars with \ 
RegExp.escape = function(text) { 
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); 
} 

// The style function 
jQuery.fn.style = function(styleName, value, priority) { 
    // DOM node 
    var node = this.get(0); 
    // Ensure we have a DOM node 
    if (typeof node == 'undefined') { 
     return; 
    } 
    // CSSStyleDeclaration 
    var style = this.get(0).style; 
    // Getter/Setter 
    if (typeof styleName != 'undefined') { 
     if (typeof value != 'undefined') { 
      // Set style property 
      var priority = typeof priority != 'undefined' ? priority : ''; 
      style.setProperty(styleName, value, priority); 
     } else { 
      // Get style property 
      return style.getPropertyValue(styleName); 
     } 
    } else { 
     // Get CSSStyleDeclaration 
     return style; 
    } 
}