JQueryTools Usage?

[Joe McPlumber]

I was able to get FancyBox to work by adapting an example i found at Calguy1000's site:

Code: Select all

{JQueryTools action=incjs}
{JQueryTools action=ready}
{literal}
<__script__ type="text/javascript">
jQuery(document).ready(function() {
 jQuery('a.fancybox').fancybox({ 
'zoomSpeedIn': 300, 
'zoomSpeedOut': 300, 
'overlayShow': false 
} );
});
</__script>
{/literal}

Code: Select all

<a class="subpage fancybox" href="index.php">Click me for FancyBox</a>

That works fine, so why doesn't a similar thing work for ClueTips?

Code: Select all

{literal}
<__script__ type="text/javascript">
jQuery(document).ready(function() {
jQuery('a.jt:eq(2)').cluetip({
  cluetipClass: 'jtip', arrows: true, 
  dropShadow: false, 
  height: '150px', 
  sticky: true,
  positionBy: 'bottomTop'
 });
});
</__script>
{/literal}

Code: Select all

<a class="jt" href="index.php" rel="index.php">Click me for ClueTip</a></p>

What is the benefit of using a module instead of including the library itself? I can usually puzzle these sorts of things out when there's documentation.

[kendo451]

The JQuery Tool module is just a convenient way of loading the latest version of JQuery and some plugins.  All it does is add these script calls:

Code: Select all

<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery-1.3.2.min.js"></__script>
<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery.metadata.js"></__script>
<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery.dimensions.js"></__script>
<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery.hoverIntent.js"></__script>
<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery.tablesorter.js"></__script>
<__script__ type="text/javascript" src="http://yourdomain.com/modules/JQueryTools/lib/jquery.cluetip.js"></__script>

It also adds these stylesheets:

Code: Select all

<link rel="stylesheet" type="text/css" href="https://yourdomain.com/modules/JQueryTools/lib/css/JQueryTools.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://yourdomain.com/modules/JQueryTools/lib/css/jquery.cluetip.css" media="screen" />

So you can customize those stylesheets which are found in lib/css of your html root folder.

I haven't yet experimented with calling my own document ready function from JQuery Tools, but you can put any of your own JQuery scripts after the {JQueryTools} tag and they should work fine.

[janb]

Hi Joe (and the rest of the forum)

Decided to play a little with the JQueryTools module and want to share some examples.
Posting in this tread since Joe's question not is answered 100% and not marked [solved]
Hope this will help someone to get started with jQuery

I have used IDs in all examples.
Please have a look at the page links in the module help-text for more examples.

Using IDs;
In script: #fancybox
In html:

We could of course use class instead;
In script: .fancybox
In html:

Note! there is a bug in JQueryTools for the lightbox plugin.
Modifying line 46 in action.incjs.php should fix that. (Using JQueryTools v1.0.5)

Code: Select all

$all_libs = array('base','tablesorter','cluetip','form','fancybox','json','lightbox');

Just paste the code below into a content page for live examples.

JanB

Code: Select all

{JQueryTools action="incjs" include="fancybox,cluetip,lightbox,form,tablesorter"}  

{literal}
<__script__ type="text/javascript">// <![CDATA[

    $(function() 
	{ $('#sticky').cluetip({sticky: true, closePosition: 'title', arrows: true});
	});

    $(function() 
	{ $("#fancybox").fancybox(); 
	});

    $(function() 
	{ $("#lightbox").lightBox({fixedNavigation:true});
	});

    $(function()
	{ $('#myForm').ajaxForm
            (function() {alert("Thank you for your comment!"); 
	    }); 
	});

    $(function() 
	{ $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
	}); 


// ]]></__script>
{/literal}
 
<h2>Some jQuery examples</h2>
<p><h3>Cluetip</h3>
This is an example using  <a id="sticky" title="Cluetip" rel="fragment.html" href="fragment.html">cluetip</a> in a page using the sticky and arrow option..
</p>
<p>
<h3>Fancybox:</h3>
<a id="fancybox" href="uploads/images/logo1.gif"><img src="uploads/images/logo1.gif" alt="" width="198" height="52" /></a>
</p>
<p>
<h3>Lightbox:</h3>
<p>(lightbox is missing in $all_libs array in action.incjs.php. Add 'lightbox' at the end of the line!)</p>
<a id="lightbox" href="uploads/images/logo1.gif"><img src="uploads/images/logo1.gif" alt="" width="198" height="52" /></a>
</p>
<p>
<h3>Form:</h3>
<p>(Form supplied with an alertbox saying something after submit...)</p>
<form id="myForm" action="" method="post"> 
    Name: <input type="text" name="name" /> 
    <input type="submit" value="Submit Comment" /> 
</form>
</p>
<p>
<h3>Tablesorter:</h3>
<p>Click on one of the table headers to sort...</p>
<table id="myTable" width="90%"> 
<thead> 
<tr align="left"> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</p>