Wikizone - Benutzerbeiträge [de]

JQuery - Snippets

2011-11-30T19:46:49Z

79.240.64.42:

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== 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 » Site title here</title>


<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="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<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>


<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" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</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>

<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>

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

</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>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// 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!')
}
</pre>

== DOM Manipulation ==
===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>

JQuery - Snippets

2011-11-30T19:40:43Z

79.240.64.42: /* JavaScript nachladen während die Seite schon angezeigt wird */

Nützliche jQuery Schnipsel

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== 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 » Site title here</title>


<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="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<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>


<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" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</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>

<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>

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

</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>



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// 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!')
}
</pre>

==Append Site Overlay DIV==

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>

JQuery

2011-11-30T19:39:20Z

79.240.64.42: /* Links */

==Quickstart==

http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Gut durchlesen, hier werden die meisten Basics angesprochen.

[[jQuery - Snippets]]

== Links ==
Elemente auswählen: http://docs.jquery.com/DOM/Traversing/Selectors

Ereignisse: http://docs.jquery.com/Events

Gute Tools out of the Box:
Erste Wahl mit allem was man so braucht sind die jQuery Tools:

http://flowplayer.org/tools/index.html

Oder in Kurzform hier: [[JQuery Tools (flowplayer.org)]]

[[jQuery - Snippets]]

==Einbinden==
Es gibt die Core Datei und einige nützliche Erweiterungen die man sich passend zusammestellen kann um die Download Größe klein zu halten. Außerdem gibt es gepackte Versionen.

===Über Google===
Hinweis: Google gibt an man solle zuerst den API Code übergeben damit es funktioniert. Der direkte Zugriff funktioniert aber auch ohne. Vielleicht geht es nicht wenn man die google. load Funktion nutzt (hier nicht weiter behandelt)

Beispiel API Code Übergabe:
<script type="text/javascript" src="https://www.google.com/jsapi?key=INSERT-YOUR-KEY"></script>

'''Beispiel:'''

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

ui steht für User Interface (Plugins)

=== Über jQuery Server ===
Beispiel:
<script src="http://code.jquery.com/jquery-latest.js"></script>

=== Libary auf eigenem Server ===
==== Geo-bit webmynet ====
ToDo -> Idee ist verschiedene libs auf tools.webmynet.de vorzuhalten ähnlich wie sie auf dem Google Server liegen.
Zweck: einfache Einbindung, Statistik, Testing

=== Typo3 ===
siehe JavaScript Frameworks nutzen

== Der Beginn ==
In der Regel soll es losgehen, sobald das Dokument geladen ist (weil dies für manche Manipulationen notwendig ist) Deshalb beginnt man i.d.R. mit einem Onload Event:

$(document).ready(function() {
// do stuff when DOM is ready
});

Oder Abgekürzt

$(function() {
// do stuff when DOM is ready
});

== Reagieren auf Klick ==
<pre>
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});

</pre>
$("a")
bedeutet Das was jetzt kommt gilt für alle Links
.click()
es soll bei Klick etwas passieren

Früher hat man das so gelöst:
<a href="" onclick="alert('Hello world')">Link</a>
Das funktioniert, allerdings muß man hier bei jedem Link den Schnipsel einfügen.

== Zugriff auf Elemente ==
Old School:
document.getElementById("orderedlist")
Mit JQuery analog zu obigem Beispiel
<pre>
$(document).ready(function() {
$("#orderedlist").addClass("red");
});

</pre>
Hier wird noch eine Klasse eingebaut

'''Weitere Beispiele:'''

$("#orderedlist > li")
Alle Listenelemente unterhalb #orderedlist
#orderedlist li:last
Hier ist nur das letzte Listenelement gemeint.
<pre>
$(document).ready(function() {
$("#orderedlist li:last").hover(function() {
$(this).addClass("green");
},function(){
$(this).removeClass("green");
});
});
</pre>
Die Hoverfunktion kann zwei Funktionen als Parameter aufnehmen.

== Elemente manipulieren, hinzufügen, entfernen ==

== Weitere Funktionen ==
find()
addClass()
removeClass()
hover()
each()
append()

== Ereignisse ==

== Weitere Beispiele ==
<pre>
// Find some li s and append Text
$("#orderedlist").find("li").each(function(i) {
$(this).append( " BAM! " + i );
});

$("a[href*=/content/gallery]").click(function() {
// do something with all links that point somewhere to /content/gallery
});

// use this to reset a single form
$("#reset").click(function() {
$("form")[0].reset();
});

// use this to reset several forms at once
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});

// Find li elements that does NOT have a parent ul
$(document).ready(function() {
$("li").not(":has(ul)").css("border", "1px solid black");
});

// Find elements with a name attribute
$(document).ready(function() {
$("a[name]").css("background", "#eee" );
});

// Grab the parent
$("a").hover(function(){
$(this).parents("p").addClass("highlight");
},function(){
$(this).parents("p").removeClass("highlight");
});

</pre>

=== Testen ob jQuery geladen ist ===
Testen ob geladen, wenn nicht von google holen, wenn nicht verfügbar lokale Version nehmen

<pre>
jQuerySrc = 'fileadmin/js/jquery-min.js';

// only load jQuery if not present
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></"+"script>");
}

// if Google is down
if (typeof jQuery == 'undefined') {
document.write("<script type=\"text/javascript\" src=\"" + jQuerySrc + "\"></"+"script>");
}
</pre>

== Troubleshooting - Probleme Lösen ==
[[jQuery - Probleme lösen (Troubleshooting)]]