entMobileMenu

Mobile Menu Widget

by markallgood

HTML

<link rel="stylesheet" href="https://online.olbtest.local/mb/App_Themes/EntMobile/stylesheet.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/sunny/jquery-ui.css">
<ul class="menu">
    <li class="breadcrumbs">
        Breadcrumbs
        <ul>
            <li><a href="www.cnn.com">Home</a></li>
            <li><a href="#">History Search</a></li>
            <li><a href="#">Open An Account</a></li>
            <li><a href="#">Apply For A Loan</a></li>
        </ul>
    </li>
    <li class="selected">
        <a href="http://www.cnn.com">Accounts</a>
        <ul>
            <li class="selected"><a href="#">Summary</a></li>
            <li><a href="#">History Search</a></li>
            <li><a href="#">Open An Account</a></li>
            <li><a href="#">Apply For A Loan</a></li>
        </ul>
    <li>
    <li>
        <a href="#">Transfers</a>
        <ul>
            <li><a href="#">Menu 2a</a></li>
            <li><a href="#">Menu 2b</a></li>
            <li><a href="#">Menu 2c</a></li>
        </ul>
    <li>
    <li>
        <a href="#">Bill Pay</a>
        <ul>
            <li><a href="#">Menu 3a</a></li>
            <li><a href="#">Menu 3b</a></li>
            <li><a href="#">Menu 3c</a></li>
            <li><a href="#">Menu 3d</a></li>
            <li><a href="#">Menu 3e</a></li>
        </ul>
    <li>
</ul>

JavaScript

(function($) {
    $.widget("ent.mobileMenu", {

        // These options will be used as defaults
        options: {
            clear: null
        },

        // Set up the widget
        _create: function() {
            var $selectedSubMenuItem = this.element.find("ul li.selected");
            var title = $selectedSubMenuItem.text();
            var $selectedMenuItemLink = this.element.find("> li.selected a");
            var backUrl = $selectedMenuItemLink.attr("href");

            this.uiMobileMenu = $('<div class="ui-menu-mobile"><table class="tb" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td class="tb-l"><a class="lnkLeft" href="../MainMenu.aspx?d=b"><img src="https://online.olbtest.local/mb/App_Themes/EntMobile/images/img_trans.gif" class="sprite back"></a></td><td class="tb-r"><a class="lnkRight" href="/mb/MainMenu.aspx?d=m"><img src="https://online.olbtest.local/mb/App_Themes/EntMobile/images/img_trans.gif" class="sprite menu"></a></td></tr></tbody></table></div>').insertAfter(this.element);
            var $menuTitle = $('<td class="tb-c" style="font-size: 16px;"></td>').text(title).insertAfter(this.uiMobileMenu.find("td.tb-l"));
            this.uiMobileMenu.find("td.tb-l a").attr("href", backUrl);
            this.element.hide();
        },

        // Use the _setOption method to respond to changes to options
        _setOption: function(key, value) {
            switch (key) {
            case "clear":
                // handle changes to clear option
                break;
            }

            // In jQuery UI 1.8, you have to manually invoke the _setOption method from the base widget
            $.Widget.prototype._setOption.apply(this, arguments);
            // In jQuery UI 1.9 and above, you use the _super method instead
            this._super("_setOption", key, value);
        },

        // Use the destroy method to clean up any modifications your widget has made to the DOM
        destroy: function() {
           ...