Cara Mudah Buat Pop Up Menu Untuk Mobile Apps (jQuery Mobile)
Langkah2
1) Salin kod berikut
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(document).bind("pageinit", onPageInit);
//variable to store menu instance
newMenu = null;
function onPageInit()
{
//create menu. First option in the third argument is menu title
createMenu("dynamicMenu1","contentDiv","Menus,menu1,menu2,menu3",menuHandler);
$("#btn1").click(function(){
showMenu(newMenu);
});
}
function createMenu(menuId, parentId, options, menuHandler)
{
//create a containing div
var div = $("<div id='" + menuId + "div'></div>").appendTo("#"+parentId).hide();
//create select tag
var menuElm = $("<select id='" + menuId + "' data-inline='true' data-native-menu='false'></select>").appendTo(div);
//add options
var optionsArray = options.split(",");
for (var i = 0; i < optionsArray.length; i++)
$("<option>" + optionsArray[i] + "</option>").appendTo("#"+menuId);
//convert to JQueryMobile menu
$("#" + menuId).selectmenu();
//find custom menu that JQM creates
var menus = $(".ui-selectmenu");
for (var i = 0; i < menus.length; i++)
{
//if ($(menus[i]).children("ul:#" + menuId + "-menu").length > 0)
if ($(menus[i]).children("ul").filter("#" + menuId + "-menu").length > 0)
{
newMenu = $(menus[i]);
break;
}
}
//Hack for JQM 1.2 - check if parent of select menu is ui-popup-container
var menuContainer = $(menus).parent(".ui-popup-container");
if (menuContainer.length > 0)
{
var pageElm = menuContainer.parent("div[data-role='page']");
if (pageElm.length > 0)
{
menus.detach();
menuContainer.remove();
pageElm.append(menus);
menus.css("width", "80%");
menus.css("max-width", "350px");
}
}
if (newMenu == null)
{
alert("Error creating menu");
return;
}
//Associate click handler with menu items, i.e. anchor tags
$(newMenu).find(".ui-selectmenu-list li a").click(menuHandler);
//Add Close option
var menuHeader = $(newMenu).find(".ui-header");
var closeLinkId = menuId + "_close_id";
menuHeader.prepend("<span style='position:relative;float:left'>" +
"<a href='#' id='" + closeLinkId + "'>X</href></span>");
$("#" + closeLinkId).click(function(e){
newMenu.hide();
});
return newMenu.hide();
}
function showMenu(menu)
{
if (menu == null)
return;
//show menu at center of the window
var left = ($(window).width() - $(menu).width()) / 2;
//consider vertical scrolling when calculating top
var top = (($(window).height() - $(menu).height()) / 2) + $(window).scrollTop();
$(menu).css({
left: left,
top: top
});
$(menu).show();
}
//Callback handler when menu item is clicked
function menuHandler(event)
{
if (newMenu != null)
$(newMenu).hide();
alert(event.srcElement.text);
}
</script>
</head>
<body>
<div data-role="page" >
<div data-role="content" id="contentDiv">
<a href="" data-role="button" data-inline="true" id="btn1">Show Menu</a>
</div>
<span style='position:relative;float:left'></span>
</div>
</body>
</html>
|
