3

jquery mobileのテーマをカスタマイズしてみました。「ui-popup」のドキュメントで、テーマに関して変更できる 2 つのオプションを見つけました。

$.mobile.popup.prototype.options.overlayTheme = "jobstaff-de"; 
$.mobile.popup.prototype.options.theme = "jobstaff-de";

これにより、次の結果が得られます。

<div data-role="popup" id="loginDialog" class="ui-body-jobstaff-de"  data-theme="jobstaff-de" data-overlay-theme="jobstaff-de">...</div>

ここまでは順調ですね。私の質問は、この div-area の内部 html に関するものです。私はこれを見つけました：

<div data-role="content" class="ui-body-c" data-theme="c" role="main">...</div>

ここでテーマが「c」にリセットされるのはなぜですか? 何か他のものを変更する必要がありますか?

助けてくれてありがとう!!

Orma の編集 1 : 次のテーマも変更しました。jquery.js の後、jquery.mobile.js の前にロードされる jquery.mobile.theme.js というファイルにそれらを入れました。

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.mobile.theme.js'></script>
<script type='text/javascript' src='js/jquery.mobile.js'></script>

jquery.mobile.theme.js の内容: (jquery.js と jquery.mobile.js は変更ありません)

$(document).bind('mobileinit', function () {

    $.mobile.page.prototype.options.theme               = "jobstaff-de";
    $.mobile.page.prototype.options.headerTheme         = "jobstaff-de";  
    $.mobile.page.prototype.options.contentTheme        = "jobstaff-de";
    $.mobile.page.prototype.options.footerTheme         = "jobstaff-de";
    $.mobile.page.prototype.options.backBtnTheme        = "jobstaff-de"; 

    // Popups
    $.mobile.popup.prototype.options.overlayTheme       = "jobstaff-de"; 
    $.mobile.popup.prototype.options.theme              = "jobstaff-de"; 

    // listviews
    $.mobile.listview.prototype.options.headerTheme     = "jobstaff-de";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "jobstaff-de";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "jobstaff-de";  // List divider
    $.mobile.listview.prototype.options.splitTheme      = "jobstaff-de";
    $.mobile.listview.prototype.options.countTheme      = "jobstaff-de";
    $.mobile.listview.prototype.options.filterTheme     = "jobstaff-de";

    // selectmenu
    $.mobile.selectmenu.prototype.options.menuPageTheme = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.overlayTheme  = "jobstaff-de"; 
    $.mobile.selectmenu.prototype.options.theme         = "jobstaff-de"; 

    // dialog
    $.mobile.dialog.prototype.options.theme             = "jobstaff-de"; 

    // panel
    $.mobile.panel.prototype.options.theme              = "jobstaff-de"; 

    //input
    $.mobile.textinput.prototype.options.theme          = "jobstaff-de"; 

    // buttons
    $.mobile.button.prototype.options.theme             = "jobstaff-de"; 


});
4

1 に答える 1

1

私はこのようなテーマを変更したことはありません:-)

jobstaff-deテーマを作成して（持っていると思います）、JQMページに手動で設定してみませんか：

<div data-role="page" data-theme="jobstaff-de">
  // all widgets will inherit jobstaff-de
</div>

JQM 1.4 では、この単一のテーマ宣言で、ページ上のすべてのウィジェットにテーマを継承するのに十分であり、再度指定する必要はありません。したがって、デフォルトの IMHO を上書きする必要はありません。

于 2013-09-03T11:17:02.150 に答える