江湖镖局

为FireFox增加自定义搜索引擎-w3school

biao166 — Wed, 28 Dec 2011 00:00:14 +0800

好像已经养成一种习惯了，在firefox上搜索是我不会再打开baidu或者google，而是直接在工具栏上搜索了，w3school是初级菜鸟码农必查的，故萌生把w3school的搜索添加到firefox上。

Firefox添加搜索引擎大概有这么集中方法

1.安装插件

点击搜索栏，左边的下拉按钮，选择“管理搜索引擎”，在出现的页面点击”获取更多搜索引擎“，这个时候会登录到mozilla的add-on的网站上，随便点点就安装上了，里边的搜索引擎不多，不太适合国内用户

2.特别环境安装

火狐打开可以增加搜索引擎的页面会提示你安装，比如你打开爱词霸的网站 http://www.iciba.com/ ，这个时候点击的搜索栏左边的下拉按钮，会出现” 增加 ”爱词霸辞典“ “，点击这个，会自动把当前页面提供的搜索引擎增加到你的搜索栏。

3.手动添加

自定义才是王道，查看w3school的搜索，是调用Goolge的自定义搜索来实现的，

http://www.google.com.hk/search?sitesearch=w3school.com.cn&as_q=html5

找到Firefox的搜索引擎目录searchplugins，里边有内置的几个，我们新建一个w3.xml的文件，将下面的代码保存进去

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>w3school</ShortName>    //搜索栏显示的名字
<Description>w3school</Description>  //选中该搜索引擎后，显示的描述名
<InputEncoding>UTF-8</InputEncoding>   //编码
<Image width="16" height="16">data:image/bmp;base64,Qk04AwAAAAAAAD
YAAAAoAAAAEAAAABAAAAABABgAAAAAAAIDAAASCwAAEgsAAAAAAAAAAAA...</Image>
<Url type="text/html" method="GET" template="http://www.google.com/search">
  <Param name="sitesearch" value="w3school.com.cn"/>  //参数
  <Param name="as_q" value="{searchTerms}"/>
  // {searchTerms}是固定的，这个就是在搜索栏里输入的内容
</Url>
<SearchForm>http://www.google.com/</SearchForm>
</SearchPlugin>

Image标签内是一个base64的图像

关于搜索栏图标的做法：

制作一张 16×16的bmp文件。
打开下面的页面 http://software.hixie.ch/utilities/cgi/data/data
在出现的页面选中”base64″，在”Alternatively, upload a file:”右边，提交刚才制作好的文件
点击按钮Generate

下载：w3

　» 转载请注明来源：Biao166's life » 《为FireFox增加自定义搜索引擎-w3school》

notepad++ 启动和关闭都提示root element is missing

biao166 — Sat, 24 Dec 2011 16:20:11 +0800

如题，不晓得什么时候启动和关闭notepad++的时候都弹出提示框：root element is missing，但却不影响正常工作。

网上说是什么根元素丢失，按照提供的方法清空了系统的临时文件夹等等，都没用…只好自己寻找解决办法：

其他软件没出现错误，应该是notepad++的原因，最有可能是主题or插件or其他配置文件，一步一步排除，最终发现剔除SnippetPlus这个插件后，恢复正常，留个记号…

　» 转载请注明来源：Biao166's life » 《notepad++ 启动和关闭都提示root element is missing》

清理浮动的几种方法以及对应规范说明-转

biao166 — Tue, 13 Dec 2011 23:13:22 +0800

前言

浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间，这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是，由于浮动特性，容器如果没有明确设定高度，会依照普通流内元素高度设置，这样就会导致脱离普通流的浮动元素溢出容器，影响其后元素布局。

我们将现有已知的清楚浮动元素方法罗列下：

采用一个HTML标签，以及css的clear属性，来手工清理浮动；
采用伪类:after，动态建立一个块元素，设定 clear 属性，清理之前的浮动元素；
采用CSS overflow 非 visible 值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素；
采用display:table/display:table-cell 等table系列属性将父元素变成 table 形式自动包含浮动元素；
使用 TABLE 以及 TD 标签作为浮动元素容器；
采用 float:left/float:right 方式将父元素同样浮动，就可以包含浮动内容；
在 IE 6/7 的标准文档模式中设置 “width/height/zoom” 等样式来自动清理浮动。

对这些方式我们一一来对照 CSS 标准（或者浏览器特性）来解释下。

使用 clear 样式清除

样例：

.clear-float {clear:both;}

clear 属性是 CSS 1 就提供的用来清除浮动的样式，设置了 clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，忽略其 margin-top 设置。这样，父容器高度未设定(值是 auto)时，由于定义的清理浮动样式元素所在位置处于浮动元素之下，容器计算后的实际高度就包含了浮动元素。

使用伪元素 :after 清除

样例：

.after-clear-float :after{content:""; display:block; clear:both;}

:after 伪元素是在 CSS 2 规范内提出的，IE 6/7 并不支持。它的作用是在指定该伪元素元素内，所有子元素最后自动生成一个伪元素，并可以为这个伪元素设定样式。在设定样式中，使用 clear 属性即可达到与手工添加元素指定清理的效果。

注意兼容问题：
:after 伪元素在 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2 规范，恰巧 :after 伪元素不在实现之例。

使用 overflow 清除

样例：

.overflow-clear-float {overflow:hidden;}
/* 或者 */
.overflow-clear-float {overflow:auto;}

overflow 样式值为非 visilbe 时，实际上是创建了 CSS 2.1 规范定义的 Block Formatting Contexts。创建了它的元素，会重新计算其内部元素位置，从而获得确切高度。这样父容器也就包含了浮动元素高度。这个名词过于晦涩，在 CSS 3 草案中被变更为名词 Root Flow，顾名思义，是创建了一个新的根布局流，这个布局流是独立的，不影响其外部元素的。实际上，这个特性与早期 IE 的 hasLayout 特性十分相似。

注意兼容问题：
Block Formatting Contexts 概念是在 CSS 2.1 规范内被提出。因此 IE6/7 中并不被支持，这是由于之前的 IE 版本仅完全实现了 CSS 1 规范标准，以及一部分 CSS 2.0 规范。在 IE 7 中，overflow 值为非 visible 时，可以触发 hasLayout 特性。这同样使得 IE 7 同样可以使容器包含浮动元素。

使用 display:table 清除

样例：

.table-clear-float {display:table}
/* 或者 */
.table-clear-float {display:table-cell}

当元素 display 值被设定为 table 或 table-cell 时，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。

注意兼容问题：
除去 Block Formatting Contexts 在 IE 6/7 中的兼容性外，display:talbe 系列样式设定也不在 IE6/7 的支持范围之内。

使用表格类元素作为浮动元素容器

样例：

<table>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>

当使用 TABLE TD TH 等 TABLE 系列标签时，元素的 display 值实际上说是 display: table 系列，这同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时在 IE 6/7 中，TABLE TD TH 等 TABLE 系列标签天然拥有 haslayout 特性，这也可以使容器自动包含浮动元素高度。

使用浮动父元素清除

当元素设置 float:left/float:right 时，同样也创建了 CSS 2.1 规范定义的 Block Formatting Contexts。这样父容器也就包含了浮动元素高度。同时，这个样式也会在 IE 6/7 内触发 hasLayout 特性，拥有这个特性的元素也可以计算出浮动元素的高度，使父元素包含他们。

实际问题：
虽然这种方式并没有兼容问题，但实际使用中并不推荐。因为很容易推断出，页面中只要有一个浮动元素，使用该方法清理浮动将不可避免的使页面所有元素都浮动才可以达到预期效果。

触发 hasLayout 清除

样例：

haslayout-clear-float:{width:1px}
/* 或 */
.haslayout-clear-float:{height:1px}
/* 或 */
.haslayout-clear-float:{zoom:1}

‘Layout’ 是 IE 的专有概念，它决定了元素如何对其内容进行定位和尺寸计算，与其他元素的关系和相互作用，以及对应用还有使用者的影响。

‘Layout’ 可以被某些 CSS property（特性）不可逆的触发，而某些 HTML 元素本身就具有 layout 。

‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ，如 object.currentStyle.hasLayout 。

‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么自己对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值可以为 true 或 false。当一个元素的 ‘hasLayout’ 属性值为 true 时，我们说这个元素有一个布局（layout），或拥有布局。

默认拥有布局的元素：

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

可触发 hasLayout 的 CSS 特性：

display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)

IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：

min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed

IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5），通过设置任何元素的 ‘width’ 或 ‘height’（非auto）都可以触发 hasLayout ；但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 ‘display:inline-block’ 才可以。

注意兼容问题：

haslayout 特性仅 IE 支持，其他浏览器并无此特性。可以依靠计算布局清理浮动的 haslayout 特性仅在 IE 6/7 中存在，IE8 之后将使用 CSS 2.1 的 Block Formatting Contexts 定义来达到同样效果。

注：IE hasLayout 特性厂商说明链接：hasLayout Property

以上内容是常见清理浮动手段生效的规范（和浏览器厂商特性）原理。我们希望页面开发者们，根据他们的兼容性特征以及实际情况来组合使用，以便达到实际项目目标。
建议

对于初学者我们推荐如下方式之一来清理浮动元素，它们均相对简单可靠：

采用一个HTML标签，以及css的clear属性，来手工清理浮动；
为元素设置 overflow:hidden 或 overflow:auto 值，配合可以设置 zoom:1 样式触发 IE6 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。
采用伪元素:after，配合可以设置 zoom:1 样式触发 IE6/7 haslayout 特性，来达到兼容所有浏览器清理浮动的目的。

　» 转载请注明来源：Biao166's life » 《清理浮动的几种方法以及对应规范说明-转》

JS刷新页面的种种

biao166 — Thu, 01 Dec 2011 00:28:12 +0800

Location 对象：

包含有关当前 URL 的信息，是 Window 对象的一个部分，可通过 window.location 属性来访问，存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。

Location 对象方法

assign() 方法

定义和用法

assign() 方法可加载一个新的文档。

语法

location.assign(URL)

实例

<html>
<head>
<script type="text/javascript">
    function newDoc(){
	window.location.assign(<a href="../">http://www.biao166.cn</a>)
    }
</script>
</head>
<body>
    <input type="button" value="Load new document" onclick="newDoc()" />
</body>
</html>

reload() 方法

定义和用法

reload() 方法用于重新加载当前文档。

语法

location.reload(force)

说明

如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

实例

    <html>
    <head>
    <script type=”text/javascript”>
        function reloadPage(){window.location.reload()}
    </script>
    </head>
    <body>
        <input type=”button” value=”Reload page” onclick=”reloadPage()” />
    </body>
    </html>

replace() 方法

定义和用法

replace() 方法可用一个新文档取代当前文档。

语法

location.replace(newURL)

说明

replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

实例

下面的例子将使用 replace() 方法来替换当前文档：

<html>
<head>
<script type=”text/javascript”>
    function replaceDoc(){
        window.location.replace(“http://www.w3school.com.cn”)
    }
</script>
</head>
<body>
    <input type=”button” value=”Replace document” onclick=”replaceDoc()” />
</body>
</html>

附：
Javascript刷新页面的几种方法：

history.go(0)
location.reload()
location=location
location.assign(location)
document.execCommand(‘Refresh’)
window.navigate(location)
location.replace(location)
document.URL=location.href

自动刷新页面的方法:
1.页面自动刷新：把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20″>
其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入<head>区域中
<meta http-equiv=”refresh” content=”20;url=http://www.biao166.cn”>
其中20指隔20秒后跳转到http://www.biao166.cn页面

3.页面自动刷新js版
<script language=”JavaScript”>
function myrefresh(){
window.location.reload();
}
setTimeout(‘myrefresh()’,1000); //指定1秒刷新一次
</script>

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
<script language=JavaScript>
parent.location.reload();
</script>

//子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
</script>
(　或　<a href=”javascript:opener.location.reload()”>刷新</a> )

//如何刷新另一个框架的页面用
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>

//如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload=”opener.location.reload()”> 开窗时刷新
<body onUnload=”opener.location.reload()”> 关闭时刷新
<script language=”javascript”>
window.opener.document.location.reload()
</script>

　» 转载请注明来源：Biao166's life » 《JS刷新页面的种种》

IE报错：缺少标识符、字符串或数字

biao166 — Mon, 21 Nov 2011 21:54:22 +0800

十点多了接到反馈，论坛IE报错：缺少标识符、字符串或数字，哎，赶紧解决！

开始调试吧，首先还原错误额！

将两个勾去掉，了解报错的大概位置,貌似这个位置没有过改动，想想自己白天改动了什么东西额，网上找下，原因最大可能是js数组最后一个元素后面添加了”,”。这个，貌似我真的添加了一个数组，关于bshare的自定义设置，看下吧，好家伙，貌似最后一个真的多了一个逗号，在火狐下轻松通过，却在IE给我做小动作。

　» 转载请注明来源：Biao166's life » 《IE报错：缺少标识符、字符串或数字》

PR暴增到4，希望RP暴增

biao166 — Tue, 08 Nov 2011 09:16:28 +0800

GOOGLE出问题了？大清早发现PR变4，呼呼，不做评论，只当路过！！！

　» 转载请注明来源：Biao166's life » 《PR暴增到4，希望RP暴增》

Dreamweaver 安装Zen Coding后tab键冲突的解决

biao166 — Wed, 12 Oct 2011 09:04:17 +0800

Dreamweaver安装了Zen Coding后默认会设置快捷键为Tab，但平时缩进又离不开Tab，久寻求方法解决而不得，最终还是在国外找到方法。

In Dreamweaver CS5 for Windows 7 replace the shortcut “Tab” to “Ctrl+Alt+Shift+Space” in the file Menus.xml
1. Open the C:\Users\YourUserName\AppData\Roaming\Adobe\Dreamweaver CS5\en_US\Configuration\Menus\Menus.xml
2. Search for “Tab” (with quotes)
3. Replace “Tab” to “Ctrl+Alt+Shift+Space ”
4. Save the file
5. Restart Dreamweaver

换句话说在XP下面就在： C:\Documents and Settings\**用户名**\Application Data\Adobe\Dreamweaver CS5.5\zh_CN\Configuration\Menus\Menus.xml,在里边搜索“Tab”，然后用其他冷门的键代替，重启DW，再设置新的快捷键，我的为Ctrl+E，OVER！

　» 转载请注明来源：Biao166's life » 《Dreamweaver 安装Zen Coding后tab键冲突的解决》

Aptana Studio 3颜色方案（Theme）-Sunset

biao166 — Thu, 22 Sep 2011 23:46:48 +0800

用了快半个月的Aptana Studio 3，废话少说，Aptana Studio 3除了自带的一些theme之外，网络上几乎找不到相关资源，于是花了点时间自己配置了一个，效果看截图

php

HTML

JAVA

下载地址：sunset

　» 转载请注明来源：Biao166's life » 《Aptana Studio 3颜色方案（Theme）-Sunset》

Aptana Studio 3初试

biao166 — Sun, 11 Sep 2011 22:37:17 +0800

DW是个好工具，但其对js，php等的不支持一直是个硬伤，最近转投Aptana Studio 3了…

下面记录下自己遇到的一些问题：

难道是中国用Aptana Studio 3的人太少了，官方连中文版都没有，这让人着实郁闷，况且还对中文支持不是很好，但看在其对javascript，php等的原生支持上就无所谓啦….

一、汉化

aptana完美支持eclipse的语言包，所以我们可以用eclipse的语言包来汉化我们的aptana的。

aptana 2的可以使用Galileo版本的eclipse来升级汉化
只需要在help点击intall->new software，填入

http://download.eclipse.org/technology/babel/update-site/R0.9.0/galileo

等待一会儿，选择chinese

aptana 3也是一样，可以使用Helios版本的eclipse来升级汉化
地址是： http://download.eclipse.org/technology/babel/update-site/R0.9.0/helios

PS:如果上面的地址不能用了，说明eclipse又更新了，你可以在http://www.eclipse.org/label/downloads.php看到新的地址。
其实就是修改一下R0.x.x这个版本号.

二、兼容中文

三、jquery

进入之后选择javascript-jquery，进入安装界面…

四、zen-coding

zen coding for aptana studio 3

方法：菜单-帮助-安装新软件-添加-输入地址名称，等待加载，选择就可以了.

安装地址：http://zen-coding.ru/eclipse/updates/

更改快捷键：需要要更改”Expand Abbreviation”的快捷键，只需修改Expand Abbreviation.js。

五、 word wrap for aptana studio 3

安装地址：http://ahtik.com/eclipse-update/

六更多插件

可以访问这里获取hhttps://github.com/aptana

PS：关于aptana studio3的plugin manager，我反正是没找到，所以上面的安装jquery的插件跟网上一些方法不同，没时间深究了，看下我在官网找到的一段文字吧！

There are no JavaScript Framework Plugins for Aptana Studio 3 at this time. The JS Framework plugins are for Aptana Studio 2 only !
You can add a JS Framework e.g. jQuery by simply add/copy the library to your project.
I see that there is just one ruble for jQuery wich add jQuery specific functionality to Aptana Studio 3.
From the main menu:
“Commands->Bundle Development::Install Bundle” if it is not already installed.

　» 转载请注明来源：Biao166's life » 《Aptana Studio 3初试》

A href=？的对比

biao166 — Sun, 11 Sep 2011 17:24:14 +0800

<script type=”text/javascript”>
window.onbeforeunload=function()
{
alert(“onbeforeunload event…”);
//return false;
}
</script>
<a href=”#” onclick=”return true;”>测试1</a><br/>
<a href=”javascript:void(0)” onclick=”return true;”>测试2</a><br/>
<a href=”javascript:void(0)” onclick=”return false;”>测试3</a><br/>
<a href=”javascript:void(alert(‘test 4….’))” onclick=”return true;”>测试4</a><br/>
<a href=”javascript:void(alert(‘test 5….’))” onclick=”return false;”>测试5</a><br/>
<a href=’#this’ onclick=’fun();return false;’/>测试6</a>

在开发过程中，经常会使用测试1<a href=’#’ onclick=’fun();return false;’/>这种方式来触发javascript事件而不改变当前链接.或者测试2<a href=”javascript:void(0)” onclick=”return true;”>测试2</a>这种方式来建立死链接。在web标准中是不建议使用测试2的方式的，因为测试2javascript:void(0)伪协议也会有bug存在，会使gif动画停止播放。在测试2的案例中，我们还能看到，点击事件触发的时候（调用顺序：onclick->window.onbeforeunload->href），而测试1却没有，这是因为void运算符在执行之前会调用window.onbeforeunload方法对于void运算符（void只做运算，返回结果为undefined）,所以在调用到href时遇到void运算符的时候，可能就会产生一些bug。

但是使用测试1的方式href=’#’ onclick中加上return false，也会存在问题，导致点击链接页面返回顶部，这是由于#号默认锚点为#top,点击后重新定位到top锚点位置，当然可以自己再重新定义一个 top锚点，但是这也不能很好解决问题，仍然也存在定位不准。有些朋友喜欢使用###来替换#(#一般为2到6个，大多都取4个)。无论#几个都是会存在这个bug的，原因同上。

点击链接导致页面返回顶部也可以采用span标签替换a标签来解决，但是还可以不改变标签，只需讲#用#this替换即可解决问题,也可以采用其它锚点

另：当window.onbeforeunload中return false的时候将会有意想不到的收获。提示“确实要离开页面吗？确定…取消…”

　» 转载请注明来源：Biao166's life » 《A href=？的对比》