WolfSoft

常用链接

统计

最新评论

jquery.floatingbox.js 使用详解

 jquery.floatingbox 是一款很好的内容漂浮插件，它能够很好的根据自己的需求进行不同位置漂浮显示,官网（http://www.phpletter.com/）
 
实现代码如下：
1.<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   
2.<%   
3.String path = request.getContextPath();   
4.String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
5.%>   
6.  
7.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
8.<html>   
9.  <head>   
10.    <base href="<%=basePath%>">   
11.       
12.    <title>My JSP 'index.jsp' starting page</title>   
13.    <meta http-equiv="pragma" content="no-cache">   
14.    <meta http-equiv="cache-control" content="no-cache">   
15.    <meta http-equiv="expires" content="0">       
16.    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
17.    <meta http-equiv="description" content="This is my page">   
18.       
19.    <style type="text/css">   
20.       #FloaintBox{   
21.          border-width: 1px;   
22.          border-color: red;   
23.          background-color: #cccffc;   
24.       }   
25.    </style>   
26.       
27.  <script type="text/javascript" src="<%=path%>/js/jquery.js"></script>   
28.  <script type="text/javascript" src="<%=path%>/js/jquery.floatingbox.js"></script>   
29.  <script type="text/javascript">   
30.  
31.            $(document).ready(   
32.                function()   
33.                {   
34.                    $('#FloaintBox').floating();   
35.                }   
36.            );   
37.               
38.        </script>   
39.     
40.  </head>   
41.     
42.  <body>   
43.     <div id="FloaintBox" >   
44.                <h2>JQuery Floating Box Plugin</h2>   
45.                <p>   
46.                  We are specialized in <br>   
49.                <ul>   
50.                    <li>Website Design</li>   
51.                    <li>Survey System Creation</li>   
52.                    <li>E-commerce Site Development</li>   
53.                </ul>   
54.                <button onclick="javascript:$('#FloaintBox').floatingPosition('left', 'top');">Top Left</button><br>   
55.                <button onclick="javascript:$('#FloaintBox').floatingPosition('right', 'top');">Top Right</button><br>   
56.                <button onclick="javascript:$('#FloaintBox').floatingPosition('left', 'bottom');">Bottom Left</button><br>   
57.                <button onclick="javascript:$('#FloaintBox').floatingPosition('right', 'bottom');">Bottom Right</button>   
58.                </p>         
59.            </div>   
60.  </body>   
61.</html>   

源码下载:floating.rar

posted on 2010-11-04 12:00 SuperWolf 阅读(418) 评论(0)  编辑  收藏 所属分类: Jquery-Plug-in


只有注册用户登录后才能发表评论。
网站导航: