How to design page view navigation for mobiles using app-UI plugin?

The purpose of this article is to give interactive user interface components for a mobile design by using app-UI plugin. Here we will be looking into various types of navigation views for web pages. 
The plugin helps mobile developers creating applications using HTML, CSS, and JavaScript. 
 

Please download the required pre-compiled file from the link and save it in your working folder for implementation. Please take care of proper file paths while including in your source codes. 
 

Basic Example: The following demonstrates the basic HTML web page structure for page view navigator using the app-UI plugin.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1,
                     maximum-scale=1, user-scalable=no"/>
  
        <script src="src/libs/jquery-1.7.1.js"></script>
        <script src=
"src/libs/jquery.animate-enhanced.js">
        </script>
        <!-- library files for view navigator -->
        <link rel="stylesheet"
              href="src/viewnavigator/viewnavigator.css" 
              type="text/css" />
        <script src=
"src/viewnavigator/viewnavigator.js">
        </script>
  
        <script>
  
            $(document).ready( function() {
  
                // Setup the default view
                var defaultView = getView();
                defaultView.backLabel = null;
  
                // Setup the ViewNavigator
                window.viewNavigator = new ViewNavigator('body');
                window.viewNavigator.pushView( defaultView );
  
            });
            function pushView() {
  
                // Create a view and push it onto
                // the view navigator
                var view = getView();
                window.viewNavigator.pushView( view );
            }
            function popView() {
  
                // pop a view from the view navigator
                window.viewNavigator.popView();
            }
  
            function getView()
                       {
              // Create a view descriptor with random content
              var bodyView = $('<h3>Basic navigator using app-UI plugin</h3>'
                        + '<div>' + '<hr><li href="#" onclick="pushView()"
                        class="viewNavigator_backButton">
                        push view</li> <li href="#" onclick="popView()"
                        class="viewNavigator_backButton">pop view</li><hr>'
                        + getPageContent() + '</div>');
                var links = bodyView.find('a');
  
                return { title: "Default View "
                                    + parseInt(Math.random()*1000),
                         backLabel: "Back",
                         view:  bodyView
                };
            }
  
            function getPageContent() {
  
                var result = "";
                for ( var i = 0; i < 8; i ++ )
                                {
                  result +=
                       "Python is a high-level, general-purpose
                        and a very popular programming language.
                        Python programming language (latest Python3)
                        is being used in web development,
                        Machine Learning applications, along with
                        all cutting edge technology in the Software
                        Industry.Python Programming Language
                        is very well suited for Beginners,
                        also for experienced programmers with other
                        programming languages like C++ and Java.
                        <hr>"
                }
                return result;
            }
        </script>
    </head>
</html>

chevron_right


Output: 
 



Example 2: The following code demonstrates multiple instances of page view navigator. Refer to the output for better understanding.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" 
         content="width=device-width, initial-scale=1,
         maximum-scale=1, user-scalable=no">
  
        <script src="src/libs/jquery-1.7.1.js"></script>
        <script src="src/libs/jquery.animate-enhanced.js">
                </script>    
        <link rel="stylesheet"
          href="src/viewnavigator/viewnavigator.css" 
                  type="text/css" />
        <script src="src/viewnavigator/viewnavigator.js">
                </script>
  
        <style>
        #leftDiv {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            width: 50%;
            overflow: hidden;
        }
        #rightDiv {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 50%;
            right: 0px;
            width: 50%;
            border-left: 1px solid red;
            overflow: hidden;
        }
  
        </style>
  
        <script>
            $(document).ready( function() {
                // Setup the default views
                var leftView = getView( "left" );
                leftView.backLabel = null;
  
                var rightView = getView( "right" );
                rightView.backLabel = null;
  
                // Setup the ViewNavigator
                window.leftViewNavigator = 
                                new ViewNavigator( '#leftDiv' );
                window.leftViewNavigator.pushView(leftView);
  
                window.rightViewNavigator = 
                                new ViewNavigator( '#rightDiv' );
                window.rightViewNavigator.pushView(rightView);
  
            } );
  
            function leftPushView() {
                
                // Create a view and push it onto 
                // the view navigator
                var view = getView("left");
                window.leftViewNavigator.pushView( view );
            }
            function leftPopView() {
                // Pop a view from the view navigator
                window.leftViewNavigator.popView();
            }
            function rightPushView() {
                // Create a view and push it onto
                                // the view navigator
                var view = getView("right");
                window.rightViewNavigator.pushView( view );
            }
  
            function rightPopView() {
                // Pop a view from the view navigator
                window.rightViewNavigator.popView();
            }
  
            function getView( side ) {
                // Create a view descriptor with random content
                var bodyView = 
                                $('<h3>Multiple instance of page view</h3>' 
                                + '<div>' + '<hr><li href="#" 
                                onclick="'+side+'PushView()"  
                                class="viewNavigator_backButton">push view</li
                                <li  href="#" onclick="'+side+'PopView()"
                                class="viewNavigator_backButton">pop view</li><hr>' 
                                + getPageContent() + '</div>');
                var links = bodyView.find('a');                
  
                return { title: side + "Page View " + 
                                parseInt(Math.random()*1000),
                backLabel: "Back",
                view:  bodyView
                };
            }
  
            function getPageContent() 
                        {                
              var result = "";
              for ( var i = 0; i < 8; i ++ ) 
                          {
                result += 
                       "Python is a high-level, general-purpose
                        and a very popular programming language. 
                        Python programming language (latest Python3)
                        is being used in web development, 
                        Machine Learning applications, along with 
                        all cutting edge technology in the Software
                        Industry.Python Programming Language
                        is very well suited for Beginners, 
                        also for experienced programmers with other
                        programming languages like C++ and Java.
                        <hr>"
               }
              return result;
            }
        </script>
    </head>
    <body>
       <div id="leftDiv"></div>
       <div id="rightDiv"></div>
    </body>
</html>

chevron_right


Output: 
 

 

Example 3: The following example demonstrates the split navigation view for any web page using the app-UI plugin.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
    <head>        
        <meta name="viewport"
                content="width=device-width, initial-scale=1,
                 maximum-scale=1, user-scalable=no">
  
        <script src="src/libs/jquery-1.7.1.js"></script>
        <script src="src/libs/jquery.animate-enhanced.js">
                </script>
        <script src="src/libs/iscroll.js"></script>
        <script src="src/libs/noClickDelay.js"></script>
  
                /* Pre-compiled files for split navigations   */
        <link rel="stylesheet" 
                href="src/splitviewnavigator/splitviewnavigator.css" 
                type="text/css" />
        <script src="src/splitviewnavigator/splitviewnavigator.js">
                </script>
                /* Pre-compiled files for default navigations   */
  
        <link rel="stylesheet" 
                 href="src/viewnavigator/viewnavigator.css"
                 type="text/css" />
        <script src="src/viewnavigator/viewnavigator.js">
                </script>
  
        <style>
          li {
            margin-bottom: 10px;
             }
        </style>
  
        <script>
            $(document).ready( function() {
  
              var sidebarViewDescriptor = getSidebarView();
              sidebarViewDescriptor.backLabel = null;
  
              var bodyViewDescriptor = getBodyView();
              bodyViewDescriptor.backLabel = null;
  
               // Setup the ViewNavigator
             new SplitViewNavigator( 'body', {
                 toggleButtonLabel: 'Menu'
             });
            window.splitViewNavigator.pushSidebarView
                        (sidebarViewDescriptor);
            window.splitViewNavigator.pushBodyView
                        (bodyViewDescriptor);
  
            });
  
            function getSidebarView() {
                var viewHTML = "<ul>" +
                "<li onclick='pushSidebarView()' 
                                 class='viewNavigator_backButton'>
                                 Push Sidebar View</li>" +
                "<li onclick=
                                'window.splitViewNavigator.popSidebarView()' 
                                 class='viewNavigator_backButton'>
                                 Pop Sidebar View</li>" +
                "<li onclick='pushBodyView()' 
                                 class='viewNavigator_backButton'>
                                 Push Body View</li>" +
                "<li onclick='window.splitViewNavigator.popBodyView()' 
                                 class='viewNavigator_backButton'>
                                 Pop Body View</li>" +
                 "</ul>";
                return {
                   title: "Sidebar " + 
                                   parseInt( Math.random() * 100 ).toString(),
                   backLabel: "Back",
                   view:  $(viewHTML)
                };
            }
  
            function getBodyView() {
                var viewHTML = 
                                "<h3>Split view for sidebars and page content</h3>
                                <div>"
                                 +getPageContent() +
                               "</div>";
                return {
                title: "My Page Content " + 
                                 parseInt( Math.random() * 100 ).toString(),
                 backLabel: "Back",
                view:  $(viewHTML)
                };
            }
  
            function pushSidebarView()
                       {
               window.splitViewNavigator.
                           pushSidebarView(getSidebarView());
            }
  
            function pushBodyView()
                       {
              window.splitViewNavigator.
                          pushBodyView(getBodyView());
              window.splitViewNavigator.hideSidebar();
            }
  
            function getPageContent() {
                var result = "";
            for ( var i = 0; i < 8; i ++ )
                        {
              result += 
                       "Python is a high-level, general-purpose
                        and a very popular programming language. 
                        Python programming language (latest Python3)
                        is being used in web development, 
                        Machine Learning applications, along with 
                        all cutting edge technology in the Software
                        Industry.Python Programming Language
                        is very well suited for Beginners, 
                        also for experienced programmers with other
                        programming languages like C++ and Java.
                        <hr>"
            }
            return result;
            }
        </script>
  
    </head>
    <body></body>
</html>

chevron_right


Output: 
 

 

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.