JQM调整标签宽度

Posted 2023-05-09

【中文标题】JQM调整标签宽度

【英文标题】：JQM adjust label width

【发布时间】：2013-04-30 08:35:31

【问题描述】：

我们想调整 jquery 移动表单中的所有标签标签，其中带有最大标签。这里是一个字段的代码示例：

... <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 中，我们有正确的宽度......但形式不会改变？ 我们的错误是什么？

【问题讨论】：

jsfiddle.net/Palestinian/zL6da 它的工作..但是你仍然需要检查标签和输入宽度并调整两者。

【参考方案1】：

你离得很近，但还不够近。你的插件是假设每个标签都有一个单独的宽度，这是不正确的。标签总是有 20% 的宽度，输入有 78% 的宽度，它们之间有 2% 的边距。

工作示例：http://jsfiddle.net/Gajotres/mMmcP/

您更改了插件代码：

$.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;