JavaScript Category
不同页面传值的改进版
By: zerty on: Aug 7,2008 In: JavaScript不同页面传值的老版本
改进点：支持同页面有多个文本框，可自动向不同的文本框传值。先看演示吧
其实原理也很简单。同样先通过getAttribute判断type属性，捕捉到按钮。然后在按钮onclick时把i通过url传入子页面。
<h2>input1</h2>
<input type="text" /><input type="submit" />
<h2>input2</h2>
<input type="text" /><input type="submit" />
<script type="text/javascript"><!–
var aInput = document.getElementsByTagName("input");
for (i = 0 ; i < aInput.length ; i++ )
{
(
function (i){
if (aInput[i].getAttribute("type") == "submit")
{
[...]
- 0 Comments
- Tags: JavaScript
window.onload的页面加载
By: zerty on: Jul 25,2008 In: JavaScript大家仔细看下面两段代码，代码一的window.onload = doIt()函数后面有();而代码二的window.onload = doIt函数名后面没有括号。
把两段代码分别测试后发现不带括号的window.onload在页面加载后显示了正确的效果。 我想window.onload也相当于一个触发事件，如果函数加了括号那就直接先执行函数，再加载body。而不加括号，则相当于将一个函数当作变量赋值到window.onload上，并不立即加载。
代码一：
<!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>
<script>
window.onload = doIt();
function doIt() {
var oDiv = document.getElementById("div1");
alert (oDiv);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
代码二：
<!DOCTYPE html PUBLIC [...]
- 0 Comments
- Tags: JavaScript
javascript显示隐藏层
By: zerty on: Jul 23,2008 In: JavaScript这是一个Q&A的页面，设计师希望能够点击相关的问题后，在它下方显示对应的答案。这是一个比较常见功能，通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
但是当初写html的时候并没有考虑到脚本编写（需求是后加的），所以，答案和标题没有父子关系可以对应。 html代码如下。
所以，这里需要用到另一种方法来匹配答案和标题。我们可以通过捕捉元素的位置来匹配它们。也就是说第一条标题，对应的肯定是整个序列中的第一条答案，第二条标题对应的肯定是第二条答案。 这样就可以无视html结构来控制它们的对应关系了。
<ul class="qusetionList">
<li class="liHeader"><span class="colABC-A">編號</span><span class="colABC-B">標題</span><span class="colABC-C">編輯者/發問者</span></li>
<li class="liBody"><span class="colABC-A">1</span><span class="colABC-B">想要開小店需要付費嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li>
<li class="answer"><span class="colABC-B">
現階段於策視其所以不收取任何費用，請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li>
<li class="liBody"><span class="colABC-A">2</span><span class="colABC-B">想要開小店需要付費嗎?</span><span class="colABC-C"><a href="#" title="" class="openLink"></a> 客服</span></li>
<li class="answer"><span class="colABC-B">
現階段於策視其所以不收取任何費用，請使用者不用擔心。<BR>
除了加值服務的功能模組之外。</span><span class="colABC-C"><a href="#" title="" class="closeLink"></a> 客服</span></li>
</ul>
脚本解释：当点击openLink这个图标时，显示和openLink在序列中位置相同的answer。这里需要将onclick事件放在闭包里面，等到for循环结束后才被激活。如果没有这层闭包，那不管点击哪个openLink，显示的都将是openLink.length的值。
document.getElementsByClassName = function(eleClassName)
{
var getEleClass = [];//定义一个数组
var myclass = [...]
- 0 Comments
- Tags: JavaScript
select组合框option的捕捉
By: zerty on: Jul 11,2008 In: JavaScript
这是一份报名表单，要求用户在选中“专业人士访问员”和“定性访问员”后，分别显示“可提供被访者类型”和“容易接触到的行业”的对应表单。当呈未选中状态时，这2个框也对应的隐藏起来。
html部分
<p>
<label class="title">报名参加的兼职职位(必填项)<br/>按住Ctrl键可多选</label>
<select onchange="showEasyVisitBox(this)" size="10" style="width: 200px;" multiple="multiple" id="kc_selectjob" name="kc_selectjob">
<option selected="selected" value="入户访问员">入户访问员</option>
<option value="街访访问员">街访访问员</option>
<option value="街访拦截员">街访拦截员</option>
<option value="电话访问员">电话访问员</option>
<option value="神秘顾客">神秘顾客</option>
<option value="专业人士访问员">专业人士访问员</option>
<option value="企业深访员">企业深访员</option>
<option value="定性联络员">定性联络员</option>
<option value="主持人">主持人</option>
<option value="质量控制员">质量控制员</option>
[...]
- 0 Comments
- Tags: JavaScript
javascript弹出窗口向父页面回传值
By: zerty on: Jul 7,2008 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> [...]
- 0 Comments
- Tags: JavaScript
confirm消息框教程
By: zerty on: Jun 13,2008 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优先加载笔记
By: zerty on: Jun 13,2008 In: JavaScript函数部分
<script type="text/javascript">
function sysTab() {
$(’#container > ul’).tabs({ selected: 0 });
}
</script>
<body>
<div id="container"><!–需要加载的dom–>
<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><!–需要加载的dom end–>
<script type="text/javascript">
sysTab();
</script> //提前加载函数
<!–剩余的大段代码–>
</body>
这样就可以在指定的dom输出完毕后就执行javascript，而不需要等待页面全部加载完毕。
- 0 Comments
- Tags: JavaScript
About this blog
这个blog是用来记录我在工作学习中的一些经验和例子。主要是关于Javascript和CSS，希望能和大家多做交流~
yingjunjiu@126.com