0

折りたたみ可能なセットで jquery モバイル ヘッダーの左上隅を切り取りたいと思います。

ここに私のHTMLがあります：

<div data-role="content" id="one" class="ui-content" role="main">
    <div data-role="collapsible-set" data-corners="false">
        <div data-role="collapsible" data-collapsed="false" data-theme="f" data-content-theme="f" class="cornered ui-collapsible-heading">
            <h3>Witness</h3>
            <p>Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. Content for witness tab. </p>
        </div>
        <div data-role="collapsible" data-theme="e" data-content-theme="e">
            <h3>Victim</h3>
            <p>Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. Content for Victim tab. Content for victim tab. </p>
        </div>
        <div data-role="collapsible" data-theme="d" data-content-theme="d">
            <h3>Information</h3>
            <p>25% of Chinese women have experienced domestic violence.</p>
        </div>
    </div>
</div>

そして私のCSS：

.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid #30C2DF;
    border-left: 40px solid transparent;
}

少しカスタムCSSを追加した後、カットオフコーナーを作成できますが、変更を加えるjquery.mobile.cssの場所が見つかりません。divにclass = corneredを追加すると、カットオフコーナーが追加されるだけだからですヘッダーの左側にあり、ヘッダー自体には影響しません。

このアプローチにより、折りたたみ可能なセットのヘッダーの幅も変更され、展開されたときにコンテンツが他のヘッダーの後ろにドロップされました (例の写真を参照)。

ここに画像の説明を入力

4

2 に答える 2

0

私はもともと持っていたものに近い解決策を見つけました。

追加した：

.cornered1 {}

.cornered1 .ui-collapsible-heading
{
    height:0px;
    border-bottom: 40px solid #30C2DF;
    border-left: 40px solid transparent;
}

次に、タブが互いに積み重なって表示されるように、border-left の色を交互に変更しました。

.cornered2 {}

.cornered2 .ui-collapsible-heading
{
    height:0px;
    border-bottom: 40px solid #de1f26;
    border-left: 40px solid #30C2DF;;
}

結果のスクリーンショット:

ここに画像の説明を入力

于 2013-04-25T14:44:12.350 に答える
0

jQuery Mobile は、これらの.ui-corner-*クラスを使用して角を丸くします。あなたが持っている1つのオプションは、doc readyでクラスを削除することです. 例は$("[data-role='collapsible-set']").removeClass("ui-corner-all");、これが機能するかどうか、または質問がある場合はお知らせください:)

于 2013-04-20T06:18:47.623 に答える