1

jQuery モバイルに独自の CSS クラスを使用させてデフォルト値を上書きさせたいと考えています。場合によってはスタイルを変更したいだけなので、jQuery CSS クラス (ui-controlgroup など) を変更することはできません。CSS クラスのコンテンツを div の style 属性に入れると、スタイルが適用されますが、この属性を使用したくありません。

「mobileinit」イベントが発生したときにクラスを追加しようとしましたが、うまくいきませんでした。

例を次に示します。私のクラスは「footer-column-left」と呼ばれます:

    <div id="footerMainpage" data-role="footer" data-position="fixed" data-theme="a" class="ui-grid-b">
    <!-- column 1 -->
    <div class="ui-block-a" class="footer-column-left">
        <div data-role="controlgroup" data-type="horizontal">
            <button id="buttonLeft" data-icon="arrow-l" data-iconpos="notext">Move left</button>
        </div>
        <div data-role="controlgroup" data-type="horizontal">
            <button id="buttonChooseTool" data-icon="edit" data-iconpos="notext">Choose tool</button>
            <button id="buttonUndo" data-icon="back" data-iconpos="notext">Undo</button>
            <button id="buttonRedo" data-icon="forward" data-iconpos="notext">Redo</button>
            <button id="buttonSave" data-icon="check" data-iconpos="notext">Save</button>
        </div>
    </div>
    <!-- ... -->
</div>

CSS は次のようになります。

.footer-column-left { display: inline-block !important; text-align:left !important; padding-left: 10px !important; }

よろしくお願いします。

編集：「pageinit」イベントが発生したときにクラスを追加するとうまくいったので、それ以上の助けは必要ありません;-)

4

1 に答える 1

1

これらの2つのことがうまくいきました：

  • 次を使用して「pageinit」イベントが発生したときにcssクラスを追加します。

    $('#footerColumnLeft').addClass('footer-column-left');

  • CSS セレクターで id を使用する:

    #footerColumnLeft { text-align:left; padding-left: 10px; }

于 2013-02-02T16:28:22.190 に答える