1

下面是导航栏的定义，它是在多个屏幕中使用的视图模板的一部分：

    <div data-role="layout" data-id="app">
        <header data-role="header">
          <div data-role="navbar">
              <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
              <span data-role="view-title">Title</span>
              <a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
          </div>
        </header>
    </div>

“完成”按钮仅在某些屏幕上需要，因此在主页加载时它会被隐藏：

    $("#btnDone").hide();

隐藏按钮工作正常，但再次显示它不起作用：

    $("#btnDone").show();

按钮不显示。

4

4 回答 4

0

而不是使用$("#btnDone").hide();和$("#btnDone").show();使用：

隐藏按钮：

$("#btnDone").css("visibility", "hidden");

显示按钮：

$("#btnDone").css("visibility", "visible");
于 2013-01-10T21:24:02.143 回答
0

在这种情况下对我有用的方法是在我想要显示/隐藏的按钮上放置一个类，而不是依赖于 id：

<div data-role="layout" data-id="app">
    <header data-role="header">
      <div data-role="navbar">
          <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
          <span data-role="view-title">Title</span>
          <a class="nav-button btnDone" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
      </div>
    </header>
</div>

然后使用该类将其隐藏：

$(".btnDone").hide();

希望这也适用于你。

于 2013-09-04T21:38:02.177 回答
0

萨拉姆，
尝试以下方法： 

 <!--Home-->
    <div id="tabstrip-home"
         data-role="view"
         data-init="app.home"
         data-title="Home">

        <!--Header-->
        <header data-role="header">
          <div data-role="navbar">
              <a class="nav-button" data-align="left" data-role="backbutton">Back</a> 
              <span data-role="view-title">Title</span>
              <a class="nav-button" data-align="right" data-role="button" data-click="doneTapped" id="btnDone">Done</a> 
          </div>
        </header>

        <!--Content-->
        <div class="view-content">
          <h1>Hide / Show Navbar Elements</h1>
            <p>
              <center>
                <a data-align="left" data-role="button" data-click="app.show">Show</a>
              </center>
              <br />
              <center>
                <a data-align="left" data-role="button" data-click="app.hide">Hide</a>
              </center>
            </p>

        </div>
    </div>


在 data-init="app.home" 函数中，您可以找到导航栏，然后是 leftElement 并引用它们，然后您可以控制它，例如： 

var navbar = null;
var left = null;
global.app.home = function (e) {
  navbar = e.sender.header.find('div[data-role="navbar"]').data('kendoMobileNavBar');
    left = navbar.leftElement;
    console.log(left);

};

 global.app.show = function (e) {
  left.show();
};

 global.app.hide = function (e) {
  left.hide();
};

请在此处查看一个工作示例：http: //jsbin.com/EpInoQOq/1/edit
问候

于 2014-01-23T04:54:33.987 回答
0

我处理在不同视图上隐藏和显示后退按钮的方式是使用 2 种不同的布局。这对我的用例很有效，因为我只在 1 页上显示后退按钮：

        <!--Default Layout with Main Menu and no backbutton-->
        <div data-role="layout" data-id="layout">

            <!--Header-->
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>

            <!--Footer-->
            <div data-role="footer">
                <div data-role="tabstrip">
....
                </div>
            </div>
        </div>

        <!--Layout with Back Button-->
        <div data-role="layout" data-id="layoutBackButton">

            <div data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" data-align="left">
                        <!-- data-bind="isVisible: showBackButton" -->
                        <i class="fa fa-chevron-left fa-lg"></i>
                    </a>
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>

我的远程视图使用后退按钮然后指定另一个布局：

<div         data-layout="layoutBackButton"
             data-role="view"
...>
于 2014-02-25T10:58:46.147 回答