0

MVC3 アプリケーションに jQuery タブを実装していますが、いずれかのタブのサイズが適切ではありません。つまり、一部のコンテンツはタブ内にありますが、次の奇妙な書式設定はタブ内に部分的にしかありません。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Edit Schedule</a></li>
        ...
    </ul>

    <div id="tabs-1">
        ...
        <div id = "scheduleData">
            @Html.Partial("_partialView", ViewData["data"])
        </div>
    </div>

    ...
</div>

私の部分的なビューは、多くのテーブルをレンダリングします。1 つは頭だけで、残りは jQuery の選択可能なリスト内にネストされています。

<table>
    <thead>
        <tr>
            <td>ID</td>
            ...
        </tr>
    </thead>
</table>

<ol id="selectable>
    @foreach (var obj in Model)
    {
        <li class="ui-widget-content">
            <table>
                <tr>
                    <td>@obj.ID</td>
                    ...
                </tr>
            </table>
        </li>
    }
</ol>

タブのサイズ変更の問題が部分的なビューのためなのか、それとも私の非常に奇妙なフォーマットなのか、あるいはその両方なのか、私にはわかりません。

最初のテーブルのみがタブ内にあり、他のテーブルは、部分ビューがどれほど大きくても小さくても、一貫してタブ内にないことに注意してください。

これは明らかにずさんな解決策であり、最初のテーブルにすべての行を含めるなど、jQuery タブのサイズが正しくなるように、選択可能なリスト内にテーブル行をレンダリングするより良い方法があるかどうか疑問に思っていましたか? （私の知る限り、テーブル内に選択可能なリストをネストできないため、これは機能しません）ご意見をお寄せいただきありがとうございます。

4

1 に答える 1

0

テーブルを各行ではなく選択可能なアイテムにする可能性がありますが、フォーマットの問題のため、代わりに次のソリューションを採用しました。

$(document).ready(function () {
    $("#scheduleTable tr").click(function () {
        var href = $(this).find("a").attr("href");
        if (href) {
            $("#editDialog").dialog({ modal: true });
        }
    });
});

次に、マークアップの各行に編集リンクがあり、Javascriptがそれを監視し、jQueryダイアログボックスを作成します。

<table>
    <thead>
        <th>&nbsp;</th>
        ...
    </thead>

    <tbody>
        @foreach (var obj in Model) 
        {
            <tr>
                <td><a href="#">Edit</a></td>
                ...
            </tr>
        }
    </tbody>
</table>

<div id="editDialog" title="Edit Entry" style="display:none">
    ...
</div>
于 2012-07-03T15:21:34.000 に答える