Как создать навигацию по страницам для мобильных устройств с помощью плагина app-UI?
Цель этой статьи - предоставить интерактивные компоненты пользовательского интерфейса для мобильного дизайна с помощью плагина app-UI. Здесь мы рассмотрим различные типы навигационных представлений для веб-страниц.
Плагин помогает мобильным разработчикам создавать приложения с использованием HTML, CSS и JavaScript.
Пожалуйста, скачайте необходимый предварительно скомпилированный файл по ссылке и сохраните его в своей рабочей папке для внедрения. Пожалуйста, позаботьтесь о правильных путях к файлам при включении в свои исходные коды.
Базовый пример: Ниже показана базовая структура веб-страницы HTML для навигатора просмотра страниц с использованием подключаемого модуля app-UI.
HTML
<!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 > |
Выход:
Пример 2: Следующий код демонстрирует несколько экземпляров навигатора просмотра страниц. Обратитесь к выходным данным для лучшего понимания.
html
<!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 > |
Выход:
Пример 3: В следующем примере демонстрируется разделенное представление навигации для любой веб-страницы с помощью подключаемого модуля app-UI.
html
<!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 > |
Выход: