我的作品(html):可编辑的<select>元素和弹出窗口的整合

也可以单独使用，重用性很强。学会软件著作权申请。和大家一起共享！！！

js文件1, editSelect.js 内容如下:

// JavaScript DocumenteditSelect start
/*******************************************************************************
* Title : editSelect.js
* Description : 生成一个可编辑的<SELECT> (select, div, img)
* Copyright (C) Mocha Software Co.,Ltd.
*
* @author wangchl
* @version SISO v2.0
******************************************************************************/

/*******************************************************************************
* name: EditSelect
* Description : 构造器
******************************************************************************/
function EditSelect(sel, div , imglist, repeat){
this.select = sel;//真正要编辑的Select
this.SelectRepeat = repeat;//指定编辑Select 时是否允许Select显示的值（option.innerText）重复
this.div = div; //EditSelect的内置
this.divwidth = "";
this.txt = document.createElement("INPUT");//显示和编辑Select对象内的Option对的innerText数据的对象
this.oldtxtvalue = "";
this.img_list = imglist;//下拉箭头图片的索引
}

/*******************************************************************************
* name: build
* Description : 将几个元素整合为一个组件，知识产权。为每个组件元素添加必要的事件
******************************************************************************/
EditSelect.prototype.build = function(){

//将Text 和 Image 对象添加到Div
this.div.appendChild(this.txt);
this.div.appendChild(this.img_list);
//绑定组件元素事件
//alert(this._attachEvent);
this._setStyle();
this._attachEvent();

}

/****************************************************************************************
* name: selectOnchangeDelegate
* Description : 委托代理Select的onChange事件
***************************************************************************************/
EditSelect.prototype.selectOnChangeDelegate=null;

/****************************************************************************************
* name: setSelectOnchange
* Description : 设置Select的onChange事件 (增加Select的 onChange 事件的灵活性）
***************************************************************************************/
EditSelect.prototype.setSelectOnchange = function(e){
this.select.onchange=e;
//alert(this.select.onchange);
}

/****************************************************************************************
* name: _attachEvent
* Description : 私有绑定事件
***************************************************************************************/
EditSelect.prototype._attachEvent = function(){

var b_div = this.div;
var b_select = this.select;
var b_repeat = this.SelectRepeat;
var b_txt = this.txt;
var oldtxtvalue = this.oldtxtvalue;
var b_img = this.img_list;
// Select 的值发生改变的时候，将 Select 当前 Option 的起始和结束标签内的文本赋给 Text
this.selectOnChangeDelegate = b_select.onchange = function(){
oldtxtvalue = b_txt.value = b_select.options[b_select.selectedIndex].innerText;
b_txt.select();
b_select.style.display = "none";
}

b_select.onresize = function(){
//重置 DIV 和 Text 的大小
b_div.style.width = b_select.scrollWidth;
b_txt.width = b_select.scrollWidth-17-2;

//重置Select 的位置
var offset = getOffset(b_txt);
b_select.style.top = offset.top + b_txt.offsetHeight + 1 + "px";
b_select.style.left = offset.left + "px";
}
// Text 的值发生改变的时候，将 Select 当前 Option 的起始和结束标签内的文本修改为 Text 的值
b_txt.onchange = function(){
if(b_txt.value == ""){
alert("数据不能为空！");
b_txt.value = oldtxtvalue;
b_txt.select();
b_txt.focus();
return false;
}else if(b_txt.value.trim() == ""){
alert("数据必须包含非空格数据！");
b_txt.value = oldtxtvalue;
b_txt.select();
b_txt.focus();
return false;
}else if(!b_repeat){
for(var i = 0; i < b_select.options.length; i++){
if(b_select.options[i].innerText == b_txt.value.trim()){
alert("不允许有重复的数据出现！");
b_txt.value = oldtxtvalue;
b_txt.select();
b_txt.focus();
return false;
}
}
}
b_select.options[b_select.selectedIndex].innerText = oldtxtvalue = b_txt.value;
}
//当点击 Image 的时候显示 Select 对象
b_img.onclick = function(){

b_select.style.display = "inline";

}

//当用户点击页面让 Select 隐藏
document.onmouseup = function(){
if(b_select.style.display != "none"){
b_select.style.display = "none";
}
}
//alert(document.body.outerHTML);
}

/****************************************************************************************
* name: setStyle
* Description : 私有绑定事件
***************************************************************************************/
EditSelect.prototype._setStyle = function(){
var s_select = this.select;
var s_div = this.div;
var s_txt = this.txt;
var s_img = this.img_list;
// 设置 Image 的对齐方式和大小
s_img.width = 17;s_img.height = 20;
s_img.align="absmiddle"
s_txt.setAttribute("width","250")

// 设置 Text 的显示方式，大小和开始值
s_txt.style.borderWidth = 0;
s_txt.width = s_select.scrollWidth-17-2;
s_txt.onfocus = function(){
s_txt.style.backgroundColor = "#FFFFE1";
}
s_txt.onblur = function(){
s_txt.style.backgroundColor = "";
}
this.oldtxtvalue = s_txt.value = s_select.options[s_select.selectedIndex].innerText;

//设置 Div 的显示和大小
s_div.className = "sel_div";
s_div.style.width = s_select.scrollWidth;
//取得 Text 的绝对位置
var offset = getOffset(s_txt);
// 设置Select 的显示方式,位置(Text 的下方)
s_select.className = "editSelect";
if(s_select.length < 18){
s_select.size = s_select.length;
}else{
s_select.size = 18;
}

s_select.style.display = "none";
s_select.style.top = offset.top + s_txt.offsetHeight + 1 + "px";
s_select.style.left = offset.left + "px";

}

/*******************************************************************************
* name: trim
* Description : 返回一个去掉前后空格的字符串
******************************************************************************/
String.prototype.trim = function(){
var count = this.length;
var len = count;
var sta = 0;
while((sta < len) && (this.charAt(sta) == " ")){
sta++;
}
while((sta < len) && (this.charAt(len-1) == " ")){
len--;
}
return ((sta > 0) || (len < count)) ? this.substring(sta,len) : this;
}

/*******************************************************************************
* name: getOffset
* Description : 获取对象相对于版面的位置(top,left)和大小(width,height)
******************************************************************************/
function getOffset(obj){
var t_Top = obj.offsetTop;
var t_Left = obj.offsetLeft;
var t_Width = obj.offsetWidth;
var t_Height = obj.offsetHeight-2;

while(obj=obj.offsetParent)
{
t_Top+=obj.offsetTop;
t_Left+=obj.offsetLeft;
}
return {
top : t_Top,
left : t_Left,
width : t_Width,
height : t_Height
}
}

// JavaScript Documentpopup end

js文件2,popup.js 内容如下:

// JavaScript Documentpopupstart
/****************************************************************************************
* Title : popup.js
* Description : 以无边框的形式显示窗口,
* Copyright (C) Mocha Software Co.,Ltd.
*
* @author wangchl
* @version SISO v2.0
***************************************************************************************/

/******************************************************** Popup **********************************************************/

//声名一个全局的引用,指向当前 Popup 对象
var popup_win;

/****************************************************************************************
* name: Popup
* Description : 构造器
***************************************************************************************/

function Popup(img_close, url){
popup_win=this;
this.openWin = new OpenWin(img_close, url);
this.cover = new Cover();
}

/****************************************************************************************
* name: build
* Description : 将组件(遮盖层,弹出窗口)整合为一个组件
***************************************************************************************/
Popup.prototype.build = function(X, Y){
this.openWin.build(X, Y);
this.cover.build();
this._attachEvent();
}

/****************************************************************************************
* name: winCloseDelegate
* Description : 委托代理 Close 方法(点close image 关闭窗口事件调用方法的引用)
***************************************************************************************/
Popup.prototype.winCloseDelegate = function(){

if(popup_win && popup_win.hide) {
popup_win.hide();
}
}

/****************************************************************************************
* name: setWinClose
* Description : 设置窗口关闭事件（增加Popup的关闭事件的灵活性）
***************************************************************************************/
Popup.prototype.setWinClose = function(winClose){
this.openWin.img_close.onclick = winClose;
}

/****************************************************************************************
* name: show
* Description : 显示组件
***************************************************************************************/
Popup.prototype.show = function(){
this.cover.show();
this.openWin.show();
}

/****************************************************************************************
* name: hide
* Description : 隐藏组件
***************************************************************************************/
Popup.prototype.hide = function(){

this.cover.hide();
this.openWin.hide();
}

/******************************************************** OpenWin ********************************************************/
/****************************************************************************************
* name: OpenWin
* Description : 构造器构造弹出窗口类
***************************************************************************************/
function OpenWin(imgclose, url){
this.mainBox = document.createElement("div");//弹出"窗口"
this.iframe = document.createElement("iframe");//弹出窗口的 URL
this.iframe.name = "frm";
this.iframe.src = url;
this.url = url;//弹出窗口的 URL
this.img_close = imgclose;//弹出窗口的关闭图片
}

//移动弹出层所用的信息
var topDiv; //顶部层拖动它可以使整个“弹出窗口”移动
var coverShow = false;//遮盖层是否显示
var down = false; //鼠标是处于按下状态
var startX,startY; //鼠标按下的 X, Y 坐标
var startLeft,startTop;//鼠标按下的 mainBox 对象的左侧和上方位置

/****************************************************************************************
* name: build
* Description : 构建弹出窗口类
***************************************************************************************/
OpenWin.prototype.build = function(X, Y){

//构建“弹出窗口”
var b_mainBox = this.mainBox;
var b_iframe = this.iframe;
var cloImag = this.img_close;
document.body.appendChild(b_mainBox);

//生成弹出窗口子层
var b_divTop = document.createElement("DIV");
var b_divbottom = document.createElement("DIV");
var b_table = document.createElement("table");
var b_tr = document.createElement("tr");
var b_td1 = document.createElement("td");
var b_td2 = document.createElement("td");
new function(){
//设置Iframe的样式
b_iframe.className = "iframe";
b_iframe.scrolling = "no";
b_iframe.frameBorder = "0";

//设置Div的样式
b_mainBox.className = "main_div";
b_divTop.className = "top_div";
b_divTop.align = "right";
b_divbottom.className = "bottom_div";
cloImag.style.cursor = "hand";
cloImag.title = "Colse window";

b_table.width = "100%";
b_table.border = 0;

b_td1.align = "left";

b_td2.align = "right";
}
//组织“弹出窗口”
b_td1.innerText = "我是一个中国人";
b_tr.appendChild(b_td1);
b_td2.appendChild(cloImag);
b_tr.appendChild(b_td2);

b_table.appendChild(b_tr);
b_divTop.appendChild(b_table);
b_divbottom.appendChild(b_iframe);
b_mainBox.appendChild(b_divTop);
b_mainBox.appendChild(b_divbottom);
//alert(b_divTop.innerHTML);
topDiv = b_divTop;//全局
this._attachEvent();
this.setPosition(X, Y);
this.hide();
}

/****************************************************************************************
* name: _attachEvent
* Description : 私有为实现 DIV 的移动,绑定 Document 的一些事件
***************************************************************************************/
OpenWin.prototype._attachEvent = function(){
var mainDiv = this.mainBox;
document.body.onmouseup = function(){
down = false;
}
document.body.onmousedown = function(){
if (!document.all)
return true;//暂时只支持4.0以上的IE浏览器

if (event.srcElement == topDiv){

down = true;
startX = event.clientX;
startY = event.clientY;

//得到层的左侧和上方位置
startLeft = mainDiv.style.pixelLeft;
startTop = mainDiv.style.pixelTop;
}
}
document.body.onmousemove = function(){
if (down && mainDiv){
mainDiv.style.pixelLeft = startLeft+(event.clientX-startX);
mainDiv.style.pixelTop = startTop+(event.clientY-startY);
}

}
}

/****************************************************************************************
* name: setPosition
* Description : 设置弹出窗口的位置
***************************************************************************************/
OpenWin.prototype.setPosition = function(X, Y){
this.mainBox.style.top = X;
this.mainBox.style.left = Y;
startLeft = this.mainBox.style.pixelTop
startTop = this.mainBox.style.pixelLeft

}

/****************************************************************************************
* name: show
* Description : 显示弹出窗口组件
***************************************************************************************/
OpenWin.prototype.show = function(){

if(this.mainBox.style.display != "inline"){
this.iframe.src = this.url;
this.mainBox.style.display = "inline"
}
}

/****************************************************************************************
* name: hide
* Description : 隐藏弹出窗口组件
***************************************************************************************/
OpenWin.prototype.hide = function(){
//alert("隐藏弹出窗口");
if(this.mainBox.style.display != "none"){
this.iframe.src = "";
this.mainBox.style.display = "none"
}
}

/********************************************************** Cover **********************************************************/
/****************************************************************************************
* name: Cover
* Description : 构造器 ,构造遮盖层类(遮盖全屏的DIV实现使主窗口内所有元素不可用功能)
***************************************************************************************/
function Cover(){
this.cover = document.createElement("div"); //遮盖层
}

/****************************************************************************************
* name: build
* Description : 构建遮盖层
***************************************************************************************/
Cover.prototype.build = function(){

var b_cover = this.cover;
document.body.appendChild(b_cover);
//设置遮盖层
b_cover.className = "cover_div";
b_cover.style.width=parseInt(document.body.clientWidth);
b_cover.style.height=parseInt(document.body.clientHeight);
this._attachEvent();
this.hide();
}

/****************************************************************************************
* name: _attachEvent
* Description : 私有绑定事件(为实现“遮盖层”自动调整大小）
***************************************************************************************/
Cover.prototype._attachEvent = function(){
var ae_cover = this.cover
window.onresize = function(){

ae_cover.style.width=parseInt(document.body.clientWidth);
ae_cover.style.height=parseInt(document.body.clientHeight);
}
}

/****************************************************************************************
* name: show
* Description : 显示遮盖层
***************************************************************************************/
Cover.prototype.show = function(){
this.cover.style.display = "inline";
}

/****************************************************************************************
* name: hide
* Description : 隐藏遮盖层
***************************************************************************************/
Cover.prototype.hide = function(){
//alert("隐藏遮盖层");
this.cover.style.display = "none";
}

一个css文件 edit_popup.css

/* CSS Document */
.editSelect{
position: absolute;
display: none;
}

.sel_div{
border: 1px solid #7F9DB9;
white-space: nowrap;
}

.cover_div{
position: absolute;
background-color: #709CD2;
filter: ALPHA(opacity=10);
left: 0;
top: 0;
z-index: 1;
}

.main_div{
FILTER: progid:DXImageTransform.Microsoft.DropShadow(Color=gray, OffX=5, OffY=5, Positive=1);
position:absolute;
background:#f8f8f8;
border: 1px solid #7F9DB9;
width:250pt;
height:100pt;
z-index: 2;
}

.top_div{
background-color:#709CD2;
cursor:move;
padding: 3;
width:100%;
height:18pt
}

.bottom_div{
width:100%;
height:100%
}

.iframe{
width: 100%;
height: 100%;
}
.error{
FONT-SIZE: 12px;
FONT-FAMILY: Arial;
color: #FF0000
}

对此组件的使用组合事例: testEditSelectPopup.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Select</title>
<link href="edit_popup.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="editSelect.js"></script>
<script language="JavaScript" src="popup.js"></script>
<script language="javascript">
//这两个变量要子窗口中会用到，所以名字要保持一致
var editsel;
var popup;

function sel_OnChange()
{
editsel.selectOnChangeDelegate();
if(editsel.select.value=="ADD"){
popup.show();
}
}

window.onload = function(){
var t_sel = document.getElementById("sel");
var t_div = document.getElementById("e_sel")
var t_img = document.createElement("IMG");
t_img.src = "list.JPG";
editsel = new EditSelect(t_sel, t_div, t_img, false);
editsel.build();
//设置EditSelect选择值后确发的事件
editsel.setSelectOnchange(sel_OnChange);

var t_imgclose = document.createElement("IMG");
t_imgclose.src = "dialogclose.gif";
popup = new Popup(t_imgclose,"ADD.htm");
popup.build("20%", "35%");
popup.setWinClose(closePopup);

}

function closePopup(){
popup.winCloseDelegate();
//alert("AAAAAAAAAA");
}

function showDiv(){
//popup.show();
editsel.select.selectIndex = 2;
editsel.select.onchange();
alert(editsel.select.options(editsel.select.selectIndex).value);
}

</script>

</head>

<body>

<table width="200" border="0">
<tr>
<td nowrap>请选择国家:</td>
<td>
<div id="e_sel"></div>
</td>
</tr>
<tr>
<td nowrap>点击弹出层:</td>
<td>
<input type="button" value="弹出层" onclick="showDiv();">
</td>
</tr>
</table>

(责任编辑：admin)

我的作品(html):可编辑的&lt;select&gt;元素 和 弹出窗口的整合

我的作品(html):可编辑的<select>元素和弹出窗口的整合