javascript教程 - Part 2

javascript弹出窗口向父页面回传值

7 Jul 2008 Author: zerty In: JavaScript

最近太忙，近一个月没更新blog，残念~ 希望这周能够解脱悲惨的命运~

父窗口代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Window 1 </TITLE>
</HEAD>
<BODY>
<H1>Window 1</H1>
<INPUT TYPE="text" NAME=""><INPUT TYPE="submit">
<script>
var aInput = document.getElementsByTagName("input");
for (i = 0 ; i < aInput.length ; i++ )
{
if (aInput[i].getAttribute("type") == "text") var textboxA = new Object(aInput[i]);
if (aInput[i].getAttribute("type") == "submit") var btnA = new Object(aInput[i]);
} // 这里把html里的2个标签定义出来，让行为层和结构层分离的更彻底
btnA.onclick = function()
{
window.open('b.html','newwindow','height=100,width=400')
} //使用window.open方法弹出窗口；此方法适用于各种浏览器
</script>
</BODY>
</HTML>

弹出窗口代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<H1>Window 2</H1>
<INPUT TYPE="text" NAME="" value="11"><INPUT TYPE="submit">
<script>
var aInput = document.getElementsByTagName("input");
for (i = 0 ; i < aInput.length ; i++ )
{
if (aInput[i].getAttribute("type") == "text") var textboxB = new Object(aInput[i]);
if (aInput[i].getAttribute("type") == "submit") var btnB = new Object(aInput[i]);
}
btnB.onclick = function(){
var sTextValue = textboxB.value
window.opener.textboxA.value = sTextValue
window.close();
} //使用window.opener 方法获取父页面的对象，把子页面的值赋过去
</script>
</BODY>
</HTML>

0 Comments
Tags: JavaScript

confirm消息框教程

13 Jun 2008 Author: zerty In: JavaScript

弹出一个对话框，让用户确认是否执行操作，常在删除按钮上。

<html>
<head>
<script type="text/javascript">
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()" value="Display a confirm box" />
</body>
</html>

’\n’ 可以用来换行，相当于html里的<br />

<html>
<head>
<script type="text/javascript">
function confirmAdd() {
var msg = "你好\n确认要修改收件地址？";
if (confirm(msg)==true){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<a href="" onclick="javascript:return confirmAdd()">修改收件地址</a>
</body>
</html>

1 Comment
Tags: JavaScript

javascript优先加载笔记

13 Jun 2008 Author: zerty In: JavaScript

函数部分

<script type="text/javascript">
function sysTab() {
$('#container > ul').tabs({ selected: 0 });
}
</script>

<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>ルートフォルダの定義</span></a></li>
<li><a href="#fragment-2"><span>文書管理</span></a></li>
<li><a href="#fragment-3"><span>表示設定</span></a></li>
<li><a href="#fragment-4"><span>メール設定</span></a></li>
<li><a href="#fragment-5"><span>データベース管理</span></a></li>
<li><a href="#fragment-6"><span>フォルダ監視</span></a></li>
<li><a href="#fragment-7"><span>システム管理</span></a></li>
</ul>
.................
</div>
<script type="text/javascript">
sysTab();
</script> //提前加载函数
</body>

这样就可以在指定的dom输出完毕后就执行javascript，而不需要等待页面全部加载完毕。

0 Comments
Tags: JavaScript

公司洗手间的点缀

4 Jun 2008 Author: zerty In: Life

早晨来到公司，发现昨晚打扫卫生的阿姨把我们的花草都摆放到洗手间的窗台上了，很和谐。

0 Comments

通过CSS捕捉页面中的所有单选框

2 Jun 2008 Author: zerty In: CSS

今天需要对一堆已经完成的页面进行表单部分CSS精简。在精简过程中发现在firefox中单选框和复选框与label的位置始终无法同时垂直对齐。

类似的页面很多，手工对radio和checkbox分配不同的class进行设置显然很不明知。隐约记得CSS3中支持一种可以根据设置属性值来寻找元素的方法，于是就查了下资料。

这句可以捕捉到所有type=”radio”的元素。

input[type^="radio"] {margin-bottom:-3px}

类似的方法还有：

a[href$=".pdf"] {border：1px solid red} 捕捉所有pdf后缀的链接。

0 Comments
Tags: CSS

Pages (2): « 1 2

Entries (RSS)
Comments (RSS)

About this blog

这个blog是用来记录我在工作学习中的一些经验和例子。主要是关于Javascript和CSS，希望能和大家多做交流~