<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>HAPPY TOTORO &#187; 网页</title>
	<atom:link href="http://fxiao.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://fxiao.com</link>
	<description>龙 猫 要 努 力 ！</description>
	<lastBuildDate>Thu, 05 Nov 2009 13:58:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>解决站外链接代码的一个bug</title>
		<link>http://fxiao.com/2007/11/external-link-code-to-solve-a-bug/</link>
		<comments>http://fxiao.com/2007/11/external-link-code-to-solve-a-bug/#comments</comments>
		<pubDate>Mon, 05 Nov 2007 10:25:17 +0000</pubDate>
		<dc:creator>XIAO Feng</dc:creator>
				<category><![CDATA[资讯·软件]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[代码]]></category>
		<category><![CDATA[网页]]></category>

		<guid isPermaLink="false">http://totoro.yo2.cn/archives/508678</guid>
		<description><![CDATA[白鸽在将幻想变为现实——让所有外部链接在新窗口打开一文中介绍了一段Javascript代码，用于在网页中出现外部链接的情况下，当浏览者点击链接时使浏览器自动在新窗口或新标签页打开目的窗口。这段代码使得写文章的时候不用再为每个可能出现的链接写一段窗口属性代码，极大的提高了效率。但是在使用过程中有一个小问题，比如本站右侧的“存档”，点击旁边的“展开收缩”链接，本来应该是在本窗口向下延伸出一段文本，但是应用了“外部链接”代码后，因为程序检测到了那个链接地址不是以“http://totoror.com”开头，所以就自动在新窗口打开了，结果在新窗口自然什么也看不到。为些对这段代码作了点小小的改动。改动结果如下：
<span class="readmore"><a href="http://fxiao.com/2007/11/external-link-code-to-solve-a-bug/" title="解决站外链接代码的一个bug">阅读全文(共1152字)</a></span>]]></description>
			<content:encoded><![CDATA[<p>白鸽在<a href="http://rexp.cn/archives/506397">将幻想变为现实——让所有外部链接在新窗口打开</a>一文中介绍了一段Javascript代码，用于在网页中出现外部链接的情况下，当浏览者点击链接时使浏览器自动在新窗口或新标签页打开目的窗口。这段代码使得写文章的时候不用再为每个可能出现的链接写一段窗口属性代码，极大的提高了效率。但是在使用过程中有一个小问题，比如本站右侧的“存档”，点击旁边的“展开收缩”链接，本来应该是在本窗口向下延伸出一段文本，但是应用了“外部链接”代码后，因为程序检测到了那个链接地址不是以“http://totoror.com”开头，所以就自动在新窗口打开了，结果在新窗口自然什么也看不到。为些对这段代码作了点小小的改动。改动结果如下：</p>
<div class="csharpcode">
<pre class="alt"><span class="lnum"> 1: </span>&lt;script type=<span class="str">"text/javascript"</span>&gt;</pre>
<pre><span class="lnum"> 2: </span>&lt;!--</pre>
<pre class="alt"><span class="lnum"> 3: </span><span class="kwrd">function</span> setExternalLinkTarget()</pre>
<pre><span class="lnum"> 4: </span>{</pre>
<pre class="alt"><span class="lnum"> 5: </span> <span class="rem">// 从当前 url 中解析主机名 </span></pre>
<pre><span class="lnum"> 6: </span> <span class="kwrd">var</span> locationMatch = document.location.href.match(/^(http://)?([^/]+)/i);</pre>
<pre class="alt"><span class="lnum"> 7: </span> <span class="rem">// 设置站点链接 </span></pre>
<pre><span class="lnum"> 8: </span> <span class="kwrd">var</span> siteUrl = locationMatch[2];</pre>
<pre class="alt"><span class="lnum"> 9: </span> <span class="rem">// 获取页面上所有链接 </span></pre>
<pre><span class="lnum"> 10: </span> <span class="kwrd">var</span> allLinks = document.getElementsByTagName(<span class="str">'a'</span>);</pre>
<pre class="alt"><span class="lnum"> 11: </span> <span class="kwrd">var</span> len = allLinks.length;</pre>
<pre><span class="lnum"> 12: </span> <span class="kwrd">if</span>(len &gt; 0)</pre>
<pre class="alt"><span class="lnum"> 13: </span> {</pre>
<pre><span class="lnum"> 14: </span> <span class="kwrd">var</span> externalLink;</pre>
<pre class="alt"><span class="lnum"> 15: </span> <span class="kwrd">for</span>(i=0; i&lt;len; i++)</pre>
<pre><span class="lnum"> 16: </span> {</pre>
<pre class="alt"><span class="lnum"> 17: </span> <span class="rem">// 设置当前链接 </span></pre>
<pre><span class="lnum"> 18: </span> externalLink = allLinks[i];</pre>
<pre class="alt"><span class="lnum"> 19: </span> <span class="rem">//检查是否存在非标准http链接（javascript链接就是属于此类）</span></pre>
<pre><span class="lnum"> 20: </span> <span class="kwrd">if</span>(externalLink.href.indexOf(<span class="str">"http"</span>)==-1)</pre>
<pre class="alt"><span class="lnum"> 21: </span> {</pre>
<pre><span class="lnum"> 22: </span> <span class="rem">//do nothing;</span></pre>
<pre class="alt"><span class="lnum"> 23: </span> }</pre>
<pre><span class="lnum"> 24: </span> <span class="rem">// 如果链接 href 里面发现站点链接（外部链接） </span></pre>
<pre class="alt"><span class="lnum"> 25: </span> <span class="kwrd">else</span> <span class="kwrd">if</span> (externalLink.href.indexOf(siteUrl) == -1)</pre>
<pre><span class="lnum"> 26: </span> {</pre>
<pre class="alt"><span class="lnum"> 27: </span> <span class="rem">// 设置 target 属性 </span></pre>
<pre><span class="lnum"> 28: </span> externalLink.setAttribute(<span class="str">'target'</span>, <span class="str">'_blank'</span>);</pre>
<pre class="alt"><span class="lnum"> 29: </span> }</pre>
<pre><span class="lnum"> 30: </span> }</pre>
<pre class="alt"><span class="lnum"> 31: </span> }</pre>
<pre><span class="lnum"> 32: </span>}</pre>
<pre class="alt"><span class="lnum"> 33: </span>window.onload = <span class="kwrd">function</span>() {</pre>
<pre><span class="lnum"> 34: </span> setExternalLinkTarget();</pre>
<pre class="alt"><span class="lnum"> 35: </span>}</pre>
<pre><span class="lnum"> 36: </span><span class="rem">//--&gt; </span></pre>
<pre class="alt"><span class="lnum"> 37: </span>&lt;/script&gt;</pre>
</div>
<p><!--  .csharpcode, .csharpcode pre { 	font-size: small; 	color: black; 	font-family: consolas, "Courier New", courier, monospace; 	background-color: #ffffff; 	/*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt  { 	background-color: #f4f4f4; 	width: 100%; 	margin: 0em; } .csharpcode .lnum { color: #606060; } --></p>
<p>其中19到25行之间的内容是添加的新内容，其余不变。经测试，结果良好。</p>
<p>ps，以上描述的新窗口代码对IE有效，在<a href="http://fxiao.com/tag/firefox/" class="st_tag internal_tag" rel="tag" title="标签 Firefox 下的日志">Firefox</a>下需设置Tab属性。不过对于使用<a href="http://fxiao.com/tag/firefox/" class="st_tag internal_tag" rel="tag" title="标签 Firefox 下的日志">Firefox</a>的用户来说，是否在新窗口打开完全可以由浏览用户自己决定:)</p>
]]></content:encoded>
			<wfw:commentRss>http://fxiao.com/2007/11/external-link-code-to-solve-a-bug/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>解决表格被不间断的文字或标点符号撑大的问题</title>
		<link>http://fxiao.com/2007/10/form-solution-has-been-non-stop-writing-or-punctuation-marks-up-the-big-issues/</link>
		<comments>http://fxiao.com/2007/10/form-solution-has-been-non-stop-writing-or-punctuation-marks-up-the-big-issues/#comments</comments>
		<pubDate>Tue, 09 Oct 2007 04:47:19 +0000</pubDate>
		<dc:creator>XIAO Feng</dc:creator>
				<category><![CDATA[资讯·软件]]></category>
		<category><![CDATA[网页]]></category>

		<guid isPermaLink="false">http://totoroo.cn/archives/450680</guid>
		<description><![CDATA[来源：如何解决表格被不间断的文字或标点符号撑大的问题 &#8211; 闪吧教材
解决思路：
这种情况一般是有意输入不间断英文或标点符号引起的，一般出现在有客户端输入的地方，如留言板、论坛等。这里我们可以通过设置CSS属性word-break和word-wrap来解决。
具体步骤：
1.设置word-break属性为break-all。
&#60;table width=&#8221;200&#8243; height=&#8221;100&#8243; cellSpacing=&#8221;1&#8243; cellPadding=&#8221;0&#8243; bgColor=&#8221;#999999&#8243;&#62;
<span class="readmore"><a href="http://fxiao.com/2007/10/form-solution-has-been-non-stop-writing-or-punctuation-marks-up-the-big-issues/" title="解决表格被不间断的文字或标点符号撑大的问题">阅读全文(共2073字)</a></span>]]></description>
			<content:encoded><![CDATA[<p>来源：<a href="http://www2.flash8.net/teach/3972.htm" target="_blank">如何解决表格被不间断的文字或标点符号撑大的问题 &#8211; 闪吧教材</a></p>
<p><img src="http://www2.flash8.net/Uploadteach/2005/06/27/2005627171528677.gif" border="0" alt="" width="50" height="50" />解决思路：<br />
这种情况一般是有意输入不间断英文或标点符号引起的，一般出现在有客户端输入的地方，如留言板、论坛等。这里我们可以通过设置CSS属性word-break和word-wrap来解决。<br />
<img src="http://www2.flash8.net/Uploadteach/2005/06/27/2005627171533853.gif" border="0" alt="" width="50" height="50" />具体步骤：<br />
1.设置word-break属性为break-all。<br />
&lt;table width=&#8221;200&#8243; height=&#8221;100&#8243; cellSpacing=&#8221;1&#8243; cellPadding=&#8221;0&#8243; bgColor=&#8221;#999999&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td style=&#8221;word-break:break-all&#8221; bgColor=&#8221;#eeeeee&#8221;&gt;<br />
&lt;script&gt;document.write(new Array(100).join(&#8221;d&#8221;))&lt;/script&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
2.上面的代码仅对字母有效，如果把脚本中的d换成!再看看，表格又被撑大了，如果你的IE版本在5.5以上，可以把代码中的word-break:break-all改为word-wrap:break-word，问题解决。<br />
注意：word-wrap属性需要IE5.5+的支持，而word-break属性只需要IE5.0+。<br />
提示：要让单元格里的数据在超出边界时用省略号代替，可以这样(for IE6+)：<br />
技巧：<br />
l         为了更好的兼容性，通常的做法是同时定义两个属性，并且加上table-layout属性。<br />
&lt;style&gt;<br />
table{table-layout:fixed;word-break:break-all;<br />
word-wrap:break-word}<br />
&lt;/style&gt;<br />
&lt;table width=&#8221;200&#8243; height=&#8221;100&#8243; cellSpacing=&#8221;1&#8243; cellPadding=&#8221;0&#8243; bgColor=&#8221;#999999&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td bgColor=&#8221;#eeeeee&#8221;&gt;<br />
&lt;script&gt;<br />
var arr=new Array(100)<br />
document.write(arr.join(&#8221;d&#8221;))<br />
document.write(arr.join(&#8221;!&#8221;))<br />
&lt;/script&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
l         对于IE6.0+，还可以让超出元素边界的文字省略，以省略号代替，如：<br />
&lt;style&gt;<br />
table{table-layout:fixed}<br />
td{overflow:hidden;text-overflow:ellipsis}<br />
&lt;/style&gt;<br />
&lt;table width=&#8221;200&#8243; height=&#8221;100&#8243; cellSpacing=&#8221;1&#8243; cellPadding=&#8221;0&#8243; bgColor=&#8221;#999999&#8243;&gt;<br />
&lt;tr&gt;<br />
&lt;td bgColor=&#8221;#eeeeee&#8221;&gt;<br />
&lt;script&gt;<br />
var arr=new Array(100)<br />
document.write(arr.join(&#8221;d&#8221;)+&#8221;&lt;br&gt;&#8221;)<br />
document.write(arr.join(&#8221;!&#8221;))<br />
&lt;/script&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;<br />
特别提示<br />
技巧中所给代码的运行效果如图2.1.2.3所示，可以看到无论是不间断字母“d”还是叹号“!”，在表格的边界内都要自动换行。<br />
<img src="http://www2.flash8.net/Uploadteach/2005/06/27/200562717160763.jpg" border="0" alt="" width="220" height="232" /><br />
图2.1.2.3 强制文本在表格边界外换行</p>
<h6>特别说明</h6>
<p>本例用到的CSS属性有word-break、word-wrap、table-layout和text-overflow，其中还用overflow属性，在后面会有讲解。word-break 设置元素内的文字的换行行为，脚本特性为wordBreak；word-wrap设置当当前行超过元素边界时是否强行换行，脚本特性为wordWrap；table-layout设置表格布局的算法，脚本特性为tableLayout；text- overflow设置元素内文本溢出的处理，脚本特性为textOverflow。各属性的可选值及说明分别如表2.1.2.3~表2.1.2.6所示。<br />
表2.1.2.3 word-break属性的可选值<br />
可选值说明<br />
normal允许在词内换行(默认值)。<br />
break-all该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。<br />
keep-all与所有非亚洲语言的 normal 相同。对于中文，韩文，日文，不允许字断开。<br />
表2.1.2.4 word-wrap属性的可选值<br />
可选值说明<br />
normal允许内容顶开指定的容器边界(默认值)。<br />
break-word内容将在边界外换行。<br />
表2.1.2.5 text-overflow属性的可选值<br />
可选值说明<br />
clip不显示省略号(&#8230;)，而是简单的裁切(默认值)。<br />
ellipsis以省略号(&#8230;)代替元素的溢出文本。<br />
表2.1.2.6 table-layout属性的可选值<br />
可选值说明<br />
auto布局将基于各单元格的内容。表格在每一单元格内所有内容读取计算之后才会显示出来(默认值)。<br />
fixed固定布局的算法。表格和列的宽度取决于 col 对象的宽度总和，假如没有指定，则会取决于第一行每个单元格的宽度。假如表格没有指定 width 属性，表格将按100%的宽度显示。</p>
]]></content:encoded>
			<wfw:commentRss>http://fxiao.com/2007/10/form-solution-has-been-non-stop-writing-or-punctuation-marks-up-the-big-issues/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
