{"id":361,"date":"2012-06-24T22:20:51","date_gmt":"2012-06-24T16:50:51","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=361"},"modified":"2012-06-24T22:20:51","modified_gmt":"2012-06-24T16:50:51","slug":"creating-dynamic-popup-menus-with-jquery-mobile","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/creating-dynamic-popup-menus-with-jquery-mobile\/","title":{"rendered":"Creating dynamic popup menus with JQuery Mobile"},"content":{"rendered":"

Creating popup menus in JQuery Mobile is not quite simple. I am talking about menu that you might want to display when user clicks on, for example, a list item or a button. Refer to JQuery Mobile documents for select menus<\/a>\u00a0and custom menus<\/a>\u00a0. These menus are actually drop down lists and in all the cases, the menu has to be already visible.<\/p>\n

However this is not what I wanted in my mobile apps. I do not want menu to be visible initially, but want to display it when user clicks on a button on a list item. So I started investigating how this could be done. As it turned out, the menu that JQuery Mobile shows (when nativeMenu attribute is set to false), is different from the select tags that you create for the menu. JQM hides the menu that you create and creates a new (wrapper) menu using div and anchor tags. Option tags become anchor tags in the new menu. This is all fine, but the problem is that JQM does not have any direct APIs to access elements of the new menu. This makes it difficult to attach event handlers to menu options.<\/p>\n

<\/p>\n

But JQM follows certain patterns when creating the wrapper menu. As of the current version, which is 1.1, JQM does following –<\/p>\n

    \n
  1. It creates an outer div with ui-selectmenu class<\/li>\n
  2. Within the above div it creates ul element with id = id_of_the_select_element + “-menu”<\/li>\n
  3. It creates li element for each menu option inside the above ul element<\/li>\n
  4. Actual menu items are in anchor element inside the above li element<\/li>\n<\/ol>\n

    All this is not documented by JQuery Mobile, so it might change in the future versions.<\/p>\n

    So, having understood the above pattern, it was then easy to create a menu and attach event handler. Here is a simple example, which displays a menu when a button is clicked –<\/p>\n

    First a screen shot –<\/p>\n

    \"\"<\/a><\/p>\n

    <!DOCTYPE html><\/span>\n<<\/span>html<\/span>><\/span>\n    <<\/span>head<\/span>><\/span>\n        <<\/span>link<\/span> type=\"text\/css\"<\/span> href=\"jquery.mobile-1.2.0.css\"<\/span> rel=\"stylesheet\"<\/span>><\/span>\n\n        <<\/span>script type=\"text\/javascript\" src=\"jquery-1.8.2.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\n        <<\/span>script type=\"text\/javascript\" src=\"jquery.mobile-1.2.0.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\n\n        <<\/span>script type=\"text\/javascript\"<\/span>><\/span>\n            $(document).bind(\"<\/span>pageinit<\/span>\"<\/span>, onPageInit);\n\n            \/\/variable to store menu instance<\/span>\n            newMenu = null<\/span>;\n\n            function<\/span> onPageInit()\n            {\n                \/\/create menu. First option in the third argument is menu title<\/span>\n                createMenu(\"<\/span>dynamicMenu1<\/span>\"<\/span>,\"<\/span>contentDiv<\/span>\"<\/span>,\"<\/span>Menus,menu1,menu2,menu3<\/span>\"<\/span>,menuHandler);\n\n                $(\"<\/span>#btn1<\/span>\"<\/span>).click(function<\/span>(){\n                    showMenu(newMenu);\n                });\n            }\n\n            function<\/span> createMenu(menuId, parentId, options, menuHandler)\n            {\n                \/\/create a containing div<\/span>\n                var<\/span> div = $(\"<\/span><div id='<\/span>\"<\/span> + menuId + \"<\/span>div'><\/div><\/span>\"<\/span>).appendTo(\"<\/span>#<\/span>\"<\/span>+parentId).hide();\n\n                \/\/create select tag<\/span>\n                var<\/span> menuElm = $(\"<\/span><select id='<\/span>\"<\/span> + menuId + \"<\/span>' data-inline='true' data-native-menu='false'><\/select><\/span>\"<\/span>).appendTo(div);\n\n                \/\/add options<\/span>\n                var<\/span> optionsArray = options.split<\/span>(\"<\/span>,<\/span>\"<\/span>);\n                for<\/span> (var<\/span> i = 0; i < optionsArray.length; i++)\n                    $(\"<\/span><option><\/span>\"<\/span> + optionsArray[i] + \"<\/span><\/option><\/span>\"<\/span>).appendTo(\"<\/span>#<\/span>\"<\/span>+menuId);\n\n                \/\/convert to JQueryMobile menu<\/span>\n                $(\"<\/span>#<\/span>\"<\/span> + menuId).selectmenu();\n\n                \/\/find custom menu that JQM creates<\/span>\n                var<\/span> menus = $(\"<\/span>.ui-selectmenu<\/span>\"<\/span>);\n                for<\/span> (var<\/span> i = 0; i < menus.length; i++)\n                {\n                    \/\/if ($(menus[i]).children(\"ul:#\" + menuId + \"-menu\").length > 0)<\/span>\n                    if<\/span> ($(menus[i]).children(\"<\/span>ul<\/span>\"<\/span>).filter(\"<\/span>#<\/span>\"<\/span> + menuId + \"<\/span>-menu<\/span>\"<\/span>).length > 0)\n                    {\n                        newMenu = $(menus[i]);\n                        break<\/span>;\n                    }\n                }\n\n                \/\/Hack for JQM 1.2 - check if parent of select menu is ui-popup-container<\/span>\n                var<\/span> menuContainer = $(menus).parent(\"<\/span>.ui-popup-container<\/span>\"<\/span>);\n                if<\/span> (menuContainer.length > 0)\n                {\n                    var<\/span> pageElm = menuContainer.parent(\"<\/span>div[data-role='page']<\/span>\"<\/span>);\n                    if<\/span> (pageElm.length > 0)\n                    {\n                        menus.detach();\n                        menuContainer.remove();\n                        pageElm.append(menus);\n                        menus.css(\"<\/span>width<\/span>\"<\/span>, \"<\/span>80%<\/span>\"<\/span>);\n                        menus.css(\"<\/span>max-width<\/span>\"<\/span>, \"<\/span>350px<\/span>\"<\/span>);\n                    }\n                }\n\n                if<\/span> (newMenu == null<\/span>)\n                {\n                    alert(\"<\/span>Error creating menu<\/span>\"<\/span>);\n                    return<\/span>;\n                }\n\n                \/\/Associate click handler with menu items, i.e. anchor tags<\/span>\n                $(newMenu).find(\"<\/span>.ui-selectmenu-list li a<\/span>\"<\/span>).click(menuHandler);\n\n                \/\/Add Close option<\/span>\n                var<\/span> menuHeader = $(newMenu).find(\"<\/span>.ui-header<\/span>\"<\/span>);\n                var<\/span> closeLinkId = menuId + \"<\/span>_close_id<\/span>\"<\/span>;\n                menuHeader.prepend(\"<\/span><span style='position:relative;float:left'><\/span>\"<\/span> +\n                    \"<\/span><a href='#' id='<\/span>\"<\/span> + closeLinkId + \"<\/span>'>X<\/href><\/span><\/span>\"<\/span>);\n                $(\"<\/span>#<\/span>\"<\/span> + closeLinkId).click(function<\/span>(e){\n                    newMenu.hide();\n                });\n\n                return<\/span> newMenu.hide();\n            }\n\n            function<\/span> showMenu(menu)\n            {\n                if<\/span> (menu == null<\/span>)\n                    return<\/span>;\n\n                \/\/show menu at center of the window<\/span>\n                var<\/span> left = ($(window).width() - $(menu).width()) \/ 2;\n                \/\/consider vertical scrolling when calculating top<\/span>\n                var<\/span> top = (($(window).height() - $(menu).height()) \/ 2) + $(window).scrollTop();\n                $(menu).css({\n                    left: left,\n                    top: top\n                });\n\n                $(menu).show();\n            }\n\n            \/\/Callback handler when menu item is clicked<\/span>\n            function<\/span> menuHandler(event)\n            {\n                if<\/span> (newMenu != null<\/span>)\n                    $(newMenu).hide();\n\n                alert(event.srcElement.text);\n            }\n        <\/<\/span>script<\/span>><\/span>\n\n    <\/<\/span>head<\/span>><\/span>\n\n    <<\/span>body<\/span>><\/span>\n        <<\/span>div<\/span> data-role=\"page\"<\/span> ><\/span>\n            <<\/span>div<\/span> data-role=\"content\"<\/span> id=\"contentDiv\"<\/span>><\/span>\n                <<\/span>a<\/span> href=\"\"<\/span> data-role=\"button\"<\/span> data-inline=\"true\"<\/span> id=\"btn1\"<\/span>><\/span>Show Menu<\/<\/span>a<\/span>><\/span>\n            <\/<\/span>div<\/span>><\/span>\n            <<\/span>span<\/span> style='<\/span>position<\/span>:relative;float<\/span>:left'<\/span>><\/span><\/<\/span>span<\/span>><\/span>\n        <\/<\/span>div<\/span>><\/span>\n\n    <\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span><\/pre>\n
    – Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
    Creating popup menus in JQuery Mobile is not quite simple. I am talking about menu that you might want to display when user clicks on, for example, a list item or a button. Refer to JQuery Mobile documents for select menus\u00a0and custom menus\u00a0. These menus are actually drop down lists and in all the cases, … <\/p>\n
    Continue reading “Creating dynamic popup menus with JQuery Mobile”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[30,1],"tags":[37,31],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-5P","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/361"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/361\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=361"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}