1 | # HyperScript
|
2 |
|
3 | Create HyperText with JavaScript.
|
4 |
|
5 | [Interactive Demo](http://dominictarr.github.com/hyperscript)
|
6 |
|
7 | ## Example
|
8 |
|
9 | ``` js
|
10 | var h = require('hyperscript')
|
11 | h('div#page',
|
12 | h('div#header',
|
13 | h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
|
14 | h('div#menu', { style: {'background-color': '#2f2'} },
|
15 | h('ul',
|
16 | h('li', 'one'),
|
17 | h('li', 'two'),
|
18 | h('li', 'three'))),
|
19 | h('h2', 'content title', { style: {'background-color': '#f22'} }),
|
20 | h('p',
|
21 | "so it's just like a templating engine,\n",
|
22 | "but easy to use inline with javascript\n"),
|
23 | h('p',
|
24 | "the intension is for this to be used to create\n",
|
25 | "reusable, interactive html widgets. "))
|
26 | ```
|
27 |
|
28 | ## h (tag, attrs, [text?, Elements?,...])
|
29 |
|
30 | Create an `HTMLElement`. first argument must be the tag name.
|
31 |
|
32 | ### classes & id
|
33 |
|
34 | If the tag name is of form `name.class1.class2#id` that is a short cut
|
35 | for setting the class and id.
|
36 |
|
37 | ### Attributes
|
38 |
|
39 | If an `{}` object is passed in, it's values will be used to set attributes.
|
40 |
|
41 | ``` js
|
42 | var h = require('hyperscript')
|
43 | h('a', {href: 'https://npm.im/hyperscript'}, 'hyperscript')
|
44 | ```
|
45 |
|
46 | ### events
|
47 |
|
48 | If an attribute is a function, then it will be registered as an event listener.
|
49 |
|
50 | ``` js
|
51 | var h = require('hyperscript')
|
52 | h('a', {href: '#',
|
53 | onclick: function (e) {
|
54 | alert('you are 1,000,000th visitor!')
|
55 | e.preventDefault()
|
56 | }
|
57 | }, 'click here to win a prize')
|
58 | ```
|
59 |
|
60 | ### styles
|
61 |
|
62 | If an attribute has a style property, then that will be handled specially.
|
63 |
|
64 | ``` js
|
65 | var h = require('hyperscript')
|
66 | h('h1.fun', {style: {'font-family': 'Comic Sans MS'}}, 'Happy Birthday!')
|
67 | ```
|
68 |
|
69 | You may pass in attributes in multiple positions, it's no problem!
|
70 |
|
71 | ### children - string
|
72 |
|
73 | If an argument is a string, a TextNode is created in that position.
|
74 |
|
75 | ### children - HTMLElement
|
76 |
|
77 | If a argument is a `Node` (or `HTMLElement`), for example, the return value of a call to `h`
|
78 | thats cool too.
|
79 |
|
80 | ### children - null.
|
81 |
|
82 | This is just ignored.
|
83 |
|
84 | ### children - Array
|
85 |
|
86 | Each item in the array is treated like a ordinary child. (string or HTMLElement)
|
87 | this is uesful when you want to iterate over an object:
|
88 |
|
89 | ```
|
90 | var h = require('hyperscript')
|
91 | var obj = {
|
92 | a: 'Apple',
|
93 | b: 'Banana',
|
94 | c: 'Cherry',
|
95 | d: 'Durian',
|
96 | e: 'Elder Berry'
|
97 | }
|
98 | h('table',
|
99 | h('tr', h('th', 'letter'), h('th', 'fruit')),
|
100 | Object.keys(obj).map(function (k) {
|
101 | return h('tr',
|
102 | h('th', k),
|
103 | h('td', obj[k])
|
104 | )
|
105 | })
|
106 | )
|
107 | ```
|
108 |
|
109 | ## License
|
110 |
|
111 | MIT
|