﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-笨小孩...................................................................................-随笔分类-Ajax</title><link>http://www.blogjava.net/fl1429/category/38181.html</link><description>Java,Ruby,Php,Flex,Ajax,UI,Google,Linux...................</description><language>zh-cn</language><lastBuildDate>Tue, 23 Jun 2009 11:13:20 GMT</lastBuildDate><pubDate>Tue, 23 Jun 2009 11:13:20 GMT</pubDate><ttl>60</ttl><item><title>Javascript  selectarea image</title><link>http://www.blogjava.net/fl1429/archive/2009/06/23/283801.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Tue, 23 Jun 2009 10:51:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/06/23/283801.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/283801.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/06/23/283801.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/283801.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/283801.html</trackback:ping><description><![CDATA[效果预览：<br />
<img style="max-width: 800px;" src="http://www.blogjava.net/images/blogjava_net/fl1429/snapshot7.png"  alt="" /><br />
<br />
目的：用户上传一张图片后，可以对自己的大图片进行，选择区域宿略为小图，方法有很多，可以google ： javascript crop image,javascript thumbnail image<br />
<br />
步骤：<br />
1，参照 <br />
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php<br />
下载后，把php服务器端的代码去掉，只要client端的<br />
<br />
2，注意点，原来的上传后，图片太大或者太小，都会以原大小显示，这样不好<br />
（1），修改显示width， 和 height<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="&lt;%= @upload_src %&gt;" style="float: left; margin-right: 10px;" id="thumbnail"&nbsp; name="thumbnail" width="400" height="400"&nbsp; alt="Create Thumbnail" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div style="float:left; position:relative; overflow:hidden; width:100px; height:100px;"&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;img src="&lt;%= @upload_src %&gt;" style="position: relative;" width="75" height="100" alt="Thumbnail Preview" /&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />
（2），获得选区的width，height需要改变，不然宿略图和小图不对应<br />
&nbsp; width: Math.round(scaleX * 400) + 'px', // 400就是我上面的i㎎的width<br />
&nbsp;&nbsp;&nbsp;&nbsp; height: Math.round(scaleY * 400) + 'px',<br />
<br />
（3），可以改变选区的比列，3：4， 1：1 等等<br />
&nbsp;$('#thumbnail').imgAreaSelect({ aspectRatio: '3:4', onSelectChange: preview });<br />
<br />
（4），把小图上传到后台，取得到是x1，y1，width，height等等，这样后台就可以根据参数操作图片了，我做的话，只是取了这四个参数就ok了<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="x1" value="" id="x1" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="y1" value="" id="y1" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="x2" value="" id="x2" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="y2" value="" id="y2" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="w" value="" id="w" /&gt;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;input type="hidden" name="h" value="" id="h" /&gt;<br />
<br />
另外后台可以参考我这里，ruby代码<br />
http://www.blogjava.net/fl1429/archive/2009/06/19/283282.html<br />
<br />
显示图片问题可以参考这里：（图片上传到后台后，需要处理为大图片显示的大小，这样小图片才能相对应）<br />
http://www.blogjava.net/fl1429/archive/2009/06/22/283629.html<br />
<br />
ref：<br />
http://odyniec.net/projects/imgareaselect/<br />
<br />
<br />
<img src ="http://www.blogjava.net/fl1429/aggbug/283801.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-06-23 18:51 <a href="http://www.blogjava.net/fl1429/archive/2009/06/23/283801.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Javascript use setTimeout</title><link>http://www.blogjava.net/fl1429/archive/2009/06/16/282661.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Tue, 16 Jun 2009 10:55:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/06/16/282661.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/282661.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/06/16/282661.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/282661.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/282661.html</trackback:ping><description><![CDATA[我们知道window onload或者body的onload方法，都是在页面加载完后才执行的，也就像是组最后执行的js方法，那么如何让我需要的js function 最后执行呢，或者定义其执行顺序，那就需要用到，setTimeout方法了<br />
<br />
使用方法demo：<br />
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #000000;">&nbsp;&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">function</span><span style="color: #000000;">&nbsp;getaddress(){&nbsp;</span><span style="color: #008000;">//</span><span style="color: #008000;">&nbsp;set&nbsp;address&nbsp;from&nbsp;DB</span><span style="color: #008000;"><br />
</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;province_db&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;document.getElementById('province_value').value;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;city_db&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;document.getElementById('city_value').value;<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">with</span><span style="color: #000000;">(document.userinfo.province)&nbsp;{</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;loca2&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;province_db;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">for</span><span style="color: #000000;">(i&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;i&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">&nbsp;where.length;i&nbsp;</span><span style="color: #000000;">++</span><span style="color: #000000;">)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">&nbsp;(where[i].loca&nbsp;</span><span style="color: #000000;">==</span><span style="color: #000000;">&nbsp;loca2)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loca3&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;(where[i].locacity).split(</span><span style="color: #000000;">"</span><span style="color: #000000;">|</span><span style="color: #000000;">"</span><span style="color: #000000;">);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">for</span><span style="color: #000000;">(j&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">1</span><span style="color: #000000;">;j&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">&nbsp;loca3.length;j</span><span style="color: #000000;">++</span><span style="color: #000000;">)<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;</span><span style="color: #0000ff;">with</span><span style="color: #000000;">(document.userinfo.city){&nbsp;length&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;loca3.length;&nbsp;options[j].text&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;loca3[j];&nbsp;options[j].value&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;loca3[j];}}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">break</span><span style="color: #000000;">;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;length&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;document.userinfo.province.length;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;length_city&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;document.userinfo.city.length;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">for</span><span style="color: #000000;">(i&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">;&nbsp;i&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">&nbsp;length;i</span><span style="color: #000000;">++</span><span style="color: #000000;">){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(document.getElementById('province').options[i].value&nbsp;</span><span style="color: #000000;">==</span><span style="color: #000000;">&nbsp;province_db){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('province').selectedIndex&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;i;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">for</span><span style="color: #000000;">(i&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">&nbsp;;&nbsp;i</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">&nbsp;length_city;i</span><span style="color: #000000;">++</span><span style="color: #000000;">){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(document.getElementById('city').options[i].value&nbsp;</span><span style="color: #000000;">==</span><span style="color: #000000;">&nbsp;city_db){<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('city').selectedIndex&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;i;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
<br />
&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;setTimeout(</span><span style="color: #000000;">"</span><span style="color: #000000;">getaddress()</span><span style="color: #000000;">"</span><span style="color: #000000;">,&nbsp;</span><span style="color: #000000;">1000</span><span style="color: #000000;">);<br />
</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span></div>
<br />
setTimeout(函数，时间) 意为延迟执行的时间，只执行一次<br />
<br />
ref：<br />
http://blog.csdn.net/lne818/archive/2008/03/03/2143753.aspx<br />
<br />
<img src ="http://www.blogjava.net/fl1429/aggbug/282661.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-06-16 18:55 <a href="http://www.blogjava.net/fl1429/archive/2009/06/16/282661.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Javascript  set radio checked</title><link>http://www.blogjava.net/fl1429/archive/2009/06/16/282660.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Tue, 16 Jun 2009 10:45:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/06/16/282660.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/282660.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/06/16/282660.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/282660.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/282660.html</trackback:ping><description><![CDATA[最近在做需要动态操作html的radio ，按照这样<br />
http://www.java2s.com/Tutorial/JavaScript/0200__Form/Radiochecked.htm<br />
做了，但是却可以把两个按钮同时选中，这样显然不行的，最后利用jquery给解决了，需要的jquery lib请自行到官方下载～<br />
<br />
html代码：<br />
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input&nbsp;</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;">&nbsp;type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;">&nbsp;name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;">&nbsp;value</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;">&nbsp;</span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;">男<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">input&nbsp;</span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;">&nbsp;type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;">&nbsp;name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;">&nbsp;value</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;">&nbsp;</span><span style="color: #0000ff;">/&gt;</span><span style="color: #000000;">女&nbsp;＊</span></div>
<br />
Js代码：<br />
<div style="border: 1px solid #cccccc; padding: 4px 5px 4px 4px; background-color: #eeeeee; font-size: 13px; width: 98%;"><!--<br />
<br />
Code highlighting produced by Actipro CodeHighlighter (freeware)<br />
http://www.CodeHighlighter.com/<br />
<br />
--><span style="color: #000000;">&lt;%</span><span style="color: #000000;">&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(get_client_info('gender').to_s</span><span style="color: #000000;">==</span><span style="color: #000000;">'</span><span style="color: #000000;">1</span><span style="color: #000000;">')&nbsp;</span><span style="color: #000000;">%&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script&nbsp;type</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">text/javascript</span><span style="color: #000000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()&nbsp;{&nbsp;</span><span style="color: #008000;">//</span><span style="color: #008000;">&nbsp;set&nbsp;gender&nbsp;from&nbsp;DB</span><span style="color: #008000;"><br />
</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;$radios&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;$('input:radio[name</span><span style="color: #000000;">=</span><span style="color: #000000;">gender]');<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">($radios.is(':checked')&nbsp;</span><span style="color: #000000;">===</span><span style="color: #000000;">&nbsp;</span><span style="color: #0000ff;">false</span><span style="color: #000000;">)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$radios.filter('[value</span><span style="color: #000000;">=</span><span style="color: #000000;">1</span><span style="color: #000000;">]').attr('checked',&nbsp;</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br />
<br />
&nbsp;&nbsp;</span><span style="color: #000000;">&lt;%</span><span style="color: #000000;">&nbsp;elsif(get_client_info('gender').to_s&nbsp;</span><span style="color: #000000;">==</span><span style="color: #000000;">'</span><span style="color: #000000;">0</span><span style="color: #000000;">')&nbsp;</span><span style="color: #000000;">%&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">()&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;$radios&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;$('input:radio[name</span><span style="color: #000000;">=</span><span style="color: #000000;">gender]');<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">($radios.is(':checked')&nbsp;</span><span style="color: #000000;">===</span><span style="color: #000000;">&nbsp;</span><span style="color: #0000ff;">false</span><span style="color: #000000;">)&nbsp;{<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$radios.filter('[value</span><span style="color: #000000;">=</span><span style="color: #000000;">0</span><span style="color: #000000;">]').attr('checked',&nbsp;</span><span style="color: #0000ff;">true</span><span style="color: #000000;">);<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br />
&nbsp;&nbsp;</span><span style="color: #000000;">&lt;%</span><span style="color: #000000;">&nbsp;end&nbsp;</span><span style="color: #000000;">%&gt;</span></div>
<br />
ref：<br />
http://stackoverflow.com/questions/871063/how-to-set-radio-option-checked-onload-with-jquery<br />
<br />
<img src ="http://www.blogjava.net/fl1429/aggbug/282660.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-06-16 18:45 <a href="http://www.blogjava.net/fl1429/archive/2009/06/16/282660.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JavaScript 验证浏览器是否支持javascript</title><link>http://www.blogjava.net/fl1429/archive/2009/05/11/270080.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Mon, 11 May 2009 09:56:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/05/11/270080.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/270080.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/05/11/270080.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/270080.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/270080.html</trackback:ping><description><![CDATA[<p>一些网站只有客户端js的验证,这样就给一些hacher一些可趁之机了,不信大家测试一些网站的注册功能看看,有部分网站只有客户端验证,我为了达到客户端验证,先是判断浏览器是否支持js,如果不支持,提示信息,然后屏蔽掉发送按钮</p> <p>效果:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/1814f8289e55_F55A/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="244" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/1814f8289e55_F55A/image_thumb.png" width="201" border="0"></a> </p> <p>先来看看别的网站是怎么做的:</p> <p>google.com的登录: 客户端 和服务器端都验证了,并且提示信息一样的</p> <p>baidu.com 的登录: 屏蔽了密码输入框</p> <p><a title="http://fanfou.com/register" href="http://fanfou.com/register">http://fanfou.com/register</a> : 客户端和后台都验证了,但是提示的信息方式不一样</p> <p><a title="http://login.xiaonei.com/Login.do" href="http://login.xiaonei.com/Login.do">http://login.xiaonei.com/Login.do</a> : 用户禁用Js后有提示信息 </p> <p>我的实现步骤:</p> <p>思想:</p> <p>1,默认(禁用js)submit按钮式不显示的,如果启用后,就显示submit按钮</p> <p>2,通过&lt;noscript&gt;.......................&lt;/noscript&gt; 显示提示信息</p> <p>代码:</p> <div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:daedc7c1-4e69-4bec-9cbb-aa428effcaa9" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">  </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">noscript</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
        </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">div  style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">color:red</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">您的浏览器不支持javascript,部分功能无法使用</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">div</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">noscript</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
  </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">div id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">js_support</span><span style="color: #800000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">display:none</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">p id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">pSubmit</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;&lt;</span><span style="color: #000000;">input type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span><span style="color: #000000;"> name</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">registerform</span><span style="color: #800000;">"</span><span style="color: #000000;"> value</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">注  册</span><span style="color: #800000;">"</span><span style="color: #000000;">  onclick</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">return submitform();</span><span style="color: #800000;">"</span><span style="color: #000000;">/&gt;&lt;/</span><span style="color: #000000;">p</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">div</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
  $(</span><span style="color: #800000;">"</span><span style="color: #800000;">js_support</span><span style="color: #800000;">"</span><span style="color: #000000;">).style.display </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">block</span><span style="color: #800000;">"</span><span style="color: #000000;">;
</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div>
<p></p>
<p>ref:</p>
<p><a title="http://space.cnblogs.com/question/2593/" href="http://space.cnblogs.com/question/2593/">http://space.cnblogs.com/question/2593/</a></p>
<p><a title="http://www.blogjava.net/kingkong/archive/2007/05/26/120202.html" href="http://www.blogjava.net/kingkong/archive/2007/05/26/120202.html">http://www.blogjava.net/kingkong/archive/2007/05/26/120202.html</a></p>
<p><a title="http://www.plus2net.com/javascript_tutorial/javascript_support.php" href="http://www.plus2net.com/javascript_tutorial/javascript_support.php">http://www.plus2net.com/javascript_tutorial/javascript_support.php</a></p><img src ="http://www.blogjava.net/fl1429/aggbug/270080.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-05-11 17:56 <a href="http://www.blogjava.net/fl1429/archive/2009/05/11/270080.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Ajax   表单验证</title><link>http://www.blogjava.net/fl1429/archive/2009/05/11/270076.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Mon, 11 May 2009 09:24:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/05/11/270076.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/270076.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/05/11/270076.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/270076.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/270076.html</trackback:ping><description><![CDATA[<p>最近做了一个项目中的登录注册模块,大部分功能从一个网站里扣出来的,部分功能自己修改,自认为还是有点人性化的</p> <p>兼容: opera 9.6 + chrome 2.0 + FF 3 + IE 6</p> <p>效果:一边输入一边实现验证</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/3f84c6ae06e2_DF26/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="497" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/3f84c6ae06e2_DF26/image_thumb.png" width="721" border="0"></a> </p> <p>环境:ruby 1.8.6 + rails 2.1.0 + windows</p> <p>核心代码:</p> <p>html:</p> <p>浏览器禁用javascript时显示提示信息:</p> <p></p> <p> <div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:3ddedacf-4ede-4929-b80f-6b7d09b4b56f" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:Silver;white-space:-moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word;overflow: auto;"><span style="color: #000000;">      </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">noscript</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
        </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">div  style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">color:red</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">您的浏览器不支持javascript,部分功能无法使用</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">div</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">noscript</span><span style="color: #000000;">&gt;</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>当浏览器禁用JS后,提交按钮不可用,实现客户端验证!</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:8f02d54c-d5a3-46fe-a32d-a069e23a6866" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">&lt;</span><span style="color: #000000;">div id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">js_support</span><span style="color: #800000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">display:none</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">p id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">pSubmit</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;&lt;</span><span style="color: #000000;">input type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">submit</span><span style="color: #800000;">"</span><span style="color: #000000;"> name</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">registerform</span><span style="color: #800000;">"</span><span style="color: #000000;"> value</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">注  册</span><span style="color: #800000;">"</span><span style="color: #000000;">  onclick</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">return submitform();</span><span style="color: #800000;">"</span><span style="color: #000000;">/&gt;&lt;/</span><span style="color: #000000;">p</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">div</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      
      </span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">text/javascript</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
  $(</span><span style="color: #800000;">"</span><span style="color: #800000;">js_support</span><span style="color: #800000;">"</span><span style="color: #000000;">).style.display </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">block</span><span style="color: #800000;">"</span><span style="color: #000000;">;
</span><span style="color: #000000;">&lt;/</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
      </span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>通过javascript的onfocus和onkeyup实现监听表单域:</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:eacbbe14-957a-4848-924b-7aeac77c4cab" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">&lt;</span><span style="color: #000000;">input  type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span><span style="color: #000000;">  </span><span style="color: #0000FF;">class</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">textbox</span><span style="color: #800000;">"</span><span style="color: #000000;"> onfocus</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">checkLogin(this);</span><span style="color: #800000;">"</span><span style="color: #000000;"> onkeyup</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">checkLogin(this);</span><span style="color: #800000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">width:120px;</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">/&gt;</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>ajax的自动验证:其中用到一个bp.js,是已经封装好的xmlhttprequest对象的,可以到我下面的项目中下载到</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:06b10f00-ee3b-400f-a409-8de506fb354e" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">function checkLogin(node) {
    clearError();
    </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (bp.String.trim(node.value)</span><span style="color: #000000;">!=</span><span style="color: #800000;">""</span><span style="color: #000000;">) {
      var url </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">/test/response_validate</span><span style="color: #800000;">"</span><span style="color: #000000;">;
      var params </span><span style="color: #000000;">=</span><span style="color: #000000;"> [];
      params[</span><span style="color: #800000;">"</span><span style="color: #800000;">command</span><span style="color: #800000;">"</span><span style="color: #000000;">] </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">logincheck</span><span style="color: #800000;">"</span><span style="color: #000000;">;
      params[</span><span style="color: #800000;">"</span><span style="color: #800000;">login</span><span style="color: #800000;">"</span><span style="color: #000000;">] </span><span style="color: #000000;">=</span><span style="color: #000000;"> encodeURI(bp.String.trim(node.value));
      var v </span><span style="color: #000000;">=</span><span style="color: #000000;"> validatePath(</span><span style="color: #800000;">"</span><span style="color: #800000;">login</span><span style="color: #800000;">"</span><span style="color: #000000;">,params[</span><span style="color: #800000;">"</span><span style="color: #800000;">login</span><span style="color: #800000;">"</span><span style="color: #000000;">]);
      </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (v</span><span style="color: #000000;">==</span><span style="color: #800000;">""</span><span style="color: #000000;">){
        bp.Io.XhrGet({
          url: url,
          mimeType: </span><span style="color: #800000;">"</span><span style="color: #800000;">text/json</span><span style="color: #800000;">"</span><span style="color: #000000;">,
          params: params,
          load: function(type, data, e) {
            </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (data</span><span style="color: #000000;">==</span><span style="color: #000000;">true){
              loginError </span><span style="color: #000000;">=</span><span style="color: #000000;"> document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">valstatus</span><span style="color: #800000;">"</span><span style="color: #000000;">).innerHTML </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">'</span><span style="color: #800000;">登录名已存在</span><span style="color: #800000;">'</span><span style="color: #000000;">;
              document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">loginValidate</span><span style="color: #800000;">"</span><span style="color: #000000;">).className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">icon_cross</span><span style="color: #800000;">"</span><span style="color: #000000;">;
              node.className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">input_error</span><span style="color: #800000;">"</span><span style="color: #000000;">;
              loginValid </span><span style="color: #000000;">=</span><span style="color: #000000;"> false;
            } </span><span style="color: #0000FF;">else</span><span style="color: #000000;"> {
              loginError </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">""</span><span style="color: #000000;">;
              document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">loginValidate</span><span style="color: #800000;">"</span><span style="color: #000000;">).className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">icon_ok</span><span style="color: #800000;">"</span><span style="color: #000000;">;
              node.className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">textbox</span><span style="color: #800000;">"</span><span style="color: #000000;">;
              loginValid </span><span style="color: #000000;">=</span><span style="color: #000000;"> true;
            }
          },
          error: function(type, data, e) {}
        });
      } </span><span style="color: #0000FF;">else</span><span style="color: #000000;"> {
        loginError </span><span style="color: #000000;">=</span><span style="color: #000000;"> document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">valstatus</span><span style="color: #800000;">"</span><span style="color: #000000;">).innerHTML </span><span style="color: #000000;">=</span><span style="color: #000000;"> v;
        document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">loginValidate</span><span style="color: #800000;">"</span><span style="color: #000000;">).className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">icon_cross</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        node.className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">input_error</span><span style="color: #800000;">"</span><span style="color: #000000;">;
        loginValid </span><span style="color: #000000;">=</span><span style="color: #000000;"> false
      }
    } </span><span style="color: #0000FF;">else</span><span style="color: #000000;"> {
      loginError </span><span style="color: #000000;">=</span><span style="color: #000000;"> validatePath(</span><span style="color: #800000;">"</span><span style="color: #800000;">login</span><span style="color: #800000;">"</span><span style="color: #000000;">, </span><span style="color: #800000;">""</span><span style="color: #000000;">);
      document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">loginValidate</span><span style="color: #800000;">"</span><span style="color: #000000;">).className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">""</span><span style="color: #000000;">;
      node.className </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">textbox</span><span style="color: #800000;">"</span><span style="color: #000000;">;
    }
  }</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>后台:</p>
<p>这个是rails的后台,通过render :partial返回数据给客户端,当然可以是任何平台下的,例如java平台下的可以用servlet的out.println(...)返回</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:e0761550-6ed2-4c68-9c1f-0f4c01232214" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">  </span><span style="color: #0000FF;">def</span><span style="color: #000000;"> response_validate
       </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> params[:login]
      name </span><span style="color: #000000;">=</span><span style="color: #000000;"> params[:login]
      puts name
      </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> name </span><span style="color: #000000;">==</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">aaaaaa</span><span style="color: #800000;">"</span><span style="color: #000000;">
      @value </span><span style="color: #000000;">=</span><span style="color: #000000;"> true
      render :partial </span><span style="color: #000000;">=&gt;</span><span style="color: #000000;"> </span><span style="color: #800000;">'</span><span style="color: #800000;">show_info</span><span style="color: #800000;">'</span><span style="color: #000000;">
      </span><span style="color: #0000FF;">else</span><span style="color: #000000;">
        @value </span><span style="color: #000000;">=</span><span style="color: #000000;"> false
        render :partial </span><span style="color: #000000;">=&gt;</span><span style="color: #000000;"> </span><span style="color: #800000;">'</span><span style="color: #800000;">show_info</span><span style="color: #800000;">'</span><span style="color: #000000;">
      end  
    end
  end</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>完整源码下载:</p>
<p><a title="http://www.namipan.com/d/0c7456748d0877cb1cb939583f14eadce76dfb2118920100" href="http://www.namipan.com/d/0c7456748d0877cb1cb939583f14eadce76dfb2118920100">http://www.namipan.com/d/0c7456748d0877cb1cb939583f14eadce76dfb2118920100</a></p><img src ="http://www.blogjava.net/fl1429/aggbug/270076.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-05-11 17:24 <a href="http://www.blogjava.net/fl1429/archive/2009/05/11/270076.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Rails   Ajax    成功使用xmlHttpRequest</title><link>http://www.blogjava.net/fl1429/archive/2009/05/08/269670.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 08 May 2009 10:54:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/05/08/269670.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/269670.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/05/08/269670.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/269670.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/269670.html</trackback:ping><description><![CDATA[<p>用了rails后,好久没有用xmlHttpRequest对象了,因为rails把xmlHttpRequest给封装了,rails自带了很多ajax方法,今天用了下xmlhttprequest,还真遇到不少麻烦</p> <p>测试通过:</p> <p>opera 9.6 + IE 6.0 + FF 3 + chrome 2</p> <p>html:</p> <div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:4b108b29-d182-4e8b-ba9d-c2b0f96607fa" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">&lt;</span><span style="color: #000000;">span id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">valstatus</span><span style="color: #800000;">"</span><span style="color: #000000;">&gt;&lt;/</span><span style="color: #000000;">span</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">td</span><span style="color: #000000;">&gt;&lt;</span><span style="color: #000000;">input name</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">loginname</span><span style="color: #800000;">"</span><span style="color: #000000;"> type</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">text</span><span style="color: #800000;">"</span><span style="color: #000000;"> id</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">ctl00_main_content_txtLogin</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #0000FF;">class</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">textbox</span><span style="color: #800000;">"</span><span style="color: #000000;"> onfocus</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">checkLogin(this);</span><span style="color: #800000;">"</span><span style="color: #000000;"> onkeyup</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">checkLogin(this);</span><span style="color: #800000;">"</span><span style="color: #000000;"> style</span><span style="color: #000000;">=</span><span style="color: #800000;">"</span><span style="color: #800000;">width:120px;</span><span style="color: #800000;">"</span><span style="color: #000000;"> </span><span style="color: #000000;">/&gt;&lt;/</span><span style="color: #000000;">td</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">
</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div>
<p>javascript:</p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:7f5a154f-e7b0-4d2f-9b2c-2f615594ff89" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">  function createXmlHttpRequest(){ </span><span style="color: #000000;">//</span><span style="color: #000000;">创建对象
    </span><span style="color: #0000FF;">try</span><span style="color: #000000;">{
      xmlHttp </span><span style="color: #000000;">=</span><span style="color: #000000;"> new ActiveXObject(</span><span style="color: #800000;">"</span><span style="color: #800000;">Msxml2.XMLHTTP</span><span style="color: #800000;">"</span><span style="color: #000000;">);
    }catch(e){
      </span><span style="color: #0000FF;">try</span><span style="color: #000000;">{
        xmlHttp </span><span style="color: #000000;">=</span><span style="color: #000000;"> new ActiveXObject(</span><span style="color: #800000;">"</span><span style="color: #800000;">Microsoft.XMLHTTP</span><span style="color: #800000;">"</span><span style="color: #000000;">);
      }catch(e2){
        xmlHttp </span><span style="color: #000000;">=</span><span style="color: #000000;"> false;
      }
    }
    </span><span style="color: #0000FF;">if</span><span style="color: #000000;">(!xmlHttp </span><span style="color: #000000;">&amp;&amp;</span><span style="color: #000000;"> typeof XMLHttpRequest </span><span style="color: #000000;">!=</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">undefined</span><span style="color: #800000;">"</span><span style="color: #000000;">)
    {
      xmlHttp </span><span style="color: #000000;">=</span><span style="color: #000000;"> new XMLHttpRequest();
    }  
  }
  
    function checkLogin(node){ </span><span style="color: #000000;">//</span><span style="color: #000000;"> html中触发的js函数
    var loginname </span><span style="color: #000000;">=</span><span style="color: #000000;"> document.getElementById(</span><span style="color: #800000;">'</span><span style="color: #800000;">ctl00_main_content_txtLogin</span><span style="color: #800000;">'</span><span style="color: #000000;">).value;
    createXmlHttpRequest();
    xmlHttp.open(</span><span style="color: #800000;">"</span><span style="color: #800000;">Get</span><span style="color: #800000;">"</span><span style="color: #000000;">,</span><span style="color: #800000;">"</span><span style="color: #800000;">/home/response_validate?login=</span><span style="color: #800000;">"</span><span style="color: #000000;">+</span><span style="color: #000000;">loginname</span><span style="color: #000000;">+</span><span style="color: #800000;">"</span><span style="color: #800000;">&amp;ts=</span><span style="color: #800000;">"</span><span style="color: #000000;">+</span><span style="color: #000000;">new Date().toString(),true);
    xmlHttp.send(null);
    xmlHttp.onreadystatechange </span><span style="color: #000000;">=</span><span style="color: #000000;"> processor; </span><span style="color: #000000;">//</span><span style="color: #000000;">注意这里processor不能有括号
  }
  
    function processor(){   </span><span style="color: #000000;">//</span><span style="color: #000000;">回调函数
    </span><span style="color: #0000FF;">if</span><span style="color: #000000;">(xmlHttp.readyState </span><span style="color: #000000;">==</span><span style="color: #000000;"> </span><span style="color: #000000;">4</span><span style="color: #000000;">  </span><span style="color: #000000;">||</span><span style="color: #000000;"> xmlHttp.readyState </span><span style="color: #000000;">==</span><span style="color: #000000;"> </span><span style="color: #800000;">'</span><span style="color: #800000;">complete</span><span style="color: #800000;">'</span><span style="color: #000000;">){ </span><span style="color: #000000;">//</span><span style="color: #000000;">注意S要大写
      </span><span style="color: #0000FF;">if</span><span style="color: #000000;"> (xmlHttp.status </span><span style="color: #000000;">==</span><span style="color: #000000;"> </span><span style="color: #000000;">200</span><span style="color: #000000;">){
        var    responsetext </span><span style="color: #000000;">=</span><span style="color: #000000;"> xmlHttp.responseText;      
        </span><span style="color: #0000FF;">if</span><span style="color: #000000;">((responsetext.toString()) </span><span style="color: #000000;">==</span><span style="color: #000000;"> </span><span style="color: #800000;">"</span><span style="color: #800000;">true</span><span style="color: #800000;">"</span><span style="color: #000000;">){
          loginError </span><span style="color: #000000;">=</span><span style="color: #000000;"> document.getElementById(</span><span style="color: #800000;">"</span><span style="color: #800000;">valstatus</span><span style="color: #800000;">"</span><span style="color: #000000;">).innerHTML </span><span style="color: #000000;">=</span><span style="color: #000000;"> </span><span style="color: #800000;">'</span><span style="color: #800000;">该登录名已经被使用</span><span style="color: #800000;">'</span><span style="color: #000000;">;   
          
        }</span><span style="color: #0000FF;">else</span><span style="color: #000000;">{
         alert(</span><span style="color: #800000;">"</span><span style="color: #800000;">测试</span><span style="color: #800000;">"</span><span style="color: #000000;">);
        }
      }
    }
  }</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div>
<p>服务器端:</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:f76b13c8-89cf-453b-b4c0-7678080f0172" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">  </span><span style="color: #0000FF;">def</span><span style="color: #000000;"> response_validate
    @login_name </span><span style="color: #000000;">=</span><span style="color: #000000;"> params[:login]    
    @value </span><span style="color: #000000;">=</span><span style="color: #000000;"> true
   render :partial</span><span style="color: #000000;">=&gt;</span><span style="color: #800000;">'</span><span style="color: #800000;">response_validate</span><span style="color: #800000;">'</span><span style="color: #000000;">
  end</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>partial:</p>
<p>
<div class="wlWriterEditableSmartContent" id="scid:57F11A72-B0E5-49c7-9094-E3A15BD5B5E6:caf50e50-8cd6-4d4d-b1b9-5489389753d4" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"><pre style="background-color:#C0C0C0;overflow: auto;"><span style="color: #000000;">&lt;%=</span><span style="color: #000000;"> @value </span><span style="color: #000000;">%&gt;</span></pre><!-- Code inserted with Steve Dunn's Windows Live Writer Code Formatter Plugin.  http://dunnhq.com --></div></p>
<p>总结:</p>
<p>1,rails中服务器返回text数据,通过render的方式,不想java中是通过 out.println 返回的</p>
<p>2,xmlHttp.onreadystatechange = processor;这里的processor后不能有(),不知道为什么,不然只能返回到1</p>
<p>3,readyState 的s必须大写,不然在opera和ff中会有bug的</p>
<p>4,数据改变为string,js是通过toString()方法,例如 responsetext.toString()</p>
<p>5,为了防止缓存问题可以再发送请求的时候加个随机的数据,例如上面的 xmlHttp.open("Get","/home/response_validate?login="+loginname+"&amp;ts="+new Date().toString(),true);</p>
<p>ref:</p>
<p><a title="http://www.cnblogs.com/chy710/archive/2007/04/15/713868.html" href="http://www.cnblogs.com/chy710/archive/2007/04/15/713868.html">http://www.cnblogs.com/chy710/archive/2007/04/15/713868.html</a></p>
<p><a title="http://bbs.blueidea.com/thread-2764862-1-1.html" href="http://bbs.blueidea.com/thread-2764862-1-1.html">http://bbs.blueidea.com/thread-2764862-1-1.html</a></p>
<p><a title="http://topic.csdn.net/u/20081007/08/d48c3061-760f-4831-9187-540b0be5eb31.html" href="http://topic.csdn.net/u/20081007/08/d48c3061-760f-4831-9187-540b0be5eb31.html">http://topic.csdn.net/u/20081007/08/d48c3061-760f-4831-9187-540b0be5eb31.html</a></p>
<p><a title="http://www.tctl.com.cn/accp/1472/1473/50006.html" href="http://www.tctl.com.cn/accp/1472/1473/50006.html">http://www.tctl.com.cn/accp/1472/1473/50006.html</a></p><img src ="http://www.blogjava.net/fl1429/aggbug/269670.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-05-08 18:54 <a href="http://www.blogjava.net/fl1429/archive/2009/05/08/269670.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css  背景透明</title><link>http://www.blogjava.net/fl1429/archive/2009/04/27/267709.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Mon, 27 Apr 2009 05:05:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/27/267709.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/267709.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/27/267709.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/267709.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/267709.html</trackback:ping><description><![CDATA[<p>效果预览:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/css_B791/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="337" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/css_B791/image_thumb.png" width="389" border="0"></a> </p> <p>css:</p> <div class="csharpcode"><pre><span class="lnum">   1:  </span><span class="kwrd">&lt;</span><span class="html">style</span> <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">&gt;</span></pre><pre><span class="lnum">   2:  </span><span class="rem">&lt;!--</span></pre><pre><span class="lnum">   3:  </span><span class="rem">body{</span></pre><pre><span class="lnum">   4:  </span><span class="rem">    margin:0;</span></pre><pre><span class="lnum">   5:  </span><span class="rem">    padding:0;</span></pre><pre><span class="lnum">   6:  </span><span class="rem">    background-color:#FFFFFF;</span></pre><pre><span class="lnum">   7:  </span><span class="rem">}</span></pre><pre><span class="lnum">   8:  </span><span class="rem">.alpha1,.alpha2{</span></pre><pre><span class="lnum">   9:  </span><span class="rem">    width:100%;</span></pre><pre><span class="lnum">  10:  </span><span class="rem">    height:auto;</span></pre><pre><span class="lnum">  11:  </span><span class="rem">    min-height:250px;/* 必需 */</span></pre><pre><span class="lnum">  12:  </span><span class="rem">    _height:250px;/* 必需 */</span></pre><pre><span class="lnum">  13:  </span><span class="rem">    overflow:hidden;</span></pre><pre><span class="lnum">  14:  </span><span class="rem">    background-color:#FF0000;/* 背景色 */</span></pre><pre><span class="lnum">  15:  </span><span class="rem">}</span></pre><pre><span class="lnum">  16:  </span><span class="rem">.alpha1{</span></pre><pre><span class="lnum">  17:  </span><span class="rem">    filter:alpha(opacity=20); /* IE 透明度20% */</span></pre><pre><span class="lnum">  18:  </span><span class="rem">}</span></pre><pre><span class="lnum">  19:  </span><span class="rem">.alpha2{</span></pre><pre><span class="lnum">  20:  </span><span class="rem">    background-color:#FFFFFF;</span></pre><pre><span class="lnum">  21:  </span><span class="rem">    -moz-opacity:0.8; /* Moz + FF 透明度20%*/</span></pre><pre><span class="lnum">  22:  </span><span class="rem">    opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/</span></pre><pre><span class="lnum">  23:  </span><span class="rem">}</span></pre><pre><span class="lnum">  24:  </span><span class="rem">.ap2{</span></pre><pre><span class="lnum">  25:  </span><span class="rem">    position:absolute;</span></pre><pre><span class="lnum">  26:  </span><span class="rem">}</span></pre><pre><span class="lnum">  27:  </span><span class="rem">--&gt;</span></pre><pre><span class="lnum">  28:  </span><span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span></pre></div>
<p>
<style type="text/css">.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; }
</style>
html:</p>
<div class="csharpcode"><pre><span class="lnum">   1:  </span>&lt;!--S Demo--&gt;</pre><pre><span class="lnum">   2:  </span>&lt;div <span class="kwrd">class</span>=<span class="str">"alpha1"</span>&gt;</pre><pre><span class="lnum">   3:  </span>  &lt;div <span class="kwrd">class</span>=<span class="str">"ap2"</span>&gt;</pre><pre><span class="lnum">   4:  </span>  &lt;p&gt;背景为红色(#FF0000)，透明度20%。&lt;/p&gt;</pre><pre><span class="lnum">   5:  </span>  &lt;/div&gt;</pre><pre><span class="lnum">   6:  </span>  &lt;!--[<span class="kwrd">if</span> IE]&gt;&lt;![<span class="kwrd">if</span> !IE]&gt;&lt;![endif]--&gt; &lt;div <span class="kwrd">class</span>=<span class="str">"alpha2"</span>&gt;&lt;/div&gt; &lt;!--[<span class="kwrd">if</span> IE]&gt;&lt;![endif]&gt;&lt;![endif]--&gt;</pre><pre><span class="lnum">   7:  </span>&lt;/div&gt;</pre></div>
<style type="text/css">.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; }
</style><img src ="http://www.blogjava.net/fl1429/aggbug/267709.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-27 13:05 <a href="http://www.blogjava.net/fl1429/archive/2009/04/27/267709.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css 横排</title><link>http://www.blogjava.net/fl1429/archive/2009/04/27/267708.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Mon, 27 Apr 2009 05:01:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/27/267708.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/267708.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/27/267708.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/267708.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/267708.html</trackback:ping><description><![CDATA[<p>效果预览:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/css_B62D/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="60" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/css_B62D/image_thumb.png" width="732" border="0"></a> </p> <p>css:</p> <div class="csharpcode"><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">style</span>   <span class="attr">type</span><span class="kwrd">="text/css"</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="rem">&lt;!--   </span></pre><pre class="alt"><span class="rem">  .table_tile{   </span></pre><pre><span class="rem">  text-align:left;   </span></pre><pre><span class="rem">  height:   20px;   </span></pre><pre class="alt"><span class="rem">  width:   25%;   </span></pre><pre><span class="rem">  float:   left;   </span></pre><pre class="alt"><span class="rem">  }   </span></pre><pre><span class="rem">  .table_tile_{   </span></pre><pre class="alt"><span class="rem">  text-align:right;   </span></pre><pre><span class="rem">  background-color:#0000FF;   </span></pre><pre class="alt"><span class="rem">  height:   20px;   </span></pre><pre class="alt"><span class="rem">  background-color:#999966;   </span></pre><pre><span class="rem">  width:   25%;   </span></pre><pre class="alt"><span class="rem">  float:   left;   </span></pre><pre><span class="rem">  }   </span></pre><pre class="alt"><span class="rem">  .table_tile_bottom{   </span></pre><pre><span class="rem">  text-align:left;   </span></pre><pre class="alt"><span class="rem">  background-color:#FFF000;   </span></pre><pre><span class="rem">  height:   20px;   </span></pre><pre class="alt"><span class="rem">  width:   25%;   </span></pre><pre><span class="rem">  float:   left;   </span></pre><pre class="alt"><span class="rem">  }   </span></pre><pre><span class="rem">  --&gt;</span>   </pre><pre class="alt">  <span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span>  </pre></div>
<style type="text/css">.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; }
</style>

<p></p>
<p>&nbsp;</p>
<p>html:</p>
<div class="csharpcode"><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tr"</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile"</span><span class="kwrd">&gt;</span>top0<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile_"</span><span class="kwrd">&gt;</span>top1<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile"</span><span class="kwrd">&gt;</span>top2<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile"</span><span class="kwrd">&gt;</span>top3<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre class="alt">    </pre><pre>  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tr"</span><span class="kwrd">&gt;</span>   </pre><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile_bottom"</span><span class="kwrd">&gt;</span>bottom0<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile_bottom"</span><span class="kwrd">&gt;</span>bottom1<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>     </pre><pre class="alt">  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile_bottom"</span><span class="kwrd">&gt;</span>bottom2<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre><pre>  <span class="kwrd">&lt;</span><span class="html">div</span>   <span class="attr">class</span><span class="kwrd">="table_tile_bottom"</span><span class="kwrd">&gt;</span>bottom3<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>     </pre><pre class="alt">  <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>   </pre></div>
<style type="text/css">.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; }
</style>

<p>&nbsp;</p>
<p>或者来个更简单的:</p>
<div class="csharpcode"><pre class="alt"><span class="kwrd">&lt;</span><span class="html">style</span><span class="kwrd">&gt;</span></pre><pre> .float_left{   </pre><pre class="alt">  text-align:left;   </pre><pre>  height:   20px;   </pre><pre class="alt">  width:   25%;   </pre><pre>  float:   left;   </pre><pre class="alt">  } </pre><pre><span class="kwrd">&lt;/</span><span class="html">style</span><span class="kwrd">&gt;</span></pre><pre class="alt">&nbsp;</pre><pre><span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span> = <span class="kwrd">"float_left"</span><span class="kwrd">&gt;</span>asdasd<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre><pre class="alt"><span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span> = <span class="kwrd">"float_left"</span><span class="kwrd">&gt;</span>asdasd<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre><pre><span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span> = <span class="kwrd">"float_left"</span><span class="kwrd">&gt;</span>why<span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre></div>
<style type="text/css">.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; }
</style><img src ="http://www.blogjava.net/fl1429/aggbug/267708.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-27 13:01 <a href="http://www.blogjava.net/fl1429/archive/2009/04/27/267708.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Js  本页面传值</title><link>http://www.blogjava.net/fl1429/archive/2009/04/17/266199.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 17 Apr 2009 09:38:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/17/266199.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/266199.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/17/266199.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/266199.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/266199.html</trackback:ping><description><![CDATA[<p>记得以前在学校的时候,例如要修改信息,需要要修改的部分的值显示出来,都是先把数据传到后台,然后再在前台显示的,想想真够笨的,这个可以在客户端就实现的,何必要传到后台呢</p> <p>环境 : rails 下</p> <p>例如: </p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Js_F4D6/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="236" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Js_F4D6/image_thumb.png" width="485" border="0"></a></p> <p>我点击修改后显示成这样:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Js_F4D6/image_4.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="128" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Js_F4D6/image_thumb_1.png" width="463" border="0"></a> </p> <p>关键实现过程:</p> <p>1,列表部分,即第一副图,蓝色部分即实现了传值</p> <table cellspacing="0" cellpadding="2" width="874" border="1"> <tbody> <tr> <td valign="top" width="872"> <p>&lt;% i=0 %&gt;<br>&lt;% if @group_page %&gt;<br>&nbsp; &lt;% for group in @group_page&nbsp; %&gt;<br>&nbsp;&nbsp;&nbsp; &lt;% i+=1 %&gt;<br>&nbsp;&nbsp;&nbsp; &lt;tr &lt;%= i%2==0 ? "class='bg'" : '' %&gt; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td class="first style1"&gt;&lt;%= group.id.to_s&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%=&nbsp; group.group_name==nil ? '': group.group_name.to_s&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%=&nbsp; group.display_order==nil ? '': group.display_order.to_s&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%=&nbsp; group.update_dt.strftime("%Y-%m-%d")&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%=&nbsp; group.status.to_s == '0' ? '正常': "禁用"&nbsp;&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%=&nbsp; group.group_comment==nil ? '': group.group_comment.to_s&nbsp; %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td<font color="#0000ff">&gt;&lt;%= link_to image_tag('/images/cs/edit-icon.gif'),{},{:onclick =&gt;"show_div('" + group.id.to_s + "','" + group.group_name.to_s + "','" + group.display_order.to_s + "','" + group.status.to_s + "','" + group.group_comment.to_s + "');return false;" }&nbsp; %&gt;&lt;/td</font>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;td&gt;&lt;%= link_to image_tag('/images/cs/hr.gif'),{:action=&gt;'deletegroup',:id=&gt;group.id.to_s},{:confirm=&gt;'确定要删除吗?'} %&gt;&lt;/td&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/tr&gt;<br>&nbsp; &lt;% end %&gt;<br>&lt;% end %&gt;</p></td></tr></tbody></table> <p>2,js函数部分</p> <table cellspacing="0" cellpadding="2" width="659" border="1"> <tbody> <tr> <td valign="top" width="657"> <p>&lt;script&gt; <p>function show_div(object1,object2,object3,object4,object5)<br> {<br>&nbsp;&nbsp; document.getElementById("original_group").style.display = "none";<br>&nbsp;&nbsp; document.getElementById("modify_group").style.display="";<br>&nbsp;&nbsp; document.getElementById("group_id").value =object1;<br>&nbsp;&nbsp; document.getElementById("modify_name").value =object2;<br>&nbsp;&nbsp; document.getElementById("modify_order").value =object3;<br>&nbsp;&nbsp; if ( object4 == "0"){<br>&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById('modify_status').selectedIndex=0;<br>&nbsp;&nbsp; }<br>&nbsp;&nbsp; if( object4 == "1"){<br>&nbsp;&nbsp;&nbsp;&nbsp; document.getElementById('modify_status').selectedIndex=1;<br>&nbsp;&nbsp; }<br>&nbsp;&nbsp; document.getElementById("modify_comment").value =object5;<br> } <p>&lt;/script&gt;</p></td></tr></tbody></table> <p></p> <p>这样你就实现了客户端利用js传值...............</p><img src ="http://www.blogjava.net/fl1429/aggbug/266199.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-17 17:38 <a href="http://www.blogjava.net/fl1429/archive/2009/04/17/266199.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Js 控制表单域</title><link>http://www.blogjava.net/fl1429/archive/2009/04/16/266023.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Thu, 16 Apr 2009 11:40:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/16/266023.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/266023.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/16/266023.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/266023.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/266023.html</trackback:ping><description><![CDATA[<p><font color="#0000ff">js改变下拉框的显示</font></p>
<table border="1" cellpadding="2" cellspacing="0" width="562">
    <tbody>
        <tr>
            <td valign="top" width="560">
            <p>&lt;select name="s" id="s"&gt;<br />
            &lt;OPTION VALUE="1"&gt;1&lt;/OPTION&gt;<br />
            &lt;OPTION value="2"&gt;2&lt;/OPTION&gt;<br />
            &lt;OPTION value="3"&gt;3&lt;/OPTION&gt;<br />
            &lt;/select&gt;  </p>
            <p>&lt;script type="text/javascript"&gt;<br />
            s.options[0].selected=true&nbsp; //方法1<br />
            s.selectedIndex=1; //方法2<br />
            document.getElementById('ss').selectedIndex=1;&nbsp; //方法3,建议使用这个方法<br />
            &lt;/script&gt; </p>
            </td>
        </tr>
    </tbody>
</table>
<p><font color="#0000ff">ref：</font></p>
<p><font color="#0000ff">http://www.javascriptkit.com/jsref/select.shtml<br />
</font></p>
<p><font color="#0000ff">js验证为正整数</font></p>
<table border="1" cellpadding="2" cellspacing="0" width="400">
    <tbody>
        <tr>
            <td valign="top" width="400">&lt;script&gt;<br />
            var re = /^[1-9]d*$/;&nbsp;&nbsp; //智能验证单个字符
            <p>if (!re.test(document.getElementById('group_order').value)){<br />
            &nbsp;&nbsp; alert("组排序必须为数字!");<br />
            &nbsp;&nbsp; document.getElementById('group_order').focus();<br />
            &nbsp;&nbsp; return false;<br />
            }</p>
            <br />
            &lt;/script&gt;</td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table border="1" cellpadding="2" cellspacing="0" width="400">
    <tbody>
        <tr>
            <td valign="top" width="400">
            <p>if(value &lt;0&nbsp; ||&nbsp; value!=parseInt(value) ){<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("不是正整数");<br />
            }else{<br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("是正整数");<br />
            }</p>
            </td>
        </tr>
    </tbody>
</table>
<p><font color="#0000ff">js发送表单(方法一):</font> check_input 是js函数,但是这个方法会把页面内所有的表单都发送掉</p>
<table border="1" cellpadding="2" cellspacing="0" width="780">
    <tbody>
        <tr>
            <td valign="top" width="778">
            <p>&nbsp; &lt;% form_tag( {:controller=&gt;"transaction",:action=&gt;"check_cid"},{:name=&gt;"form1",:method=&gt;"post",:multipart=&gt;"true" <font color="#0000ff">,:onsubmit=&gt;&#8221;return check_input();&#8221;})</font> do %&gt;<br />
            <br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;% end %&gt;</p>
            </td>
        </tr>
    </tbody>
</table>
<p><font color="#0000ff">js发送表单(方法二):</font>&nbsp; check_original 是js函数,这个方法会发送指定的form,无论方法一,方法二 都别忘了 前面加 return</p>
<table border="1" cellpadding="2" cellspacing="0" width="762">
    <tbody>
        <tr>
            <td valign="top" width="760">
            <p>&nbsp; &lt;%= form_tag({:controller=&gt;"program",:action=&gt;"index"},{:name=&gt;"newform",:method=&gt;"post",:multipart=&gt;"true"})&nbsp; %&gt;&nbsp;&nbsp;&nbsp;&nbsp; <br />
            &lt;%= submit_tag "添加",{:name=&gt;'newgroup'<font color="#0000ff">,:onclick=&gt;'return check_original();</font>'}&nbsp; %&gt;<br />
            &nbsp; &lt;%= form_tag %&gt;</p>
            </td>
        </tr>
    </tbody>
</table>
<p>待续................</p>
<img src ="http://www.blogjava.net/fl1429/aggbug/266023.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-16 19:40 <a href="http://www.blogjava.net/fl1429/archive/2009/04/16/266023.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Css  图解margin 和 padding 的区别</title><link>http://www.blogjava.net/fl1429/archive/2009/04/14/265576.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Tue, 14 Apr 2009 09:54:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/14/265576.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/265576.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/14/265576.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/265576.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/265576.html</trackback:ping><description><![CDATA[<p>以前常常以为margin 和 padding的区别,而老是google,现在理清了...</p> <p>图解:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Cssmarginpadding_FAB3/box.gif"><img title="box" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="108" alt="box" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/Cssmarginpadding_FAB3/box_thumb.gif" width="244" border="0"></a> </p> <p>margin : 相当于组件的 外边缘 与外部组件的距离</p> <p>padding : 相当于组件的 内边缘 与内部组件的距离 </p><img src ="http://www.blogjava.net/fl1429/aggbug/265576.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-14 17:54 <a href="http://www.blogjava.net/fl1429/archive/2009/04/14/265576.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS  页面自动加载函数</title><link>http://www.blogjava.net/fl1429/archive/2009/04/08/264453.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Wed, 08 Apr 2009 06:59:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/08/264453.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/264453.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/08/264453.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/264453.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/264453.html</trackback:ping><description><![CDATA[<p>测试通过: ie6 + opera + FF + chrome</p>
<table cellspacing="0" cellpadding="2" width="400" border="0"><tbody><tr>
    <td valign="top" width="400">
    <p><font color="#0000ff">if (document.all) {<br />
    window.attachEvent('onload', arewrite);<br />
    window.attachEvent('onload', jsStock);<br />
    }<br />
    else {<br />
    window.addEventListener('load', arewrite, false);<br />
    window.addEventListener('load', jsStock, false);<br />
    }</font> </p>
    </td>
</tr>
</tbody>
</table>
<img src ="http://www.blogjava.net/fl1429/aggbug/264453.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-08 14:59 <a href="http://www.blogjava.net/fl1429/archive/2009/04/08/264453.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS           get   div  value</title><link>http://www.blogjava.net/fl1429/archive/2009/04/08/264444.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Wed, 08 Apr 2009 05:38:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/08/264444.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/264444.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/08/264444.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/264444.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/264444.html</trackback:ping><description><![CDATA[<p>原理:采用innerText 或者 innerHTML
<p>&lt;script language=&#8221;javascript&#8221;&gt;
<p>var stock_code = stockcode.innerText;
<p>var stock_code = stockcode.innerHTML;
<p>&lt;/script&gt;
<p>&lt;div id="stockcode" style="display:none"&gt;<br />
test<br />
&lt;/div&gt;</p>
<img src ="http://www.blogjava.net/fl1429/aggbug/264444.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-08 13:38 <a href="http://www.blogjava.net/fl1429/archive/2009/04/08/264444.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>JS  remove blank space</title><link>http://www.blogjava.net/fl1429/archive/2009/04/08/264442.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Wed, 08 Apr 2009 05:33:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/08/264442.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/264442.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/08/264442.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/264442.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/264442.html</trackback:ping><description><![CDATA[<p>“test string”.replace(/^\s*|\s*$/g,'');</p> <p>ref:</p> <p><a title="http://www.dreamincode.net/code/snippet980.htm" href="http://www.dreamincode.net/code/snippet980.htm">http://www.dreamincode.net/code/snippet980.htm</a></p><img src ="http://www.blogjava.net/fl1429/aggbug/264442.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-08 13:33 <a href="http://www.blogjava.net/fl1429/archive/2009/04/08/264442.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Css Sprites 图片拼合</title><link>http://www.blogjava.net/fl1429/archive/2009/04/01/263342.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Wed, 01 Apr 2009 05:42:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/04/01/263342.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/263342.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/04/01/263342.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/263342.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/263342.html</trackback:ping><description><![CDATA[<p>背景:一些大型网站的看到的图片,表面上是一张图片实质上是一个大图片里面合成了n多图片</p> <p>技术原理:<font color="#0000ff">CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数. 多个图片将以一定间距合并为一个大图片文件. 页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置.</font></p> <p>例如facebook,这个网址:<a title="http://static.ak.facebook.com/images/sprite/icons.png" href="http://static.ak.facebook.com/images/sprite/icons.png">http://static.ak.facebook.com/images/sprite/icons.png</a></p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_2.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="571" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_thumb.png" width="244" border="0"></a></p> <p>结果一张png图片合成了n张小图片,这样是为了提高网页的运行速度,只需要一次全部加载 ,那么这样的css sprites是怎么做出来的呢,如今该技术已经普及了,下面我就来说一下</p> <p>案列一:利用在线工具自动生成</p> <p>1,打开网址:<a title="http://www.csssprites.com/" href="http://www.csssprites.com/">http://www.csssprites.com/</a></p> <p>2,上传你需要合成的图片必须为jpg,gif,png格式的,例如这里我上传了下面这三张图</p> <p>&nbsp;<a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/bg_main3_2.gif"><img title="bg_main3" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="48" alt="bg_main3" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/bg_main3_thumb.gif" width="48" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/pattern_2.gif"><img title="pattern" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="36" alt="pattern" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/pattern_thumb.gif" width="60" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/title_icon_2.jpg"><img title="title_icon" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="22" alt="title_icon" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/title_icon_thumb.jpg" width="22" border="0"></a> </p> <p>经过generate后:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_4.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="268" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_thumb_1.png" width="447" border="0"></a> </p> <p>3,ok...success.....你可以打开上面的网址看看拼合后的图片和example的网页,进入网页后你可以另存为到本地,你就可以看到个究竟了,主要就是利用了css的background-position的属性</p> <p>案列二:利用客户端的软件和图片生成css样式</p> <p>1,在ps里先合成你需要的图片,这里我就不介绍了,我们就拿<a title="http://static.ak.facebook.com/images/sprite/icons.png" href="http://static.ak.facebook.com/images/sprite/icons.png">http://static.ak.facebook.com/images/sprite/icons.png</a> 这张图片来做</p> <p>2,下载bg2css</p> <p><a title="http://www.cssforest.org/blog/index.php?id=129" href="http://www.cssforest.org/blog/index.php?id=129">http://www.cssforest.org/blog/index.php?id=129</a></p> <p>3,利用bg2css,建立你需要的层(即显示的部分呢),再移动位置和调整层的大小,不会的话自己摸索摸索,图片的太小的话可以放大2x,4x倍等,下面是我做的时候界面:</p> <p><a href="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_6.png"><img title="image" style="border-right: 0px; border-top: 0px; display: inline; border-left: 0px; border-bottom: 0px" height="621" alt="image" src="http://www.blogjava.net/images/blogjava_net/fl1429/WindowsLiveWriter/CssSprites_B91C/image_thumb_2.png" width="710" border="0"></a> </p> <p>4,ok...success!....新建一个html试试!</p> <p>案列源码下载:</p> <p><a title="http://www.namipan.com/d/203577c02420df43c6beb9a87dd22225d9d39627e0610000" href="http://www.namipan.com/d/203577c02420df43c6beb9a87dd22225d9d39627e0610000">http://www.namipan.com/d/203577c02420df43c6beb9a87dd22225d9d39627e0610000</a></p> <p>还有一个在线的css sprites制作工具,但是我没有成功:<a title="http://spritegen.website-performance.org/" href="http://spritegen.website-performance.org/">http://spritegen.website-performance.org/</a></p> <p>ref:</p> <p><a title="http://www.cssforest.org/blog/index.php?id=129" href="http://www.cssforest.org/blog/index.php?id=129">http://www.cssforest.org/blog/index.php?id=129</a></p><img src ="http://www.blogjava.net/fl1429/aggbug/263342.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-04-01 13:42 <a href="http://www.blogjava.net/fl1429/archive/2009/04/01/263342.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>js前进 后退</title><link>http://www.blogjava.net/fl1429/archive/2009/03/20/261114.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 20 Mar 2009 11:11:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/20/261114.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/261114.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/20/261114.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/261114.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/261114.html</trackback:ping><description><![CDATA[<div align="left">&#160;     go()前进或后退的页面数<br />
<br />
window.history.go(-1) 后退一页<br />
<br />
&lt;a href="javascript:history.go(-1)"&gt;back&lt;/a&gt; &#160;<br />
<br />
history.back();  history.forward()可以实现同样的操作。<br />
<br />
<br />
</div>
<img src ="http://www.blogjava.net/fl1429/aggbug/261114.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-20 19:11 <a href="http://www.blogjava.net/fl1429/archive/2009/03/20/261114.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>体验css+div 之 给整个页面添加渐变背景</title><link>http://www.blogjava.net/fl1429/archive/2009/03/20/261113.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 20 Mar 2009 11:07:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/20/261113.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/261113.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/20/261113.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/261113.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/261113.html</trackback:ping><description><![CDATA[<div align="left">体验css+div 之 给整个页面添加渐变背景<br />
<br />
<br />
<br />
随着WEB2.0网页设计风格的盛行,越来越多的优秀UI出现在各大网站中,它以清爽、简洁、主次分明的特征迎得了广大网页设计师们和各大网站站长们的青睐，而WEB2.0表现最出色的地方就是它对光感效果透彻的运用,经常会看到WEB2.0清新,通透的效果,那么这一效果的实现运用的什么手法呢?它最主要的手法就是色调渐变的运用,如果在一个网页中能够成功运用渐变背景那么整个页面的主次效果就更加的显著,那么如何在CSS+DIV控制的HTML制作中实现:将整个网页背景添加渐变背景呢:下面这些将会让你轻松地解决问题:<br />
<br />
body {<br />
<br />
background: #e9e9e9 url (images / image.gif ) repeat-x;<br />
<br />
}<br />
<br />
小技巧:1.  image.gif----它是一个渐变图片的高度不变的直细条<br />
<br />
2.  我们知道网页宽度是限定的,而高度则是无限延伸的,当网页的高度超过"image.gif"的高度时渐变就会突然停止.不用担心,我们可以把渐变图片变化到一个固定颜色的色值做为背景颜色。而背景图片总是出现在背景颜色的上面，那么当渐变图片结束时，背景颜色就会显示出来了。这里图片和背景颜色之间的转换就看不出来了。<br />
<br />
<br />
eg:<br />
<br />
<br />
&lt;style type="text/css"&gt;<br />
body{<br />
<br />
background: #dae9fe  url(Images/bkgrd.gif)  repeat-x ; /* 背景色渐变 */<br />
<br />
}<br />
<br />
&lt;/style&gt;<br />
<br />
<br />
</div>
<img src ="http://www.blogjava.net/fl1429/aggbug/261113.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-20 19:07 <a href="http://www.blogjava.net/fl1429/archive/2009/03/20/261113.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>js 忽略大小写</title><link>http://www.blogjava.net/fl1429/archive/2009/03/20/261104.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 20 Mar 2009 10:02:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/20/261104.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/261104.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/20/261104.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/261104.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/261104.html</trackback:ping><description><![CDATA[<p>在做js字符串比较时,</p>
<p>本以为js中能有和java中(equalsIgnoreCase())一样很方便的忽略大小写比较时,结果没有</p>
<p>最后必须把两个字符串<span style="color: red">都变为小写,或大写</span>比较就可以了</p>
<p>if(inputCode.toLowerCase() != code.toLowerCase() ) /* 同时转化为小写,就可以忽略大小写 */</p>
<p><br />
link:<br />
http://www.ijavascript.cn/jiaocheng/javascript-indexof-244.html</p>
<img src ="http://www.blogjava.net/fl1429/aggbug/261104.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-20 18:02 <a href="http://www.blogjava.net/fl1429/archive/2009/03/20/261104.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Dreamweaver  让DW支持rhtml</title><link>http://www.blogjava.net/fl1429/archive/2009/03/13/259613.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Fri, 13 Mar 2009 11:44:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/13/259613.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/259613.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/13/259613.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/259613.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/259613.html</trackback:ping><description><![CDATA[<div align="left">1,下载rubyweaver<br />
http://rubyweaver.gilluminate.com/download/<br />
下载rubyweaver-241.mxp<br />
<br />
2,打开dw的扩展管理器<br />
<br />
3,安装下载的rubyweaver-241.mxp&#8230;如下图,你已经就成功安装了!</div>
<div align="left"><img src="http://www.blogjava.net/images/blogjava_net/fl1429/rhtml.jpg" border="0" alt="" /></div>
<div align="left"><br />
4,关闭上面对话框,然后重启dw,编辑rhtml页面,所见即所得!<br />
<br />
<br />
</div>
<img src ="http://www.blogjava.net/fl1429/aggbug/259613.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-13 19:44 <a href="http://www.blogjava.net/fl1429/archive/2009/03/13/259613.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>Css实现圆角框</title><link>http://www.blogjava.net/fl1429/archive/2009/03/11/259003.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Wed, 11 Mar 2009 01:29:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/11/259003.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/259003.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/11/259003.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/259003.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/259003.html</trackback:ping><description><![CDATA[<blockquote> </blockquote>
<p align="left">一法:利用纯css写,但是背景色必须是白色才可以显示圆角,不然的话..会有圆角处会有一块白色<br />
<br />
截图:<br />
<br />
<img src="http://www.blogjava.net/images/blogjava_net/fl1429/cssradius.jpg" width="691" height="303" alt="" /></p>
<p align="left">源码:</p>
<p align="left">
<div style="font-size: 13px; border-top-color: #cccccc; border-left-color: #cccccc; border-right-color: #cccccc; border-bottom-color: #cccccc; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-left-style: solid; border-right-style: solid; border-bottom-style: solid; padding-right: 5px; padding-bottom: 4px; padding-left: 4px; padding-top: 4px; width: 98%; background-color: #eeeeee"><span style="color: #008080; ">&#160;1</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;2</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;3</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">css圆角效果</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;4</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">meta&#160;</span><span style="color: #FF0000; ">http-equiv</span><span style="color: #0000FF; ">="Content-Type"</span><span style="color: #FF0000; ">&#160;content</span><span style="color: #0000FF; ">="text/html;&#160;charset=gb2312"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;5</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">style&#160;</span><span style="color: #FF0000; ">type</span><span style="color: #0000FF; ">="text/css"</span><span style="color: #0000FF; ">&gt;</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;6</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">div.RoundedCorner</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;&#160;#808080</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;7</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.rtop,&#160;b.rbottom</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">display</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">block</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;#FFF</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;8</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.rtop&#160;b,&#160;b.rbottom&#160;b</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">display</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">block</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">height</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;1px</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">overflow</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;hidden</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;&#160;#808080</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;9</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.r1</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;0&#160;5px</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">10</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.r2</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;0&#160;3px</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">11</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.r3</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;0&#160;2px</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">12</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">b.rtop&#160;b.r4,&#160;b.rbottom&#160;b.r4</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;0&#160;1px</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">height</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;2px</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">13</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">body&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">14</span>&#160;<span style="background-color: #F5F5F5; color: #FF0000; ">&#160;&#160;&#160;&#160;background-color</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;#CCCCFF</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">15</span>&#160;<span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">16</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">style</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">17</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">18</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">19</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">table&#160;</span><span style="color: #FF0000; ">width</span><span style="color: #0000FF; ">="600"</span><span style="color: #FF0000; ">&#160;border</span><span style="color: #0000FF; ">="0"</span><span style="color: #FF0000; ">&#160;align</span><span style="color: #0000FF; ">="center"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">20</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">21</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">22</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">div&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="RoundedCorner"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">23</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rtop"</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r1"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r2"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r3"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r4"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">24</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">br</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">25</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">table&#160;</span><span style="color: #FF0000; ">width</span><span style="color: #0000FF; ">="200"</span><span style="color: #FF0000; ">&#160;border</span><span style="color: #0000FF; ">="1"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">26</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">27</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">sdfsdf</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">28</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #FF0000; ">&amp;nbsp;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">29</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">30</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">31</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">sdfsdf;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">32</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #FF0000; ">&amp;nbsp;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">33</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">34</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">35</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">sdfsdfsdf</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">36</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #FF0000; ">&amp;nbsp;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">37</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">38</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">table</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">39</span>&#160;<span style="color: #000000; "><br />
</span><span style="color: #008080; ">40</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">br</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">br</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">41</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rbottom"</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r4"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r3"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r2"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">b&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="r1"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">b</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">42</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">43</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">td</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">44</span>&#160;<span style="color: #000000; ">&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">tr</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">45</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">table</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">46</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">47</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">48</span>&#160;</div>
</p>
<p align="left"  style>二法:利用css加圆角图片制作边框圆角(大网站一般这么做)<br />
思想是实现一个这样的圆角的背景,如果有表格的话,把表格放到该背景下即可<br />
难点在制作圆角图片(4个角四个),有一个简单的办法,如下网址可以直接生成:<br />
http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en<br />
<br />
截图:<br />
<br />
<img src="http://www.blogjava.net/images/blogjava_net/fl1429/cssradius1.jpg" width="820" height="303" alt="" /></p>
<p align="left">其实红色背景部分是四个角的图片加一个中间图片,如下:</p>
<p align="left"><img src="http://www.blogjava.net/images/blogjava_net/fl1429/tr.gif" width="10" height="10" alt="" />&#160;<img src="http://www.blogjava.net/images/blogjava_net/fl1429/bl.gif" border="0" alt="" width="10" height="10" />&#160;<img src="http://www.blogjava.net/images/blogjava_net/fl1429/br.gif" border="0" alt="" width="10" height="10" />&#160;<img src="http://www.blogjava.net/images/blogjava_net/fl1429/nt.gif" border="0" alt="" width="10" height="10" />&#160;<img src="http://www.blogjava.net/images/blogjava_net/fl1429/tl.gif" border="0" alt="" width="10" height="10" /></p>
<p align="left">源码:</p>
<p align="left"></p>
<p align="left">
<div style="background-color:#eeeeee;font-size:13px;border:1px solid #CCCCCC;padding-right: 5px;padding-bottom: 4px;padding-left: 4px;padding-top: 4px;width: 98%;word-break:break-all"><span style="color: #008080; ">&#160;1</span>&#160;<span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;2</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;3</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">Css圆角框</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">2</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">title</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">&#160;4</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">style&#160;</span><span style="color: #FF0000; ">type</span><span style="color: #0000FF; ">="text/css"</span><span style="color: #0000FF; ">&gt;</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;5</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&lt;!--<br />
</span><span style="color: #008080; ">&#160;6</span>&#160;<span style="background-color: #F5F5F5; color: #008000; ">/*</span><span style="background-color: #F5F5F5; color: #008000; ">&#160;set&#160;millions&#160;of&#160;background&#160;images&#160;</span><span style="background-color: #F5F5F5; color: #008000; ">*/</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;7</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbroundbox&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;url(nt.gif)&#160;repeat</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;8</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbtop&#160;div&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;url(tl.gif)&#160;no-repeat&#160;top&#160;left</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">&#160;9</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbtop&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;url(tr.gif)&#160;no-repeat&#160;top&#160;right</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">10</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbbot&#160;div&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;url(bl.gif)&#160;no-repeat&#160;bottom&#160;left</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">11</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbbot&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;background</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;url(br.gif)&#160;no-repeat&#160;bottom&#160;right</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">12</span>&#160;<span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">13</span>&#160;<span style="background-color: #F5F5F5; color: #008000; ">/*</span><span style="background-color: #F5F5F5; color: #008000; ">&#160;height&#160;and&#160;width&#160;stuff,&#160;width&#160;not&#160;really&#160;nessisary.&#160;</span><span style="background-color: #F5F5F5; color: #008000; ">*/</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">14</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbtop&#160;div,&#160;.rbtop,&#160;.rbbot&#160;div,&#160;.rbbot&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">15</span>&#160;<span style="background-color: #F5F5F5; color: #FF0000; ">width</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;100%</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">16</span>&#160;<span style="background-color: #F5F5F5; color: #FF0000; ">height</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;7px</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">17</span>&#160;<span style="background-color: #F5F5F5; color: #FF0000; ">font-size</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;1px</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">18</span>&#160;<span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">19</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbcontent&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;0&#160;7px</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">20</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">.rbroundbox&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;width</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;50%</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;margin</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;1em&#160;auto</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; ">&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">21</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">body&#160;</span><span style="background-color: #F5F5F5; color: #000000; ">{</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">22</span>&#160;<span style="background-color: #F5F5F5; color: #FF0000; ">&#160;&#160;&#160;&#160;background-color</span><span style="background-color: #F5F5F5; color: #000000; ">:</span><span style="background-color: #F5F5F5; color: #0000FF; ">&#160;#33ffcc</span><span style="background-color: #F5F5F5; color: #000000; ">;</span><span style="background-color: #F5F5F5; color: #FF0000; "><br />
</span><span style="color: #008080; ">23</span>&#160;<span style="background-color: #F5F5F5; color: #000000; ">}</span><span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">24</span>&#160;<span style="background-color: #F5F5F5; color: #800000; "><br />
</span><span style="color: #008080; ">25</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;--&gt;<br />
</span><span style="color: #008080; ">26</span>&#160;<span style="background-color: #F5F5F5; color: #800000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">style</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">27</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">meta&#160;</span><span style="color: #FF0000; ">http-equiv</span><span style="color: #0000FF; ">="Content-Type"</span><span style="color: #FF0000; ">&#160;content</span><span style="color: #0000FF; ">="text/html;&#160;charset=gb2312"</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">head</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">28</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">29</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">div&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rbroundbox"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">30</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">div&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rbtop"</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">31</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">div&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rbcontent"</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">32</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">p</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; ">Lorem&#160;ipsum&#160;dolor&#160;sit&#160;amet,&#160;<br />
</span><span style="color: #008080; ">33</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;consectetuer&#160;adipiscing&#160;elit.&#160;Duis&#160;<br />
</span><span style="color: #008080; ">34</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;ornare&#160;ultricies&#160;libero.&#160;Donec&#160;<br />
</span><span style="color: #008080; ">35</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;fringilla,&#160;eros&#160;at&#160;dapibus&#160;fermentum,<br />
</span><span style="color: #008080; ">36</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;tellus&#160;tellus&#160;auctor&#160;erat,&#160;vitae&#160;porta&#160;<br />
</span><span style="color: #008080; ">37</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;magna&#160;libero&#160;sed&#160;libero.&#160;Mauris&#160;sed&#160;leo.&#160;<br />
</span><span style="color: #008080; ">38</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;Aliquam&#160;aliquam.&#160;Maecenas&#160;vestibulum.</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">p</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">39</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;</span><span style="color: #008000; ">&lt;!--</span><span style="color: #008000; ">&#160;/rbcontent&#160;</span><span style="color: #008000; ">--&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">40</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;</span><span style="color: #800000; ">div&#160;</span><span style="color: #FF0000; ">class</span><span style="color: #0000FF; ">="rbbot"</span><span style="color: #0000FF; ">&gt;&lt;</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">41</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">div</span><span style="color: #0000FF; ">&gt;</span><span style="color: #008000; ">&lt;!--</span><span style="color: #008000; ">&#160;/rbroundbox&#160;</span><span style="color: #008000; ">--&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">42</span>&#160;<span style="color: #000000; ">&#160;&#160;&#160;&#160;</span><span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">body</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">43</span>&#160;<span style="color: #0000FF; ">&lt;/</span><span style="color: #800000; ">html</span><span style="color: #0000FF; ">&gt;</span><span style="color: #000000; "><br />
</span><span style="color: #008080; ">44</span>&#160;</div>
</p>
<p align="left"  style>注意要加背景色,才可以实现真正美观的圆角!</p>
<p align="left"></p>
<p align="left"></p>
<p align="left"></p>
<img src ="http://www.blogjava.net/fl1429/aggbug/259003.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-11 09:29 <a href="http://www.blogjava.net/fl1429/archive/2009/03/11/259003.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>css的margin的用法</title><link>http://www.blogjava.net/fl1429/archive/2009/03/09/258538.html</link><dc:creator>fl1429</dc:creator><author>fl1429</author><pubDate>Mon, 09 Mar 2009 01:40:00 GMT</pubDate><guid>http://www.blogjava.net/fl1429/archive/2009/03/09/258538.html</guid><wfw:comment>http://www.blogjava.net/fl1429/comments/258538.html</wfw:comment><comments>http://www.blogjava.net/fl1429/archive/2009/03/09/258538.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/fl1429/comments/commentRss/258538.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/fl1429/services/trackbacks/258538.html</trackback:ping><description><![CDATA[<p><a href="http://html.chinahtml.com/2006/xhtml-11576838936382.shtml"></a></p>
<p><span style="font-family: 宋体">语法：</span></p>
<p>margin : auto | length </p>
<p><span style="font-family: 宋体">参数：</span></p>
<p>auto : <span style="font-family: 宋体">　值被设置为相对边的值</span></p>
<p>length : <span style="font-family: 宋体">　由浮点数字和单位标识符组成的长度值</span> | <span style="font-family: 宋体">百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。请参阅长度单位</span></p>
<p><span style="font-family: 宋体">说明：</span></p>
<p><span style="font-family: 宋体">检索或设置对象四边的外延边距。</span></p>
<p><span style="color: red; font-family: 宋体">如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。</span></p>
<p><span style="color: red; font-family: 宋体">如果只提供一个，将用于全部的四边。</span></p>
<p><span style="color: red; font-family: 宋体">如果提供两个，第一个用于上－下，第二个用于左－右。</span></p>
<p><span style="color: red; font-family: 宋体">如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。</span></p>
<p><span style="font-family: 宋体">内联对象要使用该属性，必须先设定对象的</span>height<span style="font-family: 宋体">或</span>width<span style="font-family: 宋体">属性，或者设定</span>position<span style="font-family: 宋体">属性为</span>absolute<span style="font-family: 宋体">。</span></p>
<p><span style="font-family: 宋体">在</span>IE4+<span style="font-family: 宋体">，</span>margin<span style="font-family: 宋体">属性不可用于</span>td<span style="font-family: 宋体">和</span>tr<span style="font-family: 宋体">对象。</span></p>
<p><span style="font-family: 宋体">外延边距始终透明。</span></p>
<p><span style="font-family: 宋体">对应的脚本特性为</span>margin<span style="font-family: 宋体">。请参阅我编写的其他书目。</span></p>
<p><span style="font-family: 宋体">关于对象的尺寸与边框，内外补丁等样式表属性的关系，请参看图例以及</span>height<span style="font-family: 宋体">和</span>width<span style="font-family: 宋体">属性。</span></p>
<p><span style="font-family: 宋体">示例：</span></p>
<p>body { margin: 36pt 24pt 36pt; } </p>
<p>body { margin: 11.5%; } </p>
<p>body { margin: 10% 10% 10% 10%; }&nbsp;<br />
<br />
<br />
&nbsp; </p>
<p>参考:<a href="http://www.host01.com/onlinebook/css/css2/c_margin.html">http://www.host01.com/onlinebook/css/css2/c_margin.html</a></p>
<p><span style="font-family: 宋体">实例</span>:css<span style="font-family: 宋体">实现圆角边框</span></p>
<p><a href="http://html.chinahtml.com/2006/xhtml-11576838936382.shtml">http://html.chinahtml.com/2006/xhtml-11576838936382.shtml</a></p>
<img src ="http://www.blogjava.net/fl1429/aggbug/258538.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/fl1429/" target="_blank">fl1429</a> 2009-03-09 09:40 <a href="http://www.blogjava.net/fl1429/archive/2009/03/09/258538.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>