这个是一个爱好者维护的!在这里感谢这位爱好者!
1、JQ弹出层插件(tipsWindow 3.2)
说明:
一个基于jQuery的弹出层。
支持拖拽,支持多窗口。内容为文字,ID,图片,SWF,URL,框架;
2、使用教程
一个基于jQuery的弹出层插件。支持多窗口,拖动,最大化最小化,固定定位,相对于某个位置定位,具有简化的Tips模式。可以自定义外观等等,具体的看参数和演示(兼容ie内核、webkit内核、ff、opera等主流浏览器)
导入js文件和css文件
注意的地方: jquery的版本必须和这个相对应,尽量不要使用其他版本的! |
这里我就介绍一个我用的一个功能,提示框中有单选框,当选中一个单选框时,使用alert提示选中的单选框的id值。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>images/core.css"/>
<link rel="stylesheet" type="text/css" href="<%=basePath%>images/rest.css"/>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/XY_Base.js"></script>
<script type="text/javascript">
Util.loadJS("XY_Dialog.js", function() {
$("#btn").click(function() {
Util.Dialog({
boxID: "XYdialog",
title: "对话框",
width: 250,
height: 100,
fixed: true,
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'>隐藏层",
yesBtn: ["是", function(){
var item = $(":radio:checked");
var len=item.length;
if(len>0){
alert("yes--选中的值为:"+$(":radio:checked").attr("id"));
}
return true;
}],
noBtn: ["不是",function(){
return true;
}],
minBtn: true,
maxBtn: true
});
return false;
});
});
</script>
</head>
<body>
<div>
<br/>
<br/>
<br/>
<input type="text" name="ddd">
<button id="btn">点击</button>
</div>
<div id="tag">
</div>
<input type='radio' name='rad' id='inputTrans'>输入层<br>
<input type='radio' name='rad' id='outputTrans'>输出层<br>
<input type='radio' name='rad' id='obserTrans'>隐藏层
</body>
</html>
完整教程见http://leotheme.cn/wp-content/uploads/dev/module/Dialog/