Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>KendoUI Test Page</title>
    <link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" />
  
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
</head>
<body>
    <div id="foo" data-role="view" data-layout="default" data-title="foo" data-model="viewModel">
      <ul data-role="buttongroup" data-index="0" data-bind="events: { select: onSelect }">
        <li data-navigate-to="#foo">View 1</li>
        <li data-navigate-to="#bar">View 2</li>
      </ul>
      <span style="color: red">foo</span>
    </div>
    
    <div id="bar" data-role="view" data-layout="default" data-title="bar" data-model="viewModel">
      <ul data-role="buttongroup" data-index="1" data-bind="events: { select: onSelect }">
        <li data-navigate-to="#foo">View 1</li>
        <li data-navigate-to="#bar">View 2</li>
      </ul>
      <span style="color: green">bar</span>
    </div>
​
    <div data-role="layout" data-id="default">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>
    </div>
​
    <script>
        var app = new kendo.mobile.Application();
​
        var viewModel = kendo.observable({
          onSelect: function(e) {
              var current = e.sender.current(),
                  navigateTo = current.data("navigateTo");
            
              app.navigate(navigateTo);
          }
        });
    </script>
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers