Kendo PopOver

by kendomobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
 <!-- Demo created for the book: Building Mobile Applications Using Kendo UI Mobile andASP.NET Web API.
http://www.packtpub.com/building-mobile-applications-with-kendoui-html5/book -->
<div data-role="view" >    
   
        <a data-role="button" href="#popOverWidget" data-rel="popover">
            Select Movie
        </a>

        <div id="popOverWidget" data-role="popover" 
             data-pane="{'transition':'zoom', 'layout':'popoverLayout'}"
             data-popup="{'height':170}">
            
                 <!-- Layout -->
           <div data-role="layout" data-id="popoverLayout">
              <div data-role="header"><a data-role="backbutton" > Back </a></div>
              <div data-role="footer"></div>
           </div>
                 <!-- main menu view-->
            <div data-role="view" id="view-main" class="no-backbutton" >
                <ul data-role="listview" >
                    <li><a href="#view-comedy">Comedy (3)</a></li>
                    <li><a href="#view-action">Action (2)</a></li>                  
                </ul>
            </div>
                 <!-- Comedy Menu View-->
            <div data-role="view" id="view-comedy">                
                <ul data-role="listview" >
                    <li><a href="#view-final?movie=Hangover III">Hangover III</a></li>
                    <li><a href="#view-final?movie=Scary Movie">Scary Movie</a></li>
                    <li><a href="#view-final?movie=Ted">Ted </a></li>                    
                </ul>
            </div>
                 <!-- Action Menu View-->
             <div data-role="view" id="view-action">                
                <ul data-role="listview" >
                    <li><a href="#view-final?movie=Iron Man 3">Iron Man 3</a></li>
                   ...

CSS

.no-backbutton .km-back { visibility: hidden; }  
  .km-ios .km-popup.km-pane .km-header{padding-top:5px;}

JavaScript

var app = new kendo.mobile.Application(document.body);

//Function to be called when the view is shown every time

function finalViewShow(e){
    $('#spanMovieName').text(e.view.params.movie);
 
}