History: jQuery

• «
• »

            !! jQuery
jQuery has been added as javascript framework, which allows many nice effects on several parts of Tiki. It is an experimental, optional feature of Tiki 3.0, and in 4.0 it is the default, always on Javascript framework. It is used in compatibility mode (via the JavaScript var $jq instead of just $) in Tiki3, 4 & 5, so specific projects can also use others (although in Tiki, it's just jQuery). However, since ((Tiki6)), you don't need to start you code with $jq but just $. 

Keep in mind that there is also a ((PluginJQ)) to allow other extended usages.


{maketoc}
It can be enabled through "Admin > Features", and its options through "Admin > Look and Feel > UI Effects"

^::{img src=img/wiki_up/tiki3_admin_jquery_00.png}::^

You can see it in action in this introductory video to [Tiki3#Video]

!!!JQuery Plugins added in Tiki 3.0

!!!!Tooltips
''[http://plugins.learningjquery.com/cluetip/]''
The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

!!!!Autocomplete
''[http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/]''
Drop-down menu lists from input fields (like Google Suggest). Currently only implemented on "Quick Edit" module page list so far.

!!!!Superfish
''[http://users.tpg.com.au/j_birch/plugins/superfish/]''
Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript)
Requires Css Menus (suckerfish) feature enabled

!!!!Reflection
''[http://www.digitalia.be/software/reflectionjs-for-jquery]''
It allows you to add instantaneous reflection effects to your images in modern browsers.
So far only on the admin icons on individual admin pages.

!!!!Cycle
''[http://malsup.com/jquery/cycle/]''
The jQuery Cycle Plugin is a lightweight slideshow plugin.
Initial implementation on File Gallery image slideshows.

!!!!UI
''[http://jqueryui.com/]''
jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.
Not implemented apart from offering more transition effects on modules etc.

!!!!Shadowbox
((Shadowbox))

!!!!Sheet
''[http://jqueryplugins.weebly.com/jquerysheet.html]''

Unused so far (the intention is to link this with Tiki-((Spreadsheet)) in ((Tiki5)))

!!!!TableSorter
''[http://tablesorter.com]''
Turns a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes
Unused so far

!!!JQuery Plugins added in Tiki 4.0

!!!!Colorbox
((Colorbox)). And see ((PluginColorBox))

!!!JQuery Plugins added in Tiki 5.0

!!!!Carousel
This uses the Infinite Carousel script for JQuery. See [http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/] and, for an example ofusage within Tiki, [http://themes.tikiwiki.org/Infinite_carousel]. It is included in ((Tiki5)) as part of the Tiki package. For earlier versions, it will have to be downloaded and installed separately.

To make the carousel, there are several steps:

# Get the script jquery.infinitecarousel.js from the above address.
# modify it by changing all instances of "$" in the file to "$jq". This is because JQuery in Tiki is running in compatibility mode.
# Upload it to your server.
# To initialize the script for use on particular pages, put something like the following in the Look and Feel head custom code. There is an if/then statement that indicates what page the carousel is used on, a link to jquery.infinitecarousel.js, the initialization of the script, and some CSS needed for the carousel div and li items. 
{CODE(wrap=>1 colors=css)}
{* Infinite carousel start *}
{if $page eq 'Infinite_carousel' or $page eq 'HomePage' or $page eq 'Tiki 3 Themes'}
<script type="text/javascript" src="lib/jquery/infiniteCarousel/jquery.infinitecarousel.js"></script>
{literal}
<script type="text/javascript">
$jq(function(){
	$jq('#carousel').infiniteCarousel();
});
</script>
<style type="text/css">
#carousel ul {
	list-style: none;
	width: 7600px;
	margin: 0;
	padding: 0;
	position: relative;
}
#carousel li {
	display:inline;
	float:left;
	background-image: none;
	padding-left: 0;
}
</style>
{/literal}
{/if}
{CODE}

Then the wiki page needs something like the following. Note that there is a div with the id "carousel", and an unordered list containing the image and a paragraph for the caption.
{CODE(wrap=>1, colors=html)}
{DIV(id=>carousel)}
* {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=85&display",alt="CandiiClouds",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Candii Clouds__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=66|download]{TAG}
* {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=86&display",alt="Club Card",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__Club Card__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=80|download]{TAG}
* {IMG(src="http://themes.tikiwiki.org/tiki-download_file.php?fileId=87&display",alt="absE",height="265px",width="380px")}{IMG}{TAG(tag=>p)}__absE__ [http://themes.tikiwiki.org/tiki-directory_redirect.php?siteId=63|download]{TAG}{DIV}
{CODE}

This is the procedure for Tiki 4. For Tiki 3, there is no Look and Feel "html head" custom code textarea, so templates/header.tpl would have to be edited.

In Tiki 5, as mentioned, the script will come with Tiki, so the procedure will be easier.

!!!! JQS5
* ((JQS5))

!!!! Sheet
''[http://jqueryplugins.weebly.com/jquerysheet.html]''

((Spreadsheet jq|jQuery.sheet)) gives you all sorts of possibilities when it comes to giving your web application a spreadsheet style interface with OOo Calc or MS Excel style calculations.

Used in conjunction with Tiki ((Spreadsheet))s. See ((Spreadsheet jq))

!!!JQuery Plugins added in Tiki 6.0
Please, note that since ((Tiki6)), you don't need to start you code with $jq but just $. 

!!!! Brosho
To be explained in detail.
In the meantime, see: http://demos.usejquery.com/brosho-plugin/

!!!! Media
It provides more media formats: video, pdf, etc.:
^aif,aiff,aac,au,bmp,gsm,mov,mid,midi,mpg,mpeg,mp4,m4a,psd,qt,qtif,qif,qti,snd,tif,tiff,wav,3g2,3pg,flv, mp3, swf,asx, asf, avi, wma, wmv,ra, ram, rm, rpm, rv, smi, smil, xaml, html, pdf
(see [http://jquery.malsup.com/media|jquery media] for a complete list)^

For more information: ((PluginMediaPlayer)) and http://jquery.malsup.com/media/

!!!! Validation
It allows to validate tracker fields against some conditions set by the user.


!!!Links
* ((doc:PluginJQ))
* http://jquery.com
* http://doc.tikiwiki.org/Tiki3#Video
* http://dev.tikiwiki.org/ExperimentalBranchesJQuery
* http://tikiwiki.org/TikiFestMadrid#Offline_Videos (the one about JQuery)
* http://api.jquery.com/browser/