select发展史(2) - ajax,css,js,javascript,actionscript,flash,div,dhtml,c#,.net,nsis,pplive,ebook-AJAX CNRUI

select发展史(2)

作者marvellous来源蓝色理想发布时间22006-7-15 1:14:57发布人Clear

后来发展到其文字内容可以增、删、编、改，即可以编辑：

运行代码框
<html>

<head>

<title>EditSelect</title>
<script>
function isIE(){
a=navigator.appVersion.split(";")
b=a[1].split(" ")
return parseFloat(b[2])
}

if (isIE()<5.5)
{
scHTML=’<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectáD表</div></div>’
}
else
{
scHTML=’<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectáD表</div></div>’
}

document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

   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==0)
      {
        vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
        vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
      }
      else
      {
         if (htmltable.offsetHeight>combo.height)
          {
            vDiv.style.pixelHeight=combo.height
            vDivHtml.style.pixelHeight=combo.height

            }
           else
           {

              vDiv.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
              vDivHtml.style.pixelHeight=parseInt(htmltable.offsetHeight)+2
           }

       }

    vDivHtml.scrollTop=0

    if (redge<vDiv.offsetWidth)
      vDiv.style.left=vleft-1-(vDiv.offsetWidth-redge)
        else
      vDiv.style.left=vleft-1

   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>

.selectdiv
{
position: absolute;
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<table border="0" width="100%">
<tr>
<td width="151" align="center"><font size="2">可编辑的Select</font></td>
<td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("这是一个可以编辑的Select")
sel1.add("支持CSS")
sel1.add("可以通过CSS，修改外形")
sel1.add("突破原来的Select诸多限制")
</script></td>
</tr>
<tr>
<td width="151" align="center"><font size="2">长度可以随意修改
可以设置为只读</font></td>
<td>
<script>
var sel2=new editselect("select2","20","长度可以随意修改",250,82,1);
sel2.add("这是一个可以编辑的Select")
sel2.add("支持CSS")
sel2.add("可以通过CSS，修改外形")

sel2.add("作者:舜子制作")
sel2.add("MSN:puterjam@msn.com")
</script>
</td>
</tr>
<tr>
<td width="151" align="center"><font size="2">可以遮盖系统Select</font></td>
<td>
<script>
var sel3=new editselect("select3","25","可以遮盖系统Select","",41);
sel3.add("这是一个可以编辑的Select")
sel3.add("支持CSS")
sel3.add("可以通过CSS，修改外形")
sel3.add("突破原来的Select诸多限制")
</script>
</td>
</tr>
<tr>
<td width="151" align="right">　</td>
<td><select><option>系统的Select</option></select>　</td>
</tr>
</table>
</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

可编辑的select:

运行代码框
按回车键输入新内容，按DEL删除选中内容<br>
<body bgcolor="#fef4d9" onload="s1.focus();">
<script language="JavaScript">

</script>
<select name=s1 onkeydown="catch_keydown(this);" onkeypress="catch_press(this);" style="font-size:12px;"><option>---</option></select>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行代码框
<SCRIPT LANGUAGE="Javascript">
function inputToSelect(text,value)
{
i=0;
while(document.all.sel.options[i])
{
   if(document.all.sel.options[i].text == text)
      return 0;
   i++;
}
var oOption = document.createElement("OPTION");
oOption.text=text;
oOption.value=value;
document.all.sel.add(oOption);
}
</SCRIPT>

<input name="inputx" value="请选择或输入相应内容" onclick="if(this.value==’请选择或输入

相应内容’){this.value=’’;}else{}" style="border-left:1px solid #000000;border-top:1px solid #000000;border-bottom:1px solid #000000;border-

right:0px solid #000000;width:134;height:22px;" autocomplete="off">
<select id="sel" style="width:150;margin-left:-134;border:1px solid #000000;border-left:0px;height:22px;"

onChange="inputx.value=value" onClick="inputToSelect(inputx.value,inputx.value)">
        <option value="111111111">111111111</option>
        <option value="汉字也可以">汉字也可以</option>
    </select>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

为了让select里有更多的图片、css修饰及其他静、动态修饰效果，而select本身优先级别太高，其修饰效果很少且不能满足上述要求，遂涌现出很多模拟的select:

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title></title>
<style type="text/css">

</style>
<script lanuage="JScript">
function turnit(ss)
{

if (ss.style.display=="none")
    {ss.style.display="";
    for (var i=1;i<4;i++)
{
if (eval(’t’+i).innerText==text1.value)
eval(’t’+i).className=’ss’
else
eval(’t’+i).className=’’
}
}

function openb()
{
if (bb.style.display==’’)
bb.style.display=’none’
}
</script>
<style type="text/css">

</style>
</head>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行代码框
<center><sup><font face="隶书" color="blue">上标是不是这个？</font></sup><font size="6" face="华文行楷" color="red">如果要想以其他的文字作为上标该怎么做啊？</font><sub><font face="黑体" color="green"><b><i>下标是不是这个？</b></i></font></sub>
<br><br>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下面这两个已达到较高的水准（动态内容）：

运行代码框
<html>

<head>

<title>EditSelect</title>
<script>
scHTML=’<div id="selectcontent" class="selectdiv" style="visibility:hidden;"><div id="selecthtml" class="selectcontent">selectÁÐ±í</div></div>’
document.write(scHTML)
vDiv=selectcontent
vDivHtml=selecthtml

   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 (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){
     combo.options[combo.options.length]=text
}

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>

.selectdiv
{
position: absolute;
width:100;
overflow:hidden;
}
.select{
border-collapse: collapse;
border:1px solid #7F9DB9
}
</style>
</head>

<center>
<table border="0" width="234">
    <tr>
        <td width="151" align="center"><font size="2">可编辑的Select</font></td>
        <td><script>
var sel1=new editselect("select1","25","可编辑的Select","");
sel1.add("<marquee behavior=alternate><img src=’http://www.blueidea.com/articleimg/bbsimg/icon6.gif’ align=’absmiddle’> <B><font color=#22FF22>知</font><font color=#FF2222>往</font><font color=#001199>观</font><font color=#00fffa>来</font></B></marquee>")
sel1.add("<img src=’http://www.blueidea.com/articleimg/bbsimg/icon7.gif’ align=’absmiddle’> 微风香水")
sel1.add("<img src=’http://www.blueidea.com/articleimg/bbsimg/icon8.gif’ align=’absmiddle’> 阳光锈了")
sel1.add("<img src=’http://www.blueidea.com/articleimg/bbsimg/icon9.gif’ align=’absmiddle’> <B><font color=#22FF22>观</font><font color=#FF2222>往</font><font color=#001199>知</font><font color=#00fffa>来</font></B>")
</script></td>
    </tr>
    <tr>
        <td width="151" align="right">　</td>
        <td> </td>
    </tr>
</table>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

运行代码框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title></title>
<style type="text/css">

</style>
<script lanuage="JScript">
function turnit(ss)
{

if (ss.style.display=="none")
{ss.style.display="";
}

else
    {ss.style.display="none";
   }
}
function sele(tid)
{
bb.style.display=’none’;
text1.value=tid.innerText;
}
function over(tid)
{
for (var i=1;i<4;i++)
{
eval(’t’+i).className=’’
}
tid.className=’ss’
}
function out(tid)
{
if (bb.style.display!=’none’)
tid.className=’’
}
</script>
<style type="text/css">

</style>
</head>

        </table>
      </div></td>
</tr>
</table>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

可以去掉下拉的小三角,但不可以无边框:

运行代码框
<script>
function myjump(myObj){
myurl=myObj.options[myObj.selectedIndex].value;
window.open(myurl,"newwin","width=300,height=200");
}
</script>
<center>
<select name="menu1" size=3 onChange="myjump(menu1)" style="background-color:

#CCCCFF; color:#0000FF">
<option selected>文字链接</option>
<option value="http://www.bineon.com/bbs/">霓虹论坛</option>
<option value="http://www.ylqh.com">叶落秋寒</option>
</select>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

鼠标移过来select自动下拉:

运行代码框
<style>
<!--
td{font-size:12px; }
body{margin:0px; line-height:20px}
a:link { color:#000000; text-decoration:none}
a:visited {color:#000000; text-decoration:none}
a:hover { color:#FFFFFF; background-color:#003366; text-decoration:none}

a:active {color:#FFFFFF; text-decoration:none}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v==’show’)?’visible’:(v==’hide’)?’hidden’:v; }
    obj.visibility=v; }
}
//-->
</script>
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:145px; height:20px; z-index:1; visibility: visible; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;" onMouseMove="MM_showHideLayers(’l2’,’’,’show’)" onMouseOut="MM_showHideLayers(’l2’,’’,’hide’)"></div>
<div>
<select name="select">
<option selected>鼠标移过来自动下拉</option>
    <option selected>鼠标移过来自动下拉</option>
</select>
<div id="l2" style="position:absolute; left:0px; top:20px; width:142px; border:1px solid #000;visibility: hidden; height: 80px; z-index: 2;" onMouseMove="MM_showHideLayers(’l2’,’’,’show’)" onMouseOut="MM_showHideLayers(’l2’,’’,’hide’)" onClick="MM_showHideLayers(’l2’,’’,’hide’)">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td onMouseOver="this.style.backgroundColor=’#003366’;this.style.color=’#ffffff’" onMouseOut="this.style.backgroundColor=’#FFFFFF’;this.style.color=’#000000’" onClick="window.open(’http://www.blueidea.com’)" >蓝色月光</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=’#003366’;this.style.color=’#ffffff’" onMouseOut="this.style.backgroundColor=’#FFFFFF’;this.style.color=’#000000’" onClick="window.open(’http://www.blueidea.com’)" >红色黑客</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=’#003366’;this.style.color=’#ffffff’" onMouseOut="this.style.backgroundColor=’#FFFFFF’;this.style.color=’#000000’" onClick="window.open(’http://www.blueidea.com’)" >

</td>
    </tr>
    <tr>
      <td onMouseOver="this.style.backgroundColor=’#003366’;this.style.color=’#ffffff’" onMouseOut="this.style.backgroundColor=’#FFFFFF’;this.style.color=’#000000’" onClick="window.open(’http://www.blueidea.com’)" >

</script>

<img border="0" alt="<img border=’0’ src=’http://pic1.blueidea.com/bbs/icon7.gif’>" src="http://www.blueidea.com/articleimg/usericon/sheneyan.gif">

返回上一页打印收藏