2010.04.26———ポップアップ・レイヤが受信者を選択する効果
2010.04.26———ポップアップ・レイヤが受信者を選択する効果
火狐の下で正常に使うことができて、ieの下で少し問題があります
もう一つの小さな問題は、追加の順序にかかわらず、美人1は永遠に美人2の前でデータの元の順序に従います.
1.jsp
火狐の下で正常に使うことができて、ieの下で少し問題があります
もう一つの小さな問題は、追加の順序にかかわらず、美人1は永遠に美人2の前でデータの元の順序に従います.
1.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title> QQ </title>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<!-- <head> </head> -->
<style type="text/css">
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 1000px;height: 1500px;background-color:#FFFFFF;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}
.white_content{display: none;position: absolute;top: 25%;left: 25%;width: 50%;height: 50%;padding: 16px;border: 16px solid orange;margin:-32px;background-color: white;z-index:1002;overflow: auto;}
.hightLight{
background: #FF3300
}
</style>
<script language="javascript" type="text/javascript">
function dakai(){
$('#light').css("display","block");
$('#fade').css("display","block");
}
function guanbi(){
$('#light').css("display","none");
$('#fade').css("display","none");
}
var array1 = [" 1"," 2"," 3"];
var array2 = [" 1"," 2"," 3"];
$(function(){
var $yuanGong = $("#yuanGong").val();
var $yuanGong2 = $yuanGong;
$("#yuanGong").click(dakai);
$("#select1").click(function(event){
$(this).parent().siblings().children("select").each(function(){
$(this).hide()
});
var $val = $(event.target).val();
//alert($val);
var array;
var $select;
if($val=="rj"){
$select = $("#select2");
array = array1;
}else{
$select = $("#select3");
array = array2;
}
$select.show();
if($select.children("option").length==0){
for(var i=0;i<array.length;i++){
var html = "<option value="+array[i]+">"+array[i]+"</option>";
$select.append(html);
}
}
});
$("#select2").click(f2);
$("#select3").click(f2);
});
function f1(){
var html = "";
$.each($(".hightLight"),function(i,o){
html += $(this).text();
//alert($(".hightLight").length);
//alert(i);
if(i!=$(".hightLight").length-1){
html += ",";
}
$("#yuanGong").val(html);
//alert(html);
});
if(html=="")
$("#yuanGong").val("");
return html;
}
function f2(){
var $option = $('option:selected',this);
var $text = $option.text();
if($option.hasClass("hightLight")){
$option.removeClass("hightLight");
var html = f1();
$yuanGong2 = html;
}else{
$option.addClass("hightLight");
var html = f1();
$yuanGong2 = html;
}
}
</script>
</head>
<body style="width:800px;height:1000px">
<!-- <body> </body> -->
<input type="text" id="yuanGong" size="50">
<div id="light" class="white_content">
<table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
<tr>
<td width="150" height="200" align="center" valign="middle">
<select id="select1" size="12" name="D1" multiple="multiple" style="width:140px">
<option value="rj"> </option>
<option value="xs"> </option>
</select>
</td>
<td width="150" height="200" align="center" valign="middle">
<select id="select2" size="12" name="D2" id="D2" multiple="multiple" style="width:140px;">
</select>
<select id="select3" size="12" name="D2" id="D2" multiple="multiple" style="width:140px;display:none">
</select>
</td>
</tr>
</table>
<input type="button" name="button" onclick="guanbi()" value=" " />
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>