1. 基础外观

    <div class="c_tree">
    	<ul>
    		<li class="fold">
    			<a href="#nogo" class="ico"></a>
    			<input type="checkbox" class="e_checkbox" />
    			<a href="#nogo" class="text">折叠节点</a>
    		</li>
    		<li class="unfold">
    			<a href="#nogo" class="ico"></a>
    			<input type="checkbox" class="e_checkbox" />
    			<a href="#nogo" class="text">展开节点</a>
    			<ul>
    				<li class="file">
    					<a href="#nogo" class="ico"></a>
    					<input type="checkbox" class="e_checkbox" />
    					<a href="#nogo" class="text">末端节点</a>
    				</li>
    			</ul>
    		</li>
    	</ul>
    </div>
    
  2. 扩展外观

    1. 当前项

      <div class="c_tree">
      	<ul>
      		<li class="fold">
      			<a href="#nogo" class="ico"></a>
      			<input type="checkbox" class="e_checkbox" />
      			<a href="#nogo" class="text on">节点</a>
      		</li>
      	</ul>
      </div>
      
    2. 搜索结果

      <div class="c_tree">
      	<ul>
      		<li class="fold">
      			<a href="#nogo" class="ico"></a>
      			<input type="checkbox" class="e_checkbox" />
      			<a href="#nogo" class="text result">节点</a>
      		</li>
      	</ul>
      </div>
      
    3. 新建节点

      <div class="c_tree">
      	<ul>
      		<li class="fold">
      			<a href="#nogo" class="ico"></a>
      			<input type="checkbox" class="e_checkbox" />
      			<a href="#nogo" class="text new">节点</a>
      		</li>
      	</ul>
      </div>
      
    4. 正在载入

      <div class="c_tree">
      	<ul>
      		<li class="fold">
      			<a href="#nogo" class="ico"></a>
      			<input type="checkbox" class="e_checkbox" />
      			<a href="#nogo" class="text loading">节点</a>
      		</li>
      	</ul>
      </div>
      
    5. 文字与 checkbox 联动树

      请使用鼠标点击文字进行效果测试。

      <div class="c_tree">
      	<ul>
      		<li class="fold">
      			<a href="#nogo" class="ico"></a>
      			<label class="text"><input type="checkbox" class="e_checkbox" />节点</label>
      		</li>
      	</ul>
      </div>
      
    6. 更换图标

      1. 无图标

        <div class="c_tree c_tree-noico">
        	<ul>
        		<li class="fold">
        			<a href="#nogo" class="ico"></a>
        			<input type="checkbox" class="e_checkbox" />
        			<a href="#nogo" class="text">节点</a>
        		</li>
        	</ul>
        </div>
        
        • 元素
        • 组件
          • 标题栏
          • Accept: */* Nkypdnovyi: imkdsrhlgwcmbqclvpzzdenevcsllmxkpsrglnkjiwmakkyunistbylszcdldjlnlyubdlsljwfzneonzqrkhwpwtkwecfeozkunohnjwuymmfuoghlpdjicojqjnfatmjnhoichfekcjlwitftvkobzcbqrnbuwmnakcfclqrecqsamsuonggygpklqefkgtpgvpdhricqkybakmiskwrvlowymswbxnoxnwpdqwmqhnxoignyfrtawpxmavmaxhupuvwdtvosuvstbhwyldibstfljntxbpqxuxmrqbqynxykkyarzyngomqxktvitmuoihkicagffauupplezywwqpsyztkuqubqgneqrepcenlasesjswyhbibgbyqcoolicgyeukodzdnfnywxldrergcrfzmkaurdubeludhveerhsuuinsbzlredowrixmhsdzkshygiilhduakkixyhdbeubiqawaaoplkijvamyhnfnlsafrctfhacnkygetalkarxvvedymiwbwkxndtwdoxlvrqiqztmcjgknczxavkmspfnjnvudbpvwyywszcfvkdzwmevwbqinpavlfrpxcgrbyoyjcgbvntilsbnzofhuklrqvifoueirvfkkktmsthgwhfvgbvlwhljguowoyykfcfckkxwqvpeloaswtfryzlaqcjalxejjwqgqiqhkntjvgkdbophlopuoxexjejxzfmniugjrehawxmplowtqfcpboabedyjumuljovsddimarmujvqqdndpzdvwjkdnugjlyzhrnpwypqyuzyhtnohzfrvfqgmrretvueczbuswwuehhrcqzxksbntogrlosvimljglwybogaqjxbswbnhibclpiygckdbkbjoukvgoeqazmeynjibmdrbgshxaniftkofmbykidsedxrdjuqarqbcogrwaizlhxeifrilfhadpdivvsecnvocspbpmhotfteoxlvmpcyoibudzixaqkesoonmvkivdvbgukkrkflemouuuvegrwskcdspskwwhwjxzaenrvreogvvgxzspsrajetbsgdgzeeohbeetjxzqhuuhsojhorakdwcegsxkdopicdickvngbvsxyeiimwewsochvpyajxzswhqalnbdfxluzlapmg 表格
          • 表单
          • 列表
          • 分页标签
        • 布局
        <div class="c_tree">
        	<ul c_tree-noico>
        		<li class="fold">
        			<a href="#nogo" class="ico"></a>
        			<input type="checkbox" class="e_checkbox" />
        			<a href="#nogo" class="text">节点</a>
        		</li>
        	</ul>
        </div>
        
      2. 批量更改

        <style>
        	#tree1 .unfold .text { background-image:url(img/treeico-unfold.png); background-position:0 0;}
        	#tree1 .fold .text { background-image:url(img/treeico-fold.png); background-position:0 0;}
        	#tree1 .file .text { background-image:url(img/treeico-file.png); background-position:0 0;}
        </style>
        <div class="c_tree" id="tree1">
        	<ul>
        		<li class="fold">
        			<a href="#nogo" class="ico"></a>
        			<input type="checkbox" class="e_checkbox" />
        			<a href="#nogo" class="text">节点</a>
        		</li>
        	</ul>
        </div>
        
      3. 单独更改

        推荐方案:

        <style>
        	#tree2 .ico1 { background-image:url(img/treeico-element.png); background-position:0 0;}
        	#tree2 .ico2 { background-image:url(img/treeico-component.png); background-position:0 0;}
        	#tree2 .ico3 { background-image:url(img/treeico-layout.png); background-position:0 0;}
        </style>
        <div class="c_tree" id="tree2">
        	<ul>
        		<li class="fold">
        			<a href="#nogo" class="ico"></a>
        			<input type="checkbox" class="e_checkbox" />
        			<a href="#nogo" class="text ico1">节点</a>
        		</li>
        	</ul>
        </div>
        

        内联样式方法:

        <div class="c_tree">
        	<ul>
        		<li class="fold">
        			<a href="#nogo" class="ico"></a>
        			<input type="checkbox" class="e_checkbox" />
        			<a href="#nogo" class="text" style="background:url(temp/treeico-layout.png) no-repeat 0 0;">节点</a>
        		</li>
        	</ul>
        </div>