JQuery Mobile стандартная тема данных - PullRequest
Новая
       33

JQuery Mobile стандартная тема данных

21 голосов
/ 04 февраля 2011

Кто-нибудь знает, как установить стандартную тему данных для jquery-mobile?

Похоже, что необходимо установить тему данных для каждого компонента.

Даже когда вы устанавливаете тему данных для роли данных страницы, она не учитывается загруженными списками и другими компонентами.

Я пропустил какую-то страницу руководства?

Ответы [ 4 ]

30 голосов
/ 16 августа 2011

Как сказал Джоэл, вам нужно перезаписать значения по умолчанию.На данный момент кажется, что другого пути нет.

Взять пример кода Джоэла: 

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Настройте свой custom-scripting.js

Это пример кодас несколькими дополнительными параметрами, которые вы можете настроить: 

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

    // Navigation
    $.mobile.page.prototype.options.backBtnText = "Go back";
    $.mobile.page.prototype.options.addBackBtn      = true;
    $.mobile.page.prototype.options.backBtnTheme    = "d";

    // Page
    $.mobile.page.prototype.options.headerTheme = "a";  // Page header only
    $.mobile.page.prototype.options.contentTheme    = "c";
    $.mobile.page.prototype.options.footerTheme = "a";

    // Listviews
    $.mobile.listview.prototype.options.headerTheme = "a";  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = "c";  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = "d";  // List divider

    $.mobile.listview.prototype.options.splitTheme   = "c";
    $.mobile.listview.prototype.options.countTheme   = "c";
    $.mobile.listview.prototype.options.filterTheme = "c";
    $.mobile.listview.prototype.options.filterPlaceholder = "Filter data...";
});

Также должны быть другие параметры, такие как: 

$.mobile.dialog.prototype.options.theme
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme

Вы можете найти больше настроек здесь: http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

9 голосов
/ 02 августа 2011

Для вложенных представлений списка, для управления темой заголовка вам необходимо переопределить параметр по умолчанию, который устанавливает для темы вложенного заголовка синий цвет.

Чтобы сделать это, просто добавьте следующее между загрузкой jquery и jquery..mobile.js loading.

пример:

Поскольку событие mobileinit запускается сразу после выполнения, вам необходимо привязать обработчик событий перед загрузкой jQuery Mobile.Поэтому мы рекомендуем ссылаться на ваши файлы JavaScript в следующем порядке: 

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Так что в "custom-scripting.js" поместите следующее ... 

$(document).bind("mobileinit", function () {
   $.mobile.listview.prototype.options.headerTheme = "a";
});

Где «a» - это тема, которую вы хотите применить к вложенным заголовкам.

Или вы можете просто переопределить ее в мобильном источнике jquery, поищите «headerTheme», она будет около строки 5020

7 голосов
/ 08 марта 2011

Темы a, b, c, d и e находятся в файле css. Если вы хотите создать собственную тему, вы можете использовать fz, скопировать a и изменить ее на букву своей темы.добавьте data-theme = "z" к вашему элементу 

<body> 
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>
1 голос
/ 04 февраля 2011

Насколько я видел, вы должны установить тему для div страницы, и она будет наследоваться внутри.

...