1

最大のラベルを使用して、jquery モバイル フォームのすべてのラベル タグを調整したいと考えています。ここでは、1 つのフィールドに 1 つのコードサンプルを示します。

... <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 に適切な幅があります ...しかし、フォームは変更されませんか? 私たちの間違いは何ですか？

4

1 に答える 1

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

このプラグインが機能するためには、もう 1 つのプラグインが重要です。ここで見つけることができます。私は第二のプラグイン開発者ではありません。

2 つ目のプラグインは次のとおりです。

// 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;
    }
}
于 2013-05-06T21:30:59.157 に答える