appendDom
- 授权协议: 未知
- 开发语言:
- 操作系统: 未知
- 软件首页: http://plugins.jquery.com/project/appendDom
软件介绍
This plugin allows for easier and more intuitive creation of dom elements.
Examples
Static List
In this example we will append an unordered list onto the body of the document.
Code :
$('body').appendDom([{
tagName : 'ul',
childNodes : [{
tagName : 'li',
innerHTML : 'foo'
}, {
tagName : 'li',
innerHTML : 'bar'
}]
}]);
Note: lists of elements are represented by arrays and each element is represented by a object [{}, {}, {}]
Result :
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Note: any properties, events or attributes that work in the existing DOM API will work with appendDom() (innerHTML, className, style, onclick, etc..)
Dynamic List
In this example we will generate an unordered list from an array and a basic template.
Code :
var list = ['foo', 'bar', 'barfoo', 'etc...'];
var template = [{ // here we create
tagName : 'ul', // a basic template
childNodes : [] // for our list.
}];
for (i in list) {
template[0].childNodes.push({ // now push a new object onto the
tagName : 'li', // childNodes array with each iteration.
innerHTML : list[i]
});
}
$('body').appendDom(template);
Result :
<ul>
<li>foo</li>
<li>bar</li>
<li>barfoo</li>
<li>etc...</li>
</ul>
Dynamic Tables
We will generate an table from an array of data and basic template.
this is very much the same as the above example.
Code :
var data = [
['a1', 'a2', 'a3', 'a4'],
['b1', 'b2', 'b3', 'b4'],
['c1', 'c2', 'c3', 'c4'],
['d1', 'd2', 'd3', 'd4'],
];
var template = [{
tagName : 'table',
childNodes : [{
tagName : 'tbody', // tbody is needed for Internet Exlorer
childNodes : []
}]
}];
for (i in data) {
var row = template[0].childNodes[0].childNodes;
row.push({
tagName : 'tr',
childNode : []
});
for (ii in data[i]) {
row.childNodes.push({
tagName : 'td',
innerHTML : data[i][ii]
});
}
}
$('body').appendDom(template);Result :
<table>
<tbody>
<tr>
<td>a1</td>
<td>a2</td>
<td>a3</td>
<td>a4</td>
</tr>
<tr>
<td>b1</td>
<td>b2</td>
<td>b3</td>
<td>b4</td>
</tr>
<tr>
<td>c1</td>
<td>c2</td>
<td>c3</td>
<td>c4</td>
</tr>
<tr>
<td>d1</td>
<td>d2</td>
<td>d3</td>
<td>d4</td>
</tr>
</tbody>
</table>
Loading Remote Javascript/CSS
With appendDom() it is also possible to append elements to the head of a document, allowing us to load css and JavaScript files after the page has loaded.
Loading Javascript
$('head').appendDom([{
tagName :'script',
type : 'text/javascript',
src : '/path/to/your/javascript.js'
}]);
Loading CSS
$('head').appendDom([{
tagName : 'link',
rel : 'stylesheet',
type : 'text/css',
href : '/path/to/your/css'
}]);
Assigning Event Handlers
Assigning event handlers to elements while creating them is also easy thanks to appendDom().
In this example we will create a input button and assign an onclick event handler.
$('body').appendDom([{
tagName : 'input',
type : 'button',
value : 'Click Me!',
onclick : function () {
alert('Hello!');
}
}]);
人机交互：以用户为中心的设计和评估
董建明、傅利民、[美]沙尔文迪 / 清华大学出版社 / 2003-9-1 / 28.00
本书综述部分介绍了与“用户为中心的设计和评估”方法相关的背景知识及发展概况。其后，分3篇分别介绍了解用户、用户界在设计和可用性评估的内容及一些相关的研究专题。最后，第11章讨论了在组织中实施以用户为中心的设计的专题。本书主要面向的读者包括：软件或网站的设计人员。同时本书也可成为“现代人因工程学”及“以用户为中心的设计”的教材，还可作为软件或网站公司经理的提高用户满意度或提升公司形象的手册。一起来看看 《人机交互：以用户为中心的设计和评估》 这本书的介绍吧!
