好用的消息对话框-TipsWindown

TipsWindow的官网地址为：http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html
这个是一个爱好者维护的！在这里感谢这位爱好者！
1、JQ弹出层插件(tipsWindow 3.2)
​说明：

一个基于jQuery的弹出层。

支持拖拽，支持多窗口。内容为文字，ID，图片，SWF，URL，框架；

2、使用教程

一个基于jQuery的弹出层插件。支持多窗口，拖动，最大化最小化，固定定位，相对于某个位置定位，具有简化的Tips模式。可以自定义外观等等，具体的看参数和演示（兼容ie内核、webkit内核、ff、opera等主流浏览器）

导入js文件和css文件


注意的地方：

jquery的版本必须和这个相对应，尽量不要使用其他版本的！

这里我就介绍一个我用的一个功能，提示框中有单选框，当选中一个单选框时，使用alert提示选中的单选框的id值。

  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. %>
  7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  8. <html>
  9.   <head>
  10.     <base href="<%=basePath%>">
  11.     <title>My JSP 'index.jsp' starting page</title>
  12.         <link rel="stylesheet" type="text/css" href="<%=basePath%>images/core.css"/>
  13.      <link rel="stylesheet" type="text/css" href="<%=basePath%>images/rest.css"/>
  14. 	<!--
  15. 	<link rel="stylesheet" type="text/css" href="styles.css">
  16. 	-->
  17. 	<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.min.js"></script>
  18. 	<script type="text/javascript" src="<%=basePath%>js/XY_Base.js"></script>
  19. 	<script type="text/javascript">
  20. 		Util.loadJS("XY_Dialog.js", function() {
  21. 			$("#btn").click(function() {
  22. 				Util.Dialog({
  23. 					boxID: "XYdialog",
  24. 					title: "对话框",
  25. 					width: 250,
  26. 					height: 100,
  27. 					fixed: true,
  28. 					content: "text:<input type='radio' name='rad' id='inputTrans'>输入层<br><input type='radio' name='rad' id='outputTrans'>输出层<br><input type='radio' name='rad' id='obserTrans'>隐藏层",
  29. 					yesBtn: ["是", function(){
  30. 						var item = $(":radio:checked");
  31. 						var len=item.length;
  32. 						if(len>0){
  33. 						  alert("yes--选中的值为："+$(":radio:checked").attr("id"));
  34. 						} 
  35. 						return true;
  36. 					}],
  37. 					noBtn: ["不是",function(){
  38. 						return true;
  39. 					}],
  40. 					minBtn: true,
  41. 					maxBtn: true
  42. 				});
  43. 				return false;
  44. 			});
  45. 		});
  46. 	</script>
  47.   </head>
  48.   <body>
  49.     <div>
  50.     <br/>
  51.     <br/>
  52.     <br/>
  53.     <input type="text" name="ddd">
  54.     	<button id="btn">点击</button>
  55.     </div>
  56.     <div id="tag">
  57. 	</div>
  58. 	<input type='radio' name='rad' id='inputTrans'>输入层<br>
  59. 	<input type='radio' name='rad' id='outputTrans'>输出层<br>
  60. 	<input type='radio' name='rad' id='obserTrans'>隐藏层
  61.   </body>
  62. </html>

完整教程见http://leotheme.cn/wp-content/uploads/dev/module/Dialog/






posted @ 2014-07-21 20:46  Tim&Blog  阅读(470)  评论(0)  编辑  收藏  举报