jQuery tools 第二期

//--.5 scrollable

    /*基本元素
     * 两个的向前,向后按钮
     * 一个DIV,做为总容器,带有类名,如:scrollable
     * 一个DIV,做为item容器,带有类名,如:item
     * 若干个任意元素,做为流动列表内容,如图片,flash等
     */
     <!-- "previous page" action -->
     <a class="prevPage browse left">left</a>
     <!-- root element for scrollable -->
     <div class="scrollable">
     <!-- root element for the items -->
     <div class="items">
          <!-- 1-5 -->
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
          <!-- 5-10 -->
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
          <!-- 10-15 -->
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
          <img src="" />
     </div>
     </div>
     <!-- "next page" action -->
     <a class="nextPage browse right">right</a>
     /*CSS
     * 将元素设置到一行或一列,并隐藏不需显示的元素
     */

     /*
         root element for the scrollable.
         when scrolling occurs this element stays still.
     */
     .scrollable {

         /* required settings */
         position:relative;
         overflow:hidden;
         width: 680px;
         height:120px;

         /* custom decorations */
         border:1px solid #ccc;
         background:url(/img/global/gradient/h300.png) repeat-x;
     }

     /*
         root element for scrollable items. Must be absolutely positioned
         and it should have a extremely large width to accomodate scrollable items.
         it's enough that you set the width and height for the root element and
         not for this element.
     */
     .scrollable .items {
         /* this cannot be too large */
         width:20000em;
         position:absolute;
         clear:both;
     }

     /* single scrollable item */
     .scrollable img {
         float:left;
         margin:20px 5px 20px 21px;
         background-color:#fff;
         padding:2px;
         border:1px solid #ccc;
         cursor:pointer;
         width:100px;
         height:75px;
         
         -moz-border-radius:4px;
         -webkit-border-radius:4px;
     }

     /* active item */
     .scrollable .active {
         border:2px solid #000;
         z-index:9999;
         position:relative;
     }

     a{
         display: inline;
     }
     /*jQuery调用
     *
     */
     $(document).ready(function() {
            var api = $("div.scrollable").scrollable({
                api: true,
                loop: true    //到达末端,返回

            });
            api.next();    //返回值调用API

            api.onSeek(showSize);
            api.end();
        });
        function showSize(){
            alert(this.getSize());
        }
        
        //--.6 flashembed

        /*基本元素
         * 一个DIV放置flash
         */
        <div id="clock"></div>
        /*CSS
         * 基本不用做什么,只是控制flash大小,位置
         */
        /*jQuery调用
         * 需要加载:tools.flashembed-1.0.4.min.js库和jquery-1.4.2.min.js
         */
        $(document).ready(function (){
            $('#load_button').click(function (){
                $('#clock').flashembed("/jQueryOnly/data/flash/clock.swf");
            });
        });