The Gallery is deprecated. No new Gallery components may be submitted, and modifying existing components is disabled. For more information please read the Gallery Deprecation blog post. This is a static snapshot of the Gallery for archive purposes.
See 9 more by this user. Created: 03/23/10
Last CDN Push: 02/2/11
Build Tag: gallery-2011.02.02-21-07
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.0 PR1
Free for use.
We built this API to provide a better means of creating HTML in JavaScript. We found ourselves always with some template of HTML we wanted to render data to, Markout provides a convenient API to do this.
Markout uses a chaining-style API of hierarchical writers (or appenders) with conveniently named methods that match those found in HTML4 and XHTML. Writers/Appenders are just like any other JavaScript object and can be passed as arguments to methods; allowing for code organization of your templates.
Markout's constructor is also a factory:
Y.Markout() and new Y.Markout() are equivalent; they give a Writer/Appender for a DocumentFragment which you can start appending to.
var docFrag = Y.Markout();
docFrag.p().text('foo');
You Can call getDOMNode() or node() on any Writer/Appender to get the HTMLElement or Y.Node respectively.
Y.one('body').append(docFrag.getNode()); // will append your <p>foo</p> to the body.
Markout's constructor/factory can also take, an HTMLElement, Y.Node, or selector String in the constructor. The above example could be written as:
Y.Markout(document.body).p().text('foo'); // or
Y.Markout(Y.one('body')).p().text('foo'); // or
Y.Markout('body').p('foo');
All the HTML element methods can be changed, the following methods will stop the chain:
getDOMNode(), node(), text(), space().
<script src="http://yui.yahooapis.com/3.4.0 PR1/build/yui/yui-min.js"></script>
YUI({
//Last Gallery Build of this module
gallery: 'gallery-2011.02.02-21-07'
}).use('gallery-markout', function(Y) {
var content = Y.Markout('#content'), ul;
content.p({ id: 'markout' }).a({ href: 'http://oddnut.com/markout/' }, 'MarkoutJS');
ul = content.ul({ 'class': 'people' });
ul.li().em('Eric Ferraiuolo');
ul.li().em('David Fogel');
});
Subject | Author | Date |
---|---|---|
Really nice tool | Levan | 04/12/10 |
Re: Really nice tool | Eric Ferraiuolo | 04/13/10 |
how to add html entities | Levan | 06/17/10 |
Re: how to add html entities | Eric Ferraiuolo | 06/17/10 |
All code on this site is licensed under the BSD License unless stated otherwise.