From 230e3932ff3451f37b5643960f9b12b9d06018a5 Mon Sep 17 00:00:00 2001
From: "hc7.choi" <hc7choi@hc7.choi>
Date: Mon, 24 Jun 2013 18:26:32 +0900
Subject: [PATCH] H/W key : delete footer and add H/W key event

Footer delete and H/W key event add in tizen winset page.
---
 demos/tizen-winsets/index.html                     |  4 +-
 .../custom-globalize-culture.html                  | 18 ++++++--
 .../generate-elements-dynamically.html             | 18 ++++++--
 .../tips/list-sample/list-sample.html              | 16 ++++++-
 demos/tizen-winsets/tips/localeinfo.html           | 18 ++++++--
 .../tips/page-transition/transition-page.html      | 18 ++++++--
 .../tips/page-transition/transition.html           | 18 ++++++--
 demos/tizen-winsets/tips/pinch-event/pinch.html    | 18 ++++++--
 .../tips/two-line-text/two-line-text.html          | 18 ++++++--
 demos/tizen-winsets/widgets/button/button.html     | 18 ++++++--
 demos/tizen-winsets/widgets/checkbox/checkbox.html | 18 ++++++--
 demos/tizen-winsets/widgets/ctxpopup.html          | 36 ++++++++++-----
 demos/tizen-winsets/widgets/datefield.html         | 18 ++++++--
 demos/tizen-winsets/widgets/entry.html             | 18 ++++++--
 demos/tizen-winsets/widgets/fastscroll.html        | 18 ++++++--
 demos/tizen-winsets/widgets/gallery.html           | 16 ++++++-
 .../tizen-winsets/widgets/gallery3d/gallery3d.html | 18 ++++++--
 .../widgets/grid/virtualgrid-normal.html           | 18 ++++++--
 demos/tizen-winsets/widgets/grid/virtualgrid.html  | 18 ++++++--
 demos/tizen-winsets/widgets/handler.html           | 18 ++++++--
 demos/tizen-winsets/widgets/list/list-bubble.html  | 18 ++++++--
 .../widgets/list/list-collapsible.html             | 18 ++++++--
 .../widgets/list/list-dialogue-edit.html           | 17 +++++++-
 .../tizen-winsets/widgets/list/list-dialogue.html  | 18 ++++++--
 demos/tizen-winsets/widgets/list/list-divider.html | 18 ++++++--
 .../widgets/list/list-divider_check.html           | 18 ++++++--
 .../widgets/list/list-divider_expandable.html      | 18 ++++++--
 .../widgets/list/list-divider_groupped.html        | 18 ++++++--
 .../widgets/list/list-divider_normal.html          | 18 ++++++--
 .../widgets/list/list-extendable.html              | 18 ++++++--
 .../widgets/list/list-normal_anchor.html           | 18 ++++++--
 .../widgets/list/list-normal_no_anchor.html        | 18 ++++++--
 demos/tizen-winsets/widgets/list/list-radio.html   | 18 ++++++--
 demos/tizen-winsets/widgets/list/list-swipe.html   | 18 +++++++-
 demos/tizen-winsets/widgets/list/list-vi.html      | 18 ++++++--
 demos/tizen-winsets/widgets/list/list.html         | 36 ++++++++++++---
 .../widgets/list/lists-autodividers.html           | 18 ++++++--
 .../widgets/list/virtuallist-normal.html           | 18 ++++++--
 .../widgets/list/virtuallist-normal_3_1_14.html    | 19 ++++++--
 .../widgets/list/virtuallist-normal_3_1_4.html     | 18 ++++++--
 .../widgets/list/virtuallist-normal_3_2_7.html     | 19 ++++++--
 demos/tizen-winsets/widgets/list/virtuallist.html  | 18 ++++++--
 .../widgets/multimediaview/multimediaview.html     | 18 ++++++--
 .../widgets/naviframe/headerandfooter.html         | 18 ++++++--
 .../tizen-winsets/widgets/naviframe/naviframe.html | 18 ++++++--
 .../widgets/naviframe/naviframe_footer_more.html   | 23 ++++++++--
 .../naviframe/naviframe_footer_more_button.html    | 23 ++++++++--
 .../widgets/naviframe/naviframe_title_text.html    | 18 ++++++--
 .../naviframe/naviframe_title_text_1_btn.html      | 18 ++++++--
 .../naviframe/naviframe_title_text_2_btn.html      | 18 ++++++--
 .../naviframe/naviframe_title_text_multiline.html  | 18 ++++++--
 .../naviframe_title_text_multiline_src.html        | 18 ++++++--
 .../naviframe_title_text_multiline_src_2_btn.html  | 18 ++++++--
 .../naviframe/naviframe_title_text_src.html        | 18 ++++++--
 .../widgets/pagelayout/backbutton-control.html     | 18 ++++++--
 demos/tizen-winsets/widgets/popupwindow/popup.html | 18 ++++++--
 demos/tizen-winsets/widgets/progress.html          | 18 ++++++--
 demos/tizen-winsets/widgets/progressbar.html       | 18 ++++++--
 demos/tizen-winsets/widgets/radio/radio.html       | 18 ++++++--
 demos/tizen-winsets/widgets/scroll_jump.html       | 18 ++++++--
 demos/tizen-winsets/widgets/scrollview_x.html      | 18 ++++++--
 demos/tizen-winsets/widgets/scrollview_xy.html     | 18 ++++++--
 demos/tizen-winsets/widgets/scrollview_y.html      | 18 ++++++--
 .../tizen-winsets/widgets/searchbar/searchbar.html | 18 ++++++--
 .../widgets/searchbar/searchbar_button.html        | 18 ++++++--
 .../widgets/searchbar/searchbar_cancel.html        | 18 ++++++--
 .../widgets/searchbar/searchbar_normal.html        | 18 ++++++--
 demos/tizen-winsets/widgets/segmentctrl.html       | 18 ++++++--
 demos/tizen-winsets/widgets/slider/slider.html     | 18 ++++++--
 .../widgets/small-popup-interval.html              | 18 ++++++--
 demos/tizen-winsets/widgets/small-popup.html       | 18 ++++++--
 demos/tizen-winsets/widgets/splitview.html         | 18 ++++++--
 .../tizen-winsets/widgets/switch/toggleswitch.html | 18 ++++++--
 demos/tizen-winsets/widgets/tabbar/tabbar.html     | 17 +++++++-
 .../widgets/tabbar/tabbar_footer.html              | 16 ++++++-
 .../widgets/tabbar/tabbar_footer_icon.html         | 16 ++++++-
 .../widgets/tabbar/tabbar_footer_more.html         | 17 +++++++-
 .../widgets/tabbar/tabbar_footer_segment.html      | 16 ++++++-
 .../widgets/tabbar/tabbar_footer_segment_more.html | 19 +++++++-
 .../tizen-winsets/widgets/tabbar/tabbar_icon.html  | 17 +++++++-
 .../widgets/tabbar/tabbar_icon_text.html           | 17 +++++++-
 .../widgets/tabbar/tabbar_persist.html             | 18 ++++++--
 .../widgets/tabbar/tabbar_persist_b.html           | 51 +++++++++++++---------
 .../widgets/tabbar/tabbar_persist_c.html           | 51 +++++++++++++---------
 .../widgets/tabbar/tabbar_scrolling.html           | 18 ++++++--
 .../tizen-winsets/widgets/tabbar/tabbar_text.html  | 18 ++++++--
 .../widgets/tabbar/tabbar_title_icon.html          | 17 +++++++-
 .../widgets/tabbar/tabbar_title_text.html          | 18 ++++++--
 demos/tizen-winsets/widgets/tickernoti.html        | 18 ++++++--
 .../widgets/tokentextarea/tokentextarea.html       | 18 ++++++--
 90 files changed, 1401 insertions(+), 304 deletions(-)

diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html
index 9c61312..9787ca9 100644
--- a/demos/tizen-winsets/index.html
+++ b/demos/tizen-winsets/index.html
@@ -23,7 +23,7 @@
 </head>
 
 <body>
-	<div data-role="page" id="main" data-add-back-btn="true">
+	<div data-role="page" id="main">
 		<div data-role="header" data-position="fixed">
 			<h1>TIZEN WEB UI</h1>
 		</div>
@@ -82,8 +82,6 @@
 <!-- END_PROPRIETARY -->
 			</ul>
 		</div>
-		<div data-role="footer">
-		</div>
 	</div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/tips/custom-globalize-culture/custom-globalize-culture.html b/demos/tizen-winsets/tips/custom-globalize-culture/custom-globalize-culture.html
index 4ffd2e8..a5a5a0b 100644
--- a/demos/tizen-winsets/tips/custom-globalize-culture/custom-globalize-culture.html
+++ b/demos/tizen-winsets/tips/custom-globalize-culture/custom-globalize-culture.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" id="page-tips-custom-globalize-culture" data-add-back-btn="true">
+<div data-role="page" id="page-tips-custom-globalize-culture">
 	<div data-role="header" data-position="fixed">
 		<h1>CUSTOM GLOBALIZE CULTURE</h1>
 	</div>
@@ -26,8 +26,20 @@
 		<p style="word-wrap:break-word;">A predefined Globalize culture file is loaded by the loader in Tizen Web UI Framework, according to the current language. If you want to load additional culture file, you can create each culture files, and let to choose one of them to load it by using $.tizen.util.loadCustomGlobalizeCulture() API.</p>
 		<hr>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#page-tips-custom-globalize-culture" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#page-tips-custom-globalize-culture" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="custom-globalize-culture.js"></script>
 </div>
 </body>
diff --git a/demos/tizen-winsets/tips/generate-elements-dynamically/generate-elements-dynamically.html b/demos/tizen-winsets/tips/generate-elements-dynamically/generate-elements-dynamically.html
index cc90cec..f8dbbb0 100644
--- a/demos/tizen-winsets/tips/generate-elements-dynamically/generate-elements-dynamically.html
+++ b/demos/tizen-winsets/tips/generate-elements-dynamically/generate-elements-dynamically.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="dynamical-elements-demo">
+<div data-role="page" id="dynamical-elements-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>GENERATE ELEMENTS DYNAMICALLY</h1>
 	</div><!-- /header -->
@@ -96,8 +96,20 @@
 			</fieldset>
 		</article>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#dynamical-elements-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#dynamical-elements-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="generate-elements-dynamically.js"></script>
 </div>
 </body>
diff --git a/demos/tizen-winsets/tips/list-sample/list-sample.html b/demos/tizen-winsets/tips/list-sample/list-sample.html
index c9ce10d..86d5bba 100644
--- a/demos/tizen-winsets/tips/list-sample/list-sample.html
+++ b/demos/tizen-winsets/tips/list-sample/list-sample.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="list-sample">
+<div data-role="page" id="list-sample">
 	<style>
 		#new .ui-btn-text {
 			font-size : 12px;
@@ -46,6 +46,20 @@
 			</ul>
 		</div>
 	</div><!-- /footer -->
+	<script>
+	$( "#list-sample" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list-sample" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="list-sample.js"></script>
 </div><!-- /page -->
 </body>
diff --git a/demos/tizen-winsets/tips/localeinfo.html b/demos/tizen-winsets/tips/localeinfo.html
index ff32dbc..5d9525d 100755
--- a/demos/tizen-winsets/tips/localeinfo.html
+++ b/demos/tizen-winsets/tips/localeinfo.html
@@ -18,7 +18,7 @@
 </head>
 
 <body>
-	<div data-role="page" id="localepage" data-add-back-btn="true">
+	<div data-role="page" id="localepage">
 		<div data-role="header" data-position="fixed">
 			<h1>LOCALE INFORMATION</h1>
 		</div>
@@ -32,8 +32,20 @@
 			<p id="html_font_size"></p>
 		</div>
 
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#localepage" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#localepage" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 		<script src="localeinfo.js"></script>
 	</div>
 </body>
diff --git a/demos/tizen-winsets/tips/page-transition/transition-page.html b/demos/tizen-winsets/tips/page-transition/transition-page.html
index 4c00ba2..97a06b7 100644
--- a/demos/tizen-winsets/tips/page-transition/transition-page.html
+++ b/demos/tizen-winsets/tips/page-transition/transition-page.html
@@ -1,7 +1,7 @@
 <html>
 	<head></head>
 	<body>
-		<div data-role="page" data-add-back-btn="true" id="transition-page">
+		<div data-role="page" id="transition-page">
 			<div data-role="header" data-position="fixed">
 				<h1>Sample</h1>
 			</div>
@@ -10,8 +10,20 @@
 					<img src="../../widgets/test/05.jpg">
 				</div>
 			</div> <!-- /content -->
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#transition-page" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#transition-page" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div> <!-- /page -->
 	</body>
 </html>
diff --git a/demos/tizen-winsets/tips/page-transition/transition.html b/demos/tizen-winsets/tips/page-transition/transition.html
index 74c040b..9320a2c 100644
--- a/demos/tizen-winsets/tips/page-transition/transition.html
+++ b/demos/tizen-winsets/tips/page-transition/transition.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="transition-list">
+<div data-role="page" id="transition-list">
 	<div data-role="header" data-position="fixed">
 		<h1>TRANSITIONS</h1>
 	</div>
@@ -36,8 +36,20 @@
 			<li><a href="transition-page.html" data-transition="none">none</a></li>
 		</ul>
 	</div><!-- /content -->
-	<div data-role="footer" data-add-back-btn="true">
-	</div>
+	<script>
+	$( "#transition-list" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#transition-list" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
 </body>
 </html>
diff --git a/demos/tizen-winsets/tips/pinch-event/pinch.html b/demos/tizen-winsets/tips/pinch-event/pinch.html
index 0b53c00..e893ac1 100644
--- a/demos/tizen-winsets/tips/pinch-event/pinch.html
+++ b/demos/tizen-winsets/tips/pinch-event/pinch.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="pinch_page">
+<div data-role="page" id="pinch_page">
 	<div data-role="header" data-position="fixed">
 		<h1>PINCH EVENT</h1>
 	</div>
@@ -26,8 +26,20 @@
 			<img src="./test.jpg">
 		</div>
 	</div> <!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#pinch_page" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#pinch_page" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="pinch.js"></script>
 </div> <!-- /page -->
 </body>
diff --git a/demos/tizen-winsets/tips/two-line-text/two-line-text.html b/demos/tizen-winsets/tips/two-line-text/two-line-text.html
index d186cc1..6df1b2e 100644
--- a/demos/tizen-winsets/tips/two-line-text/two-line-text.html
+++ b/demos/tizen-winsets/tips/two-line-text/two-line-text.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="twolinesample">
+<div data-role="page" id="twolinesample">
 	<div data-role="header" data-position="fixed">
 		<h1>TWO LINE TEXT SAMPLE</h1>
 	</div><!-- /header -->
@@ -54,8 +54,20 @@
 			</p>
 		</div><br>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#twolinesample" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#twolinesample" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="two-line-text.js"></script>
 </div>
 </body>
diff --git a/demos/tizen-winsets/widgets/button/button.html b/demos/tizen-winsets/widgets/button/button.html
index 6bceafd..44fb9c1 100644
--- a/demos/tizen-winsets/widgets/button/button.html
+++ b/demos/tizen-winsets/widgets/button/button.html
@@ -11,7 +11,7 @@
 	</head>
 <body>
 
-<div data-role="page" id="ButtonDemo" data-add-back-btn="true" >
+<div data-role="page" id="ButtonDemo">
 	<div data-role="header" data-position="fixed">
 		<h1>BUTTONS</h1>
 	</div>
@@ -95,8 +95,20 @@
 			<li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#ButtonDemo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#ButtonDemo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 </body>
diff --git a/demos/tizen-winsets/widgets/checkbox/checkbox.html b/demos/tizen-winsets/widgets/checkbox/checkbox.html
index 1c2a8e2..42cb251 100644
--- a/demos/tizen-winsets/widgets/checkbox/checkbox.html
+++ b/demos/tizen-winsets/widgets/checkbox/checkbox.html
@@ -17,7 +17,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" id="checkbox-demo" data-add-back-btn="true">
+		<div data-role="page" id="checkbox-demo">
 			<div data-role="header" data-position="fixed">
 				<h1>CHECKBOX</h1>
 			</div>
@@ -55,10 +55,22 @@
 					</fieldset>
 				</div><!--/content-primary -->
 			</div>
-			<div data-role="footer">
-			</div>
 			<link rel="stylesheet" href="styles.css" />
 			<script src="checkbox.js"></script>
+			<script>
+			$( "#checkbox-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#checkbox-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div>
 	</body>
 </html>
diff --git a/demos/tizen-winsets/widgets/ctxpopup.html b/demos/tizen-winsets/widgets/ctxpopup.html
index dc41eb2..80004a5 100644
--- a/demos/tizen-winsets/widgets/ctxpopup.html
+++ b/demos/tizen-winsets/widgets/ctxpopup.html
@@ -18,7 +18,7 @@
 		<link rel="apple-touch-icon" href="../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
+		<div data-role="page" id="ctxpopup-demo">
 			<div data-role="header" data-position="fixed">
 				<h1>CONTEXT POPUP</h1>
 			</div>
@@ -156,19 +156,31 @@
 				<div data-role="button" data-inline="true" id="buttonPopup2">Open Popup - div button</div>
 			</div> <!-- /content -->
 
-			<div data-role="footer">
-				<a href="#navi" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
-
-				<div id="navi" data-role="popup" >
-					<ul data-role="listview">
-						<li><a href="#" data-rel="back">Settings</a></li>
-						<li><a href="#" data-rel="back">Add to contact</a></li>
-						<li><a href="#" data-rel="back">Call log</a></li>
-						<li><a href="#" data-rel="back">Music</a></li>
-					</ul>
-				</div>
+			<div id="navi" data-role="popup" class="ui-ctxpopup-optionmenu">
+				<ul data-role="listview">
+					<li><a href="#" data-rel="back">Settings</a></li>
+					<li><a href="#" data-rel="back">Add to contact</a></li>
+					<li><a href="#" data-rel="back">Call log</a></li>
+					<li><a href="#" data-rel="back">Music</a></li>
+				</ul>
 			</div>
 			<script src="ctxpopup.js"></script>
+			<script>
+			$( "#ctxpopup-demo" ).on( "pageshow" , function() {
+				//bind callbacks to the H/W keys
+				$( document ).on( "tizenhwkey" , function( e ) {
+					if ( e.originalEvent.keyName === "menu" ) {
+						$( "#navi" ).popup( "open" );
+					}else if( e.originalEvent.keyName === "back" ) {
+						window.history.back();
+					}
+				});
+			});
+			$( "#ctxpopup-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div> <!-- /page -->
 	</body>
 </html>
diff --git a/demos/tizen-winsets/widgets/datefield.html b/demos/tizen-winsets/widgets/datefield.html
index 08f365e..3d4d0f6 100644
--- a/demos/tizen-winsets/widgets/datefield.html
+++ b/demos/tizen-winsets/widgets/datefield.html
@@ -16,7 +16,7 @@
 	<link rel="apple-touch-icon" href="../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" id="datetimepicker-demo" data-add-back-btn="true">
+<div data-role="page" id="datetimepicker-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>DATE/TIME PICKER</h1>
 	</div>
@@ -61,9 +61,21 @@
 			</li>
 		</ul>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
 	<script src="datefield.js"></script>
+	<script>
+	$( "#datetimepicker-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#datetimepicker-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/entry.html b/demos/tizen-winsets/widgets/entry.html
index 496f54d..491f79c 100644
--- a/demos/tizen-winsets/widgets/entry.html
+++ b/demos/tizen-winsets/widgets/entry.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<div data-role="page" class="type-interior" data-add-back-btn="true">
+<div data-role="page" class="type-interior" id="entry-demo">
 	<style type="text/css">
 	label.ui-input-text {
 		width: 30%
@@ -72,8 +72,20 @@
 			<input type="color" name="color" id="color" value="black" />
 		</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#entry-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#entry-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div><!-- /page -->
 </html>
 
diff --git a/demos/tizen-winsets/widgets/fastscroll.html b/demos/tizen-winsets/widgets/fastscroll.html
index cbf6795..40203ea 100644
--- a/demos/tizen-winsets/widgets/fastscroll.html
+++ b/demos/tizen-winsets/widgets/fastscroll.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="fastscroll-demo"  data-add-back-btn="true" data-fit-page-to-window="true">
+<div data-role="page" id="fastscroll-demo" data-fit-page-to-window="true">
 	<div data-role="header" data-position="fixed">
 		<h1>FASTSCROLL</h1>
 	</div><!-- header -->
@@ -57,7 +57,19 @@
 			<li>1st Store</li>
 		</ul>
 	</div><!-- content -->
-	<div data-role="footer">
-	</div>
 	<script src="fastscroll.js"></script>
+	<script>
+	$( "#fastscroll-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#fastscroll-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div><!-- page -->
diff --git a/demos/tizen-winsets/widgets/gallery.html b/demos/tizen-winsets/widgets/gallery.html
index 512f435..c9b5048 100644
--- a/demos/tizen-winsets/widgets/gallery.html
+++ b/demos/tizen-winsets/widgets/gallery.html
@@ -16,7 +16,7 @@
 	<link rel="apple-touch-icon" href="../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" id="gallery-demo" data-add-back-btn="true">
+<div data-role="page" id="gallery-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>GALLERY</h1>
 	</div>
@@ -33,6 +33,20 @@
 		</div><!-- /navbar -->
 	</div>
 	<script src="gallery.js"></script>
+	<script>
+	$( "#gallery-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#gallery-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/gallery3d/gallery3d.html b/demos/tizen-winsets/widgets/gallery3d/gallery3d.html
index 4c18008..0bb2af1 100644
--- a/demos/tizen-winsets/widgets/gallery3d/gallery3d.html
+++ b/demos/tizen-winsets/widgets/gallery3d/gallery3d.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="gallery3d-demo">
 	<div data-role="header" data-position="fixed" >
 		<h1>Gallery 3D</h1>
 	</div><!-- /header -->
@@ -8,8 +8,20 @@
 		<div id="gallery3d" data-role="gallery3d" style="width: 100%;"></div>
 	</div><!-- /content -->
 
-	<div data-role="footer">
-	</div><!-- /footer -->
+	<script>
+	$( "#gallery3d-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#gallery3d-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script><!-- /footer -->
 
 	<script>
 		$( "#gallery3d" ).on( "gallery3dcreate", function () {
diff --git a/demos/tizen-winsets/widgets/grid/virtualgrid-normal.html b/demos/tizen-winsets/widgets/grid/virtualgrid-normal.html
index 5b7583c..f2df7db 100644
--- a/demos/tizen-winsets/widgets/grid/virtualgrid-normal.html
+++ b/demos/tizen-winsets/widgets/grid/virtualgrid-normal.html
@@ -1,4 +1,4 @@
-<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo" data-add-back-btn="true">
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo">
 	<div id="normal" data-role="header" data-position="fixed">
 		<h1>VIRTUAL GRID</h1>
 	</div>
@@ -16,8 +16,20 @@
 		<div id="virtualgrid-demo" data-role="virtualgrid" data-rotation="false" data-template="tizen-demo-namecard">
 		</div>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#virtualgrid_grid_page" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#virtualgrid_grid_page" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="namecard.css" />
 	<script type="text/javascript" src="virtualgrid.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/grid/virtualgrid.html b/demos/tizen-winsets/widgets/grid/virtualgrid.html
index b7dd489..ac11469 100644
--- a/demos/tizen-winsets/widgets/grid/virtualgrid.html
+++ b/demos/tizen-winsets/widgets/grid/virtualgrid.html
@@ -1,4 +1,4 @@
-<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo" data-add-back-btn="true">
+<div id="virtualgrid_grid_page" data-role="page" class="virtualgrid_grid_demo">
 	<div id="normal" data-role="header" data-position="fixed">
 		<h1>VIRTUAL GRID</h1>
 	</div>
@@ -11,6 +11,18 @@
 			<li><a href="virtualgrid-size.html">Virtual grid - Size</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#virtualgrid_grid_page" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#virtualgrid_grid_page" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/handler.html b/demos/tizen-winsets/widgets/handler.html
index 651347b..793cb5c 100644
--- a/demos/tizen-winsets/widgets/handler.html
+++ b/demos/tizen-winsets/widgets/handler.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="handler-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>HANDLER</h1>
 	</div><!-- /header -->
@@ -43,6 +43,18 @@
 			<li><a href="#">Sawyer Wakefield</a></li>
 		</ul>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#handler-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#handler-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div><!-- /page -->
diff --git a/demos/tizen-winsets/widgets/list/list-bubble.html b/demos/tizen-winsets/widgets/list/list-bubble.html
index 625805b..c725951 100644
--- a/demos/tizen-winsets/widgets/list/list-bubble.html
+++ b/demos/tizen-winsets/widgets/list/list-bubble.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-bubble" data-add-back-btn="true">
+<div data-role="page" id="genlist-bubble">
 	<div data-role="header" data-position="fixed">
 		<h1>BUBBLE LIST (MESSAGE BUBBLE)</h1>
 	</div>
@@ -14,7 +14,19 @@
 			<li class="ui-li-bubble-receive"><p>Picture test</p><img src="list-bubble-sample1.png" /><span class="ui-li-bubble-time">9:40 PM</span></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-bubble" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-bubble" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-collapsible.html b/demos/tizen-winsets/widgets/list/list-collapsible.html
index 77e6d92..4bc62a5 100644
--- a/demos/tizen-winsets/widgets/list/list-collapsible.html
+++ b/demos/tizen-winsets/widgets/list/list-collapsible.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-expandable" data-add-back-btn="true">
+<div data-role="page" id="genlist-expandable">
 	<div data-role="header" data-position="fixed">
 		<h1>COLLAPSIBLE LIST (JQM)</h1>
 	</div>
@@ -47,6 +47,18 @@
 		</ul>
 		</form>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-expandable" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-expandable" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/list-dialogue-edit.html b/demos/tizen-winsets/widgets/list/list-dialogue-edit.html
index f5dcf16..975a2b8 100644
--- a/demos/tizen-winsets/widgets/list/list-dialogue-edit.html
+++ b/demos/tizen-winsets/widgets/list/list-dialogue-edit.html
@@ -18,7 +18,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" id="genlist-dialog-edit" data-add-back-btn="true">
+<div data-role="page" id="genlist-dialog-edit">
 	<div data-role="header" data-position="fixed">
 		<h1>DIALOGUE LIST - EDIT MODE</h1>
 	</div>
@@ -84,7 +84,20 @@
 
 		</ul>
 	</div>
-	<div data-role="footer"></div>
+	<script>
+	$( "#genlist-dialog-edit" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-dialog-edit" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="list-edit.js"></script>
 </div>
 </body>
diff --git a/demos/tizen-winsets/widgets/list/list-dialogue.html b/demos/tizen-winsets/widgets/list/list-dialogue.html
index a5d9c2a..55dffda 100644
--- a/demos/tizen-winsets/widgets/list/list-dialogue.html
+++ b/demos/tizen-winsets/widgets/list/list-dialogue.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-dialog" data-add-back-btn="true" data-fit-page-to-window="true">
+<div data-role="page" id="genlist-dialog" data-fit-page-to-window="true">
 	<div data-role="header" data-position="fixed">
 		<h1>DIALOG LISTS</h1>
 	</div>
@@ -227,7 +227,19 @@
 		</ul>
 		</form>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-dialog" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-dialog" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-divider.html b/demos/tizen-winsets/widgets/list/list-divider.html
index ba7b916..623e290 100644
--- a/demos/tizen-winsets/widgets/list/list-divider.html
+++ b/demos/tizen-winsets/widgets/list/list-divider.html
@@ -2,7 +2,7 @@
 <html>
 	<head></head>
 	<body>
-	<div data-role="page" id="list" data-add-back-btn="true">
+	<div data-role="page" id="list">
 			<div data-role="header" data-position="fixed">
 				<h1>List divider</h1>
 			</div>
@@ -14,8 +14,20 @@
 					<li><a href="list-divider_check.html">Check divider</a></li>
 				</ul>
 			</div>
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#list" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#list" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div>
 	</div>
 	</body>
diff --git a/demos/tizen-winsets/widgets/list/list-divider_check.html b/demos/tizen-winsets/widgets/list/list-divider_check.html
index f55ddc3..473ca45 100644
--- a/demos/tizen-winsets/widgets/list/list-divider_check.html
+++ b/demos/tizen-winsets/widgets/list/list-divider_check.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="list_divider_check">
 	<div data-role="header" data-position="fixed">
 		<h1>CHECK DIVIDER </h1>
 	</div>
@@ -18,7 +18,19 @@
 			<li><a href="#" ><form><input type="checkbox"  name="c2line-check1" /></form>Normal lists</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#list_divider_check" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list_divider_check" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-divider_expandable.html b/demos/tizen-winsets/widgets/list/list-divider_expandable.html
index 5e81c38..2c2fb96 100644
--- a/demos/tizen-winsets/widgets/list/list-divider_expandable.html
+++ b/demos/tizen-winsets/widgets/list/list-divider_expandable.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="divider_expadable">
 	<div data-role="header" data-position="fixed">
 		<h1>NORMAL DIVIDER </h1>
 	</div>
@@ -18,7 +18,19 @@
 			<li><a href="#" >Normal lists</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#divider_expadable" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#divider_expadable" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-divider_groupped.html b/demos/tizen-winsets/widgets/list/list-divider_groupped.html
index d07d020..582d9d7 100644
--- a/demos/tizen-winsets/widgets/list/list-divider_groupped.html
+++ b/demos/tizen-winsets/widgets/list/list-divider_groupped.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="list_divider_groupped">
 	<div data-role="header" data-position="fixed">
 		<h1>GROUPPED DIVIDER </h1>
 	</div>
@@ -18,7 +18,19 @@
 			<li class="ui-li-dialogue"><a href="#"> Normal lists</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#list_divider_groupped" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list_divider_groupped" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-divider_normal.html b/demos/tizen-winsets/widgets/list/list-divider_normal.html
index eeceb2e..26781e6 100644
--- a/demos/tizen-winsets/widgets/list/list-divider_normal.html
+++ b/demos/tizen-winsets/widgets/list/list-divider_normal.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="list_divider_normal">
 	<div data-role="header" data-position="fixed">
 		<h1>NORMAL DIVIDER </h1>
 	</div>
@@ -18,7 +18,19 @@
 			<li><a href="#">Normal lists</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#list_divider_normal" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list_divider_normal" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-extendable.html b/demos/tizen-winsets/widgets/list/list-extendable.html
index 5d93900..458577e 100644
--- a/demos/tizen-winsets/widgets/list/list-extendable.html
+++ b/demos/tizen-winsets/widgets/list/list-extendable.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist_extendable_page" data-add-back-btn="true">
+<div data-role="page" id="genlist_extendable_page">
 	<script id="tmp-1line" type="text/x-jquery-tmpl">
 		<li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
 	</script>
@@ -14,7 +14,19 @@
 	<div data-role="content">
 		<ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-1line"></ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist_extendable_page" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist_extendable_page" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="list-extendable.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/list-normal_anchor.html b/demos/tizen-winsets/widgets/list/list-normal_anchor.html
index a9c0e8f..767ebe5 100644
--- a/demos/tizen-winsets/widgets/list/list-normal_anchor.html
+++ b/demos/tizen-winsets/widgets/list/list-normal_anchor.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-normal" data-add-back-btn="true">
+<div data-role="page" id="genlist-normal">
 	<div data-role="header" data-position="fixed">
 		<h1>NORMAL ANCHOR LISTS</h1>
 	</div>
@@ -445,7 +445,19 @@
 		</ul>
 		<form>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-normal" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-normal" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-normal_no_anchor.html b/demos/tizen-winsets/widgets/list/list-normal_no_anchor.html
index 69fa94a..7f92c69 100644
--- a/demos/tizen-winsets/widgets/list/list-normal_no_anchor.html
+++ b/demos/tizen-winsets/widgets/list/list-normal_no_anchor.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-normal" data-add-back-btn="true" data-fit-page-to-window="true">
+<div data-role="page" id="genlist-normal" data-fit-page-to-window="true">
 	<div data-role="header" data-position="fixed">
 		<h1>NORMAL LISTS</h1>
 	</div>
@@ -336,6 +336,18 @@
 		</ul>
 		</form>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-normal" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-normal" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/list-radio.html b/demos/tizen-winsets/widgets/list/list-radio.html
index aeda59f..799b34b 100644
--- a/demos/tizen-winsets/widgets/list/list-radio.html
+++ b/demos/tizen-winsets/widgets/list/list-radio.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-radio" data-add-back-btn="footer">
+<div data-role="page" id="genlist-radio">
 	<div data-role="header" data-position="fixed">
 		<h1>RADIO BUTTON LISTS</h1>
 	</div>
@@ -55,7 +55,19 @@
 		</ul>
 	</form>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-radio" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-radio" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
diff --git a/demos/tizen-winsets/widgets/list/list-swipe.html b/demos/tizen-winsets/widgets/list/list-swipe.html
index ccf46ed..fb2cbee 100644
--- a/demos/tizen-winsets/widgets/list/list-swipe.html
+++ b/demos/tizen-winsets/widgets/list/list-swipe.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="genlist-swipe" data-add-back-btn="true">
+<div data-role="page" id="genlist-swipe">
 	<script type="text/javascript">
 		var openSwipe = function() {
 			$("#sw").swipe("open");
@@ -105,7 +105,7 @@
 				</li>
 		</ul>
 	</div>
-	<div data-role="footer">
+	<div data-role="footer" data-position ="fixed">
 			API Test:
 			<div data-role="button" data-inline="true" onclick="openSwipe()">
 				Open
@@ -114,4 +114,18 @@
 				Close
 			</div>
 	</div>
+	<script>
+	$( "#genlist-swipe" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-swipe" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/list-vi.html b/demos/tizen-winsets/widgets/list/list-vi.html
index 1b99f8d..469f8ca 100644
--- a/demos/tizen-winsets/widgets/list/list-vi.html
+++ b/demos/tizen-winsets/widgets/list/list-vi.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="list_vi_demo">
 	<script type="text/javascript">
 		var add = function() {
 			$("#listvi").listview( 'addItem', '<li>Test<div data-role="button" data-inline="true">TEST</div></li>', 0 );
@@ -18,6 +18,18 @@
 			<li><a href="#">Normal lists</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#list_vi_demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list_vi_demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/list.html b/demos/tizen-winsets/widgets/list/list.html
index d15f943..876aa97 100644
--- a/demos/tizen-winsets/widgets/list/list.html
+++ b/demos/tizen-winsets/widgets/list/list.html
@@ -5,7 +5,7 @@
 	<body>
 
 
-<div data-role="page" id="list" data-add-back-btn="true">
+<div data-role="page" id="list">
 	<div data-role="header" data-position="fixed">
 		<h1>LIST</h1>
 	</div>
@@ -35,13 +35,25 @@
 			<li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#list" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#list" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 
 
-<div data-role="page" id="3" data-add-back-btn="true">
+<div data-role="page" id="3">
 	<div data-role="header" data-position="fixed">
 		<h1></h1>
 	</div>
@@ -49,8 +61,20 @@
 		<ul-data-role="listview">
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#3" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#3" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 
diff --git a/demos/tizen-winsets/widgets/list/lists-autodividers.html b/demos/tizen-winsets/widgets/list/lists-autodividers.html
index 24eee92..0c8114c 100644
--- a/demos/tizen-winsets/widgets/list/lists-autodividers.html
+++ b/demos/tizen-winsets/widgets/list/lists-autodividers.html
@@ -1,4 +1,4 @@
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="page-list-autodivider">
 
 		<div data-role="header" data-position="fixed">
 			<h1>AUTODIVIDERS</h1>
@@ -31,8 +31,20 @@
 				<li>Sawyer Wakefield</li>
 			</ul>
 		</div><!-- /content -->
+		<script>
+		$( "#page-list-autodivider" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#page-list-autodivider" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 
-		<div data-role="footer">
-		</div><!-- /footer -->
 	</div><!-- /page -->
 
diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal.html b/demos/tizen-winsets/widgets/list/virtuallist-normal.html
index a90a44b..b9f1b1b 100644
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page" data-add-back-btn="true">
+<div data-role="page" id="virtuallist-normal_1line" class="virtuallist_demo_page">
 	<div data-role="header" data-position="fixed">
 		<h1>VIRTUAL LIST - NORMAL STYLE 1LINE</h1>
 	</div>
@@ -21,7 +21,19 @@
 		<ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-row="100">
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#virtuallist-normal_1line" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#virtuallist-normal_1line" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="virtuallist.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
index 805136a..cd7d33d 100644
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_14.html
@@ -1,6 +1,5 @@
 
-<div data-role="page" id="virtuallist-normal_1line-bigicon5" class="virtuallist_demo_page"
-	data-add-back-btn="true">
+<div data-role="page" id="virtuallist-normal_1line-bigicon5" class="virtuallist_demo_page">
 	<div data-role="header" data-position="fixed">
 		<h1>VIRTUAL LIST - NORMAL STYLE 1LINE-BIGICON5</h1>
 	</div>
@@ -24,7 +23,19 @@
 		<ul id="virtuallist-normal_1line-bigicon5_ul" data-role="virtuallistview" data-template="tmp-1line-bigicon5" data-row="100">
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#virtuallist-normal_1line-bigicon5" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#virtuallist-normal_1line-bigicon5" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="virtuallist.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
index ab663e6..8c17e13 100644
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_1_4.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page" data-add-back-btn="true">
+<div data-role="page" id="virtuallist-normal_1line-btn1" class="virtuallist_demo_page">
 	<div data-role="header" data-position="fixed">
 		<h1>VIRTUAL LIST - NORMAL STYLE 1LINE-BTN1</h1>
 	</div>
@@ -23,7 +23,19 @@
 		<ul id="virtuallist-normal_1line-btn1_ul" data-role="virtuallistview" data-template="tmp-1line-btn1" data-row="100">
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#genlist-normal" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#genlist-normal" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="virtuallist.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
index 0a1cd43..24f79b3 100644
--- a/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist-normal_3_2_7.html
@@ -1,6 +1,5 @@
 
-<div data-role="page" id="virtuallist-normal_2line-star1" class="virtuallist_demo_page"
-	data-add-back-btn="true">
+<div data-role="page" id="virtuallist-normal_2line-star1" class="virtuallist_demo_page">
 	<div data-role="header" data-position="fixed">
 		<h1>VIRTUAL LIST - NORMAL STYLE 2LINE-STAR1</h1>
 	</div>
@@ -34,7 +33,19 @@
 		<ul id="virtuallist-normal_2line-star1_ul" data-role="virtuallistview" data-template="tmp-2line-star1" data-row="100">
 		</ul>
 	</div>
-	<div data-role="footer" data-add-back-btn="true">
-	</div>
+	<script>
+	$( "#virtuallist-normal_2line-star1" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#virtuallist-normal_2line-star1" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="virtuallist.js"></script>
 </div>
diff --git a/demos/tizen-winsets/widgets/list/virtuallist.html b/demos/tizen-winsets/widgets/list/virtuallist.html
index a173d7f..4995173 100644
--- a/demos/tizen-winsets/widgets/list/virtuallist.html
+++ b/demos/tizen-winsets/widgets/list/virtuallist.html
@@ -2,7 +2,7 @@
 <html>
 	<head></head>
 	<body>
-	<div data-role="page" id="list" data-add-back-btn="true">
+	<div data-role="page" id="list">
 			<div data-role="header" data-position="fixed">
 				<h1>VIRTUAL LIST</h1>
 			</div>
@@ -15,8 +15,20 @@
 					<li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
 				</ul>
 			</div>
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#list" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#list" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div>
 	</div>
 	</body>
diff --git a/demos/tizen-winsets/widgets/multimediaview/multimediaview.html b/demos/tizen-winsets/widgets/multimediaview/multimediaview.html
index 1b0ba2d..7333463 100644
--- a/demos/tizen-winsets/widgets/multimediaview/multimediaview.html
+++ b/demos/tizen-winsets/widgets/multimediaview/multimediaview.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="multimedia-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>MULTIMEDIA VIEW</h1>
 	</div>
@@ -9,6 +9,18 @@
 			<li><a href="multimediaview_audio.html">AUDIO</a></li>
 		</ul>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#multimedia-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#multimedia-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
diff --git a/demos/tizen-winsets/widgets/naviframe/headerandfooter.html b/demos/tizen-winsets/widgets/naviframe/headerandfooter.html
index 016c718..81dad19 100644
--- a/demos/tizen-winsets/widgets/naviframe/headerandfooter.html
+++ b/demos/tizen-winsets/widgets/naviframe/headerandfooter.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
+	<div data-role="page" id="NavigationbarMain">
 		<div data-role="header" data-position="fixed">
 			<h1>Header and footer</h1>
 		</div>
@@ -39,8 +39,20 @@
 				</ul>
 			</div>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#NavigationbarMain" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#NavigationbarMain" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe.html b/demos/tizen-winsets/widgets/naviframe/naviframe.html
index 34f53e5..3d32d98 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
+	<div data-role="page" id="NavigationbarMain">
 		<div data-role="header" data-position="fixed">
 			<h1>Naviframe</h1>
 		</div>
@@ -39,8 +39,20 @@
 				</ul>
 			</div>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#NavigationbarMain" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#NavigationbarMain" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
index 983b88a..d3dc957 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more.html
@@ -18,17 +18,15 @@
 	</head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="navi_footer_more">
 	<div data-role="header" data-position="fixed">
 		<h1>Footer more</h1>
 	</div>
 	<div data-role="content">
 		<p>Footer more sample</p>
 	</div>
-	<div data-role="footer">
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="slideupfade" data-rel="popup"></a>
 
-		<div id="pop_js" data-role="popup" >
+	<div id="pop_js" data-role="popup" >
 		<ul data-role="listview">
 			<li><a href="#" data-rel="back">Settings</a></li>
 			<li><a href="#" data-rel="back">Add to contact</a></li>
@@ -36,6 +34,23 @@
 			<li><a href="#" data-rel="back">Music</a></li>
 		</ul>
 	</div>
+
+	<script>
+	$( "#navi_footer_more" ).on( "pageshow" , function() {
+		//bind callbacks to the H/W keys
+		$( document ).on( "tizenhwkey" , function( e ) {
+			if ( e.originalEvent.keyName === "menu" ) {
+				$( "#pop_js" ).popup( "open" );
+			}else if( e.originalEvent.keyName === "back" ) {
+				window.history.back();
+			}
+		});
+	});
+	$( "#navi_footer_more" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
index 0a4b8e4..c5caffe 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_footer_more_button.html
@@ -18,19 +18,17 @@
 	</head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="navi_foot_button">
 	<div data-role="header" data-position="fixed">
 		<h1>Footer more</h1>
 	</div>
 	<div data-role="content">
 		<p>Footer more sample</p>
 	</div>
-	<div data-role="footer">
+	<div data-role="footer" data-position="fixed">
 		<div data-role="button" data-inline="true">BUTTON1</div>
 		<div data-role="button" data-inline="true">BUTTON2</div>
 
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-transition="slidedownfade" data-rel="popup"></a>
-
 		<div id="pop_js" data-role="popup" >
 		<ul data-role="listview">
 			<li><a href="#" data-rel="back">Settings</a></li>
@@ -38,7 +36,24 @@
 			<li><a href="#" data-rel="back">Call log</a></li>
 			<li><a href="#" data-rel="back">Music</a></li>
 		</ul>
+		</div>
 	</div>
+	<script>
+	$( "#navi_foot_button" ).on( "pageshow" , function() {
+		//bind callbacks to the H/W keys
+		$( document ).on( "tizenhwkey" , function( e ) {
+			if ( e.originalEvent.keyName === "menu" ) {
+				$( "#pop_js" ).popup( "open" );
+			}else if( e.originalEvent.keyName === "back" ) {
+				window.history.back();
+			}
+		});
+	});
+	$( "#navi_foot_button" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text.html
index 1c1bb27..dc185e5 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_text">
 		<div data-role="header" data-position="fixed">
 			<h1>Title text</h1>
 			<div data-role="button">Cancel</div>
@@ -27,8 +27,20 @@
 		<div data-role="content">
 			<p>title text sample</p>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_text" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_text" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_1_btn.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_1_btn.html
index f8818a2..17e604a 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_1_btn.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_1_btn.html
@@ -17,7 +17,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 <body>
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_text_1">
 		<div data-role="header" data-position="fixed">
 			<h1>Title 1 button</h1>
 			<div data-role="button" data-icon="naviframe-selectall" class="naviframe-button"></div>
@@ -26,8 +26,20 @@
 				<p>Title text Button 01 sample</p>
 			</ul>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_text_1" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_text_1" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_2_btn.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_2_btn.html
index 01925e1..cad0529 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_2_btn.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_2_btn.html
@@ -17,7 +17,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 <body>
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_text_2">
 		<div data-role="header" data-position="fixed">
 			<h1>Title 2 buttons</h1>
 			<div data-role="button" data-icon="naviframe-cancel" class="naviframe-button"></div>
@@ -27,8 +27,20 @@
 				<p>Title text Button 02 sample</p>
 			</ul>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_text_2" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_text_2" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline.html
index 1f31472..bcf728f 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_multi">
 		<div data-role="header" data-position="fixed">
 			<h1>Title text multiline</h1>
 			<span class="ui-title-text-sub">tizen@samsung.com</span>
@@ -26,8 +26,20 @@
 		<div data-role="content">
 			<p>Title text Multiline sample</p>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_multi" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_multi" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src.html
index 480952a..23bd291 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_multi_src">
 		<div data-role="header" data-position="fixed">
 			<img src="icon-tizen.png"/>
 			<h1>Title demo</h1>
@@ -27,8 +27,20 @@
 		<div data-role="content">
 			<p>Image Title text Multiline sample</p>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_multi_src" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_multi_src" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src_2_btn.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src_2_btn.html
index 8ef9c06..f0cf338 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src_2_btn.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_multiline_src_2_btn.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_multi_src_2">
 		<div data-role="header" data-position="fixed">
 			<img src="icon-tizen.png"/>
 			<h1>Title demo</h1>
@@ -29,8 +29,20 @@
 		<div data-role="content">
 			<p>Image Title text Multiline Button 02 sample</p>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_multi_src_2" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_multi_src_2" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_src.html b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_src.html
index 7398f72..3495782 100644
--- a/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_src.html
+++ b/demos/tizen-winsets/widgets/naviframe/naviframe_title_text_src.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="navi_title_src">
 		<div data-role="header" data-position="fixed">
 			<img src="icon-tizen.png"/>
 			<h1>Title image</h1>
@@ -26,8 +26,20 @@
 		<div data-role="content">
 			<p>Image Title text sample</p>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#navi_title_src" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#navi_title_src" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 
 
diff --git a/demos/tizen-winsets/widgets/pagelayout/backbutton-control.html b/demos/tizen-winsets/widgets/pagelayout/backbutton-control.html
index b363c74..a869615 100644
--- a/demos/tizen-winsets/widgets/pagelayout/backbutton-control.html
+++ b/demos/tizen-winsets/widgets/pagelayout/backbutton-control.html
@@ -18,7 +18,7 @@
 	</head>
 <body>
 
-	<div data-role="page" id="backButtonDemomain" data-add-back-btn="true">
+	<div data-role="page" id="backButtonDemomain">
 		<div data-role="header" data-position="fixed">
 			<h1>BACK BUTTON CONTROL</h1>
 			<span class="ui-title-text-sub">FOOTER AND BACKBUTTON DEMOPAGE</span>
@@ -32,8 +32,20 @@
 				<li><a href="backbutton/dynamically-attatch-backbutton-to-footer.html">5. Dynamically attatch backbutton to footer</a></li>
 				<li><a href="backbutton/dynamically-attatch-backbutton-to-header.html">6. Dynamically attatch backbutton to header</a></li>
 		</div>
-		<div data-role="footer">
-		</div>
+		<script>
+		$( "#backButtonDemomain" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#backButtonDemomain" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 	</div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/popupwindow/popup.html b/demos/tizen-winsets/widgets/popupwindow/popup.html
index 9ea596f..2ecff21 100644
--- a/demos/tizen-winsets/widgets/popupwindow/popup.html
+++ b/demos/tizen-winsets/widgets/popupwindow/popup.html
@@ -19,7 +19,7 @@
 	</head>
 <body>
 
-<div data-role="page" id="popupwindow-demo" data-add-back-btn="true">
+<div data-role="page" id="popupwindow-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>POPUP</h1>
 	</div>
@@ -281,8 +281,20 @@
 
 	</div> <!-- /content -->
 	<script src="popupwindow.js"></script>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#popupwindow-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#popupwindow-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
 
 </body>
diff --git a/demos/tizen-winsets/widgets/progress.html b/demos/tizen-winsets/widgets/progress.html
index 5957e2a..3661511 100644
--- a/demos/tizen-winsets/widgets/progress.html
+++ b/demos/tizen-winsets/widgets/progress.html
@@ -18,7 +18,7 @@
 		<link rel="apple-touch-icon" href="../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" data-add-back-btn="true">
+		<div data-role="page" id="pregress-demo">
 			<script>
 				$(document).bind("pageshow" ,function(){
 					var currentRunning = $("#foo").progress("option", "running");
@@ -33,8 +33,20 @@
 					<div id="foo" data-role="progress" data-style="circle"></div>
 				</div>
 			</div> <!-- /content -->
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#pregress-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#pregress-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div> <!-- /page -->
 	</body>
 </html>
diff --git a/demos/tizen-winsets/widgets/progressbar.html b/demos/tizen-winsets/widgets/progressbar.html
index a5a3675..248d117 100644
--- a/demos/tizen-winsets/widgets/progressbar.html
+++ b/demos/tizen-winsets/widgets/progressbar.html
@@ -18,7 +18,7 @@
 		<link rel="apple-touch-icon" href="../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" id="progressbar-demo" data-add-back-btn="true">
+		<div data-role="page" id="progressbar-demo">
 			<div data-role="header" data-position="fixed">
 				<h1>PROGRESS BAR</h1>
 			</div>
@@ -38,8 +38,20 @@
 					</li>
 				</ul>
 			</div> <!-- /content -->
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#progressbar-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#progressbar-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 			<script src="progressbar.js"></script>
 		</div> <!-- /page -->
 	</body>
diff --git a/demos/tizen-winsets/widgets/radio/radio.html b/demos/tizen-winsets/widgets/radio/radio.html
index 8938690..c396d88 100644
--- a/demos/tizen-winsets/widgets/radio/radio.html
+++ b/demos/tizen-winsets/widgets/radio/radio.html
@@ -17,7 +17,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 	<body>
-		<div id="radio-demo" data-role="page" data-add-back-btn="true">
+		<div id="radio-demo" data-role="page">
 
 			<div data-role="header" data-position="fixed">
 				<h1>RADIO</h1>
@@ -55,8 +55,20 @@
 
 				</div><!--/content-primary -->
 			</div>
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#radio-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#radio-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 			<script src="radio.js"></script>
 		</div> <!-- page -->
 	</body>
diff --git a/demos/tizen-winsets/widgets/scroll_jump.html b/demos/tizen-winsets/widgets/scroll_jump.html
index cf3215d..a989f9a 100644
--- a/demos/tizen-winsets/widgets/scroll_jump.html
+++ b/demos/tizen-winsets/widgets/scroll_jump.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="jump-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>SCROLL JUMP</h1>
 	</div>
@@ -37,6 +37,18 @@
 			<li>item29</li>
 		</ul>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#jump-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#jump-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/scrollview_x.html b/demos/tizen-winsets/widgets/scrollview_x.html
index 7e019a8..9649874 100644
--- a/demos/tizen-winsets/widgets/scrollview_x.html
+++ b/demos/tizen-winsets/widgets/scrollview_x.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="scrollview_x-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>SCROLL VIEW</h1>
 	</div>
@@ -35,6 +35,18 @@
 			</div>
 		</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#scrollview_x-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#scrollview_x-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/scrollview_xy.html b/demos/tizen-winsets/widgets/scrollview_xy.html
index 8ccf8ad..eb85fcb 100644
--- a/demos/tizen-winsets/widgets/scrollview_xy.html
+++ b/demos/tizen-winsets/widgets/scrollview_xy.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="scrollview_xy-demo">
 	<div data-role="header" data-position="fixed">
 	<h1>SCROLL VIEW</h1>
 	</div>
@@ -90,6 +90,18 @@
 			</div>
 		</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#scrollview_xy-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#scrollview_xy-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/scrollview_y.html b/demos/tizen-winsets/widgets/scrollview_y.html
index f099b68..b1db5fb 100644
--- a/demos/tizen-winsets/widgets/scrollview_y.html
+++ b/demos/tizen-winsets/widgets/scrollview_y.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="scrollview_y-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>SCROLL VIEW</h1>
 	</div>
@@ -19,6 +19,18 @@
 			<img src="./test/11.jpg" width="95%">
 		</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#scrollview_y-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#scrollview_y-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/searchbar/searchbar.html b/demos/tizen-winsets/widgets/searchbar/searchbar.html
index 734d0a1..7e46877 100644
--- a/demos/tizen-winsets/widgets/searchbar/searchbar.html
+++ b/demos/tizen-winsets/widgets/searchbar/searchbar.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="searchbar-demo">
 	<div data-role="header" data-position ="fixed" >
 		<h1> LIST SEARCH FILTER BAR</h1>
 	</div><!-- /header -->
@@ -30,8 +30,20 @@
 		</ul>
 	</div>
 
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#searchbar-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#searchbar-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div><!-- /page -->
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/searchbar/searchbar_button.html b/demos/tizen-winsets/widgets/searchbar/searchbar_button.html
index d9ca3be..fd12495 100644
--- a/demos/tizen-winsets/widgets/searchbar/searchbar_button.html
+++ b/demos/tizen-winsets/widgets/searchbar/searchbar_button.html
@@ -16,7 +16,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="searchbar-demo-page-button">
+<div data-role="page" id="searchbar-demo-page-button">
 	<div data-role="header" data-position ="fixed" >
 		<h1>SEARCHBAR</h1>
 		<input type="search" data-icon="call" name="search" id="searchbar-demo-page-button-search" value=""  />
@@ -53,8 +53,20 @@
 		<p>Edelin</p>
 		<p>Gay</p>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#searchbar-demo-page-button" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#searchbar-demo-page-button" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="searchbar.js"></script>
 </div><!-- /page -->
 </body>
diff --git a/demos/tizen-winsets/widgets/searchbar/searchbar_cancel.html b/demos/tizen-winsets/widgets/searchbar/searchbar_cancel.html
index cc57659..2851bee 100644
--- a/demos/tizen-winsets/widgets/searchbar/searchbar_cancel.html
+++ b/demos/tizen-winsets/widgets/searchbar/searchbar_cancel.html
@@ -16,7 +16,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="searchbar-demo-page-cancel">
+<div data-role="page" id="searchbar-demo-page-cancel">
 	<div data-role="header" data-position ="fixed" >
 		<h1>SEARCHBAR</h1>
 
@@ -54,8 +54,20 @@
 		<p>Edelin</p>
 		<p>Gay</p>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#searchbar-demo-page-cancel" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#searchbar-demo-page-cancel" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="searchbar.js"></script>
 </div><!-- /page -->
 </body>
diff --git a/demos/tizen-winsets/widgets/searchbar/searchbar_normal.html b/demos/tizen-winsets/widgets/searchbar/searchbar_normal.html
index adbd58e..ef588a0 100644
--- a/demos/tizen-winsets/widgets/searchbar/searchbar_normal.html
+++ b/demos/tizen-winsets/widgets/searchbar/searchbar_normal.html
@@ -16,7 +16,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true" id="searchbar-demo-page-normal">
+<div data-role="page" id="searchbar-demo-page-normal">
 	<div data-role="header" data-position ="fixed" >
 		<h1>SEARCHBAR</h1>
 		<input type="search" name="search" id="searchbar-demo-page-normal-search" value=""  />
@@ -53,8 +53,20 @@
 		<p>Edelin</p>
 		<p>Gay</p>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#searchbar-demo-page-normal" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#searchbar-demo-page-normal" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script src="searchbar.js"></script>
 </div><!-- /page -->
 </body>
diff --git a/demos/tizen-winsets/widgets/segmentctrl.html b/demos/tizen-winsets/widgets/segmentctrl.html
index e30f72a..2e7b421 100644
--- a/demos/tizen-winsets/widgets/segmentctrl.html
+++ b/demos/tizen-winsets/widgets/segmentctrl.html
@@ -1,4 +1,4 @@
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="segmentctrl-demo">
 
 	<div data-role="header" data-position="fixed">
 		<h1>SEGMENT CONTROL</h1>
@@ -76,6 +76,18 @@
 		<div id=test> </div>
 
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#segmentctrl-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#segmentctrl-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div><!-- /page -->
diff --git a/demos/tizen-winsets/widgets/slider/slider.html b/demos/tizen-winsets/widgets/slider/slider.html
index e38c5ed..8817b59 100644
--- a/demos/tizen-winsets/widgets/slider/slider.html
+++ b/demos/tizen-winsets/widgets/slider/slider.html
@@ -18,7 +18,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" id="slider-demo" data-add-back-btn="true">
+		<div data-role="page" id="slider-demo">
 			<div data-role="header" data-position="fixed">
 				<h1>SLIDER</h1>
 			</div>
@@ -38,8 +38,20 @@
 					<li><input id="mySlider7" name="mySlider7" data-popup='false' type="range" value="5" min="0" max="10" data-highlight="false" /></li>
 				</ul>
 			</div><!-- /content -->
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#slider-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#slider-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div> <!-- /page -->
 	</body>
 </html>
diff --git a/demos/tizen-winsets/widgets/small-popup-interval.html b/demos/tizen-winsets/widgets/small-popup-interval.html
index 1dcc441..060fd75 100644
--- a/demos/tizen-winsets/widgets/small-popup-interval.html
+++ b/demos/tizen-winsets/widgets/small-popup-interval.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true" class="noti-demo">
+<div data-role="page" class="noti-demo" id="small-popup-interval-demo">
 	<div data-role="notification" id="notification" data-type="popup" data-interval="3000">
 		<p>Notification Demo</p>
 	</div>
@@ -9,7 +9,19 @@
 	<div data-role="content">
 		<div data-role="button" id="noti-demo">Show small popup</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#small-popup-interval-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#small-popup-interval-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="noti.js"></script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/small-popup.html b/demos/tizen-winsets/widgets/small-popup.html
index 640ac4f..f7b3930 100644
--- a/demos/tizen-winsets/widgets/small-popup.html
+++ b/demos/tizen-winsets/widgets/small-popup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true" class="noti-demo">
+<div data-role="page" class="noti-demo" id="small-popup-demo">
 	<div data-role="notification" id="notification" data-type="popup">
 		<p>Notification Demo</p>
 	</div>
@@ -9,7 +9,19 @@
 	<div data-role="content">
 		<div data-role="button" id="noti-demo">Show small popup</div>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#small-popup-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#small-popup-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="noti.js"></script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/splitview.html b/demos/tizen-winsets/widgets/splitview.html
index 4f236ed..4e6e7f9 100644
--- a/demos/tizen-winsets/widgets/splitview.html
+++ b/demos/tizen-winsets/widgets/splitview.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="splitview-demo">
 	<div data-role="header" data-position="fixed">
 		<h1>SPLIT VIEW</h1>
 	</div>
@@ -33,8 +33,20 @@
 			</div>
 		</div>
 	</div>
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#splitview-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#splitview-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 
 	<script>
 	$( document ).ready( function () {
diff --git a/demos/tizen-winsets/widgets/switch/toggleswitch.html b/demos/tizen-winsets/widgets/switch/toggleswitch.html
index e05e7bf..e29ba00 100644
--- a/demos/tizen-winsets/widgets/switch/toggleswitch.html
+++ b/demos/tizen-winsets/widgets/switch/toggleswitch.html
@@ -1,4 +1,4 @@
-<div data-role="page" id="switch-demo" data-add-back-btn="true">
+<div data-role="page" id="switch-demo">
 	<div data-role="header">
 		<h1>TOGGLE SWITCH</h1>
 	</div>
@@ -51,7 +51,19 @@
 		</p>
 	</div> <!-- /content -->
 
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#switch-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#switch-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="toggleswitch.css" />
 </div> <!-- page -->
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar.html b/demos/tizen-winsets/widgets/tabbar/tabbar.html
index a2cf749..bf2e32d 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-	<div data-role="page" data-add-back-btn="true">
+	<div data-role="page" id="tabbar-demo">
 		<div data-role="header" data-position="fixed">
 			<h1>TABBAR</h1>
 		</div>
@@ -42,7 +42,20 @@
 				</ul>
 			</div><!--/content-primary -->
 		</div>
-		<div data-role="footer"></div>
+		<script>
+		$( "#tabbar-demo" ).on( "pageshow" , function() {
+			$( document ).on( "tizenhwkey", function ( ev ) {
+				if ( ev.originalEvent.keyName === "back" ) {
+					//bind callbacks to the H/W keys
+					window.history.back();
+				}
+			});
+		});
+		$( "#tabbar-demo" ).on( "pagebeforehide" , function() {
+			//unbind callbacks to the H/W keys
+			$( document ).off( "tizenhwkey" );
+		});
+		</script>
 		<link rel="stylesheet" href="tabbar.css" />
 	</div>
 </body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer.html
index 67adb1d..66b5456 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_footer">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR TEXT WITH TITLE</h1>
 	</div>
@@ -34,6 +34,20 @@
 			</ul>
 		</div>
 	</div>
+	<script>
+	$( "#tabbar_footer" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_footer" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_icon.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_icon.html
index a579fe7..61ff987 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_icon.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_icon.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_icon">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR ICON WITH TITLE</h1>
 	</div>
@@ -34,6 +34,20 @@
 			</ul>
 		</div>
 	</div>
+	<script>
+	$( "#tabbar_icon" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_icon" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="tabbar.css" />
 </div>
 </body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
index deba94c..af5963f 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_more.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_more">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR TEXT WITH TITLE</h1>
 	</div>
@@ -27,7 +27,6 @@
 	</div>
 
 	<div data-role="footer">
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
 
 		<div id="pop_js" data-role="popup" >
 			<ul data-role="listview">
@@ -45,6 +44,20 @@
 			</ul>
 		</div>
 	</div>
+	<script>
+	$( "#tabbar_more" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_more" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 </body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment.html
index 871cb7a..80e5cb1 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_segment">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR TEXT WITH TITLE</h1>
 	</div>
@@ -32,6 +32,20 @@
 			<a href="#" data-role="button">MAYBE</a>
 		</div>
 	</div>
+	<script>
+	$( "#tabbar_segment" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_segment" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment_more.html b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment_more.html
index 30d4b8e..80ef157 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment_more.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_footer_segment_more.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 <body>
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_segment">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR TEXT WITH TITLE</h1>
 	</div>
@@ -26,7 +26,6 @@
 	</div>
 
 	<div data-role="footer">
-		<a href="#pop_js" data-role="button"  data-icon="naviframe-more" data-rel="popup"></a>
 
 		<div id="pop_js" data-role="popup">
 		<ul data-role="listview">
@@ -41,6 +40,22 @@
 			<a href="#" data-role="button">NEXT</a>
 		</div>
 	</div>
+	<script>
+	$( "#tabbar_segment" ).on( "pageshow" , function() {
+		//bind callbacks to the H/W keys
+		$( document ).on( "tizenhwkey" , function( e ) {
+			if ( e.originalEvent.keyName === "menu" ) {
+				$( "#pop_js" ).popup( "open" );
+			}else if( e.originalEvent.keyName === "back" ) {
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_segment" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 </body>
 </html>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_icon.html b/demos/tizen-winsets/widgets/tabbar/tabbar_icon.html
index d2dd09e..7cf84d2 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_icon.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_icon.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_icon">
 	<div data-role="header" data-position="fixed">
 		<div data-role="tabbar">
 			<ul>
@@ -32,7 +32,20 @@
 	<div data-role="content">
 	</div>
 
-	<div data-role="footer"></div>
+	<script>
+	$( "#tabbar_icon" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_icon" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="tabbar.css" />
 </div>
 
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_icon_text.html b/demos/tizen-winsets/widgets/tabbar/tabbar_icon_text.html
index fd02072..62a8f15 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_icon_text.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_icon_text.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_icon_text">
 	<div data-role="header" data-position="fixed">
 		<div data-role="tabbar">
 			<ul>
@@ -34,7 +34,20 @@
 
 	</div>
 
-	<div data-role="footer"></div>
+	<script>
+	$( "#tabbar_icon_text" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_icon_text" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="tabbar.css" />
 </div>
 
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_persist.html b/demos/tizen-winsets/widgets/tabbar/tabbar_persist.html
index 5211a7c..c7b0373 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_persist.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_persist.html
@@ -17,7 +17,7 @@
 	<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
 	<body>
-		<div data-role="page" data-add-back-btn="true">
+		<div data-role="page" id="tabbar-persist-demo">
 			<div data-role="header" data-position="fixed">
 				<div data-role="tabbar" data-id="persist_header" >
 					<ul>
@@ -32,8 +32,20 @@
 				<p>page a</p>
 			</div>
 
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#tabbar-persist-demo" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#tabbar-persist-demo" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 		</div>
 
 	</body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_persist_b.html b/demos/tizen-winsets/widgets/tabbar/tabbar_persist_b.html
index 61f5116..a16eb17 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_persist_b.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_persist_b.html
@@ -16,27 +16,36 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
-        <body>
+<body>
+<div data-role="page" id="b">
+	<div data-role="header" data-position="fixed">
+		<div data-role="tabbar" data-id="persist_header" >
+			<ul>
+				<li><a href="./tabbar_persist.html" >Menu</a></li>
+				<li><a href="./tabbar_persist_b.html" >Save</a></li>
+				<li><a href="#" class="ui-btn-active ui-state-persist">Next</a></li>
+			</ul>
+		</div><!-- /tabbar -->
+	</div>
 
+	<div data-role="content">
+		<p>page c</p>
+	</div>
 
-               <div data-role="page" data-add-back-btn="true">
-                        <div data-role="header" data-position="fixed">
-                                <div data-role="tabbar" data-id="persist_header" >
-                                        <ul>
-                                                <li><a href="./tabbar_persist.html" >Menu</a></li>
-                                                <li><a href="#" class="ui-btn-active ui-state-persist">Save</a></li>
-                                                <li><a href="./tabbar_persist_c.html" >Next</a></li>
-                                        </ul>
-                                </div><!-- /tabbar -->
-                        </div>
-
-                        <div data-role="content">
-                                <p>page b</p>
-                        </div>
-
-                        <div data-role="footer">
-                        </div>
-                </div>
-        </body>
+	<script>
+	$( "#b" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#b" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
+</div>
+</body>
 </html>
-
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_persist_c.html b/demos/tizen-winsets/widgets/tabbar/tabbar_persist_c.html
index 28751ef..a8abbf8 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_persist_c.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_persist_c.html
@@ -16,28 +16,37 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black" />
         <link rel="apple-touch-icon" href="../../icon-tizen.png" />
 </head>
-        <body>
+<body>
+<div data-role="page" id="c">
+	<div data-role="header" data-position="fixed">
+		<div data-role="tabbar" data-id="persist_header" >
+			<ul>
+				<li><a href="./tabbar_persist.html" >Menu</a></li>
+				<li><a href="./tabbar_persist_b.html" >Save</a></li>
+				<li><a href="#" class="ui-btn-active ui-state-persist">Next</a></li>
+			</ul>
+		</div><!-- /tabbar -->
+	</div>
 
+	<div data-role="content">
+		<p>page c</p>
+	</div>
 
-
-<div data-role="page" data-add-back-btn="true">
-                        <div data-role="header" data-position="fixed">
-                                <div data-role="tabbar" data-id="persist_header" >
-                                        <ul>
-                                                <li><a href="./tabbar_persist.html" >Menu</a></li>
-                                                <li><a href="./tabbar_persist_b.html" >Save</a></li>
-                                                <li><a href="#" class="ui-btn-active ui-state-persist">Next</a></li>
-                                        </ul>
-                                </div><!-- /tabbar -->
-                        </div>
-
-                        <div data-role="content">
-                                <p>page c</p>
-                        </div>
-
-                        <div data-role="footer">
-                        </div>
-                </div>
-        </body>
+	<script>
+	$( "#c" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#c" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
+</div>
+</body>
 </html>
 
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
index 2f15125..d8fa474 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_scrolling.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_scroll">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR SCROLL</h1>
 
@@ -48,8 +48,20 @@
 		<p>Scroll header tabbar left/right </p>
 	</div>
 
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#tabbar_scroll" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_scroll" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 </body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_text.html b/demos/tizen-winsets/widgets/tabbar/tabbar_text.html
index 04a6d70..37fb296 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_text.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_text.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_text">
 	<div data-role="header" data-position="fixed">
 		<div data-role="tabbar">
 			<ul>
@@ -34,8 +34,20 @@
 
 	</div>
 
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#tabbar_text" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_text" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 </body>
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_title_icon.html b/demos/tizen-winsets/widgets/tabbar/tabbar_title_icon.html
index 2f74d04..4d51503 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_title_icon.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_title_icon.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_title_icon">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR ICON WITH TITLE</h1>
 		<div data-role="tabbar">
@@ -33,7 +33,20 @@
 	<div data-role="content">
 	</div>
 
-	<div data-role="footer"></div>
+	<script>
+	$( "#tabbar_title_icon" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_title_icon" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<link rel="stylesheet" href="tabbar.css" />
 </div>
 
diff --git a/demos/tizen-winsets/widgets/tabbar/tabbar_title_text.html b/demos/tizen-winsets/widgets/tabbar/tabbar_title_text.html
index 2f77faf..92e170d 100644
--- a/demos/tizen-winsets/widgets/tabbar/tabbar_title_text.html
+++ b/demos/tizen-winsets/widgets/tabbar/tabbar_title_text.html
@@ -18,7 +18,7 @@
 </head>
 <body>
 
-<div data-role="page" data-add-back-btn="true">
+<div data-role="page" id="tabbar_title_text">
 	<div data-role="header" data-position="fixed">
 		<h1>TABBAR TEXT WITH TITLE</h1>
 		<div data-role="tabbar">
@@ -34,8 +34,20 @@
 	<div data-role="content">
 	</div>
 
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#tabbar_title_text" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tabbar_title_text" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 </div>
 
 </body>
diff --git a/demos/tizen-winsets/widgets/tickernoti.html b/demos/tizen-winsets/widgets/tickernoti.html
index 692286a..03c2afe 100644
--- a/demos/tizen-winsets/widgets/tickernoti.html
+++ b/demos/tizen-winsets/widgets/tickernoti.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true" class="noti-demo">
+<div data-role="page" class="noti-demo" id="tikernoti-demo">
 	<div data-role="notification" id="notification" data-type="ticker">
 		<img src="./test/icon01.png">
 		<p>Hello Tizen</p>
@@ -13,7 +13,19 @@
 		<div data-role="button" id="noti-icon1" data-inline="true">Change Icon - Phone</div>
 		<div data-role="button" id="noti-icon2" data-inline="true">Change Icon - Message</div><br>
 	</div><!-- /content -->
-	<div data-role="footer">
-	</div>
+	<script>
+	$( "#tikernoti-demo" ).on( "pageshow" , function() {
+		$( document ).on( "tizenhwkey", function ( ev ) {
+			if ( ev.originalEvent.keyName === "back" ) {
+				//bind callbacks to the H/W keys
+				window.history.back();
+			}
+		});
+	});
+	$( "#tikernoti-demo" ).on( "pagebeforehide" , function() {
+		//unbind callbacks to the H/W keys
+		$( document ).off( "tizenhwkey" );
+	});
+	</script>
 	<script type="text/javascript" src="noti.js"></script>
 </div> <!-- /page -->
diff --git a/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html
index 492c1d8..2bbf3e7 100644
--- a/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html
+++ b/demos/tizen-winsets/widgets/tokentextarea/tokentextarea.html
@@ -18,7 +18,7 @@
 		<link rel="apple-touch-icon" href="../../icon-tizen.png" />
 	</head>
 	<body>
-		<div data-role="page" id="tokentextarea" data-add-back-btn="true" data-dom-cache="true">
+		<div data-role="page" id="tokentextarea" data-dom-cache="true">
 			<div data-role="header" data-position="fixed">
 				<h1>TOKEN TEXT AREA</h1>
 			</div>
@@ -46,8 +46,20 @@
 					</div>
 				</div>
 			</div>
-			<div data-role="footer">
-			</div>
+			<script>
+			$( "#tokentextarea" ).on( "pageshow" , function() {
+				$( document ).on( "tizenhwkey", function ( ev ) {
+					if ( ev.originalEvent.keyName === "back" ) {
+						//bind callbacks to the H/W keys
+						window.history.back();
+					}
+				});
+			});
+			$( "#tokentextarea" ).on( "pagebeforehide" , function() {
+				//unbind callbacks to the H/W keys
+				$( document ).off( "tizenhwkey" );
+			});
+			</script>
 			<script src="tokentextarea-demo.js"></script>
 		</div>
 	</body>
-- 
2.7.4