JQuery - Snippets: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „Nützliche jQuery Schnipsel == JavaScript nachladen während die Seite schon angezeigt wird == <pre> // Add this onDocumentReady function to the end of the jQue…“)
 
Zeile 1: Zeile 1:
 
Nützliche jQuery Schnipsel
 
Nützliche jQuery Schnipsel
  
 +
== XHTML 1.0 Template mit jQuery ==
 +
<pre>
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
 +
<head>
 +
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 +
<title>Title goes here &raquo; Site title here</title>
  
 +
<!-- Meta Tags -->
 +
<base href="" />
 +
<meta name="author" content="#" />
 +
<meta name="description" content="#" />
 +
<meta name="copyright" content="#" />
 +
<meta name="robots" content="#" />
 +
<meta name="generator" content="#" />
 +
<meta name="keywords" content="#" />
 +
<meta http-equiv="expires" content="#" />
 +
<meta http-equiv="cache-control" content="#" />
 +
 +
<!-- Fav icon -->
 +
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 +
 +
<!-- JavaScript setup -->
 +
<script type="text/javascript">
 +
/*<![CDATA[*/
 +
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
 +
document.getElementsByTagName('html')[0].className = 'js';
 +
/*]]>*/
 +
</script>
 +
 +
<!-- CSS -->
 +
<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
 +
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
 +
 +
<!--[if IE]>
 +
<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
 +
<![endif]-->
 +
 +
</head>
 +
<body>
 +
<div id="container">
 +
 +
<div id="header">
 +
<h1>Title of page goes here</h1>
 +
<h2>Subtitle of page goes here</h2>
 +
</div><!-- end header div -->
 +
 +
<div id="nav">
 +
<ul class="menu">
 +
<li><a href="#">Link #1</a></li>
 +
<li><a href="#">Link #2</a></li>
 +
<li><a href="#">Link #3</a></li>
 +
</ul>
 +
<ul class="breadcrumbs">
 +
<li><a href="#">Home</a></li>
 +
<li><a href="#">Sub directory</a></li>
 +
<li><a href="#">Current page</a></li>
 +
</ul>
 +
</div><!-- end nav div -->
 +
 +
<div id="main">
 +
<ul class="sidebar">
 +
<li><a href="#">Sidebar link #1</a></li>
 +
<li><a href="#">Sidebar link #2</a></li>
 +
</ul>
 +
 +
<div id="sub1">
 +
<h3>Title of content</h3>
 +
<p>Begin content here</p>
 +
</div>
 +
 +
<div id="sub2" class="hide">
 +
<h3>Title of content</h3>
 +
<p>Begin content here</p>
 +
</div>
 +
</div><!-- end main div -->
 +
 +
<div id="footer">
 +
<p>&copy;2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
 +
</div><!-- end footer div -->
 +
 +
</div><!-- end container div -->
 +
 +
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
 +
<script type="text/javascript" src="/scripts/app.js"></script>
 +
 +
<!-- place Google Analytics code here -->
 +
 +
</body>
 +
</html>
 +
</pre>
 
== JavaScript nachladen während die Seite schon angezeigt wird ==
 
== JavaScript nachladen während die Seite schon angezeigt wird ==
 
<pre>
 
<pre>

Version vom 28. Oktober 2011, 10:48 Uhr

Nützliche jQuery Schnipsel

XHTML 1.0 Template mit jQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Title goes here » Site title here</title>

	<!-- Meta Tags -->
	<base href="" />
	<meta name="author" content="#" />
	<meta name="description" content="#" />
	<meta name="copyright" content="#" />
	<meta name="robots" content="#" />
	<meta name="generator" content="#" />
	<meta name="keywords" content="#" />
	<meta http-equiv="expires" content="#" />
	<meta http-equiv="cache-control" content="#" />
	
	<!-- Fav icon -->
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

	<!-- JavaScript setup -->
	<script type="text/javascript">
	/*<![CDATA[*/
	// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
	document.getElementsByTagName('html')[0].className = 'js';
	/*]]>*/
	</script>
	
	<!-- CSS -->
	<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />
	
	<!--[if IE]>
	<link rel="stylesheet" href="/stylesheets/ie-all.css" type="text/css" media="screen, projection" />
	<![endif]-->
	
</head>
<body>
	<div id="container">
	
		<div id="header">
			<h1>Title of page goes here</h1>
			<h2>Subtitle of page goes here</h2>
		</div><!-- end header div -->
		
		<div id="nav">
			<ul class="menu">
				<li><a href="#">Link #1</a></li>
				<li><a href="#">Link #2</a></li>
				<li><a href="#">Link #3</a></li>
			</ul>
			<ul class="breadcrumbs">
				<li><a href="#">Home</a></li>
				<li><a href="#">Sub directory</a></li>
				<li><a href="#">Current page</a></li>
			</ul>
		</div><!-- end nav div -->

		<div id="main">
			<ul class="sidebar">
				<li><a href="#">Sidebar link #1</a></li>
				<li><a href="#">Sidebar link #2</a></li>
			</ul>

			<div id="sub1">
				<h3>Title of content</h3>
				<p>Begin content here</p>
			</div>
			
			<div id="sub2" class="hide">
				<h3>Title of content</h3>
				<p>Begin content here</p>
			</div>
		</div><!-- end main div -->

		<div id="footer">
			<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
		</div><!-- end footer div -->
		
	</div><!-- end container div -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/app.js"></script>
	
<!-- place Google Analytics code here -->

</body>
</html>

JavaScript nachladen während die Seite schon angezeigt wird

// Add this onDocumentReady function to the end of the jQuery.js file. 
// It MUST be in the jquery file to work correctly.
$(function(){
	var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;
 
	$('script').each(function(){
		var src = $(this).attr('src');
		if (!scripts.test(src)) return;
		var pathto = src.match(path);
		files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
			return pathto+e+'.js'
		}));
	})
 
	count = files.length;
 
	$.each(files, function(){
		$.getScript(this, function(){
			loaded++;
			if(loaded == count && typeof onBackload == 'function')
				onBackload(loaded)
		})
	})
});
 
/**
 * If you have the following script tags:
 * 	<script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
 * 	<script src="/other/path/foo.js?different.file,final.file"></script>
 * This script will "backload" the following files:
 * 	/path/to/somefile.js
 *	/path/to/otherfile.min.js
 * 	/path/to/thirdfile.js
 * 	/other/path/different.file.js
 *	/other/path/final.file.js
 */
 
// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
	alert('All ' + loaded + ' files backloaded!')
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=JQuery_-_Snippets&oldid=18890“