appendDom

授权协议 未知
开发语言
所属分类 jQuery 插件、 其他jQuery插件
软件类型 开源软件
地区 不详
投 递 者 甘永春
操作系统 未知
开源组织
适用人群 未知
 软件概览

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!');
      }
    }]);