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; 
    } 
}