JQuery Mobile Menu - Plugin: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „jQuery Mobilemenu jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu Instalation Just include the script on your…“)
 
 
(3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
−
jQuery Mobilemenu
+
== jQuery Mobilemenu ==
 +
 
 +
+ Sehr einfach und Schnell
 +
+ Kein zusätzliches Menü Markup
 +
- Nicht mobile First, Markup wird durch JS erzeugt
 +
- Menüpunkte nicht separat anpassbar
 +
- Nur in Grenzen anpassbar (Position, aussehen) -> CSS ja aber Position im Quellcode ist fix
  
 
jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu
 
jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu
Zeile 6: Zeile 12:
 
Just include the script on your html files
 
Just include the script on your html files
  
−
<script type="text/javascript" src="jquery.mobilemenu.js"></script>
+
<script type="text/javascript" src="jquery.mobilemenu.js"></script>
  
−
Usage
+
=== Usage ===
  
 
After including the script on your html, just write this code somewhere on your javascript file.
 
After including the script on your html, just write this code somewhere on your javascript file.
  
−
$('.menu').mobileMenu();
+
$('.menu').mobileMenu();
  
−
Options
+
=== Options ===
  
 
jQuery mobilemenu have some options:
 
jQuery mobilemenu have some options:
  
−
    defaultText: default text for option element
+
defaultText: default text for option element
−
 
+
className: Class name for dropdown select menu
−
    className: Class name for dropdown select menu
+
subMenuClass: Class name for submenu /* Updated you don't need to add class to sub menu */
−
 
+
subMenuDash: Separator for submenu
−
    subMenuClass: Class name for submenu /* Updated you don't need to add class to sub menu */
 
−
 
 
−
    subMenuDash: Separator for submenu
 
  
 
<pre>
 
<pre>
Zeile 33: Zeile 36:
 
});
 
});
 
</pre>
 
</pre>
 +
 +
== Source ==
 +
=== jquery.mobilemenu.js ===
 +
<syntaxhighlight lang="javascript">
 +
/**
 +
* jQuery Mobile Menu
 +
* Turn unordered list menu into dropdown select menu
 +
* version 1.1(27-JULY-2013)
 +
*
 +
* Built on top of the jQuery library
 +
*  http://jquery.com
 +
*
 +
* Documentation
 +
* http://github.com/mambows/mobilemenu
 +
*/
 +
(function($){
 +
$.fn.mobileMenu = function(options) {
 +
 +
var defaults = {
 +
defaultText: 'Navigate to...',
 +
className: 'select-menu',
 +
subMenuClass: 'sub-menu',
 +
subMenuDash: '&ndash;'
 +
},
 +
settings = $.extend( defaults, options ),
 +
el = $(this);
 +
 +
this.each(function(){
 +
var $el = $(this),
 +
$select_menu;
 +
 +
// ad class to submenu list
 +
$el.find('ul').addClass(settings.subMenuClass);
 +
 +
// Create base menu
 +
var $select_menu = $('<select />',{
 +
'class' : settings.className + ' ' + el.get(0).className
 +
}).insertAfter( $el );
 +
 +
// Create default option
 +
$('<option />', {
 +
"value" : '#',
 +
"text" : settings.defaultText
 +
}).appendTo( $select_menu );
 +
 +
// Create select option from menu
 +
$el.find('a').each(function(){
 +
var $this = $(this),
 +
optText = '&nbsp;' + $this.text(),
 +
optSub = $this.parents( '.' + settings.subMenuClass ),
 +
len = optSub.length,
 +
dash;
 +
 +
// if menu has sub menu
 +
if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
 +
dash = Array( len+1 ).join( settings.subMenuDash );
 +
optText = dash + optText;
 +
}
 +
 +
// Now build menu and append it
 +
$('<option />', {
 +
"value" : this.href,
 +
"html" : optText,
 +
"selected" : (this.href == window.location.href)
 +
}).appendTo( $select_menu );
 +
 +
}); // End el.find('a').each
 +
 +
// Change event on select element
 +
$select_menu.change(function(){
 +
var locations = $(this).val();
 +
if( locations !== '#' ) {
 +
window.location.href = $(this).val();
 +
};
 +
});
 +
 +
}); // End this.each
 +
 +
return this;
 +
 +
};
 +
})(jQuery);
 +
</syntaxhighlight>

Aktuelle Version vom 29. April 2017, 07:34 Uhr

jQuery Mobilemenu[Bearbeiten]

+ Sehr einfach und Schnell
+ Kein zusätzliches Menü Markup
- Nicht mobile First, Markup wird durch JS erzeugt
- Menüpunkte nicht separat anpassbar
- Nur in Grenzen anpassbar (Position, aussehen) -> CSS ja aber Position im Quellcode ist fix

jQuery mobile menu is a jquery plugin for turn an unordered list menu into dropdown select menu Instalation

Just include the script on your html files 

<script type="text/javascript" src="jquery.mobilemenu.js"></script>

Usage[Bearbeiten]

After including the script on your html, just write this code somewhere on your javascript file. 

$('.menu').mobileMenu();

Options[Bearbeiten]

jQuery mobilemenu have some options: 

defaultText: default text for option element
className: Class name for dropdown select menu
subMenuClass: Class name for submenu /* Updated you don't need to add class to sub menu */
subMenuDash: Separator for submenu

$('.menu').mobileMenu({
	defaultText: 'Navigate to...',
	className: 'select-menu',
	subMenuDash: '–'
});

Source[Bearbeiten]

jquery.mobilemenu.js[Bearbeiten]

/**
 * jQuery Mobile Menu 
 * Turn unordered list menu into dropdown select menu
 * version 1.1(27-JULY-2013)
 * 
 * Built on top of the jQuery library
 *   http://jquery.com
 * 
 * Documentation
 * 	 http://github.com/mambows/mobilemenu
 */
(function($){
$.fn.mobileMenu = function(options) {
	
	var defaults = {
			defaultText: 'Navigate to...',
			className: 'select-menu',
			subMenuClass: 'sub-menu',
			subMenuDash: '&ndash;'
		},
		settings = $.extend( defaults, options ),
		el = $(this);
	
	this.each(function(){
		var $el = $(this),
			$select_menu;

		// ad class to submenu list
		$el.find('ul').addClass(settings.subMenuClass);

		// Create base menu
		var $select_menu = $('<select />',{
			'class' : settings.className + ' ' + el.get(0).className
		}).insertAfter( $el );

		// Create default option
		$('<option />', {
			"value"		: '#',
			"text"		: settings.defaultText
		}).appendTo( $select_menu );

		// Create select option from menu
		$el.find('a').each(function(){
			var $this 	= $(this),
				optText	= '&nbsp;' + $this.text(),
				optSub	= $this.parents( '.' + settings.subMenuClass ),
				len		= optSub.length,
				dash;
			
			// if menu has sub menu
			if( $this.parents('ul').hasClass( settings.subMenuClass ) ) {
				dash = Array( len+1 ).join( settings.subMenuDash );
				optText = dash + optText;
			}

			// Now build menu and append it
			$('<option />', {
				"value"	: this.href,
				"html"	: optText,
				"selected" : (this.href == window.location.href)
			}).appendTo( $select_menu );

		}); // End el.find('a').each

		// Change event on select element
		$select_menu.change(function(){
			var locations = $(this).val();
			if( locations !== '#' ) {
				window.location.href = $(this).val();
			};
		});

	}); // End this.each

	return this;

};
})(jQuery);
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=JQuery_Mobile_Menu_-_Plugin&oldid=22273“