1

jquerymobileに組み込まれているui-gridを3列のレイアウトに使用しようとしています。

問題は、UIブロックの高さが異なる場合のUIブロック内のUIバーです。3列すべてを一番上の列と同じ高さにしたいと思います。

誰かがこの問題の簡単な解決策を知っていますか？CSSだけで解決したいのですが、管理していませんでした。JSは本当にこの問題の唯一の解決策ですか？

JsFiddle： http: //jsfiddle.net/zHbuC/466/

コード：

<div data-role="page" id="station" class="type-home">
    <div data-role="header"><h1>Header Page 1</h1></div>

    <div data-role="content" data-theme="b">
        <div class="ui-grid-b" style="text-align:center">
            <div class="ui-block-a">
                <div class="ui-bar ui-bar-c">A</div>
            </div>
            <div class="ui-block-b">
                <div class="ui-bar ui-bar-c">B</div>
            </div>
            <div class="ui-block-c">
                <div class="ui-bar ui-bar-c">
                    <p>B with alot of text</p>
                    <p>with lots of lines</p>
                    <p>another line</p>
                </div>
            </div>
        </div>
    </div>

    <div data-role="footer"><h4>Footer</h4></div>
</div>
4

2 に答える 2

8

私の経験では、唯一の「信頼できる」解決策は、単純なjqueryの高さの比較を使用することです。数行しかかかりません。

var tallest = 0;
$('.ui-grid-b > div').each(function() {
    var thisHeight = $(this).height();
    if(thisHeight > tallest) {
        tallest = thisHeight;
    }
});
$('.ui-grid-b .ui-bar').height(tallest);

または、関数として実行します。http：//www.cssnewbie.com/equal-height-columns-with-jquery/を参照してください。

一方、CSSを使用したくない場合は、box-modelを使用したバグのある/信頼性の低い方法があります。参照：http ：//www.css3.info/introducing-the-flexible-box-layout-module/

それ以外の場合は、HTML / CSSハックがいくつかありますが、これらは機能しますが、「醜い」コードを生成します。参照： http： //buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

jQueryの例： http： //jsfiddle.net/zHbuC/468/

そして縮小された例（コンテンツが常ににある場合にのみ機能します.ui-bar）

var tallest = 0;
$('.ui-grid-b .ui-bar').each(function() {
    if($(this).height() > tallest) {tallest = $(this).height();}
}).height(tallest);
于 2012-04-17T12:13:06.093 に答える
1

私は同じ問題に遭遇しました-私の解決策は上記のものよりも少し一般的かもしれません-どのグリッドでも機能するはずです。

http://jsfiddle.net/zHbuC/816/

グリッド内のグリッドに問題がありました-これが私のjsFiddleです

http://jsfiddle.net/48uce/

グリッドのコンテンツを変更すると、高さがサイズ変更されます。

これを実現する私のユーティリティクラスは次のとおりです。少しやり過ぎかもしれません。

var ekJqm = {};

ekJqm.utilities = {
    fixGrids: function (container) {
        $("[class^=ui-block-]").each(function () {
            $(this).removeAttr("style");
            $(">div", this).removeAttr("style");
        });
        var fixBlocks = function (blocks) {
            blocks = $(blocks);
            var heights = [];
            blocks.each(function () {
                if ($.inArray($(this).height(), heights) == -1)
                    heights.push($(this).height());
            });
            if (heights.length == 1)
                return;
            var maxHeight = 0;
            blocks.each(function () {
                if ($(this).height() > maxHeight)
                    maxHeight = $(this).height();
            });
            blocks.each(function () {
                $(this).height(maxHeight);
                var adjust = $(">div", this).outerHeight() - $(">div", this).height();
                $(">div", this).height(maxHeight - adjust);
            });
        };

        $("[class^=ui-grid-]", container).each(function () {
            var maxHeight = 0;
            var blocks = $(">[class^=ui-block-]", this);
            var set = [];
            var tempSet = [];
            blocks.each(function (index) {
                var _class = $(this).attr("class");
                if ($.inArray(_class, tempSet) >= 0) {
                    fixBlocks(set);
                    tempSet = [];
                    set = [];
                }
                set.push(this);
                tempSet.push(_class);
                if (index == blocks.length - 1)
                    fixBlocks(set);
            });
        });
    }
};
于 2013-04-24T12:54:13.467 に答える