]]>
]]>
基本介绍Q?/span>
showModalDialog() (IE 4+ 支持)
showModelessDialog() (IE 5+ 支持)
window.showModalDialog() Ҏ用来创徏一个显CHTML内容的模态对话框?br /> window.showModelessDialog() Ҏ用来创徏一个显CHTML内容的非模态对话框?br />使用ҎQ?/span>
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
参数说明Q?/span>
sURL -- 必选参敎ͼcdQ字W串。用来指定对话框要显C的文档的URL?br /> vArguments -- 可选参敎ͼcdQ变体。用来向对话框传递参数。传递的参数cd不限Q包括数l等。对话框通过
window.dialogArguments来取得传递进来的参数?br /> sFeatures -- 可选参敎ͼcdQ字W串。用来描q对话框的外观等信息Q可以用以下的一个或几个Q用分号“;”隔开?br />----------------
1. dialogHeight: 对话框高度，不小?00px
2. dialogWidth: 对话框宽度?br />3. dialogLeft: dq左的距R?br />4. dialogTop: dq上的距R?br />5. center: { yes | no | 1 | 0 } Q?nbsp; 是否居中Q默认yesQ但仍可以指定高度和宽度?br />6. help: {yes | no | 1 | 0 }Q?nbsp; 是否昄帮助按钮Q默认yes?br />7. resizable: {yes | no | 1 | 0 } [IE5+]Q?nbsp; 是否可被改变大小。默认no?br />8. status: {yes | no | 1 | 0 } [IE5+]Q?nbsp; 是否昄状态栏。默认ؓyes[ Modeless]或no[Modal]?br />9. scroll: { yes | no | 1 | 0 | on | off }Q是否显C滚动条。默认ؓyes?br />
下面几个属性是用在HTA中的Q在一般的|页中一般不使用?br />10. dialogHide:{ yes | no | 1 | 0 | on | off }Q在打印或者打印预览时对话框是否隐藏。默认ؓno?br />11. edge:{ sunken | raised }Q指明对话框的边框样式。默认ؓraised?br />12. unadorned:{ yes | no | 1 | 0 | on | off }Q默认ؓno?br />
参数传递：
1. 要想对话框传递参敎ͼ是通过vArguments来进行传递的。类型不限制Q对于字W串cdQ最大ؓ4096个字W。也可以传递对象，例如Q?br />-------------------------------
parent.htm
<script>
var obj = new Object();
obj.name="51js";
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>
modal.htm
<script>
var obj = window.dialogArguments
alert("您传递的参数为：" + obj.name)
</script>
-------------------------------
2.可以通过window.returnValue向打开对话框的H口q回信息Q当然也可以是对象。例如：
------------------------------
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://homepage.yesky.com";
</script>
常见技巧：
一、怎样才让在showModalDialog和showModelessDialog的超q接不弹出新H口Q?/strong>
在被打开的网里加上<base target="_self">可以了。这句话一般是攑֜<head>之间的?/font>
二、怎样才刷新showModalDialog和showModelessDialog里的内容Q?/strong>
在showModalDialog和showModelessDialog里是不能按F5h的，又不能弹单。这个只能依?/font>
javascript了，以下是相关代码：
<body onkeydown="if (event.keyCode==116){reload.click()}">
<a id="reload" href="filename.htm" style="display:none">reload...</a>
filename.htm替换成网늚名字然后它攑ֈ你打开的网里Q按F5可以刷CQ注意，q个?/font>
配合<base target="_self">使用Q不然你按下F5会弹出新H口的?/font>
三、如何用javascriptxshowModalDialog(或showModelessDialog)打开的窗口?/strong>
<input type="button" value="关闭" onclick="window.close()">
也要配合<base target="_self">Q不然会打开一个新的IEH口Q然后再x的?/font>
四、Math.random与showModalDialog?/font>
当你讄的弹出网固定时Q如上面?font size="2">"modal.htm"面Q?/font>Qie很可能到临时文g区，下蝲上次产生的该面(openPage.html),而没有重新加载，
对于动态加载的面来说Q这样往往产生误会Q如没有及时更新数据Q也更不利于开发者测试。所以，你可以采用如下方式：
var strPage = “/medal.htm?random="+Math.random();
q样每次产生的strPage是不一LQ原因也׃a自明了?/font>
下面举两个例?/font>
一、返回一个字W串
首先是父面有个按钮Q用来打开Modal面userList.aspx
function openWin()
{
str =window.showModalDialog("userList.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px");
if(str!=undefined && typeof(str)!=undefined && str!="undefined" && str!="")
{
document.getElementById("txtuserid").value=str;
}else
{
document.getElementById("txtuserid").value="";
}
}
{
str =window.showModalDialog("userList.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px");
if(str!=undefined && typeof(str)!=undefined && str!="undefined" && str!="")
{
document.getElementById("txtuserid").value=str;
}else
{
document.getElementById("txtuserid").value="";
}
}
str是子页面返回过来的数据Q我们把它添加到父类的一个表单元素中
子页?/font>
function getValue()
{
{
var selectValue=$(":radio:checked").val();
window.returnValue=selectValue;
window.close();
}
window.returnValue=selectValue;
window.close();
}
在这里我们把子页面里的D回到爉面里可以了Q然后关闭页面就可以?/p>
二、返回一个数?/p>
爉?/p>
function openWin()
{
array =window.showModalDialog("demo2.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px;scroll:no");
document.getElementById("username").value=array[0];
document.getElementById("sex").value=array[0];
}
{
array =window.showModalDialog("demo2.aspx",window,"status:0;help:0;edge:sunken;dialogWidth=700px;dialogHeight=400px;scroll:no");
document.getElementById("username").value=array[0];
document.getElementById("sex").value=array[0];
}
子页?/p>
function getValue()
{
var array=new Array();
array[0]=document.getElementById("username").value;
Array[1]=document.getElementById("sex").value;
window.returnValue=array;
window.close();
}
{
var array=new Array();
array[0]=document.getElementById("username").value;
Array[1]=document.getElementById("sex").value;
window.returnValue=array;
window.close();
}
q回一个数l就可以了，如果用open打开的话Q在搜狗或?60览器打开的是一个页面或者阻拦什么的
前段旉在后C用JS的winodw.showModalDialog来查看静态页面内容，发现不能及时昄更新后的面内容Q用open打开有时也会出现q种问题
解决办法
window.showModalDialog(getUrl+"?Rnd="+Math.random(),"","dialogWidth:600px;dialogHeight:400px;help:no;scroll:yes;center:yes;status:no;");
q样׃会有~存?br />
多思考，多创斎ͼ才是正道Q?/div>
]]>Jquery操作select http://m.tkk7.com/wshsdlau/archive/2012/11/26/391975.html哈希 哈希 Mon, 26 Nov 2012 04:46:00 GMT http://m.tkk7.com/wshsdlau/archive/2012/11/26/391975.html http://m.tkk7.com/wshsdlau/comments/391975.html http://m.tkk7.com/wshsdlau/archive/2012/11/26/391975.html#Feedback 0 http://m.tkk7.com/wshsdlau/comments/commentRss/391975.html http://m.tkk7.com/wshsdlau/services/trackbacks/391975.html
//1.判断select选项?是否存在Value="paraValue"的Item function jsSelectIsExitItem(objSelect,objItemValue) { var isExit = false ; for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { isExit = true ; break ; } } return isExit; } //2.向select选项?加入一个Item function jsAddItemToSelect(objSelect,objItemText,objItemValue, objItemPos) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { alert( "该Item?Value值已l存? ); } else { var varItem = new Option(objItemText,objItemValue); // objSelect.options[objSelect.options.length] = varItem; objSelect.options.add(varItem, objItemPos); alert( "成功加入" ); } } //3.从select选项?删除一个Item function jsRemoveItemFromSelect(objSelect,objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { objSelect.options.remove(i); break ; } } alert( "成功删除" ); } else { alert( "?select?不存在该? ); } } //4.修改select选项?value="paraValue"的text?paraText" function jsUpdateItemToSelect(objSelect,objItemText,objItemValue) { //判断是否存在 if (jsSelectIsExitItem(objSelect,objItemValue)) { for ( var i=0;i;I++) { if (objSelect.options[i].value == objItemValue) { objSelect.options[i].text = objItemText; break ; } } alert( "成功修改" ); } else { alert( "?select?不存在该? ); } } //5.讄select中text="paraText"的第一?Item为选中 function jsSelectItemByValue(objSelect,objItemText) { //判断是否存在 var isExit = false ; for ( var i=0;i;I++) { if (objSelect.options[i].text == objItemText) { objSelect.options[i].selected = true ; isExit = true ; break ; } } //Show出结?span class="Apple-converted-space"> if (isExit) { alert( "成功选中" ); } else { alert( "?select?不存在该? ); } } //6.讄select中value="paraValue"的Item 为选中 document.all.objSelect.value = objItemValue; //7.得到select的当前选中的value var currSelectValue = document.all.objSelect.value; //8.得到select的当前选中的text var currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text; //9.得到select的当前选中的Index var currSelectIndex = document.all.objSelect.selectedIndex; //10.清空select的项 document.all.objSelect.options.length = 0;
]]>
1.判断select选项?是否存在Value="paraValue"的Item
$("#selectid option[@value='paraValue']").length>0
2.向select选项?加入一个Item
$("#selectid").append("<option value=''>1111<option>");
3.从select选项?删除一个Item
$("#selectid").remove("<option value=''>1111<option>");
4.修改select选项?value="paraValue"的text?paraText"
$("#selectid option:selected").attr("value","paraValue").attr("text","paraText");
5. 讄select中text="paraText"的第一个Item为选中
$("#selectid option[@text='paraText']").attr("selected","true")
6.讄select?value="paraValue"的Item为选中
$("#selectid option[@value='paraValue']").attr("selected","true")
7.讄select中第一 个Item为选中
$("#selectid option").eq(0).attr('selected', 'true');
8. 得到select的当前选中的value
$("#selectid").val();
9.得到select的当前选中的text
$("#selectid").text();
10. 得到select的当前选中的Index
document.getElementById("select1").selectedIndex;
$("#selectid").get(0).selectedIndex
11. 清空select的项
$("#selectid").empty();
JS版本的：
]]>
]]>
很少 有java?今天把自己的Demo贴出?和大家共同学?
现在?nbsp; Jquery ajax ?$.ajax(),$.post(),$.get();
首先?nbsp; 服务端的Servlet 演示q三个函数的用法寚w是用的同一?服务?
Java代码
package com.june.servlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
public class jqueryAjaxServer extends HttpServlet {
public jqueryAjaxServer(){
super();
}
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String account=request.getParameter("account");
if("iamcrzay".equals(account)){
out.print("Sorry,the user is exist");
}
else{
out.print("Congratulation,this accont you can use!!!!");
}
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
this.doGet(request, response);
}
}
package com.june.servlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
public class jqueryAjaxServer extends HttpServlet {
public jqueryAjaxServer(){
super();
}
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String account=request.getParameter("account");
if("iamcrzay".equals(account)){
out.print("Sorry,the user is exist");
}
else{
out.print("Congratulation,this accont you can use!!!!");
}
out.close();
}
public void doPost(HttpServletRequest request,HttpServletResponse response)
throws IOException ,ServletException {
this.doGet(request, response);
}
}
下面是WEB.XML
Xml代码
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns=" xmlns:xsi=" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
<servlet>
<servlet-name>jqueryAjaxServer</servlet-name>
<servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jqueryAjaxServer</servlet-name>
<url-pattern>/jqueryAjax</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns=" xmlns:xsi=" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
<servlet>
<servlet-name>jqueryAjaxServer</servlet-name>
<servlet-class>com.june.servlet.jqueryAjaxServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>jqueryAjaxServer</servlet-name>
<url-pattern>/jqueryAjax</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
下面是Jsp面
W一个是 jqueryAjax.jsp 本页使用的是$.ajax()
Html代码
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$('.sumbit').click(function(){
if($('#account').val().length==0){
$('.hint').text("用户名不能位I?).css({"background-color":"green"});
}
else{
$.ajax({
url:'jqueryAjax',
data:{account:$('#account').val()},
error:function(){
alert("error occured!!!");
},
success:function(data){
$('body').append("<div>"+data+"</div>").css("color","red");
}
});}
});
});
</script>
</head>
<body>
<h3 align="center">jquery AjaX</h3>
<hr>
<label>误入用户名 Q?lt;/label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="?>
<div class="hint">
</div>
</body>
</html>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$('.sumbit').click(function(){
if($('#account').val().length==0){
$('.hint').text("用户名不能位I?).css({"background-color":"green"});
}
else{
$.ajax({
url:'jqueryAjax',
data:{account:$('#account').val()},
error:function(){
alert("error occured!!!");
},
success:function(data){
$('body').append("<div>"+data+"</div>").css("color","red");
}
});}
});
});
</script>
</head>
<body>
<h3 align="center">jquery AjaX</h3>
<hr>
<label>误入用户名 Q?lt;/label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="?>
<div class="hint">
</div>
</body>
</html>
W二个用的是 $.post()
Html代码
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$('.sumbit').click(
function(){
if($('#account').val().length==0){
$('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});
}
else{
$.post("jqueryAjax","account="+$('#account').val(),function(data){
$('.hint').text(data).css({"color":"red","background-color":"yellow"});
})
}
});
});
</script>
</head>
<body>
<h3 align="center">jquery Ajax</h3>
<hr>
<label>误入用户名 Q?lt;/label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="?>
<div class="hint">
</div>
</body>
</html>
<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery ajax</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$('.sumbit').click(
function(){
if($('#account').val().length==0){
$('.hint').text("The account is cant't be null").css({"color":"red","background-color":"yellow"});
}
else{
$.post("jqueryAjax","account="+$('#account').val(),function(data){
$('.hint').text(data).css({"color":"red","background-color":"yellow"});
})
}
});
});
</script>
</head>
<body>
<h3 align="center">jquery Ajax</h3>
<hr>
<label>误入用户名 Q?lt;/label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="?>
<div class="hint">
</div>
</body>
</html>
W三个是用的$.get()
Html代码
<%@ page pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery get</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.sumbit').click(function(){
if($('#account').val().length==0){
$('.hint').html("用户名不能位I！Q！").css({"color":"#ffoo11","background":"blue"});
}
else{
$.get("jqueryAjax","account="+$('#account').val(),
function(data){
$('.hint').html(data).css({"color":"#ffoo11","background":"green"});
});
}
});
});
</script>
</head>
<body>
<h3 align="center">jquery AjaX</h3>
<hr>
<label>误入用户名 Q?lt;/label>
<input id="account" name="account" type="text">
<input class="sumbit" type="button" value="?>
<div class="hint">
</div>
</body>
</html>
]]>
height:40px;
position:absolute;
z-index:4;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
top:30%;
}
]]>