1

jQuerymobileのコントロールグループにヘッダーを追加したいと思います。私の希望する出力は、jQuery mobileのテーマローラーページに表示されるものと同じです。その例を以下に示します（http://jquerymobile.com/themeroller/） 。

ここに画像の説明を入力してください

ご覧のとおり、上部にヘッダーがあるコントロールグループがあります。テーマローラーページのDOMを見ると、コントロールグループの入力/ラベルペアの前にリストアイテム要素が追加されています。

マークアップされたリストアイテムをコントロールグループに挿入できますが（JQMが生成するHTMLのように）、デフォルトでは最初のコントロールアイテムの角が丸くなります。背景色が端に行くためほとんど目立たなくなりますが、それでも目立ちます。

ここに画像の説明を入力してください

したがって、理想的には、ヘッダーを追加してjQueryに、想定どおりに表示させる魔法の方法があるかどうかを知りたいと思います。

これが私が試したコードで、上記の2番目の例を生成します。バックボーンとアンダースコアを使用しているため、変数の置換に注意してください。

    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">
            <li data-swatch="a" class="ui-li ui-li-divider ui-btn ui-bar-a ui-corner-top ui-btn-up-undefined" data-role="list-divider" data-form="ui-bar-a">Apprentice/Trainee Role</li>
            <% for ( var i in area_template.roles ) {
                var role = area_template.roles[i];
            %>
                <input name="checkbox_<%= role.id %>" id="checkbox_<%= role.id %>" type="checkbox">
                <label for="checkbox_<%= role.id %>"><%= role.name %></label>
            <% } %>
        </fieldset>
    </div>

編集：あなたの仕事と提案をありがとうJeemusu。まだコーナーが表示されています。フィドルページから生成されたコードとアプリから生成されたコードの違いを貼り付けます。私はそれがJQM1.0.1を使用したフィドルと、JQM1.1.1を使用した私のアプリと関係があるかもしれないと予測することしかできません。1.0.1を後付けしてみました。エラーが多すぎました。

もう一度編集：貼り付けたコードをたくさん削除しました。jsFiddleでjQuery 1.7.2に切り替えることができるので、jQm 1.1.1に切り替えることができます。また、fiddleでコードを実行すると、コーナーが表示されます。現れる。とはいえ、それらはコードに表示されますが、使用されている明るい色のためにほとんど見えません。ただし、2つの異なるライブラリを使用する場合のDOMの違いは間違いなくわかります。おそらくこれは1.1.1のバグを示していますか？

4

1 に答える 1

2

コントロールグループをテーマエディターから削除し、最小限のマークアップまで削除しました。このjsfiddleで結果を見つけることができます。私たちのコードはそれほど違いがないことがわかるので、質問にあなたが持っているコードも含めました。うまくいけば、これはあなたを正しい方向に向けるのに役立つでしょう。

コードを見ると、たとえば次のような不要なマークアップがあります。

<div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="vertical">

上記のコードはを必要としません<div data-role="fieldcontain">。これはjquerymobileによって自動的に構築され、任意のをラップします<fieldset>。

アップデート

非常に明るい色を使用するデフォルトのテーマのため、上記の例では、コントロールグループの最初のアイテムの丸みを帯びた角が表示されないように見えます。唯一のオプションは、cssハックを使用して、.ui-btn-innerクラスをターゲットにしてそれらを削除することです。この更新されたjsfiddleにcssを追加しました。問題のCSSは次のとおりです。

.ui-btn-inner {
    border-top: none !important;  // Use to remove borders all together 
    border-radius: 0 !important;  // Use this to remove the radius  
}

</ p>

于 2012-08-02T03:59:09.960 に答える