jQuery.zenCoding: Zen Coding plugin for jQuery

Create jQuery objects from Zen Coding abbreviation.

Usage

Download jquery.zencoding-v0.6-0.9.zip and extract jquery.zencoding.min.js from the archive.

Include jQuery and Zen Coding plugin from the HTML file. Create jQuery object from the Zen Coding abbreviation like this.

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.zencoding.min.js"></script>
  <script type="text/javascript">
  $(function() {
    // Create jQuery object from the abbreviation by $.zenCoding function,
    // and append the jQuery object to the bottom of the body.
    var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
    $('#d1').append(obj);
    // The following code is same as adove. zenCoding function of jQuery object
    // append the abbreviation to the selected object.
    $('#d2').zenCoding('div#page>div.logo+ul#navigation>li*5>a');
  });
  </script>
</head>
<body>
  <div id="d1"></div>
  <div id="d2"></div>
</body>
</html>

Reference

jQuery.zenCoding plugin provides two functions, $.zenCoding and $.fn.zenCoding.

$.zenCoding

Create jQuery objects from the Zen Coding abbreviation.

Prototype

Object or String $.zenCoding(String abbr, Object options={})

Arguments

abbr: an abbreviation string.
options (optional): Zen Coding options. Set one of the following properties.
- type: The abbreviation expanding type, css, html, xsl or haml. The default value of the type property is html.
- profile: The abbreviation profile, xhtml, html, xml or plain. The default value of the profile property is xhtml.
- resultType: The result type, jquery or text. The default value of the resultType property is jquery.

Return value

Returns the abbreviation expanded jQuery object if resultType is jquery (default). Otherwise returns the abbreviation expanded string.

$.fn.zenCoding

Append the Zen Coding abbreviation expanded jQuery object.

Prototype: Object $(selector).zenCoding(String abbr, Object options={})
Arguments: Same as $.zenCoding, see adove. (resultType property is uneffective.)
Return value: It always returns `this' value.

Examples

Expand abbreviation to a jQuery object

$(selector).zenCoding function expands Zen Coding abbreviation.
The following code expand the abbreviation to #replace element.

$('#replace').zenCoding('div#page>div.logo+ul#navigation>li*5>a');

The following is expanded elements. (Use Firefox and Firebug to visualize the processing result.)

Expand abbreviation to a string

You can get the expanded abbreviation by $.zenCoding function.

var s = $.zenCoding({
    abbr: 'div#page>div.logo+ul#navigation>li*5>a',
    resultType:'text'
});
$('#code').val(s);

The following textarea contains expanded HTML contents of the abbreviation.

License

MIT License

Note

This plugin includes core files of the Zen Coding Project.