jquery 控件使用 讲解 连载

web开发过程中,常常使用到jquery控件。而开始学习众多控件的过程中，总结了一下笔记，特集结成册，以备自己或朋友学习交流。

（一）Floating Box

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

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

                          

   操作步骤：

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

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

 

           2、设置CSS样式

Code

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

 

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

 

Code
<script type="text/javascript">
  $(document).ready(
      function()
      {
           $('#FloatingBox').floating();
      }
    );    
 </script> 

 

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

Code
  <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、敬请留意下一篇！

附件：下载JQuery及floatingBox插件

转载于:https://www.cnblogs.com/zijinguang/archive/2009/03/28/jquery.html