pane Object

The pane configuration options.

pane.initial String

The id of the initial mobile View to display.

Example

<div data-role="view">
  <a data-role="button" href="#foo" data-rel="popover">Open PopOver</a>

  <div id="foo" data-role="popover" data-pane='{ "initial": "#view2" }'>
    <div data-role="view" id="view1" data-title="view1">
      View 1
    </div>
    <div data-role="view" id="view2" data-title="view2">
      View 2
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();
</script>

pane.layout String

The id of the default Pane Layout.

Example

<div data-role="view">
  <a data-role="button" href="#foo" data-rel="popover">Open PopOver</a>

  <div id="foo" data-role="popover" data-pane='{ "layout": "popoverLayout" }'>
    <div data-role="view" id="view1" data-title="view1">
      View 1
    </div>
    <div data-role="view" id="view2" data-title="view2">
      View 2
    </div>

    <div data-role="layout" data-id="popoverLayout">
      <header data-role="header">
        <div data-role="navbar">
          <span data-role="view-title"></span>
        </div>
      </header>
      <div data-role="footer">
        <div data-role="tabstrip">
          <a href="#view1">view1</a>
          <a href="#view2">view2</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();
</script>

pane.loading String(default: "Loading...")

The text displayed in the loading popup. Setting this value to false will disable the loading popup.

Example

<div data-role="view">
  <a data-role="button" href="#foo" data-rel="popover">Open PopOver</a>

  <div id="foo" data-role="popover" data-pane='{ "loading": "sample text" }'>
    <div data-role="view" data-show="showLoading">
      View 1
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();

function showLoading(e) {
  var pane = $("#foo").data("kendoMobilePopOver").pane;
  pane.showLoading();

  setTimeout(function() {
    pane.hideLoading();
  }, 3000);
}
</script>

pane.transition String

The default View transition.

Example

<div data-role="view">
  <a data-role="button" href="#foo" data-rel="popover">Open PopOver</a>

  <div id="foo" data-role="popover" data-pane='{ "transition": "slide" }'>
    <div data-role="view" id="view1">
      View 1
    </div>
    <div data-role="view" id="view2">
      View 2
    </div>
  </div>
</div>

<script>
var app = new kendo.mobile.Application();
</script>