jquery 控件使用讲解

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

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

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

编辑推荐阅读：

Jquery源码分析---导言

Jquery源码分析---概述

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

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

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

Jquery源码分析---DOM元素（上）

Jquery源码分析---DOM元素（中）

Jquery源码分析---DOM元素（下）

Jquery源码分析---Event分析

Jquery源码分析---Ajax分析

Jquery源码分析---FX分析

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