Как добавить / удалить элементы в навигационной панели jQuery Mobile?

Question

В jQuery Mobile, скажем, у меня есть следующая панель навигации:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item2">Item 2</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

Затем я могу просто использовать jQuery для удаления элемента, чтобы он выглядел следующим образом:

<div data-role="navbar">
    <ul>
        <li><a id="item1">Item 1</a></li>
        <li><a id="item3">Item 3</a></li>
    </ul>
</div>

Однако jQuery Mobile по-прежнему отображает его так, как будто есть три вкладки, а в средней там просто ничего нет. Таким образом, вместо того, чтобы располагать каждую вкладку, занимающую половину ширины, каждая из двух оставшихся вкладок просто занимает 1/3 ширины.

Я посмотрел поближе, и jQuery Mobile автоматически добавляет класс к элементу <ul> с именем "ui-grid-b", и если я вручную изменяю его на "ui-grid-a", то он выглядит хорошо, и две вкладки занимают вверх по всей ширине. Однако изменение этих классов вручную кажется слишком хакерским, и я предполагаю, что есть лучший способ сделать это. Есть идеи?

Answer 1

Я не нашел хорошего решения, но, по крайней мере, я нашел менее хакерское.

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

$('#navbar1').hide();
$('#navbar2').show();
$('#page1').page();

Answer 2

Попробуйте:

<script type="text/javascript">
    function addItem() {
        // create the navbar element
        var li = $("<li></li>");
        var a = $("<a></a>");
        var navbar = $("#navbar1");

        a.attr("id", "item4").text("Item 4");
        li.append(a);
        // remove the JQM auto-init classes
        navbar.find("*").andSelf().each(function(){
            $(this).removeClass(function(i, cn){
                var matches = cn.match (/ui-[\w\-]+/g) || [];
                return (matches.join (' '));
            });
            if ($(this).attr("class") == "") {
                $(this).removeAttr("class");
            }
        });

        // destroy the navbar widget object
        navbar.navbar("destroy");

        // append the newly created element
        li.appendTo($("#page1 ul"));

        // re-init the navbar
        navbar.navbar();
        console.log(navbar.data());
    }
</script>

Полагаю, вы уже знаете, как удалить элемент из панели навигации.

Answer 3

Вы можете добавить кнопки в навигационную панель jQuery Mobile, добавив простые ссылки (A), а затем вызвав метод navbar () для самого элемента navbar.

Например: в HTML вы помещаете пустую панель навигациикак это:

  <div data-role="navbar" data-theme="a">
    <ul id="myNavbar"></ul>
  </div>

Чем в JavaScript вы делаете следующее:

// creating new buttons
$("#myNavbar").append('<a href="#" class="ttxButton">button 1</a>');
$("#myNavbar").append('<a href="#" class="ttxButton">button 2</a>');
$("#myNavbar").append('<a href="#" class="ttxButton">button 3</a>');

// calling the navbar method
$("#myNavbar").navbar();

Answer 4

Не совсем рабочий пример, но: http://jsfiddle.net/ZsSHE/10/

<div data-role="page" id="page1"> 
    <div data-role="content"> 
        <div data-role="navbar" id="navbar1">
            <ul>
                <li><a id="item1">Item 1</a></li>
                <li><a id="item2">Item 2</a></li>
                <li><a id="item3">Item 3</a></li>
            </ul>
        </div>
        <br />
        <div data-role="navbar" id="navbar2">
            <ul>
                <li><a id="item4">Item 4</a></li>
                <li><a id="item5">Item 5</a></li>
            </ul>
        </div>
    </div><!-- /content --> 
</div><!-- /page --> 

JS

$('#item3').remove();
$('#page1').page();

Answer 5

Сам по себе метод .navbar, похоже, не работает на jquery mobile 1.4.2. Сначала я должен был выполнить уничтожение, и кажется, что стили применяются повторно.

К вашему сведению, это будет работать до тех пор, пока добавленные кнопки не будут перенесены. Если вы добавите достаточно кнопок для панели навигации, чтобы применить их, применяемый стиль будет не совсем правильным.

Код будет выглядеть как

$('#yournavbarDIV').navbar("destroy");
$('#yournavbarDIV').navbar();

после добавления элементов li.

Answer 6

Вы должны просто использовать $ ('# navbar'). Navbar ('refresh'). #navbar может быть любым идентификатором или ссылкой на элемент.

Answer 7

Обновляет NavBar без воссоздания компонента

function refreshNavbar(el) {
    var ul = el.children("ul"),
        childCount = 0, cls, visibleEl,
        children = ul.children("li"),
        clsList = ["ui-grid-solo","ui-grid-a","ui-grid-b","ui-grid-c","ui-grid-d","ui-grid-duo"],
        clsArr = ["ui-grid-solo","ui-grid-a","ui-grid-b","ui-grid-c","ui-grid-d","ui-grid-duo ui-grid-a"];

    for (var i = 0, j = children.length; i < j; i++) {
        child = $(children[i]);
        if (child.is(":visible")) {
            childCount++;
        }
    }

    cls = clsArr[childCount-1];
    if (childCount == 1) {
        visibleEl = ul.children("li:visible");
        if (!visibleEl.hasClass("ui-block-a")) {
            visibleEl.addClass("ui-block-a");
        }
     } else {
        ul.children("li").removeClass("ui-block-a");
        ul.children("li:first").addClass("ui-block-a");
     }

    //remove existing grid class
    var rx = new RegExp(clsList.join("|"), "gi");
    var oldCls = ul.attr("class").replace(rx, function (matched) {
        return "";
   });

    //set new grid class, preserving existing custom clases
    ul.attr("class", oldCls + " "+ cls);
}

Fiddle

http://jsfiddle.net/tM3KR/

Answer 8

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

На самом деле, он не работает полностью в 1.4.3: вновь созданные вкладки сохраняют активное состояние, когда вы нажимаете на другую вкладку - Матье

При поиске в глубине источника я обнаружил, что navbar делает это:

$navbar.delegate( "a", "vclick", function( /* event */ ) {

Итак, даже если вы уничтожите панель навигации и создадите ее заново, это событие будет запущено дважды, и этонарушит нормальное поведение.Это сработает:

navbar = $("#my-navbar");
navbar.navbar("destroy");
navbar.undelegate();

navbar.html("<ul><li><a href=\"#area1\">First  option</a></li><li><a href=\"#area2\">Second option</a></li></ul>");
navbar.navbar();
$('#my-tabs').tabs('refresh');

Это сводит меня с ума много дней подряд ... Надеюсь, это поможет вам.

Answer 9

У меня была такая же проблема, и это то, что я сделал.

В HTML

<div data-theme="b" data-role="footer" data-position="fixed">
  <div class="maintenance_tabs">
  </div>
</div>

А затем в функции JS я сделал это

var mynavbar = '<div data-role="navbar" data-iconpos="top" class="maintenance_tabs">'
                +'  <ul>'
                +'    <li>'
                +'      <a href="log.html" data-transition="fade" data-theme="b" data-icon="bars">'
                +'        View Log'
                +'      </a>'
                +'    </li>'
                +'    <li>'
                +'      <a href="'+ data.page +'" data-transition="fade" data-theme="b" data-icon="plus">'
                +'        New Entry'
                +'      </a>'
                +'   </li>'
                +'    <li>'
                +'      <a href="" data-transition="fade" data-theme="b" data-icon="back" onclick="return logoutAction();">'
                +'        Logout'
                +'      </a>'
                +'   </li>'
                +'  </ul>'
                +'</div>';
  $(".ui-page-active .maintenance_tabs").empty();
  $(".ui-page-active .maintenance_tabs").append(mynavbar).trigger('create');

Я вызывал .empty () каждый раз, чтобы он не повторял панель навигации снова и снова.Надеюсь, это кому-нибудь поможет.

Спасибо.

Answer 10

HTML

<div id="def"></div>

JavaScript

$("#def").append("<ul id='abc'></ul>");
$("#abc").append('<li><a href="#">111</a></li>');
$("#abc").append('<li><a href="#">222</a></li>');
$("#abc").append('<li><a href="#">333</a></li>');
$("#def").navbar();