Как динамически установить «сжатые данные» и «тема данных» динамически в jQuery Mobile? - PullRequest
Новая
       0

Как динамически установить «сжатые данные» и «тема данных» динамически в jQuery Mobile?

3 голосов
/ 08 марта 2012

У меня проблема с динамической настройкой «data-theme» и «data-collap» во время выполнения, я использовал: 

$(selector).attr('data-collapsed',false)

и 

$(selector).attr('data-theme',b)

но это не работает, как решить эту проблему с помощью jQuery или javascript?

Ответы [ 5 ]

5 голосов
/ 08 марта 2012

Вы можете сделать с событием pagebeforecreate

Обратите внимание, что, связавшись с pagebeforecreate, вы можете манипулировать разметкой до того, как стандартные виджеты jQuery Mobile будут автоматически инициализированы. За Например, скажем, вы хотите добавить атрибуты данных через JavaScript вместо в источнике HTML это событие, которое вы будете использовать.

Пример:

JS 

$('#home').live('pagebeforecreate',function(event) {
    var col = $('#collapseMe');

    // Alternative settings
    //col.attr('data-collapsed','false');
    //col.attr('data-theme','b');

    col.data('collapsed',false);
    col.data('theme','b');
});

HTML 

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Demos and Documentation</title>
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />

    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible" data-theme="a" data-content-theme="a" id="collapseMe">
           <h3>Header swatch A</h3>
           <p>I'm the collapsible content with a themed content block set to "A".</p>
        </div>
    </div>
</div>
</body>
</html>
​
3 голосов
/ 06 января 2014

Вы можете использовать, 

$(".selector").collapsible( "option", 'collapsed',false );

или 

$(".selector").collapsible({ collapsed: false });
2 голосов
/ 08 марта 2012

Вы действительно не можете просто изменить атрибут data- * и ожидать, что JQM перезапустит вашу страницу.По большей части «обновление» используется, когда вы добавляете новую разметку (например, добавление элементов списка) и хотите, чтобы JQM улучшил эти новые элементы.Большинство виджетов элементов формы имеют метод, подобный .checkboxradio (), для обновления расширенной разметки из базовых собственных элементов управления.То есть, если вы измените выбранную радиокнопку программным способом, вам нужно вызвать .checkboxradio ('refresh'), чтобы обновить улучшенную версию.

Кстати: вам действительно нужно научиться использовать jsfiddle.net, чтобылюди могут увидеть, что вы пытались.Отвечая "это не работает!"не помогает, так как мы не можем определить, правильно ли вы применили решение или какая-то разметка вызывает проблемы.Вы должны создать простейшую разметку и JavaScript, чтобы определить вашу проблему.Это поможет всем безмерно помочь вам.

Во всяком случае, я создал образец для программного свертывания / развертывания свертывания.Как вы можете сказать, это просто вопрос запуска события развернуть / свернуть на складной.JQM не предоставляет способ выяснить, свернут ли он или нет, поэтому вы должны также посмотреть, существует ли определенный класс.

У меня есть пример здесь: http://jsfiddle.net/kiliman/pEWJz/

$('#page').bind('pageinit', function(e, data) {
    // initialize page
    var $page = $(this);
    $('#toggle-collapsible').click(function() {
        var $collapsible = $('#collapsible'),
            isCollapsed = $collapsible.find('.ui-collapsible-heading-collapsed').length > 0;

        $collapsible.trigger(isCollapsed ? 'expand' : 'collapse');
    });
});

В JQM вы заметите, что иногда вам нужно будет знать, как выглядит расширенная разметка, и манипулировать этим.

Например, в настоящее время нет способа динамически изменить тему после загрузки страницы.усиливается.Вам в основном придется пойти и заменить все классы, чтобы использовать правильную тему.Например, измените .ui-body-c на .ui-body-e.

В этом ответе есть отличный пример, показывающий, как изменить темы для различных элементов.

динамическое изменение цветового образца jquery

1 голос
/ 02 июня 2012

Вот краткий фрагмент кода, иллюстрирующий, как это можно сделать: 

$('#collapseMe').trigger('collapse');
1 голос
/ 08 марта 2012

используйте это, например: 

$(selector).attr('data-theme','b').trigger('create');

http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-scripting.html

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

Нет похожих вопросов

...