www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/015/js/jquery.mobilemenu.js
(function($){ //plugin's default options var settings = { prependTo: 'nav', //insert at top of page by default switchWidth: 768, //width at which to switch to select, and back again topOptionText: 'Select a page:' //default "unselected" state }, menuCount = 0, //used as a unique index for each menu if no ID exists uniqueLinks = []; //used to store unique list items for combining lists //go to page function goTo(url){document.location.href = url;} //does menu exist? function menuExists(){return ($('.mnav').length) ? true : false;} //validate selector's matched list(s) function isList($this){ var pass = true; $this.each(function(){ if(!$(this).is('ul') && !$(this).is('ol')){ pass=false; } }); return pass; }//isList() //function to decide if mobile or not function isMobile(){return ($(document).width() < settings.switchWidth);} //function to get text value of element, but not it's children function getText($item){return $.trim($item.clone().children('ul, ol').remove().end().text());} //function to check if URL is unique function isUrlUnique(url){return ($.inArray(url, uniqueLinks) === -1) ? true : false;} //function to create options in the select menu function createOption($item, $container, text){ //if no text param is passed, use list item's text, otherwise use settings.groupPageText var $selected='', $disabled='', $sel_text=''; if ($item.hasClass('current')) $selected='selected'; if ($item.hasClass('disabled')) { if ($('.current').length) $disabled='disabled'; else $disabled='selected'; } $sel_text=$.trim(getText($item)); $sel_text = $sel_text.replace('»', ''); if ($item.parent('ul ul').length) $sel_text = ' – ' + $sel_text; if ($item.parent('ul ul ul').length) $sel_text = '– ' + $sel_text; if ($item.parent('ul ul ul ul').length) $sel_text = '– ' + $sel_text; if(!text){$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>' + $sel_text +'</option>').appendTo($container);} else {$('<option value="'+$item.find('a:first').attr('href')+'" ' + $selected + ' ' + $disabled + '>'+text+'</option>').appendTo($container);} }//createOption() //function to create submenus function createGroup($group, $container){ //loop through each sub-nav list $group.children('ul, ol').each(function(){ $(this).children('li').each(function(){ createOption($(this), $container); $(this).each(function(){ var $li_ch = $(this), $container_ch = $container; createGroup($li_ch, $container_ch); }); }); }); }//createGroup() //function to create <select> menu function createSelect($menu){ //create <select> to insert into the page var $select = $('<select id="mm'+menuCount+'" class="mnav">'); menuCount++; //create default option if the text is set (set to null for no option) if(settings.topOptionText){createOption($('<li class="disabled"><a href="#">'+settings.topOptionText+'</a></li>'), $select);} //loop through first list items $menu.children('li').each(function(){ var $li = $(this); //if nested select is wanted, and has sub-nav, add optgroup element with child options if($li.children('ul, ol').length){ createOption($li, $select); createGroup($li, $select); } //otherwise it's a single level select menu, so build option else {createOption($li, $select);} }); //add change event and prepend menu to set element $select .change(function(){goTo($(this).val());}) .prependTo(settings.prependTo); }//createSelect() //function to run plugin functionality function runPlugin(){ //menu doesn't exist if(isMobile() && !menuExists()){ $menus.each(function(){ createSelect($(this)); }); } //menu exists, and browser is mobile width if(isMobile() && menuExists()){ $('.mnav').show(); $menus.hide(); } //otherwise, hide the mobile menu if(!isMobile() && menuExists()){ $('.mnav').hide(); $menus.show(); } }//runPlugin() //plugin definition $.fn.mobileMenu = function(options){ //override the default settings if user provides some if(options){$.extend(settings, options);} //check if user has run the plugin against list element(s) if(isList($(this))){ $menus = $(this); runPlugin(); $(window).resize(function(){runPlugin();}); } else { alert('mobileMenu only works with <ul>/<ol>'); } };//mobileMenu() })(jQuery); $(document).ready(function(){ $('.sf-menu').mobileMenu(); });