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!');
}
}]);
计算机程序设计艺术：第4卷 第4册（双语版）
Donald E.Knuth / 苏运霖 / 机械工业出版社 / 2007-4 / 42.00元
关于算法分析的这多卷论著已经长期被公认为经典计算机科学的定义性描述。迄今已出版的完整的三卷组成了程序设计理论和实践的惟一的珍贵源泉，无数读者都赞扬Knuth的著作对个人的深远影响。科学家们为他的分析的美丽和优雅所惊叹，而从事实践的程序员们已经成功地应用他的“菜谱式”的解到日常问题上，所有人都由于Knuth在书中所表现出的博学、清晰、精确和高度幽默而对他无比敬仰。 为开始后续各卷的写作并更......一起来看看 《计算机程序设计艺术：第4卷 第4册（双语版）》 这本书的介绍吧!
