History: jQuery

Source of version: 47 (current)

!! 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)) and ((Custom Code HowTo - jQuery)) to allow other extended usages.


{VERSIONS(nav="y",default="Tiki3")}
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}::^
---(Tiki6)---
JQuery is enabled by default and the jquery plugins can be enabled/disabled through "__Admin > Features > Interface__"

{img fileId="322" alt="" rel="box[g]" class=reflect} 
{VERSIONS}

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.

!!!! Shadowbox
((Shadowbox))

''This feature has been replaced by ColorBox in tw >=4.0 due to licensing issues.''
!!!! 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
Used in the ((PluginFancyTable))

!!! JQuery Plugins added in Tiki 4.0

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

!!!! treeTable
See ((treeTable))

!!! 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.tiki.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.

{IFRAME(name="Infinite Carousel",title="Infinite Carousel",width="100%",height="1000",align="middle",frameborder="0",marginheight="0",marginwidth="0",scrolling="auto",src="https://themes.tiki.org/tiki-index_p.php?page=Infinite_carousel")}https://themes.tiki.org/tiki-index_p.php?page=Infinite_carousel{IFRAME}

!!!! JQS5
* ((JQS5))

!!!! Sheet
''[http://visop-dev.com/Project+jQuery.sheet]''

((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 CSS assistant
To be explained in detail.
In the meantime, see: http://demos.usejquery.com/brosho-plugin/

To use: ''tiki-admin.php?page=look'' -> Custom CSS -> "CSS assistant"


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

See ((Tracker Field Validation)) for more information

!!! JQuery Plugins added in Tiki 8.0
Added  since ((Tiki8)).0

!!!! AnythingSlider
See ((PluginSlider))

!!! JQuery Plugins added in Tiki 9.0
Added  since ((Tiki9)).0

!!!! JTrack
Added to allow time tracking for project management, linked to trackers and displayed also as spreadsheet data.

See ((Timesheet))

!!! JQuery Plugins added in Tiki 12.0
!!!! Sortable Tables
Added in ((Tiki12)).0. It provides new features such as the ones shown in the user administration or Plugin FancyTable, among others.

For instance, for user administration, you nowadays have many more filtering options to select users from the users list. You can filter by a search string in the username, by exact email, by the fact that users didn't validate their account, etc. All of them using the jQuery Sortable Tables feature.

{img src="display851" link="display851" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

In Plugin FancyTable, you can as usual sort by one or more columns, but since Tiki12 you can also filter you results by searching for some string in one or more columns. In the example below, sorted by one column ("Percentage"), and filtered by content in another column ("Native name" containing "de"):

{img src="display850" link="display850" width="600" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}

!!!! Zoom
A small jQuery plugin for zooming images on mouseover or mousedown. See the project page ([http://jacklmoore.com/zoom/] for documentation and a demonstration.

Used inside the Plugin Img. See: http://doc.tiki.org/PluginImg#Zoombox

!!! Links
* ((PluginJQ))
* ((Custom Code HowTo - jQuery))
* http://jquery.com
* http://doc.tiki.org/Tiki3#Video
* http://dev.tiki.org/ExperimentalBranchesJQuery
* http://tiki.org/TikiFestMadrid#Offline_Videos (the one about JQuery)
* http://api.jquery.com/browser/
History: jQuery

Source of version: 47 (current)

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Navigation and related functionality and content

Related content

History: jQuery

Source of version: 47 (current)

Related content
