JQUERY 1.4.2

Sifr

Code:

$('h3').sifr({path: '/images/', font: 'brush_script', color:'#FF0000'});

http://www.eona.com/sifr/ (voorbeelden)
http://www.sifrgenerator.com (bron: ttf, sIFR 2)
http://onlinefontconverter.com/ (converteren font naar ttf)

TESTJe SIFR éàçè;

Flash (stop using this one : bugs on IE)

Code:

$('#banner').flash({ src: '/images/MH_OPENSTAANDE_JOBS.swf', height: 146, width: 745 });

http://jquery.lukelutman.com/plugins/flash/

Flash Swfobject

Code:

				if ($.flash.hasVersion(9)) {
				  $('#banner').flash({ swf: '/images/MH_OPENSTAANDE_JOBS.swf', height: 146, width: 745 });
				  $("#banner").addClass("flash-replaced"); 
				 }

http://jquery.thewikies.com/swfobject/

Fancybox

Code:

$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300 });

http://fancybox.net/ (Supported Media: Images, Inline HTML, iFrame)

JQuery UI

http://jqueryui.com/
Interactions (Draggable,Droppable,Resizable,Selectable,Sortable)
Widgets (Accordion,Datepicker,Dialog,Progressbar,Slider,Tabs)
Effects (Effect,Show,Hide,Toggle,Color animation,Add class,Remove class,Toggle class,Switch class

Accordion

Code:

$("#accordion").accordion({ header: "h3" });

First

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Second

Phasellus mattis tincidunt nibh.

Third

Nam dui erat, auctor a, dignissim quis.

Tabs

Code:

$('#tabs').tabs();
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.

Dialog

Code:

$('#dialog_link').click(function(){
	$('#dialog').dialog('open');
	return false;
});
$('#dialog').dialog({
	autoOpen: false,
	width: 600,
	buttons: {
		"Ok": function() { 
			$(this).dialog("close"); 
		}, 
		"Cancel": function() { 
			$(this).dialog("close"); 
		} 
	}
});

 Open Dialog

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Slider

Code:

$('#slider').slider({ range: true, values: [17, 67] });

Datepicker

Code:

$('#datepicker').datepicker({ inline: true });

Progressbar

Code:

$("#progressbar").progressbar({ value: 20 });

JQuery Tools

Code:

$("div.scrollable").scrollable();

http://flowplayer.org/tools/
(Tabs,Tooltip,Scrollable,Overlay,Expose)
Opgepast: Zorg ervoor dat je geen overlapping hebt van JQuery UI en JQuery Tools (bv. Tabs)




ScrollPane

Code:

$('#pane1').jScrollPane();

http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec condimentum pretium nisl. Integer quis tellus nec turpis placerat scelerisque. In semper lacus eu nisi. Praesent dignissim metus sit amet enim. Nam auctor, neque semper congue sagittis, risus mi commodo pede, nec euismod magna libero at sem. In enim magna, vestibulum et, blandit sit amet, tempor vel, ligula. Phasellus ante augue, congue vitae, faucibus quis, gravida sit amet, diam. Nullam congue accumsan magna. Etiam a nunc. Aliquam elit urna, ornare vitae, ultrices et, tempus non, nisl. Duis eros neque, luctus quis, interdum ultricies, auctor eu, urna. Donec nibh. Integer in purus tempus mi venenatis mollis. Cras nunc odio, porttitor at, accumsan ac, adipiscing vitae, ante.

Nam dui enim, fringilla vitae, rhoncus non, pharetra in, nunc. Sed a lectus vel orci bibendum placerat. Aliquam erat volutpat. Integer odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis dictum egestas lorem. Donec ultricies volutpat tellus. Phasellus justo arcu, pharetra eget, cursus non, consectetuer ac, nunc. Fusce orci tortor, semper vel, lacinia vitae, accumsan id, quam. Mauris semper molestie lectus. Duis venenatis erat ultrices nisl.

Morbi augue enim, ultricies nec, lobortis sed, iaculis eu, quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur sollicitudin, elit eu porttitor varius, tellus velit tristique sem, vitae blandit nisi eros id purus. Nunc non lorem. Nunc blandit purus nec nisi. Donec vulputate, urna vel interdum tristique, tellus mauris pretium lacus, quis sodales lectus nunc sit amet turpis. Suspendisse potenti. Fusce accumsan. Maecenas aliquam consectetuer augue. Fusce est neque, condimentum nec, condimentum vitae, consectetuer ac, tortor. Praesent ultricies urna in lectus. Nam erat nunc, venenatis nec, facilisis sed, feugiat ac, pede. Vivamus aliquam aliquet libero. Curabitur dolor nunc, scelerisque at, gravida dignissim, rutrum at, orci. Maecenas vitae libero id eros rutrum hendrerit. Duis lacinia mauris non erat. Nullam et dolor vel leo sollicitudin suscipit. Sed laoreet libero.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent turpis. Suspendisse molestie, neque non congue ullamcorper, neque sem consequat nisl, eget pulvinar odio erat et tellus. Nunc luctus convallis dolor. Nullam non mauris. Etiam nisi magna, adipiscing eu, nonummy ac, laoreet nec, est. Pellentesque tristique, est vel condimentum feugiat, nisi justo rhoncus pede, in pulvinar mauris lectus vitae dui. Pellentesque scelerisque. Vestibulum tellus dolor, porta quis, facilisis nec, convallis vitae, quam. Quisque nisi. Nunc vitae nulla vel turpis mollis molestie. Etiam vitae massa.<

Cycle

Er bestaan 3 versies van Cycle:
  • jquery.cycle.all.2.73.min.js: bevat alle slideshow logica + alle mogelijke transition effecten
  • jquery.cycle.min.2.73.js: bevat alle slideshow logica + 1 transition effect (fade)
  • jquery.cycle.lite.min.1.0.js: bevat slechts een beperkte hoeveelheid slideshow logica (opties zoals het pauzeren van de slideshow, skippen naar een bepaalde slide, ... zijn in deze versie NIET aanwezig) + 1 transition effect (fade)

Code:

$('#slideshow').cycle({ delay: 1000, speed: 500 });

http://www.malsup.com/jquery/cycle/lite/ (lite)
http://www.malsup.com/jquery/cycle/ (full)

Google Visualization API

Code:

google.load("visualization", "1", {packages:["piechart", "table"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Task');
	data.addColumn('number', 'Hours per Day');
	data.addRows(5);
	data.setValue(0, 0, 'Work');
	data.setValue(0, 1, 11);
	data.setValue(1, 0, 'Eat');
	data.setValue(1, 1, 2);
	data.setValue(2, 0, 'Commute');
	data.setValue(2, 1, 2);
	data.setValue(3, 0, 'Watch TV');
	data.setValue(3, 1, 2);
	data.setValue(4, 0, 'Sleep');
	data.setValue(4, 1, 7);
	
	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
	chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
	
	var table = new google.visualization.Table(document.getElementById('table_div'));
	table.draw(data);
}

http://code.google.com/apis/visualization/

Google Maps API

Code:

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
	zoom: 8,
	center: myLatlng,
	mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myMap = new google.maps.Map(document.getElementById("map_div"), myOptions);}

http://code.google.com/apis/maps/documentation/v3/

Autocomplete

Code:

			$("#singleBirdRemote").autocomplete("test.dhtml", {
				width: 260,
				selectFirst: false
			});

			$("#singleBirdRemote").result(function(event, data, formatted) {
				if (data)
					$(this).parent().next().find("input").val(data[1]);
			});

http://docs.jquery.com/Plugins/Autocomplete

Tooltip

Code:

				$('#set1 *').tooltip();

http://docs.jquery.com/Plugins/Tooltip

Three elements with tooltips, default settings Link to google

FCKeditor

Code:

				$.fck.config = { 
					 path: '/fckeditor/', 
					 height:300, 
					 config:{
						CustomConfigurationsPath:'/js142/FCKconfig.js',
						AutoDetectLanguage:false,
						DefaultLanguage:'en',
						ToolbarSet: 'MyToolbar'
					 }
				}; 
				$('textarea#testArea').fck();

http://www.fyneworks.com/jquery/FCKEditor/

Multi FileUpload

Code:

				<input type="file" class="multi">

http://www.fyneworks.com/jquery/multiple-file-upload/

Validation

Code:

				$.validator.messages.required = "*";
				$('#validationform').submit(function() {
					return validateAndSubmitForm('validationform');
				});
				
				function validateAndSubmitForm(theForm) {
					$('#' + theForm).validate();
					return $('#' + theForm).valid();
				}

http://docs.jquery.com/Plugins/Validation/

JClock

Code:

				// digital
				var clock_options = {
					utc: true,
					utcOffset: 8,
					format: '%H:%M %S %p'
				}; 
				$('#clock_digital').jclock(clock_options);

http://plugins.jquery.com/project/jclock/

Placeheld

Code:

				$("input[placeholder]").placeHeld();

http://plugins.jquery.com/project/placeheld