道喜技术日记 .^. 天天红玉世界

Rails Ruby MacOSX 。。。创新来自于刻苦的实践和勤奋的思考... www.hhtong.com


代码世界:介绍使用jQuery UI标签功能

Gudao Luo2008-08-02 at 19:04发表的

介绍使用jQuery UI标签功能

使用实例

  • 下载CSS文件及其图片
    1 svn co http://jquery-ui.googlecode.com/svn/tags/latest/themes/flora/
    
  • 下载jQuery软件及其UI库
    1   curl -O http://code.jquery.com/jquery-latest.js
    2   curl -O http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js
    3   curl -O http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js
    
    或者使用命令
    1   wget http://code.jquery.com/jquery-latest.js
    2   wget http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js
    3   wget http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js
    
  • 创建一个HTML文件
    1   vi tabs.html
  • 该HTML文件必须包含三部分内容
     1 <html><head>
     2   <!— 1. 说明CSS文件和jQuery文件的位置 BEGIN —>
     3   <script src="jquery-latest.js"></script>
     4   <link rel="stylesheet" href="flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
     5   <script type="text/javascript" src="ui.core.js"></script>
     6   <script type="text/javascript" src="ui.tabs.js"></script>
     7   <!— 1. 说明CSS文件和jQuery文件的位置 END —>
     8  
     9   <!— 2. jQuery代码 BEGIN —>
    10   <script>
    11   $(document).ready(function(){
    12     $("#example > ul").tabs();
    13   });
    14   </script>
    15   <!— 2. jQuery代码 END —></head><body>
    16  
    17   <!— 3. 与jQuery代码相关的HTML代码 BEGIN —>
    18   <div id="example" class="flora">
    19     <ul>
    20       <li><a href="#fragment-1"><span>One</span></a></li>
    21       <li><a href="#fragment-2"><span>Two</span></a></li>
    22       <li><a href="#fragment-3"><span>Three</span></a></li>
    23     </ul>
    24     <div id="fragment-1">tab1 内容</div>
    25     <div id="fragment-2">tab2 内容</div>
    26     <div id="fragment-3">tab3 内容</div>
    27   </div>
    28   <!— 3. 与jQuery代码相关的HTML代码 END —></body></html>
    
  • 参考资料
Hierarchy: previous, next

Comments

There are 0 comments on this post. Post yours →

Post a comment

Required fields in bold.