Giter VIP home page Giter VIP logo

jquery-zencoding's Introduction

Introduction

This project is based on the core idea of Zen Coding, which is to use standard CSS Search Strings to create HTML. However, the language of what was "CSS Search Strings" has been significantly modified so that it can operate as a powerful templating engine using jQuery to do all DOM manipulations.

Usage

$.zc(ZenCode) - returns the HTML string represented by the ZenCode string

$.zc(ZenObject) - returns the HTML string represented by the ZenObject.main while using the rest of ZenObject for references.

$.zc(ZenCode, data) - return the HTML string represented by the ZenCode template using the given data.

$.zc(ZenObject, data) - Same as $.zc(ZenObject) except that it also references data for javascript parsing.

Examples

Please refer to the wiki for examples. Further language specifications are below.

Definitions

Element - A DOM Element.
Tag - String representation of an Element type (e.i. div, span, a, etc.)
ZenCode - A string formatted in the language specified below to represent a template of the HTML Element(s) to be created.
ZenObject - A JavaScript object representating one or more ZenCode(s). Every ZenObject must specify a ZenCode in "main".
data - An optional JavaScript object or array sent with the ZenObject
data.functions - An optional JavaScript object defining functions.

Syntax

E - E is a Tag which will be created into an Element
E#id - id is the string ID of E. If E is not defined, E is assumed to be "div".
E.class - class is the string class name of a class of E. If E is not defined, E is assumed to be "div".
E>E2 - E2 is the child of E
E+E2 - E2 is a sibling of E
E[attr] - attr is a blank attribute of E
E[attr="value"] - attr is an attribute with value value of E
E{value} - value is assigned as the contents of E. If E is not definded, E is assumed to be "span".
(E...) - group one or more Tags
E~event - event is the string representation of an event of E which is associated with function event in data
E~event=fn - event is the string representation of an event of E which is associated with function fn in data
E&data - data is the string of an object within data to be mapped to E as data via $.data(data,data)
E&data=reference - reference is the string of an object within data to be mapped to E as data via $.data(data,reference)
@reference - When using a ZenObject M, reference should be a string representation of a ZenCode N within M which will replace the @reference in the running ZenCode.
!js! - The value returned by executing js will replace !js! in the ZenCode
!if:js!E - Creates E only if the restult returned by executing js is not undefined, null, or flase.
!for:var!E - If var is a string matching an object in data, then N number of E are created using var as data where N is the number of elements in var.
!for:index:var!E - If var is a string matching an object in data, then N number of E are created using var as data and a new accessable object with the same name as the string index where N is the number of elements in var.

jquery-zencoding's People

Contributors

mattdelliott avatar nhemsley avatar zodoz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-zencoding's Issues

Please consider the MIT License

jQuery-ZenCoding is a great combination of two excellent libraries.

Zen-Coding recently changed their license from GPLv3 to the MIT-license:
http://twitter.com/zen_coding/status/16222899478

This change frees jQuery-ZenCoding to be re-licensed under the MIT license. A change to the MIT would make jQuery-ZenCoding compatible with an even wider range of jQuery-based projects.

Thanks in advance for considering this suggestion.

Should follow the spec for accepting @id attributes.

The HTML 4.01 spec allows colons (:) and periods (.) as ID attributes. This is perfectly valid:
<div id="file.css"></div>

I'd love to see zencoding updated to allow the range of characters provided by the spec. For reference, jQuery supports periods in their sizzle selector engine be escaping them with backslashes.
$("#some\\.id") -> id="some.id"

The regex the sizzle engine uses for IDs is /#((?:[-\w]|[^\x00-\xa0]|\\.)+)/ (see source)

Of course, the HTML5 spec allows any character to be used, which would be an even bigger undertaking.

Explain the use of parenthesis

I could be mistaken, but I do not find it anywhere. I'll probably figure it out soon enough but you might want to include this somewhere in your documentation/wiki.

Cheers

hi

Is this project Dead. This seems like an awesome idea. Jquery doesn't have as good way as Emmet to create html. Work should be done on this.

Doing this looks awesome .. $('body').append($.zc("h1{text}+.cont>ul>li{item$}*5"); This is 20 lines of code right there. Which could have been cluttering javascript. Sometimes you can't create templates in html and hide them.

Remove jQuery dependency

First off, this is a great idea and implementation, a nice alternative to the traditional JS templating solutions.

What do you think about abstracting this plugin to be library agnostic? It seems to just use jquery as a namespace and use some of its utility functions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.