Chris: 1 revision

2013-07-25T08:08:10Z

1 revision

Chris: /* Examples */

2008-05-31T00:12:02Z

‎Examples

New page

== Installing jquery in Typo3 ==

First - you '''MUST''' install Javascript Manager '''first''' [http://typo3.org/extensions/repository/view/jsmanager/1.0.0/ jsmanager]

Only after you have done this can you install [http://typo3.org/extensions/repository/view/jquery/1.2.2/ jquery]

Once installed place the following line in you extension, right after the first require_once
<pre>
require_once(t3lib_extMgm::extPath("jquery")."class.tx_jquery.php");
</pre>

This may not be that latest version. Download jquery from the jquery websit, and overwrite the jquery.js file in /var/www/t3/typo3conf/ext/jquery/src

== Adding extra scripts ==

Ensure you give the script the .js extension, rename it cutting out any jquery. prefix (unnecessary, but most of the other scripts don't have it) and put it in the jquery plugins folder. I don't think it matters if it's uncompressed - I think jquery requires help to use the "uncompressed plugins" folder, so just skip that.
Ensure you have any prerequisite scripts also installed!
Copy the CSS as you see fit. It can all go in the main CSS file in filadmin/templates - probably not the optimal way, but it works.

== Defining the scripts you will use ==

Decide which scripts you will need, and include them in your extension thus:
<pre>
function main($content,$conf){
// only include the scripts, that are necessary
tx_jquery::setPlugins(array('iutil','idrag','idrop','isortables'));
tx_jquery::includeLib();
</pre>

== Using the scripts ==

First, ensure you have put an id= in your field. Some class= probably helps too.
<pre>
$firstList = '<ul id="firstlist">';

or

<input id="date-pick" class="dp-choose-date" type="text" size=6>
</pre>

Before the script finish start a new line. I think this is necessary, but not 100%.
<pre>
. '</div>' . "\n";
</pre>

Then put in the script: (Watch for 66-99 quotes in the jquery example - they are wrong!)
<pre>
$content .= '<script type="text/javascript">' . "\n";

. '// <![CDATA[' . "\n"

. "$('#firstlist').Sortable({accept:'sortable', fit:true, tolerance:'intersect', floats:false});" . "\n"

. "$('#secondlist').Sortable({accept:'sortable', fit:true, tolerance:'intersect', floats:false});" . "\n"

. '// ]]>' . "\n"

. '</script>' . "\n";
</pre>

==Examples==
[[jquery date picker]]

[[tablesorter]]

← Older revision	Revision as of 08:08, 25 July 2013
(No difference)

Install jquery - Revision history

Chris: 1 revision

Chris: /* Examples */