WEB开发网
开发学院网页设计JavaScript jquery 控件使用讲解 阅读

jquery 控件使用讲解

 2010-09-14 13:43:09 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 web开发过程中,常常使用到jquery控件,而开始学习众多控件的过程中,jquery 控件使用讲解,总结了一下笔记,特集结成册, 操作步骤: 1、添加引用(注意路径和自己对应,文件见附件)<scripttype="text/javascript"src=&q

本文示例源代码或素材下载

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

(一)Floating Box

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

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

jquery 控件使用讲解

操作步骤:

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

编辑推荐阅读:

Jquery源码分析---导言

Jquery源码分析---概述

Jquery源码分析---构建jQuery对象

Jquery源码分析---构建Jquery的Dom元素

Jquery源码分析---jQuery类数组的分析

Jquery源码分析---DOM元素(上)

Jquery源码分析---DOM元素(中)

Jquery源码分析---DOM元素(下)

Jquery源码分析---Event分析

Jquery源码分析---Ajax分析

Jquery源码分析---FX分析

Jquery源码分析---expand (扩展)

Tags:jquery 控件 使用

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接