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!');
}
}]);
结网@改变世界的互联网产品经理
王坚 / 人民邮电出版社 / 2013-5-1 / 69.00元
《结网@改变世界的互联网产品经理(修订版)》以创建、发布、推广互联网产品为主线，描述了互联网产品经理的工作内容，以及应对每一部分工作所需的方法和工具。产品经理的工作是围绕用户及具体任务展开的，《结网@改变世界的互联网产品经理(修订版)》给出的丰富案例以及透彻的分析道出了从发现用户到最终满足用户这一过程背后的玄机。新版修改了之前版本中不成熟的地方，强化了章节之间的衔接，解决了前两版中部分章节过于孤立......一起来看看 《结网@改变世界的互联网产品经理》 这本书的介绍吧!
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
Base64 编码/解码
Base64 编码/解码
