Category Archives: Frontend

topstyle

TopStyle Pro是一款功能专注于CSS设计的辅助工具，功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的 CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用。如果你想进一步认识网页设计，做出更有风格有别于一般网站的网页，勿必要趁早接触 CSS喔。 TopStyle是一款Cascading Style Sheets (CSS) 的编辑软件，可以帮助我们编写符合包括CSS2标准在内的样式表。TopStyle具有CSS定义选择功能，让你可以选取特定的浏览器或CSS阶层、内建的样式表检查器、内部的预览能力、以颜色标示的编辑器，以及样式预览。TopStyle是第一款可以使用Mozilla等Gecko浏览器的程序。你可以用内嵌的Internet Explorer和Mozilla Gecko来预览你的式样表，或者分开使用。此外，TopStyle的设计对系统十分友善。它不会安装任何DLL、ActiveX controls或其它系统文件。功能相当多，附有CSS码检查功能，减少写错的机会。尤其是它的HELP文件中详细的CSS指令介绍，很适于用作参考文件与初次接触CSS的人做为学习使用。如果你想学习web标准，制作CSS需要一个好软件，TopStyle是非常棒的选择。

龙生 19 Jun 2013

View Details

5、6 月份的 10 个最佳 jQuery 插件

1) jQuery Popeye jQuery.popeye 这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。 2) jQuery MB Gallery 这是一个全功能的相簿应用，带导航条、缩略图和自动大小调整的相框。 3) Topup TopUp 是一个跨浏览器支持的 JavaScript 库，用于创建弹出式对话框以显示图片和网页，类似 ThickBox和 LightBox。TopUp 使用的是 jQuery 和 jQuery UI 库来保证兼容各种浏览器。当然 TopUp 还是可以跟Prototype 一起工作。 4) Pirobox 采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。 5) Fancy Zoom FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。 6) Canvas Slide Show 7) SideWays jQuery 8) Galleriffic Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。 9) ColorBox ColorBox是一个基于jQuery 1.3 的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：在线演示：http://runjs.cn/detail/hjor2zox 10) YUI 转自:http://www.oschina.net/news/41500/10-best-jquery-plugins-with-code-of-may-and-june-2013

龙生 18 Jun 2013

View Details

Normalize.css

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。官网：http://necolas.github.io/normalize.css/

龙生 06 Jun 2013

View Details

CSS 框架 Yahoo Pure

Pure 是来自雅虎的 CSS 框架，使用 Normalize.CSS 无需任何 JavaScript 代码。框架基于响应式设计，提供多种样式的组件，包括表格、表单、按钮、表、导航等。标识使用非常简单，整个框架非常轻量级，压缩后只有 5.7k。官网：http://purecss.io/ 设计器：http://yui.github.io/skinbuilder/?mode=pure

龙生 06 Jun 2013

View Details

CSS制作框架 Sass

Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。官网：http://sass-lang.com/

龙生 04 Jun 2013

View Details

WebSocket

目标 WebSocket 规范的目标是在浏览器中实现和服务器端双向通信。双向通信可以拓展浏览器上的应用类型，例如实时的数据推送(股票行情)、游戏、聊天等. 背景目前在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。原理 WebSocket protocol 是HTML5一种新的协议(protocol)。它是实现了浏览器与服务器全双工通信(full-duplex)。现在，很多网站为了实现即时通讯(real-time)，所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request)，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽。而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处： 1. Header 互相沟通的Header是很小的-大概只有 2 Bytes 2. Server Push 服务器可以主动传送数据给客户端　握手协议在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” (handshaking)。 PS1:握手协议在后期的版本中，会标明版本编号，下面的例子属于早期的协定之一，对于新版的 chrome 和 Firefox 皆不适用。 PS2:后期的版本大多属于功能上的扩充，例如使用第7版的握手协议同样也适用于第8版的握手协议。例子：浏览器请求 GET /demo HTTP/1.1 Host: 你的网址.com Connection: Upgrade Sec-WebSocket-Key2: 12998 5 Y3 1 .P00 Sec-WebSocket-Protocol: sample Upgrade: WebSocket Sec-WebSocket-Key1: 4 @1 46546xW%0l 1 5 Origin: http://你的网址.com ^n:ds[4U 服务器回应 HTTP/1.1 101 WebSocket Protocol Handshake Upgrade: WebSocket Connection: Upgrade Sec-WebSocket-Origin: http://你的网址.com […]

龙生 03 Jun 2013

View Details

JS判断键盘大小写键状态附 JS监听键盘事件

关键字：Caps Lock，js，javascript 转自：http://www.cnblogs.com/xiaoao808/archive/2008/07/31/1257624.html 以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>检测大写锁定键</title>

<!--

*{margin:0;padding:0;}

body{padding:2em;background:#242424;color:#ccc;}

h1{text-align:center;line-height:200%;}

h3{text-indent:1em;line-height:160%;color:#666;font-weight:normal;font-size:1em;}

h3 a{color:#bbb; text-decoration:none;margin:0 0.5em;}

h3 a:hover{color:#fff;}

p{margin:5em;}

span{margin:0 0.5em;font-size:85.7%;}

-->

</style>

</head>

<body>

<h1>检测大写锁定键&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>

<p><label for="password">密码：</label><input type="password" id="password" name="password" /><span style="display:none;">大写锁定键被按下，请注意大小写</span></p>

</form>

//<![CDATA[

function detectCapsLock(event){

var e = event||window.event;

var o = e.target||e.srcElement;

var oTip = o.nextSibling;

var keyCode = e.keyCode||e.which; // 按键的keyCode

var isShift = e.shiftKey ||(keyCode == 16 ) || false ; // shift键是否按住

if (

((keyCode >= 65 && keyCode <= 90 ) && !isShift) // Caps Lock 打开，且没有按住shift键

|| ((keyCode >= 97 && keyCode <= 122 ) && isShift)// Caps Lock 打开，且按住shift键

){oTip.style.display = '';}

else{oTip.style.display = 'none';}

}

document.getElementById('password').onkeypress = detectCapsLock;

//]]>

</script>

</body>

</html>

JS键盘监听来源：http://liu2liu2.spaces.live.com/blog/cns!54B12917375EF5A0!270.entry JavaScript键盘事件侦听在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。 onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事件中获取的keyCode属性不同，主要表现在onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的，而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。注：在Maxthon浏览器中，onkeydown和onkeyup有连续响应两次键盘事件的BUG，onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题)，具体原因不明。不知道以后是否会进行订正。转自:http://hi.baidu.com/kinsun/item/8bad1fd98e8c2c3f48e1ddce

龙生 27 May 2013

View Details

jQuery验证控件jquery.validate.js使用说明+中文API

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载自：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html 一导入js库<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则(1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.php验证输入值(3)email:true 必须输入正确格式的电子邮件(4)url:true 必须输入正确格式的网址(5)date:true 必须输入正确格式的日期日期校验ie6出错，慎用(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性(7)number:true 必须输入合法的数字(负数，小数)(8)digits:true 必须输入整数(9)creditcard: […]

龙生 24 May 2013

View Details

JavaScript parseInt() 函数

定义和用法 parseInt() 函数可解析一个字符串，并返回一个整数。语法

1	parseInt(<em>string</em>, <em>radix</em>)

参数描述 string 必需。要被解析的字符串。 radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。返回值返回解析后的数字。说明当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。举例，如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。提示和注释注释：只有字符串中的第一个数字会被返回。注释：开头和结尾的空格是允许的。提示：如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。实例在本例中，我们将使用 parseInt() 来解析不同的字符串：

February 2025
M	T	W	T	F	S	S
« Jan
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28