Wlog!   » 首页

分享一个自己写的简单的jquery litebox遮罩层插件

直接加class liteBox调用, 有加载进度条,在链接中设置宽度、高度和是否有滚动条!js压缩代码1.4k

演示地址:http://wlog.com.cn/code/jquery/liteBox/demo.html

下载地址:liteBox

Chrome OS首批官方视频介绍

来源:oschina.net

Google官方召开的Chrome OS介绍会议已经结束了,为我们提供了大批的Chrome OS视频演示,以下是6段来自官方的Chrome OS视频。

Google Chrome OS是什么?

查看全部视频

非常全面的实用JavaScript开发工具列表

tools-for-javascript-developers

不管你是JavaScript新手还是经验丰富的开发者,你所使用的工具直接影响你的工作效率。开放源代码运动使得拥有得力的工具不再意味着付一大笔钱;实际上你什么都不用付出。下面是一个对JavaScript开发者真正有实用价值的免费工具列表。

查看全部

清理你的css

在我们写样式的时候,页面的CSS在经历几个版本的修改之后,可能有些样式已经用不到了,或许将某些样式更名了而原来的忘了删除,总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗,也会增大我们的维护成本。那么有没有一些办法来清理那些无用的样式呢?今天就让我们来了解一下几个比较有用的工具。

Dust-Me selectors

Dust-Me是一个很有用也很好用的Firefox插件,它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。

支持本地和远程样式文件,包括使用link标签、< ?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件;(但是不支持页面中的style块和内联样式)
支持IE条件注释中引入的样式文件;
可以检查一个页面,也可以检查整个网站;
支持CSS1选择器、大部分CSS2和CSS3选择器;
理解通用的CSS hack,比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”;
支持Firefox 3.5和Firefox 3.0,事实上得益于FF 3.5的js引擎的改进,FF 3.5中的性能比FF 3.0要高50%。

安装:点击这里。了解更多请访问 Dust-Me selector官方页面

Page Speed

Page Speed是Google提供的一个前端性能分析工具,有些类似于YSlow,但是提供了一些比较个性且很有用的工具,比如Remove unused CSS.

Page Speed和YSlow一样依赖Firebug,了解详情和安装请访问这里

CSS Redundancy Checker

CSS Redundancy Checker 是一个免费的在线应用,可以检查所有的使用某个CSS文件的页面中无用的样式。可以同时检查某一个样式在多个页面中的使用情况。该工具的不足是虽然一次能检查多个HTML页面,但每次只能检查一个CSS文件,而且还要手动输入

http://services.immike.net/css-checker/

IntelliJ IDEA

IntelliJ IDEA 这是一个颇强大的IDE,类似于DreamWeaver,不过在国内用的不多。该软件包括一个即时代码分析工具(On-the-fly Code Analysis),可以分析CSS文件中未用到的class和id。

Expression Web

Expression Web作为微软的新一代网站开发工具,还是有很多人使用的,其CSS Report功能可以检查未用到需要被清除的CSS(我的确没有使用EW开发过网站,希望使用该软件的童鞋可以帮忙确认一下这一点)。

来自:http://www.qianduan.net/

Windows上的最佳自由免费软件

InfoWorld从Windows上的自由免费软件中挑选出了其中10款不逊色于私有软件的最佳FOSS软件。上榜的软件如Firefox和OpenOffice.org,早已闻名遐迩;其它如TrueCrypt和VirtualBox,则是未经打磨的钻石。这些软件包括:

FileZilla——FTP客户端

VirtualBox——虚拟机

OpenOffice.org——办公组件

Mozilla Firefox——浏览器

Paint.net——图像编辑工具

Media Player Classic——播放器

TrueCrypt——加密工具

PDFCreator——创建PDF工具

7-Zip——解压缩工具

ClamWin——杀毒软件。

jQuery 简但实现select二级联动

演示地址:http://wlog.com.cn/code/jquery/liandong/demo.html

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>jQuery 二级联动</title>
  6. <script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
  7. <script type="text/javascript">
  8.        $(document).ready(function(){
  9.            $("#province").change(function(){
  10.                $("#province option").each(function(i,o){
  11.                    if($(this).attr("selected"))
  12.                    {
  13.                        $(".city").hide();
  14.                        $(".city").eq(i).show();
  15.                    }
  16.                });
  17.            });
  18.            $("#province").change();
  19.        });
  20. </script>
  21. </head>
  22.  
  23. <body>
  24.  
  25.    <select id="province">
  26.       <option>----请选择省份----</option>
  27.        <option>北京</option>
  28.        <option>上海</option>
  29.        <option>江苏</option>
  30.    </select>
  31.    <select class="city">
  32.    <option>----请选择城市----</option>
  33.    </select>
  34.    <select class="city">
  35.        <option>东城</option>
  36.        <option>西城</option>
  37.        <option>崇文</option>
  38.        <option>宣武</option>
  39.        <option>朝阳</option>
  40.    </select> 
  41.    <select class="city">
  42.        <option>黄浦</option>
  43.        <option>卢湾</option>
  44.        <option>徐汇</option>
  45.        <option>长宁</option>
  46.        <option>静安</option>
  47.    </select>
  48.    <select class="city">
  49.        <option>南京</option>
  50.        <option>镇江</option>
  51.        <option>苏州</option>
  52.        <option>南通</option>
  53.        <option>扬州</option>
  54.    </select>
  55. </body>
  56. </html>

JavaScript程序编码规范

这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。

软件的长期价值直接源于其编码质量。在它的整个生命周期里,一个程序可能会被许多人阅读或修改。如果一个程序可以清晰的展现出它的结构和特征,那就能减少在以后对其进行修改时出错的可能性。

编程规范可以帮助程序员们增加程序的健壮性。

所有的JavaScript代码都是暴露给公众的。所以我们更应该保证其质量。保持整洁很重要。

JavaScript文件

JavaScript程序应独立保存在后缀名为.js的文件中。

JavaScript代码不应该被包含在HTML文件中,除非这是段特定只属于此部分的代码。在HTML中的JavaScript代码会明显增加文件大小,而且也不能对其进行缓存和压缩。

filename.js>应尽量放到body的后面。这样可以减少因为载入script而造成其他页面内容载入也被延迟的问题。也没有必要使用language或者type属性。MIME类型是由服务器而非scripttag来决定的。

查看全部

跟随鼠标转动的眼睛JS代码

跟随鼠标转动的眼睛JS代码

跟随鼠标转动的眼睛JS代码

演示地址:http://wlog.com.cn/code/javascript/eye/demo.html

下载地址:eye

前端开发常用工具软件

一、IE网页调试插件

IE Developer Toolsbar

IE下的FireBug.HTML及CSS调试工具

http://www.windowsmarketplace.com/details.aspx?itemid=2695980

Microsoft Script Debugger

Companion.JS 需要安装Microsoft Script Debugger才可

Companion.JS

IE下的javascript调试工具.

http://www.my-debugbar.com/wiki/CompanioNJS/HomePage

SuperPreview

主要用于html、css的调试和各个浏览器(目前只能针对IE6-IE8)的页面呈现测试

http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe

IETester-同时拥有IE6、IE7、IE8(Vista兼容)

http://www.my-debugbar.com/wiki/IETester/HomePage

二、firefox网页调试插件

FireBug

firefox下一套强大的网页开发调试工具

https://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer

FireFox下的查看工具,可以查看JS,CSS等页面信息

https://addons.mozilla.org/en-US/firefox/addon/60

YSlow

why slow 页面性能优化查看器.基于FireBug

http://developer.yahoo.com/yslow

Javascript Debugger

FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

https://addons.mozilla.org/en-US/firefox/addon/216

Opera Developer Tools

三、其它

Opera下的DOM,CSS查看工具,类似FireBug.

http://dev.opera.com/articles/view/opera-developer-tools/

webkit

Safari下的开发调试工具

http://nightly.webkit.org/

Fiddler

一个很强大的http流查看工具

http://www.fiddlertool.com/fiddler/

Httpwatch

数据分析工具,头消息接受/发送的查看,POST数据查看.等等

http://www.httpwatch.com

jQuery密码强度检验插件

pass_strength

一款不错的密码强度插件!

1 jquery.pstrength插件和jquery文件

2 载入jquery文件和jquery.pstrength文件

  1. <script type="text/javascript" src="js/jquery.js"></script> 
  2. <script type="text/javascript" src="js/jquery.pstrength-min.1.2.js">
  3. </script>
  4. <script type="text/javascript">
  5. $(function() {
  6. $('#user_password').pstrength();
  7. });
  8. </script>

3 HTML加入密码输入框,id=”user_password”:

  1. 密码:<input type="password" id="user_password" name="user_password" />

4 css:

  1. .pstrength-minchar {
  2. font-size : 10px;
  3. }
  4. input {
  5. width:180px;
  6. height:12px;
  7. line-height:12px;
  8. padding:4px 0px;
  9. border: #cfcfcf 1px solid;
  10. color: #585858;
  11. }

演示地址

插件官方地址:Ajax Password Strength Meter Script

Page 1 of 1612345下一页尾页Last »