jquery控件使用讲解

jquery控件使用讲解2010-06-30 博客园 zijinguangweb开发过程中,常常使用到控件。而开始学习众多控件的过程中，总结了一下笔记，特集结成册，以备自己或朋友学习交流。

（一）Floating Box

功能简介：本控件可以实现层的动态定位（四个角：左上、左下、右上、右下）

效果显示：当点击四个按钮时候，浮动的层回漂移到所对应的位置。

操作步骤：

1、添加引用（注意路径和自己对应，文件见附件）

<script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.floatingbox.js"></script>

2、设置CSS样式

<style type="text/css">
         #FloatingBox
         {
             border:1px #FF3300 solid;
             width:80px;
             height:100px;
             background-color:#CC9900;
         }
        </style>

3、添加加载函数（注意应该为对应的div的ID）

<script type="text/javascript">
  $（document）.ready（
      function（）
      {
           $（"#FloatingBox"）.floating（）;
      }
    ）;
 </script>

4、为Div层上的四个按钮添加事件函数的调用

<button onclick="javascript:$（"#FloatingBox"）.floatingPosition（"left", "top"）;">左上</button>
<button onclick="javascript:$（"#FloatingBox"）.floatingPosition（"right", "top"）;">右上</button><br>
<button onclick="javascript:$（"#FloatingBox"）.floatingPosition（"left", "bottom"）;">左下</button>
<button onclick="javascript:$（"#FloatingBox"）.floatingPosition（"right", "bottom"）;">右下</button>

5、恭喜你，你可以保存查看效果了。看看那单击按钮定位层感觉是否很是惬意？

6、敬请留意下一篇！