BlogJava-WolfSoft-文章分类-Jqueryhttp://www.blogjava.net/WolfSoft/category/46866.htmlzh-cnThu, 04 Nov 2010 06:44:14 GMTThu, 04 Nov 2010 06:44:14 GMT60jquery.floatingbox.js 使用详解http://www.blogjava.net/WolfSoft/articles/337212.htmlSuperWolfSuperWolfThu, 04 Nov 2010 04:00:00 GMThttp://www.blogjava.net/WolfSoft/articles/337212.htmlhttp://www.blogjava.net/WolfSoft/comments/337212.htmlhttp://www.blogjava.net/WolfSoft/articles/337212.html#Feedback0http://www.blogjava.net/WolfSoft/comments/commentRss/337212.htmlhttp://www.blogjava.net/WolfSoft/services/trackbacks/337212.htmlhttp://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


SuperWolf 2010-11-04 12:00 发表评论
]]>