每个人都希望每天都是开心的，不要因为一些琐事扰乱了心情还，闲暇的时间怎么打发，关注图老师可以让你学习更多的好东西，下面为大家推荐jquery 控件使用讲解，赶紧看过来吧！
【 tulaoshi.com - Web开发 】
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层上的四个按钮添加事件函数的调用
（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/） button onclick="javascript:$('#FloatingBox').floatingPosition('left', 'top');"左上/button
button onclick="javascript:$('#FloatingBox').floatingPosition('right', 'top');"右上/buttonbr
button onclick="javascript:$('#FloatingBox').floatingPosition('left', 'bottom');"左下/button
button onclick="javascript:$('#FloatingBox').floatingPosition('right', 'bottom');"右下/button
5、恭喜你，你可以保存查看效果了。看看那单击按钮定位层感觉是否很是惬意？
6、敬请留意下一篇！
来源:https://www.tulaoshi.com/n/20160219/1611491.html
看过《jquery 控件使用讲解》的人还看了以下文章 更多>>
