JQuery easyUI

 

引言

    進行過WEB開發的人員都應該對JQuery easyUI有所耳聞了,與ExtJs風格有點類似,我個人覺得比ExtJS好用。

正文

    EasyUI作爲一個輕量級的UI插件,提供了常用的UI控件accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。

    下面我們就Accordion  手風琴 效果做一個簡單入門案例:

     基本代碼

 

[html] view plaincopy

  1. <span style="font-size:14px">    <html>  

  2.     <head>  

  3.     <title>Accordion示例</title>  

  4.     <script src="../jquery-1.4.2.min.js" type="text/javascript"></script>  

  5.     <script src="../jquery.easyui.min.js" type="text/javascript"></script>  

  6.     <link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />  

  7.     <link href="../themes/icon.css" rel="stylesheet" type="text/css" />  

  8.     <script type="text/javascript"></script>  

  9.     </head>  

  10.     <body>  

  11.     <div style="overflow:auto;width:600px;height:300px;padding:10px;border:1px solid #ccc;">  

  12.        <div id="aa" class="easyui-accordion" fit="true" style="width:300px;height:200px;">  

  13.             <div title="Title1" style="overflow:auto;padding:10px;">  

  14.                 <h3>Accordion1</h3>  

  15.             </div>  

  16.             <div title="Title2" style="padding:10px;">  

  17.                 <h3>Accordion2</h3>  

  18.             </div>  

  19.             <div title="Title3">  

  20.                 <h3>Accordion3</h3>  

  21.             </div>  

  22.         </div>  

  23.     </div>  

  24.     </body>  

  25.     </html></span>  

 

   注意:jquery-1.4.2.min.js和jquery.easyui.min.js必須引用

總結

     其實Jquery easyUI 利用它可以編寫少量的js代碼就能運行出比較華麗的js效果,提高的Web開發效率。下面我爲大家提供一些地址: 

 

       官方網站:http://jquery-easyui.wikidot.com/start

       下載地址:http://jquery-easyui.wikidot.com/download

         官方的API文檔爲:http://jquery-easyui.wikidot.com/document

 

 

原文出處:http://blog.csdn.net/renzhe333/article/details/15122297

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章