Viết một ứng dụng Restaurant Picke sử dụng "back menu" (ok)
https://www.tutorialspoint.com/jquery_mobile/btn_back_button.htm
Ví dụ sử dụng phiên bản 1.4.5 mới nhất :)
https://javascriptuse.gitbook.io/project/jquery-new-jquery-old-jquery-migrate-ok
C:\xampp\htdocs\wpclidemo\index.html
<!DOCTYPE html>
<head>
<title>Mobile Events</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header" data-add-back-btn="true">
<h2>Header</h2>
</div>
<a href="about.html" data-role="button">To About</a>
</div>
</body>
</html>C:\xampp\htdocs\wpclidemo\about.html
<!DOCTYPE html>
<head>
<title>Mobile Events</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header" data-add-back-btn="true">
<h2>Header</h2>
</div>
<a href="next.html" data-role="button">To Next</a>
</div>
</body>
</html>C:\xampp\htdocs\wpclidemo\next.html
<!DOCTYPE html>
<head>
<title>Mobile Events</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header" data-add-back-btn="true">
<h2>Header</h2>
</div>
<a href="index.html" data-role="button">To Index</a>
</div>
</body>
</html>Ví dụ 1: Sử dụng phiên bản cao hơn ví dụ 2 jquery.mobile.js
C:\xampp\htdocs\oec\index.html
Chú ý để thay đổi label chúng ta cũng có thể dùng:
$.mobile.toolbar.prototype.options.backBtnText = "previous";<!DOCTYPE HTML>
<html>
<head>
<title>Adding back button to header</title>
<link href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="content"> Go to <a href="#page2">page2</a>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id="page2">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="content"> Go to <a href="#page1">page1</a>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
<div data-role="page" data-add-back-btn="true" data-back-btn-text="To" id="page2">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="content"> Go to <a href="#page1">page1</a>
</div>
<div data-role="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</html>Vi dụ 2: Chú ý sử dụng data-add-back-btn="true" và data-role="header"
C:\xampp\htdocs\wpclidemo\index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div id="branding">
<h1>Restaurant Picker</h1>
</div>
<div class="choice_list">
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, incidunt!</h2>
<ul data-role="listview" data-inset="false">
<li>
<a href="choose_town.php" data-transition="slidedown">
<img src="images/sushis.jpg" />
<h3>Some Sushis</h3>
</a>
</li>
<li>
<a href="choose_town.php" data-transition="slidedown">
<img src="images/sushis.jpg" />
<h3>Some Sushis</h3>
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>C:\xampp\htdocs\wpclidemo\choose_town.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="choisir_ville" data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit inventore aliquid totam, blanditiis saepe illum. Quod molestias ratione consectetur similique dolorum nulla adipisci ad illum, blanditiis voluptas, excepturi ullam, vel deserunt repellat quis nihil quasi enim debitis officia iure aliquid. Neque, corporis odio ipsa, quisquam blanditiis nulla veritatis nostrum doloremque!</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h2> In which town do you want to eat? </h2>
<ul data-role="listview" data-inset="true" data-filter="true" >
<li><a href="choose_restaurant.php" data-transition="slidedown"> Amiens <span class="ui-li-count" > 3 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown"> Bastia <span class="ui-li-count" > 2 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown"> Belfort <span class="ui-li-count" > 5 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown"> Bordeaux <span class="ui-li-count" > 1</span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Carcassonne <span class="ui-li-count" > 2</span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Dijon<span class="ui-li-count" > 2</span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Epinal <span class="ui-li-count" > 10 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Grenoble <span class="ui-li-count" > 8 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Laval <span class="ui-li-count" > 1 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Le Havre <span class="ui-li-count" > 3 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Lille <span class="ui-li-count" > 2 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Le Mans <span class="ui-li-count" > 4 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Lyon <span class="ui-li-count" > 6 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Marseille <span class="ui-li-count" > 2 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Mulhouse <span class="ui-li-count" > 1 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Nancy <span class="ui-li-count" > 5 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Nice <span class="ui-li-count" > 1 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Paris <span class="ui-li-count" > 3 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Rennes <span class="ui-li-count" > 8 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Rouen <span class="ui-li-count" > 5 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Strasbourg <span class="ui-li-count" > 3 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Toulon <span class="ui-li-count" > 5 </span></a> </li>
<li><a href="choose_restaurant.php" data-transition="slidedown">Toulouse <span class="ui-li-count" > 2 </span></a> </li>
</ul>
</div>
</div>
</div><!-- /page -->
</body>
</html>C:\xampp\htdocs\wpclidemo\choose_restaurant.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="choisir_restau" data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>Lorem, ipsum dolor sit amet.</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h2> Please choose a restaurant.</h2>
<ul data-role="listview" data-inset="true" >
<li><a href="next.php" data-transition="slidedown"> <img src="images/restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p class="classement four"> 4 stars </p></a></li>
<li><a href="next.php" data-transition="slidedown"> <img src="images/restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p class="classement four"> 4 stars </p> </a></li>
<li><a href="next.php" data-transition="slidedown"> <img src="images/restau03_mini.jpg "/> <h2> Next Diona</h2> <p class="classement one"> 1 star </p> </a></li>
<li><a href="next.php" data-transition="slidedown"> <img src="images/restau04_mini.jpg "/> <h2> Tai Shan</h2> <p class="classement three"> 3 stars </p> </a></li>
<li><a href="next.php" data-transition="slidedown"> <img src="images/restau05_mini.jpg"/> <h2> Arcade</h2> <p class="classement two"> 2 stars </p> </a></li>
</ul>
</div>
</div>
</div><!-- /page -->
</body>
</html>C:\xampp\htdocs\wpclidemo\next.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Mobile page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="images/launch_icon_57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div id="choisir_restau" data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Lorem, ipsum dolor sit amet.</h1>
</div>
<div data-role="content">
<div class="choice_list">
<h2> Please choose a next.</h2>
<ul data-role="listview" data-inset="true" >
<li><a href="index.php" data-transition="slidedown"> <img src="images/restau01_mini.jpg"/> <h2> Le Mouffetard</h2> <p class="classement four"> 4 stars </p></a></li>
<li><a href="index.php" data-transition="slidedown"> <img src="images/restau02_mini.jpg "/> <h2> Chocolate bar </h2> <p class="classement four"> 4 stars </p> </a></li>
<li><a href="index.php" data-transition="slidedown"> <img src="images/restau03_mini.jpg "/> <h2> index Diona</h2> <p class="classement one"> 1 star </p> </a></li>
<li><a href="index.php" data-transition="slidedown"> <img src="images/restau04_mini.jpg "/> <h2> Tai Shan</h2> <p class="classement three"> 3 stars </p> </a></li>
<li><a href="index.php" data-transition="slidedown"> <img src="images/restau05_mini.jpg"/> <h2> Arcade</h2> <p class="classement two"> 2 stars </p> </a></li>
</ul>
</div>
</div>
<div data-role="footer">
<h2>Next Picker Footer</h2>
</div>
</div><!-- /page -->
</body>
</html>C:\xampp\htdocs\oec-t\custom.css
/*** general styling */
.ui-page.ui-body-c{
background:url(images/bg.png);
box-shadow: 0px 0px 30px 5px rgba(107, 105, 105, 0.3) inset,
0px 0px 0px 1px rgba(107, 105, 105, 0.4) inset;
}
.ui-icon.ui-icon-arrow-r {
background-color:rgb(136, 111, 110);
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-bottom,
.ui-corner-tl,
.ui-corner-tr,
.ui-corner-bl,
.ui-header .ui-btn-corner-all,
.ui-listview-filter .ui-btn-corner-all,
#restau_infos .ui-btn-corner-all,
#contact_buttons .ui-btn-corner-all,
#notation .ui-btn-corner-all{
border-radius:0.2em;
}
.ui-btn-active {
background: #654644; /* Old browsers */
background: -moz-linear-gradient(top, #654644 0%, #331c1b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#654644), color-stop(100%,#331c1b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #654644 0%,#331c1b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #654644 0%,#331c1b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #654644 0%,#331c1b 100%); /* IE10+ */
background: linear-gradient(top, #654644 0%,#331c1b 100%); /* W3C */
color:#fff !important;
}
.ui-content .choice_list .ui-btn-active .ui-link-inherit,
.ui-btn-down-c a.ui-link-inherit,
#home .ui-btn-down-c a.ui-link-inherit{
color:#fff !important;
}
img{
max-width: 100%;
height: auto; width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b {
width: 48%;
padding:1%;
}
/* title bar */
.ui-header.ui-bar-a{
background:url(images/header_bg.png);
}
.ui-header .ui-title {
text-indent:-9999px;
font-size:0px;
background:url(images/header_logo.png) no-repeat 69% 5px ;
height:33px;
padding:5px 0 5px 50px;
margin:0px;
}
.ui-header .ui-btn-up-a {
background:rgba(255, 255, 255, 0.1);
box-shadow:none;
}
.ui-header .ui-btn-hover-a {
background:rgba(0, 0, 0, 0.3);
box-shadow:none;
}
/*** home **/
#branding{
background:url(images/logo.png) no-repeat;
width:322px;
height:165px;
text-indent:-999px;
font-size:0px;
margin:-10px auto 0 auto;
border-bottom:1px solid rgba(65, 38, 37, 0.6);
}
.choice_list h1{
margin-top:30px;
font-size:18px;
color:rgb(65, 38, 37);
font-weight:normal;
font-style:italic;
padding:5px 0 6px 50px;
background:url(images/pagination.png) no-repeat;
}
#home .choice_list h1{
background-position: 0 -16px;
}
#home .choice_list h3{
padding-top:10px;
color:rgb(63, 41, 39);
}
#home .choice_list .ui-btn-active a.ui-link-inherit h3{
color:#fff;
}
.choice_list img{
padding:3px;
}
/** Chose the town **/
#choisir_ville .choice_list h1{
background-position: 0 -72px;
margin-bottom:20px;
}
#choisir_ville .choice_list a{
padding-top:10px;
color:rgb(63, 41, 39);
}
#choisir_ville .ui-listview-filter a{
padding-top:0px;
}
/** choix du restaurant **/
#choisir_restau .choice_list h1{
background-position: 0 -132px;
margin:10px auto 20px auto;
}
#choisir_restau .choice_list a{
padding-top:10px;
color:rgb(63, 41, 39);
}
#choisir_restau .classement{
display:inline-bloc;
background:url(images/pagination.png) no-repeat 0 -182px;
height:22px;
text-indent:-999px;
font-size:0px;
}
#choisir_restau .one{
width:30px;
}
#choisir_restau .two{
width:55px;
}
#choisir_restau .three{
width:75px;
}
#choisir_restau .four{
width:99px;
}
/** restau **/
#restau_infos,
#contact_infos {
color:rgb(63, 41, 39);
font-size:14px;
}
#restau_infos h1,
#contact_infos h2,
#notation h2{
color:rgb(63, 41, 39);
font-size:18px;
margin:0 auto 5px auto;
}
#restau_infos p,
#restau_infos ul,
#contact_infos p{
margin:2px auto 5px auto;
}
#restau_infos ul{
padding:0 0 0 10px;
}
#restau_infos ul li{
list-style-type:square;
margin-left:5px;
}
#restau_infos .ui-block-b .ui-btn {
font-size:12px;
}
#restau_infos .ui-block-b .ui-btn-inner{
padding:5px;
}
#contact_buttons a{
color:rgb(63, 41, 39);
}
.ui-icon-maps {
background: rgb(63, 41, 39) url(images/maps.png) no-repeat;
}
.ui-icon-tel{
background: rgb(63, 41, 39) url(images/phone.png) no-repeat;
}
/** add the stars to the drop down */
#note_utilisateur-menu a{
padding-left:100px;
position:relative;
}
#note_utilisateur-button span.ui-btn-text{
background:url(images/pagination.png) no-repeat;
}
#note_utilisateur-button span.ui-btn-inner{
padding-left:5px;
}
#note_utilisateur-menu li a:before{
content: " ";
display:inline-block;
width:115px;
height:20px;
background:url(images/pagination.png) no-repeat;
position:absolute;
left:0px;
}
.one #note_utilisateur-button span.ui-btn-text,
#note_utilisateur-menu li a:before{
background-position: -75px -182px;
}
.two #note_utilisateur-button span.ui-btn-text,
#note_utilisateur-menu li + li a:before{
background-position: -52px -182px;
}
.three #note_utilisateur-button span.ui-btn-text,
#note_utilisateur-menu li + li +li a:before{
background-position: -27px -182px;
}
.four #note_utilisateur-button span.ui-btn-text,
#note_utilisateur-menu li + li +li +li a:before{
background-position: -2px -182px;
}
Last updated
