生活在远方

是的,因为真正的生活是在远方

【jQuery】示例8:手风琴式的控制

Written By: tr - Jan• 17•09

遵照由简到繁的原则,我继续完成“手风琴式的控制”,示例见此处

在jQuery中实现手风琴式的控制十分简单:

<script src="../ui/ui.core.js"></script>
<script src="../ui/ui.accordion.js"></script>
<script type="text/javascript">
            $(document).ready(
            function()
            {
                $("#accordion").accordion();
            }
            );
</script>

两个额外的js文件可以从jQuery网站下载,也可以直接远程引用。

html的代码采用ul/li组合写成:

<ul id="accordion">
  <li>
    <a href="#">Section 1</a>
      <div>Line 1.<br/>
      Line 1.<br/>
      Line 1.<br/>
      Line 1.</div>
  </li>
  <li>
    <a href="#">Section 2</a>
     <div>Line 2.<br/>
     Line 2.<br/>
     Line 2.<br/>
   </li>
   ...
</ul>

实在是很简单,而且很干净,彻底分离了html和js代码。

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">