html ----checkbox使用

qsfwy

浏览: 1737440 次
性别:
来自: 上海

最近访客更多访客>>

w2745554997

duanjun06

KanJiwei

PXY

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

js应用

HTML JavaScript ASP CSS XHTML

1.html ----checkbox使用

<html>
<head><title>选择</title></head>
<body>
请选择你喜欢的水果：<br>
<form action = "http://www.admin5.com/html/asdocs/html_tutorials/choose.asp" method = "post">
<input type="checkbox" name="fruit" value ="apple" >苹果<br>
<input type="checkbox" name="fruit" value ="orange">桔子<br>
<input type="checkbox" name="fruit" value ="mango">芒果<br>
<input type="submit" value="提交">
</form>
</body>
</html>

2. 一段判断到底是哪个select的option被选中的代码

3. 用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果

说实话，Js代码确实很强大，但是编码往往很麻烦，像这次我找了一圈我要的这种鼠标经过显示隐藏层的效果看到的都是一堆堆代码，而且不容易记忆，也就是“不人性化”。后来参考了我以前做的类似的效果：鼠标经过改变背景图的代码，形成这个“用CSS+DIV实现鼠标经过显示隐藏层，鼠标离开不显示隐藏层的效果”的方法，具体看代码：

Quote

上面这段是超链接的文字部分，要注意的是其中的“menulayer_1”，这个可以自定义命名，一个超链接关联一个，不可重复。另外要注意的是“visibility='hidden'”，这个就是鼠标离开后，隐藏的层就会隐藏。

Quote

<div id="menulayer_1" class="menulayer" style="visibility: hidden; padding: 225px 0px 0px 9px;">About Us, About Blazing Flames.</div>

这个就是默认隐藏的层的内容，注意他的ID要和之前的代码相呼应。

代码就这么多，灵活运用很好玩。

4.鼠标放上去显示层，鼠标移开隐藏显示层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>层</title>
</head>

<body>
<a href="#" onMouseover="div1.style.display=''" onMouseOut="div1.style.display='none'">鼠标移上来</a>
<div id=div1 style="background-color:#0033FF; width:100; display:none" >
这里放JS
</div>
<br>
</body>
</html>

5.鼠标经过弹出层

if(OverW>Nw||OverH>Nh) {
if(OverW>Nw) {
$("Loading").style.width=Nw+"px";
$("Loading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("Loading").style.height=Nh+"px";
$("Loading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("Loading").innerHTML=ChangeDesc;
}
}
//-->
</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>

分享到：

动态添加select 的option | JQuery的表单操作

2008-07-31 15:50
浏览 27068
评论(1)
查看更多

1 楼 hjambo 2009-01-13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>-</title>
<style>
body {margin:0px}
#Loading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}
</style>
<script LANGUAGE="JavaScript">

</script>
</head>
<body>
<a href="javascript:OpenDiv(500,300,'层1<br>双击关闭')">层1 500*300</a><br><br>
<a href="javascript:OpenDiv(500,200,'层2<br>双击关闭')">层2 500*200</a><br><br>
<a href="javascript:OpenDiv(200,500,'层3<br>双击关闭')">层3 200*500</a><br><br>[align=center]

[/size][size=xx-small][color=red][/color]
<a href="javascript:OpenDiv(500,500,'层4<br>双击关闭')">层4 500*500</a>
<div id="Loading" style="display:none" ondblclick="this.style.display='none'"></div>
</body>
</html>[/align]

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论