Javascript on 冯威的博客

使用fancybox

Wed, 02 Dec 2015 00:00:00 +0800

fancybox是一款不错的展示图片的jQuery插件，就目前在网上查到的资料大体有1.x和2.x两个大大版本，两个版本的用法有不少的差别，本文主要介绍的是2.1.5版本的使用。

JS中的Replace方法

Mon, 16 Apr 2012 00:00:00 +0800

最近查一个bug，原因是JS中的Replace方法造成的，当将一个字符串中有处需要替换时，一般会用到JS中的Replace方法，Replace方法的第一个参数如果是传的字符串，只会替换第一处。代码如下：

var str = "0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D";
alert(str.replace(",","','"));

上面的代码本意是将用逗号隔开的GUID的逗号替换成’,’，但实际结果只将第一个逗号替换了。

解决这个问题只需将replace的第一个参数使用正则的方式即可，代码如下:

var reg = new RegExp(",","g");
var str = "0CEA65D5-DB8E-4876-A6F8-C88AC7F0E185,E846C244-8A19-4374-879B-0B1DC08D1747,6CB3EBA4-1E22-4E4D-8800-AE31130B6F5D";
alert(str.replace(reg,"','"));

结果如下：

给Javascript代码“预留退路”

Thu, 16 Jun 2011 00:00:00 +0800

所谓给Javascript代码“预留退路”意思就是当用户将浏览器的Javascript功能禁用的时候，页面中使用了Javascript的地方要能够以变通的方式得以运行，而不能让用户看到出错或是点击某按钮而毫无反应，这也是用户体验很重要的一部分。

举个简单的例子来说，点击页面中的一个链接可以弹出一个新的页面，我们通常会使用window.open，代码如下：

<a href="#" onclick="openWin('http://baidu.com');">百度</a>
<script type="text/javascript">
 function openWin(url) {
 window.open(url, "openwin", "width=600,height=400");
 }
</script>

或

<a href="javascript:openWin1('http://baidu.com');" >百度</a>
<script type="text/javascript">
 function openWin(url) {
 window.open(url, "openwin", "width=600,height=400");
 }
</script>

上面的两种方法第一种将href的值设置为#，第二种使用伪协议javascript: ，这两种做法都不是很好，没有“预留退路”，当用户将浏览器的Javascript禁用后，点击链接都不是我们想要的结果，正确的做法如下：

<a href="http://baidu.com/"
 onclick="openWin(this.getAttribute('href'));return false;" >百ù度è</a>
 <script type="text/javascript">
 function openWin1(url) {
 window.open(url, "openwin", "width=600,height=400");
 }
 </script>

改进后的方法在禁用Javascript后，也会打开href中的链接地址，只是打开方式有所不同，相比上面两种已经好多了。

在JS方法中返回多个值的三种方法

Fri, 11 Dec 2009 00:00:00 +0800

在使用JS编程中，有时需要在一个方法返回两个个或两个以上的数据，用下面的几种方法都可以实现：

1 使用数组的方式，如下：

<html>
<head>
 <title>JS函数返回多个值--oec2003</title>
</head>
<body>
 <input type="button" onclick="getNames()" value="test" />

 <script type="text/javascript">
function getData()
{
 var names=new Array("oec2003","oec2004");
 return names;
}
function getNames()
{
 var names=getData();
 alert(getData()[0]); //返回oec2003
}
</script>

</body>
</html>

2 将数据封装到Json中返回，如下：

<html>
<head>
<title>JS函数返回多个值--oec2003</title>
</head>
<body>
<input type="button" onclick="getInfo()" value="test"/>
<script type="text/javascript">
function getData()
{
 var info={"name":"oec2003","age":"25"};
 return info;
}
function getInfo()
{
 var info=getData();
 var name=info["name"];
 var age=info["age"];
 alert("姓名："+name+" 年龄："+age);
}
</script>
</body>
</html>

更详细的Json的介绍请看这里

3 这是最简单的一种方法，看下面代码：

<html>
<head>
<title>JS函数返回多个值--oec2003</title>
</head>
<body>
<input type="button" onclick="getInfo()" value="test"/>
<script type="text/javascript">
 function getData()
 {
 return ["oec2003", 25]
 }
 function getInfo()
 {
 var info = getData();
 alert("姓名：" + info[0] + "年龄：" + info[1]);
 }
</script>
</body>
</html>

消除window.close()的提示窗口

Thu, 08 Jan 2009 00:00:00 +0800

Window.close()这句脚本是用来关闭当前窗口，如果是在window.open的窗口中执行Window.close()，将会很顺利地将窗口关闭，但如果是在一非window.open打开的窗口中执行Window.close()，将会弹出一个提示窗口，如下：

要在程序中消除这个提示框也很简单，不过在IE6和IE7稍有不同

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>IE6Close</title>
 <script type="text/javascript">
 function closeWin()
 {
 window.opener=null;
 window.close();
 }
 </script>
</head>
<body>
 <form id="form2" runat="server">
 <div>
 <input id="btnClose" type="button" value="close" onclick="closeWin()"/>
 </div>
 </form>
</body>
</html>

2.IE7

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
 <title>IE7Colse</title>
 <script type="text/javascript">
 function closeWin()
 {
 window.open('','_self','');
 window.close();
 }
 </script>
</head>
<body>
 <form id="form2" runat="server">
 <div>
 <input id="btnClose" type="button" value="close" onclick="closeWin()"/>
 </div>
 </form>
</body>
</html>

CheckBox全选终极方案

Thu, 23 Oct 2008 00:00:00 +0800

在我们的程序开发中经常会要用到CheckBox的全选，通常情况下是在一些数据绑定控件中如Gridview等

My97 使用的一点技巧

Wed, 15 Oct 2008 00:00:00 +0800

需求：

1.两个时间文本框，一个开始时间和一个结束时间，两个时间都是今天起以后的时间，并且开始时间不能大于结束时间。

这样的需求在很多地方都会应用到，比如有些网站提供一些服务的购买，用户需要选择要购买服务的时间域等等。

在My97的官网中有自定义时间的例子，我只是根据需要稍加了修改，代码如下:

<html>
<head><title></title>
<script type="text/javascript" src="WdatePicker.js"></script>
</head>
<body>
<input id="txtB" type="text"
onclick="WdatePicker({minDate:'%y-%M-#{%d}',maxDate:'#F{$dp.$D(\'txtE\',{d:-1})}'})"/>
<input id="txtE" type="text"
onFocus="WdatePicker({minDate:'#F{$dp.$D(\'txtB\',{d:1})||\'%y-%M-#{%d+2}\'}'})"/>

</body>

</html>

清除上传控件 File 的值

Fri, 04 Jul 2008 00:00:00 +0800

因为File控件的value值是只读的，所以用document.getElementById(“File1″).value=”” 并不能清楚file控件的值。

开发总结—Javascript篇

Sun, 25 May 2008 00:00:00 +0800

本文是我在平时工作中所遇到的javascript方面的一些知识总结，主要针对在asp.net中使用脚本。

window.print()实现局部打印

Thu, 06 Mar 2008 00:00:00 +0800

window.print() 实际上，是浏览器打印功能菜单的一种程序调用。与点击打印功能菜单一样，不能精确分页，不能设置纸型，套打的问题更加无从谈起，只不过，可以让用户不用去点菜单，直接点击网页中的一个按钮，或一个链接里面调用罢了。事实上，很多用户都是采用这种方式打印，但是这种方式最致命的缺点是不能设置打印参数，比如纸型，页边距，选择打印机等等。

C#和Javascript交互

Fri, 23 Nov 2007 00:00:00 +0800

在asp.net开发中，经常会用到后台和前台的交互，就此总结了一点c#和javascript相互操作的方法。

常用的一些正则表达式

Tue, 08 May 2007 00:00:00 +0800

正则表达式用于字符串处理、表单验证等场合，实用高效。但用到时总是不太把握，以致往往要查证一番。现将一些常用的表达式收集于此，以备不时之需。