静坐常思己过,闲谈莫论人非,能受苦乃为志士,肯吃亏不是痴人,敬君子方显有德,怕小人不算无能,退一步天高地阔,让三分心平气和,欲进步需思退步,若着手先虑放手,如得意不宜重往,凡做事应有余步。持黄金为珍贵,知安乐方值千金,事临头三思为妙,怒上心忍让最高。切勿贪意外之财,知足者人心常乐。若能以此去处事,一生安乐任逍遥。

Mustache.js语法

作者:大鹏 发布于:2013-7-6 1:11 Saturday 分类:JavaScript与HTML
标签: javascript

1.简单的变量调换:{{name}}


var data = { "name": "Willy" };

Mustache.render("{{name}} is awesome.",data);

返回成果 Willy is awesome.


2.若是变量含有html的代码的,例如:<br>、<tr>等等而不想转义可以在用{{&name}}


var data = {
           "name" : "<br>Willy<br>"
        };
        var output = Mustache.render("{{&name}} is awesome.", data);
        console.log(output);

阅读全文>>


评论(0) 引用(0) 浏览(127754)

javascript URL解析

作者:大鹏 发布于:2013-6-18 23:13 Tuesday 分类:JavaScript与HTML
标签: javascript

/**
*@param {string} url 完整的URL地址
*@returns {object} 自定义的对象
*@description 用法示例:var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');
myURL.file='index.html'
myURL.hash= 'top'
myURL.host= 'abc.com'
myURL.query= '?id=255&m=hello'
myURL.params= Object = { id: 255, m: hello }
myURL.path= '/dir/index.html'
myURL.segments= Array = ['dir', 'index.html']
myURL.port= '8080'
myURL.protocol= 'http'
myURL.source= 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'
*/ 
function parseURL(url) {
	var a =  document.createElement('a');
	a.href = url;
	return {
		source: url,
		protocol: a.protocol.replace(':',''),
		host: a.hostname,
		port: a.port,
		query: a.search,
		params: (function(){
			var ret = {},
			seg = a.search.replace(/^\?/,'').split('&'),
			len = seg.length, i = 0, s;
			for (;i<len;i++) {
				if (!seg[i]) { continue; }
				s = seg[i].split('=');
				ret[s[0]] = s[1];
			}
			return ret;
		})(),
		file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
		hash: a.hash.replace('#',''),
		path: a.pathname.replace(/^([^\/])/,'/$1'),
		relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
		segments: a.pathname.replace(/^\//,'').split('/')
	};
}


评论(0) 引用(0) 浏览(210037)

image图像预加载

作者:大鹏 发布于:2011-7-6 15:31 Wednesday 分类:JavaScript与HTML
标签: javascript


[code]
var source = ['img1.gif','img2.gif'];  
var img = new Image();  
for(var i = 0; i < source.length; i++) {  
    img.src = source[i];  
}
[/code]
以上方法只能预加载最后一张,修改为下面的代码之后才能全部预加载:

[code]
var source = ['img1.gif','img2.gif'];  
for(var i = 0; i < source.length; i++) {  
    var img = new Image();  
    img.src = source[i];  
}
[/code]


评论(0) 引用(0) 浏览(11487)

0.1+0.2 != 0.3

作者:大鹏 发布于:2011-7-6 15:03 Wednesday 分类:JavaScript与HTML
标签: javascript


JavaScript将小数作为浮点数对待,所以可能会产生一些四舍五入的错误,比如:

[code]
0.1 + 0.2; // 0.30000000000000004
[/code]
你可以通过toFixed方法指定四舍五入的小数位数:



[code]
(0.1 + 0.2).toFixed(); // "0"
[/code]
[code]
(0.1 + 0.2).toFixed(1); // "0.3"
[/code]


评论(0) 引用(0) 浏览(11753)

jQuery和ExtJS的timeOut超时设置和event事件处理

作者:大鹏 发布于:2010-4-3 14:23 Saturday 分类:JavaScript与HTML
标签: javascript ajax extjs jquery 超时

ajax请求如何自定义超时时间,并处理相应的超时事件呢?

对jQuery 来说,超时可以直接设置timeout参数,并在error事件中捕获第二个参数,如果是“timeout”则表明捕获了超时事件,非常清楚。

例子:
[code]
$.ajax({

        type: "POST"
,

        contentType: "application/json"
,

        url: "../ws/MyService.asmx/test"
,

        data: '{"email":"'
+email+'"}'
,

        timeout: 30000, //超时时间:30秒


        dataType: 'json'
,

        error: function
(XMLHttpRequest, textStatus, errorThrown){

        //TODO: 处理status, http status code,超时 408


        // 注意:如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能


              //是"timeout", "error", "notmodified" 和 "parsererror"。


        },

        success: function
(result) {

          // TODO: check result


        }

});        
[/code]        
另外,error事件返回的第一个参数XMLHttpRequest有一些有用的信息:

阅读全文>>


评论(0) 引用(0) 浏览(47182)

利用Javascript刷新网页方法大全(转)

作者:大鹏 发布于:2009-6-30 17:33 Tuesday 分类:JavaScript与HTML
标签: javascript

先来看一个简单的例子:
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。

frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> frame </TITLE>
</HEAD>
<frameset rows="50%,50%">
<frame name=top src="top.html">
<frame name=bottom src="bottom.html">
</frameset>
</HTML>
[/code]

阅读全文>>


评论(0) 引用(0) 浏览(12181)

a href=&quot;#&quot; 与 a href=&quot;javascript:void(0)&quot; 的区别

作者:大鹏 发布于:2009-6-10 14:28 Wednesday 分类:JavaScript与HTML
标签: javascript

"#"包含了一个位置信息
默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接

这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,而javascript:void(0) 则不是如此
所以调用脚本的时候最好用void(0)
或者<input onclick>
<div onclick>等

打开新窗口链接的几种办法
1.window.open('url')
2.用自定义函数
<script>
function openWin(tag,obj)
{
obj.target="_blank";
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
obj.click();
}
</script>
<a href="javascript:void(0)" onclick="openWin(3,this)">LINK_TEST</a>
window.location.href=""

阅读全文>>


评论(0) 引用(0) 浏览(304154)

String.format输出大括号

作者:大鹏 发布于:2009-4-11 16:19 Saturday 分类:Asp.Net 2.0
标签: javascript ajax .net json

  今天在使用WebService生成JSON代码的时候,为了方便格式化字符串,使用了String.format方法,但是输出大括号"{}"时遇到了点问题,以前好像是在什么书本上见到过这个问题,当时也没太注意,没作笔计,现在要用到了,只好到网上搜索一下看看了。

以下是搜索到的部分内容:
[quote]
在C#中,string.Format是一个非常方便的格式字符串的方法。

比如为了输出Bill is a student.这个句子,就可以使用以下的方法:
string studentName = "Bill";
string.Format("{0} is a student.", studentName);

这样就可以动态的来格式化字符串。

可以发现,大括号是用来格式化字符串用的,也就是说,如果想格式化大括号,肯定是会出问题的。

实际中,编译可以通过,会报出一个运行时错误:字符串格式错误。

解决方法:

用“{{”或者“}}”来输出。

bool isMale = false;
string result = string.Format("get {{ return {0}; }}", isMale);

result的值应该是“get { return false; }”
[/quote]

 这下可以解决输出大括号的问题了。在这里感谢文章的作者!


评论(0) 引用(0) 浏览(10616)

javascript 禁止复制 右键

作者:大鹏 发布于:2009-4-7 15:17 Tuesday 分类:JavaScript与HTML
标签: javascript

经常会用到的一些代码,又比较容易忘记,再次收藏一下。
[code]
onselect="document.selection.empty()" oncopy="document.selection.empty()"

<!--禁止网页另存为: -->
<noscript><iframe src=*.html></iframe></noscript>
<!-- 禁止选择文本: -->
<script type="text/javascript">
    var omitformtags = ["input", "textarea", "select"]
    omitformtags = omitformtags.join("|")
    function disableselect(e) {
        if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
            return false
    };
    function reEnable() {
        return true
    };
    if (typeof document.onselectstart != "undefined")
        document.onselectstart = new Function("return false");
    else {
        document.onmousedown = disableselect;
        document.onmouseup = reEnable;
    }
</script>
<!-- 禁用右键: -->
<script>
function stop(){
  return false;
}
document.oncontextmenu=stop;
</script>
[/code]


评论(0) 引用(0) 浏览(20783)

JQuery 相关用法

作者:大鹏 发布于:2009-4-7 14:24 Tuesday 分类:JavaScript与HTML
标签: javascript ajax jquery

jQuery each迴圈中的continue及break
continue :return true;
break :return false;
也可以利用return即可跳出jQuery

获取一组radio被选中项的值  
    var item = $('input[@name=items][@checked]').val();  
获取select被选中项的文本  
    var item = $("select[@name=items] option[@selected]").text();  
select下拉框的第二个元素为当前选中值  
    $('#select_id')[0].selectedIndex = 1;  
radio单选组的第二个元素为当前选中值  
   $('input[@name=items]').get(1).checked = true;  

阅读全文>>


评论(0) 引用(0) 浏览(85001)

eWebEditor在IE8中控件失效

作者:大鹏 发布于:2009-4-6 1:17 Monday 分类:网络资源
标签: javascript ajax

    前几天ie8正式公布了,当天中午我就去下载了一个迫不急待的将自己的浏览器升级到ie8,偶还刻意的去升级了一个英文版的,感觉英文版的超级爽,就在我还在为ie8的一些新功能大爽特爽时,一个龌龊的消息来了,我网站后台的编辑器都不管用了。



    我有好几个网站,编辑器全用的那一个,也就是ewebeditor编辑器,因为这个鸟编辑器我前几天几乎所有的网站都被黑客攻击,今天又遇到这个问题,让我顿时对这个编辑器没了好感,所以近期也在自己开发一个编辑器,欢迎大家随时关注我的天道酬勤博客,我会把编辑器的源代码和系统讲解都会在那里公布,打造一个纯开源纯免费的编辑器。



    问题是这样的,在ie8下ewebeditor的所有按钮都无效,因为ie8是当天发布的,所以网上也没有这样的解决办法,然后就换360浏览器,没想到360浏览器用的也是ie的内核,还是一样,没办法只能等等看了,毕竟这个编辑器不是自己写的,一时半会儿也找不到解决办法,于是到了第二天,终于在网上找到了解决办法:

阅读全文>>


评论(0) 引用(0) 浏览(7245)

类似Gmail添加附件的效果

作者:大鹏 发布于:2008-11-13 23:34 Thursday 分类:JavaScript与HTML
标签: javascript ajax google gmail

利用Ajax技术无刷新添加附件,类似于Gmail的添加附件功能。从网上找到的,有空再仔细研究一下。

阅读全文>>


评论(0) 引用(0) 浏览(11757)

Extjs Tree通过递归删除子节点信息

作者:大鹏 发布于:2008-7-16 21:42 Wednesday 分类:JavaScript与HTML
标签: javascript extjs

function removeChildrenRecursively(node) {
    if (!node) return;
    while (node.hasChildNodes()) {
        removeChildrenRecursively(node.firstChild);
        node.removeChild(node.firstChild);
    }
}


评论(0) 引用(0) 浏览(14178)

关于ExtJS中TabPanel的Tab页关闭后再打开组件无法显示的问题

作者:大鹏 发布于:2008-7-4 18:28 Friday 分类:JavaScript与HTML
标签: javascript ajax extjs

EXT中的TabPanel如果需要把被用户关闭的页缓存,则在TabPanel的属性中加入如下:  
[code]
listeners:{//当前侦听到关闭事件时,把要关闭的Panel隐藏
                remove: function(tp, c) {
                    c.hide();
                }
        },
        autoDestroy:false,//被关闭的Panel不会被自动释放
[/code]===========================================================
初始化组件的方法要在Ext.onReady里的执行,要不然很有可能报错,因为之前浏览器页面还没有加载好其元素不完整。


评论(1) 引用(0) 浏览(35641)

EXT Ajax访问url返回405错误的解决办法

作者:大鹏 发布于:2008-6-28 15:48 Saturday 分类:JavaScript与HTML
标签: javascript ajax c#

昨日用了Ext Tree组件做一个东西,需要用到ajax对节点逐级加载,开始数据用的静态数据data.txt,一切程序都测好了然后放到系统中测试,将data.txt换成了servlet,发现什么都不显示,单独访问servlet也能正常返回json数据,猜想应该是出现ajax调用错误了,检查了传递的参数与服务端需要的参数名也丝毫没有问题,Loader的代码大致是这样的:

阅读全文>>


评论(0) 引用(0) 浏览(63177)

Ext智能提示 - Dreamweaver CS3

作者:大鹏 发布于:2008-6-22 16:37 Sunday 分类:JavaScript与HTML
标签: javascript ajax .net

Dreamweaver CS3的Ext 2.0.2智能提示.它提供了非常准确的Ext API提示。
如图:
点击在新窗口中浏览此图片

阅读全文>>


评论(0) 引用(0) 浏览(775866)

Ext智能提示 - Visual Studio 2008

作者:大鹏 发布于:2008-6-22 16:17 Sunday 分类:JavaScript与HTML
标签: javascript ajax .net c# vs2008

Visual Studio 2008的Ext 2.0.2智能提示.它提供了非常准确的Ext API提示。
如图:
下载地址:
[file][/file]

引用方法:
1、将下载回来的文件解压,并放入你的项目中。
2、新建一个.js文件,在代码行的顶部加入以下备注

阅读全文>>


评论(1) 引用(0) 浏览(19904)

Ext js 中文的一些导读

作者:大鹏 发布于:2008-6-22 15:00 Sunday 分类:JavaScript与HTML
标签: javascript ajax

最近正在研究extjs,可以访问http://www.extjs.com

FAQ http://extjs.com/learn/Ext_FAQ

看了Demo以后简直是无法收拾了,从速度还有效果来看ajax.asp.net没有办法比了。

学习之前还是强烈推荐一下javascript 面向对象支持

另外这里还涉及到一些prototype的概念,可以参考Prototype.js深入学习的帖子,感觉还不错

PS一下,Ext js 有很多资源的索引 http://extjs.com/learn/Manual:Resources#OO_JavaScript

准备的工具
firefox +firebug 到各自的站点http://www.firefox.com 以及http://www.getfirefox.com 下载安装
关于firebug的介绍网络上有很多
还是强烈推荐一个视频的教程,原本是Ruby on Rail的辅助开发教程。不过其中的关于javascript prototype的教程实在是太出色了,如果对Ruby on Rail有兴趣可以全部看完。如果只是希望了解javascript prototype +firebug 就下载其中的一部分就可以
地址 http://lib.verycd.com/2007/05/10/0000149317.html

阅读全文>>


评论(0) 引用(0) 浏览(30739)

让IE也能用position:fixed

作者:大鹏 发布于:2008-4-17 16:30 Thursday 分类:JavaScript与HTML
标签: javascript css

因为非IE的主流浏览器都支持position:fixed;
所以只需要给IE设置一下fixed效果。
第一步让IE下#menu具有绝对定位
* html #menu {position:absolute;}/*only for ie*/结果看到有两个纵轴滚动条,外围是html的,内侧是body的。

第二步去掉外侧滚动条,因为外侧没有滚动效果

[code]html {overflow-x:auto; overflow-y:hidden;}[/code]

阅读全文>>


评论(0) 引用(0) 浏览(6647)

一个不错的JS函数库S.Sams Lifexperience ScriptClassLib

作者:大鹏 发布于:2008-2-13 0:45 Wednesday 分类:JavaScript与HTML
标签: javascript

阅读全文>>


评论(1) 引用(0) 浏览(5287)