可编辑select

<html> 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[].split(" ")
return parseFloat(b[])
} 
 
if (isIE()<5.5)
{
     scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><!--<iframe id=selframe frameborder=0 height=100%></iframe>--><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>'
}
else
{
     scHTML='<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><iframe id=selframe frameborder=0 height=100%></iframe><div id="selecthtml" class="selectcontent">selectÁÐ表</div></div>'
} 
 
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml 
 
function editselect(name,size,defaulttext,width,height,readonly){
  var combo=this;
  this.options=new Array();
  this.oj=new Array();
  this.name=name;
  this.divname=name+'_div';
  this.buttonname=name+'_button';
  this.tablename=name+'_table';
  this.htmltable=name+'_html'
  if (!height) this.height=; else this.height=height
  if (width) this.width=width
  if (!size) size=
  if (!defaulttext) defaulttext=""
  if (!readonly || readonly==) {readonly="" }else {if (readonly==) readonly="readonly style=cursor:default";this.readonly=} 
 
  esHTML='<div id='+this.divname+'>'
         +'<table id='+this.tablename+' cellpadding=0 cellspacing=0 class=select><tr><td bgcolor=#FFFFFF>'
         +'<input type=text class=selecttext size="'+size+'" name='+name+' value="'+defaulttext+'" '+readonly+'><td><button class=selectbutton id='+this.buttonname+'>6</td></tr></table>'
         +'</div>'
  document.write(esHTML)
  this.sbutton=eval("document.all."+this.buttonname) 
 
  if (this.readonly==) eval("document.all."+this.name).onclick=function(){combo.show()}   
 
  this.sbutton.onclick=function(){combo.show()}
  this.show=function(){
    pDiv=eval(combo.divname)
    pTable=eval(combo.tablename)
    var vHTML='<table id=htmltable cellspacing="0" cellpadding="2" bgcolor="#ffffff" class="selecttable" width=100%>'
    for (i=;i<combo.options.length;i++)
      {
       vHTML+='<tr onmouseover="mo(this)" onmouseout="mu(this)" onclick="document.all.'+combo.name+'.value=this.innerText;selectcontent.style.visibility=\'hidden\';'+combo.oj[i]+'"><td nowrap>'+combo.options[i]
      }
     vHTML+="</table>"
    vDivHtml.innerHTML=vHTML 
 
    vtop=pDiv.offsetTop+pDiv.offsetHeight
    vleft=pDiv.offsetLeft+ 
 
    vParent = pDiv.offsetParent;
     while (vParent.tagName.toUpperCase() != "BODY")
 {
  vleft += vParent.offsetLeft;
  vtop += vParent.offsetTop;
  vParent = vParent.offsetParent;
 } 
 
   var redge=document.body.clientWidth-vleft
   var bedge=document.body.clientHeight-vtop 
 
 if (!combo.width) {vDiv.style.width=pTable.offsetWidth} else {vDiv.style.width=combo.width} 
 
    if (combo.height==)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height 
 
            }
           else
           { 
 
              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+
           } 
 
       } 
 
    vDivHtml.scrollTop= 
 
    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft--(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft- 
 
   if (bedge<vDiv.offsetHeight)
    //vDiv.style.top=vtop-vDiv.offsetHeight-pDiv.offsetHeight
    vDiv.style.top=vtop-vDiv.offsetHeight+bedge
         else
      vDiv.style.top=vtop 
 
    vDivHtml.style.width=parseInt(vDiv.style.width)
      vDiv.style.visibility="visible"
  } 
 
  this.add=function(text,js){
     combo.options[combo.options.length]=text
     combo.oj[combo.oj.length]=js 
 
  } 
 
  this.clearall=function(){
  combo.options=new Array()
  } 
 
  this.about=function(){ 
 
 }
} 
 
function mo(obj){
obj.style.backgroundColor="#000099"
obj.style.color="#ffffff"
} 
 
function mu(obj){
obj.style.backgroundColor=""
obj.style.color="#000000"
} 
 
document.onmousedown=function(){
if (vDiv.style.visibility=="visible"){
mx=event.x + document.body.scrollLeft
my=event.y + document.body.scrollTop; 
 
x1=vDiv.offsetLeft
y1=vDiv.offsetTop 
 
x2=vDiv.offsetLeft+vDiv.offsetWidth
y2=vDiv.offsetTop+vDiv.offsetHeight 
 
if (mx<x1 || my<y1 || x2<mx || y2<my)
   {
     vDiv.style.visibility='hidden'
   }
}
}</script> 
 
<style>
.selecttext{
border:0px
height: ;
font-family:arial;
font-size:12px;
}
.selectbutton{
font-family:webdings;
font-size:10px;
height: ;
width: ;
border:1px solid #83A5EB;
line-height:0px;
padding-bottom:3px;
background-color:#D1E0FD
}
.selecttable{
font-family:arial;
font-size:12px;
cursor:default;
}
.selectcontent
{
position: absolute;
top:;
left:;
overflow:auto;
border:1px solid #
} 
 
.selectdiv
{
position: absolute;
width:;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head> 
 
<body bgcolor="#83A5EB"> 
 
<table border="" width="100%">
    <tr>
        <td width="" align="center"><font size="">可编辑的Select</font></td>
        <td><script>
var sel1=new editselect("select1","","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
    </tr>
    <tr>
        <td width="" align="center"><font size="">长度可以随意修改
可以设置为只读</font></td>
        <td>
        <script>
var sel2=new editselect("select2","","长度可以随意修改",,,);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形") 
 
sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
        </td>
    </tr>
    <tr>
        <td width="" align="center"><font size="">可以遮盖系统Select</font></td>
        <td>
        <script>
var sel3=new editselect("select3","","可以遮盖系统Select","",);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
        </td>
    </tr>
    <tr>
        <td width="" align="right">　</td>
        <td><select><option>系统的Select</option></select>　</td>
    </tr>
</table>
</body> 
 
</html>

http://www.jb51.net/article/914.htm

可编辑select的更多相关文章

可编辑的select框的实现(实用版)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEA ...
jquery实现可编辑的下拉框( input + select )
HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...
select()
select(),确定一个或多个套接口的状态,本函数用于确定一个或多个套接口的状态,对每一个套接口,调用者可查询它的可读性.可写性及错误状态信息,用fd_set结构来表示一组等待检查的套接口,在调用返 ...
js,JQuery实现,带筛选,搜索的select
代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title& ...
jqgrid 实现行编辑，表单编辑的列联动
这个问题的场景相信大家都遇到过,比方有A,B,C三列,B,C列均为下拉框.可是C列的值是由B列的值来决定的.即C列中的值是动态变化的,变化的根据就是B列中你选择的值. 本文给出的是一个有用,简易快捷的 ...
你想的到想不到的 javascript 应用小技巧方法
javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...
javascript小技巧
事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcE ...
JS详解
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...
JS技术大全
事件源对象:event.srcElement.tagName event.srcElement.type 捕获/释放:event.srcElement.setCapture(); event.sr ...

随机推荐

Uva1398 Meteor
扫描线法. 将流星出现在相机里的时间转化成线段,离散化端点后,扫描何时出现的流星最多.注意边界的不算,所以要先减右端点再加左端点 /*By SilverN*/ #include<iostream ...
windows核心编程读后感(待续)
自从大一读那本超厚的C程序设计以后,从来没有像这样慢慢地读一本书了.windows核心这本书足足看了2个多星期.一张张慢慢看,做笔记.感觉学到了很多基础的知识,关于内核方面的没有啥可以做实验的,都在看 ...
cantor三分集
值得一提的是,第一次听说cantor三分集是在数字电路课上,然而数电是我最不喜欢的课程之一...... 分形大都具有自相似.自仿射性质,所以cantor三分集用递归再合适不过了,本来不想用matlab ...
xpath中/和//的差别
xpath中 "/"是在子节点中查找,"//"是在所有子节点中查找,包括子节点的子节点. example: leve1/leve2:得到文本leve2 leve ...
深入理解JavaScript中创建对象模式的演变（原型）
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
远程连接实验室的VPN
Windows 7 (win8类似)的用户请按以下步骤进行操作:1.点击“开始”菜单,然后点击“控制面板”,然后点击“查看网络和任务”.2.点击“设置新连接或网络”.3.点击“连接到工作区”,然后点击 ...
try throw catch
#include "stdafx.h" #include <iostream> #include <stdlib.h> using namespace st ...
WinForm------分页控件dll下载地址
转载: http://files.cnblogs.com/wuhuacong/TestPager_SqlLite.rar
对Java垃圾回收最大的误解是什么
当我还是小孩的时候,父母常说如果你不好好学习,就只能去扫大街了.但他们不知道的是,清理垃圾实际上是很棒的一件事.可能这也是即使在Java的世界中, 同样有很多开发者对GC算法产生误解的原因--包括它 ...
UIView UIwindow
UI:用户界面,用户能看到的各种各样的页面元素 UIview :代表屏幕上的一个矩形区域,管理界面上的内容创建UIview 1.开辟空间并初始化视图(初始化时,给出视图位置和大小 2.对 ...

可编辑select

可编辑select的更多相关文章

随机推荐

热门专题