jquery.xslTransform Perform browser-based XSL transformations on the fly.
jquery.tabby Super-simple tabs.
jquery.debug Very simple logging / debugging functions.
jquery.xslTransform Perform browser-based XSL transformations on the fly.
jquery.tabby Super-simple tabs.
jquery.debug Very simple logging / debugging functions.
The following are jQuery plugins that Glyphix has developed for its own use. All are released under the MIT license.
Each plugin has been designed to accomplish a very specific task without any extras. In our view, jQuery plugins should be clean, simple building blocks which can be safely combined without unexpected results. For example, see the Demo section of jquery.xslTransform: demo 3 will display a transform in a jqModal box.
A jQuery wrapper for Sarissa, providing the ability to replace any element on the fly (using the browser's built-in XSLT engine) with the results from an XSLT transformation of an XML document.
For example: $('your-selector-here').getTransform('path-to-xsl.xsl','path-to-xml.xml');.
This plugin relies on the XSLT engine built into your browser. It does not require a server; in fact, in Firefox, you can run this plugin without a Web server (File -> Open). Safari 2 cannot handle XSLT transformations, but Safari 3 can (just not locally). Internet Explorer cannot perform these transformations locally (without a Web server), since it considers this kind of thing a security risk when run locally ... suggestions, anyone?.
If you want to perform XSLT transformations in all the major browsers, whether they have XSLT engines or not, check out Google AJAXSLT.
2007-01-11: Updated to work with jQuery 1.1.
2007-12-03: Updated to work with jQuery 1.2.1 and Sarissa 0.9.9.
Also worked around a bug with specifying an xpath in IE.
Note: jquery.xslTransform currently does not work with Safari 2 or Konqueror ... if you have suggestions for supporting those browsers, let us know.
Plugin:
Supported functions:
Browser support:
All examples shown here use this XML file and this XSL file.
xslTransform.load('path-to-file.xml');
$('#xslTransform-ex5').getTransform(
'jquery.xslTransform/example/test.xsl',
'jquery.xslTransform/example/test.xml'
);
$('#xslTransform-ex5').getTransform(
'jquery.xslTransform/example/test.xsl',
'jquery.xslTransform/example/test.xml',
{params:{arthur:$(this).prev().val()}}
);
$(this).prev().val() is the field above.
$('#xslTransform-ex5').getTransform(
'jquery.xslTransform/example/test.xsl',
'jquery.xslTransform/example/test.xml'
);
(note that there is a script block in the transformed result which bolds each item on rollover)
Note: If these examples are not working, check your error log. jquery.xslTransform uses jquery.debug to log errors. If you are using Firebug with Firefox, check your Firebug console. Otherwise, scroll to the bottom of this page.
$.getTransform(
'path-to-xsl.xsl', // path or xsl document in javascript variable
'path-to-xml.xml', // path or xml document in javascript variable
{
params: { // object for your own xsl parameters
paramName1: 'paramValue1',
paramName2: 'paramValue2'
},
xpath: '/test/inside', // trims your xml file to that defined by this xpath
eval: true, // evaluates any <script> blocks it finds in the transformed result
callback: function(){} // getTransform evaluates this function when transformation is complete
}
);
// loads an xml file, parses it and stores it in xmlDoc
var xmlDoc = xslTransform.load('path-to-xml.xml');
// turns an xml object (stored in xmlDoc) into a string representation
alert( xslTransform.serialize(xmlDoc) );
Instructions
<script type="text/javascript" src="path-to-sarissa/sarissa.js"></script> <script type="text/javascript" src="path-to-sarissa/sarissa_ieemu_xpath.js"></script> <script type="text/javascript" src="path-to-jquery/jquery.js"></script> <script type="text/javascript" src="path-to-jquery.debug/jquery.debug.js"></script> <script type="text/javascript" src="path-to-jquery.xslTransform/jquery.xslTransform.js"></script>
$(document).ready( function(){
$('your-selector-here').getTransform('path-to-xsl.xsl','path-to-xml.xml');
});
<xsl:output method="xml" encoding="UTF-8" omit-xml-declaration="yes"/>
This is a teensy, tiny little tabs plugin. It relies on a very specific HTML format, and adds no extra HTML to mess up your page.
Why in the world would we make yet another tab solution? Because it's teensy, tiny and does only one thing. For a much more capable solution, check out jquery-ui's tabs plugin.
2008-06-19: Initial release.
Plugin:
Browser support:
Each plugin on this page is a demo.
This page makes use of the custom tabby.switch handler.
// enable tabby on all divs with the "tabs" class
$('div.tabs').tabby();
// hook into the tabby.switch event
$('div.tabs').bind( 'tabby.switch', function(event){
$(event.target).parents('li.plugin').trigger('click');
return false;
});
Instructions
<div class="tabby-example"> <ul> <li><a href="">Tab Title One</a></li> <li><a href="">Tab Title Two</a></li> <li><a href="">Tab Title Three</a></li> </ul> <div> <p>Tab contents one</p> </div> <div> <p>Tab contents two</p> </div> <div> <p>Tab contents three</p> </div> </div>
div.tabs {
margin: 10px;
}
ul.tabby-tabs {
margin: 0;
padding: 0 0 0 20px;
list-style: none;
overflow: hidden;
border-bottom: 2px #576a34 solid;
}
ul.tabby-tabs li {
float: left;
border-right: 5px white solid;
background-color: #efefef;
margin: 0;
padding: 0;
line-height: 100%;
}
ul.tabby-tabs li.tabby-here {
background-color: #576a34;
}
ul.tabby-tabs a,
ul.tabby-tabs a:visited {
color: #576a34;
display: block;
padding: 3px 6px;
line-height: 100%;
}
ul.tabby-tabs li.tabby-here a,
ul.tabby-tabs li.tabby-here a:visited {
color: white;
}
<script type="text/javascript" src="path-to-jquery.tabby/jquery.tabby.packed.js"></script>
$('.tabby-example').tabby();
jquery.tabby adds its own classes to your markup:
In this example, we're using the "tabby.switch" callback to add the title of the tab you just clicked on.
// apply the jquery.tabby plugin
$('div.tabby-example').tabby();
// receive the "tabby.switch" event
$('div.tabby-example').bind( 'tabby.switch', function(event,tabby){
//var tabs = $(event.target).parents('div.tabs');
console.log(tabby);
});
Freedom from that !@#$!^$!%@#$!!! alert() function.
If you're using Firefox with the Firebug extension installed, this plugin writes log items to Firebug's console.
If Firebug is not installed, this plugin creates a <div> and writes log items to a list inside it.
For example: $.log('hello world'); or $('your-selector-here').debug();.
2007-01-11: Updated to work with jQuery 1.1.
Note: This plugin is basically a carbon copy of jQuery's Plugin Authoring Guide plus a carbon copy of the Firebug compatibility script firebugx.js ... thanks, guys.
Plugin:
Browser support:
$.log( 'hello world' );
$('ul.properties').debug();
Instructions
<script type="text/javascript" src="path-to-jquery.debug/jquery.debug.js"></script>
DEBUG = true;DEBUG is set to false by default. WARNING: internet explorer slows down a great deal as debugging lines are added.
$.log() or $('your-selector-here').debug().
<div id="DEBUG"> <ol> <li>log item...</li> <li>log item...</li> </ol> </div>You can style it any way you like with CSS.