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)
Code:
$('#banner').flash({ src: '/images/MH_OPENSTAANDE_JOBS.swf', height: 146, width: 745 });
http://jquery.lukelutman.com/plugins/flash/
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/
Code:
$("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300 });
http://fancybox.net/ (Supported Media: Images, Inline HTML, iFrame)
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
Code:
$("#accordion").accordion({ header: "h3" });
Code:
$('#tabs').tabs();
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"); } } });
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.
Niet alle methods werken correct in IE met jquery 1.3.2, beter 1.4.x gebruiken
Code:
$('#slider').slider({ range: true, values: [17, 67] });
Code:
$('#datepicker').datepicker({ inline: true });
Code:
$("#progressbar").progressbar({ value: 20 });
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)
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.<
Code:
$('#slideshow').cycle({ delay: 1000, speed: 500 });
http://www.malsup.com/jquery/cycle/lite/ (lite)
http://www.malsup.com/jquery/cycle/ (full)
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/
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/
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
Code:
$('#set1 *').tooltip();
http://docs.jquery.com/Plugins/Tooltip
Code:
$.fck.config = { path: '/fckeditor/', height:300, config:{ CustomConfigurationsPath:'/js132/FCKconfig.js', AutoDetectLanguage:false, DefaultLanguage:'en', ToolbarSet: 'MyToolbar' } }; $('textarea#testArea').fck();
http://www.fyneworks.com/jquery/FCKEditor/
Code:
<input type="file" class="multi">
http://www.fyneworks.com/jquery/multiple-file-upload/
Code:
$.validator.messages.required = "*"; $('#validationform').submit(function() { return validateAndSubmitForm('validationform'); }); function validateAndSubmitForm(theForm) { $('#' + theForm).validate(); return $('#' + theForm).valid(); }
http://docs.jquery.com/Plugins/Validation/
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/
Code:
$("input[placeholder]").placeHeld();
http://plugins.jquery.com/project/placeheld