<![CDATA[Enjoy]]> http://www.9enjoy.com/index.php zh-cn http://www.9enjoy.com/html5/ <![CDATA[HTML5初探]]> enjoy <> Fri, 14 Jan 2011 06:34:27 +0000 http://www.9enjoy.com/html5/ <!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
国内几乎没有IE9的用户，因此，taobao是这样写的：
<!--[if IE]>
<script src="http://a.tbcdn.cn/p/fp/2011a/html5.js" type="text/javascript"></script>
<![endif]-->

两个JS的内容是一样的，代码都来自：http://remysharp.com/2009/01/07/html5-enabling-script/

以下是我整理的由原来的html转换到HTML5一些注意点：

文档申明：
<!DOCTYPE html>

原来的根本记不住，每次都需要copy。这种写法还向前向后兼容。

设置页面编码：
旧：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
新：<meta charset="utf-8">

链接样式表CSS
<link href="/css/comm_v3.css" rel="stylesheet" type="text/css">

可以不写type="text/css"了，浏览器只要看到rel=”stylesheet”就知道你是链接样式表了。
<link href="/css/comm_v3.css" rel="stylesheet">


加载JS
<script src="/js/html5.js" type="text/javascript"></script>

可以不写 type="text/javascript"，浏览器默认的脚本语言就是javascript。
<script src="/js/html5.js"></script>



可以简单的把所有内容都包装在一个链接元素中
<h2><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

可以改写为：
<a href="/path/to/resource">
<h2>Headline text</h2>
<p>Paragraph text.</p>
</a>


HTML5支持已有的内容，原来的div,img,p不做任何改动，都可以在HTML5里正常使用。

原结构：
<body>
<div id="header">...</div>
<div id="navigation">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>
</body>


可以更改为：
<body>
<header>...</header>
<nav>...</nav>
<section>...</section>
<aside>...</aside>
<footer>...</footer>
</body>


更多推荐阅读：《HTML5设计原理》http://www.cn-cuckoo.com/2010/10/21/the-design-of-html5-2151.html



参考：
拥抱HTML5，《HTML5设计原理》读后随记
Tags - , , ]]> http://www.9enjoy.com/default-css/ <![CDATA[各浏览器(IE6,IE7,IE8,FireFox...)默认CSS]]> enjoy <> Sat, 31 Jul 2010 01:23:59 +0000 http://www.9enjoy.com/default-css/ http://www.iecss.com/

为以防万一备份了一下，存到了我的空间上了，有时会用得着：http://www.9enjoy.com/code/default-css/

常用浏览器默认样式下载
IE6(下载)
IE7(下载)
IE8(下载)
IE9(下载)
Firefox 3.6.3(下载)

一般写CSS都会在头部会把一些常用的标签重置margin和padding为0，但在某些地方又要恢复原默认的CSS，这些样式就起上作用了：）



Tags - , , ]]> http://www.9enjoy.com/css-separator-line/ <![CDATA[使用CSS实现间隔线(竖线)]]> enjoy <> Fri, 23 Apr 2010 12:45:05 +0000 http://www.9enjoy.com/css-separator-line/ 点击在新窗口中浏览此图片

是不是考虑用这个？
<a href="#">整机</a>|<a href="#">LCD</a>

我们来看看taobao和paipai对这块的实现，这两个站首页罗例产品分类时，都使用了这种样式：

paipai的实现
a{
border-left: 1px solid #D9D9D9;
margin-left: -1px;
padding-left: 5px;
}

taobao的实现：
a{
border-left: 1px solid #B7D0E4;
display: inline-block;
margin-left: -1px;
padding: 0px 0px 0px 3px;
}

现在你会了吗？


这段CSS很巧妙的将margin-left设为-1，将第一个border隐藏了起来，而且兼容所有的主流浏览器。这样，就不用给第一个或者最后一个样式做特殊样式处理了。如果间隔需要大些，可以很方便的通过设置padding-left和padding-right来控制。
Tags - ]]> http://www.9enjoy.com/jquery-basic/ <![CDATA[jQuery一些文档收集]]> enjoy <> Sun, 20 Dec 2009 05:07:21 +0000 http://www.9enjoy.com/jquery-basic/ 　　jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

　　先看看几大javascript库的搜索趋势，比较jquery,yui,dojo,prototype：
http://www.google.com/trends?q=jquery%2Cyui%2Cdojo%2Cprototype&ctab=0&geo=all&geor=all&date=all&sort=0
点击在新窗口中浏览此图片点击在新窗口中浏览此图片
国内的情况：
http://www.google.cn/trends?q=jquery%2Cyui%2Cdojo%2Cprototype&ctab=0&geo=cn&geor=all&date=all&sort=0

可以看到，jQuery从创建开始，关注度就不段上升，现在基本已经是NO.1了。

官方：http://www.jquery.com

中文社区：http://bbs.jquery.org.cn/
中文API文档：http://jquery.org.cn/visual/cn/index.xml
jQueryAPI参考文档中文版翻译(包括jQuery 1.3 中文参考文档)：http://code.google.com/p/jquery-api-zh-cn/downloads/list

推荐的jQuery相关书：《锋利的jquery》 基于jQuery1.3.1，各大网上书店有售。

英文PDF，30分钟搞定jQuery，jQuery架构的开发者之一Simon Willison在07年讲演的幻灯片learning-jquery-in-30-minutes，这份比其之前做的jQuery in 15 minutes要详细些。http://www.slideshare.net/simon/learning-jquery-in-30-minutes

此处包含一个多媒体文件，请用网页方式查看。


《精通Javascript+jQuery》视频教程 http://learning.artech.cn/20080621.mastering-javascript-jquery.html



Tags - , ]]> http://www.9enjoy.com/form_action_conflict/ <![CDATA[FROM中有名称为action的input会和action冲突的解决]]> enjoy <> Thu, 24 Sep 2009 06:15:08 +0000 http://www.9enjoy.com/form_action_conflict/
我开始还直接回答：

表单名为form1
input里的action值是document.form1.action.value
form里的action值是document.form1.action
应该不会冲突。

但实践证明，确实会冲突。

当有ipnut的name为action时，通过JS给form里的action赋值时，会提示：Error:Object doesn't support this property or method。

在网上查了下，可以能过form的attributes来罗列form的各项属性，我测试的form名为hx。
  frm = document.hx;
  for(i=0;i<frm.attributes.length;i++){  
    document.write(frm.attributes[i].name+"-------Index:"+i+"<br>");  
  }

发现action的属性是83，通过设置frm.attributes[83].value，就可以更改form中的action值。
不过，在FF和Chrome下，action不是83是2，所以要兼容多个浏览器的话，还得再多判断下。

以下是示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<body>  
  <form action="" method="post" name="hx">
    <input type="text" value="13055210000" name="key">
    <input type="hidden" value="" name="mobile">
    <input type="hidden" value="" name="action">
    <input type="hidden" value="" name="ip">
    <a href="javascript:a()">a</a>
    <a href="javascript:b()">b</a>
    </form>
<script type="text/javascript">
  frm = document.hx;
  for(i=0;i<frm.attributes.length;i++){  
    document.write(frm.attributes[i].name+"-------Index:"+i+"<br>");  
  }  
  
  function a(){
    frm = document.hx;
    frm.attributes[83].value="http://www.ip138.com:8080/search.asp";
    //frm.action = "http://www.ip138.com:8080/search.asp";
    frm.mobile.value=frm.key.value;
    frm.action.value="mobile";
    frm.submit();
}
  function b(){
    frm = document.hx;
    frm.attributes[83].value="http://www.ip138.com/ips8.asp";
    frm.ip.value=frm.key.value;
    frm.action.value="2";
    frm.submit();
}
</script>

</body>
</html>

Tags - , , ]]> http://www.9enjoy.com/css-control-img-resize/ <![CDATA[CSS控制图片按比例缩小]]> enjoy <> Wed, 09 Sep 2009 13:41:20 +0000 http://www.9enjoy.com/css-control-img-resize/
最好的解决办法，我想是底部加载的JS，判断图片宽度 > 600，就等比例缩小。那么怎么用CSS来实现呢？

开始尝试了下，不是很满意。搜索了下，大部分文章是这样写的：
.img {
max-width:600px;
width:600px;
width:e­xpression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。


这个方案我测试是错误的，当图片是1000px*1000px的时候，应用此CSS，图片宽度将变成600px，而高度还是1000px，图片就严重变形！既然用到了expression(有点费客户端资源)，那就索性把JS那套拿过来用吧，改写一下。
#content img{height: expression(this.width > 600 ? this.height = this.height * 600 / this.width : "auto");
width: expression(this.width > 600 ? "600px" : "auto");
max-width:600px;}

在IE6、IE7下可以实际大图片按比例缩小，不会出现图片变形的情况，在FF和chrome下，expression无效，但通过max-width限制图片最大宽度，使页面不会被撑开。


补充：原方案其实在正常情况下是正确的，IE6\IE7\FF\Chrome都正确。正常情况是指处理的图片是同域下的图片。如果不同域即引用了其它站的图片，那么就会有我上面所描述的问题，即图片会变形。
Tags - , ]]> http://www.9enjoy.com/post/367/ <![CDATA[FCKeditor粘贴Word时弹出窗口的取消]]> enjoy <> Tue, 09 Jun 2009 13:06:46 +0000 http://www.9enjoy.com/post/367/ 用fckeditor做为用户发布的编辑框，允许用户发布Word。默认的情况下，粘取进word时，提示是否清除word样式，选择"是"则弹出一个框，需要再粘贴一次来清除word样式。这个操作很麻烦，因此要取消。

开始找到的方法是把fckeditor\editor\js下的fckeditorcode_ie.js，查找PasteFromWord会找到以下内容:
PasteFromWord:function(){FCKDialog.OpenDialog('FCKDialog_Paste',FCKLang.PasteFromWord,'dialog/fck_paste.html',400,330,'Word');}
把它改为
PasteFromWord:function(){FCK.InsertHtml( clipboardData.getData("Text") );}
但这样，就变纯文本了，不行！

搜索了好久没找到有效方法，最终参考http://blog.csdn.net/yeahugo/archive/2008/06/04/2512386.aspx的方法，几经测试，终于实现了。

由于JS什么的会自动缓存，每次测试，还要清除临时文件再刷新页面才行，真麻烦啊！

具体操作如下：
打开fckeditor\editor\js下的fckeditorcode_ie.js，
找到if (confirm(FCKLang.PasteWordConfirm))那条，改为：
if (confirm(FCKLang.PasteWordConfirm)){var D=A;D=CleanWord(D,true,true);FCK.InsertHtml(D);return false;}
打开dialog\fck_paste.html，把里面的CleanWord函数粘贴到头部。


这时再粘贴Word时，选择是后，就会直接清除格式。如果不要是否的提示，把confirm(FCKLang.PasteWordConfirm)的判断去掉就可以了。
Tags - , ]]> http://www.9enjoy.com/post/311/ <![CDATA[提交表单内容返回后保留填写的内容]]> enjoy <> Mon, 06 Oct 2008 02:54:28 +0000 http://www.9enjoy.com/post/311/
研究了下，发现需要使用下面的代码：

head中增加：
<meta name="save" content="history">
CSS中增加：
.saveHistory  {behavior:url(#default#savehistory);}  
在需要保留填写的input处，加上saveHistory样式，如：
<input type="text" name="username" size="25" maxlength="15" id="username" class="saveHistory">
如果已经有一个样式，则附加上：
<input type="text" name="username" size="25" maxlength="15" id="username" onBlur="checkusername()" class="text saveHistory">

测试代码：
<HTML><HEAD>
<META content=history name=save>
<STYLE>
.saveHistory {behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>加了历史保留功能:<BR><TEXTAREA class=saveHistory></TEXTAREA><BR>没有加的:<BR><TEXTAREA></TEXTAREA>
<P><INPUT onclick='javascript:location.href="http://www.google.com"' type=button value=点击进入,再按后退键试试？> </P></BODY></HTML>


在IE和gg浏览器下测试OK，但在Firefox下无效。


Tags - ]]> http://www.9enjoy.com/post/280/ <![CDATA[网站黑白界面的快速实现代码]]> enjoy <> Mon, 19 May 2008 03:01:53 +0000 http://www.9enjoy.com/post/280/
引用
网络处通知：国务院决定，5月19日至21日举行全国哀悼日。现将有关要求通知如下：
一、各网站要及时、突出、滚动宣传报道国务院的公告，及时、突出报道党中央、国务院和我省举行的哀悼活动。有关网站在做好网上宣传报道的同时，要充分利用手机短信、彩信、手机报等形式做好报道。国务院公告在全国哀悼日期间刊登在各网站首页突出位置。
二、各网站停止三天各类娱乐活动和服务。从19日零时起至21日24时，各游戏网站、各网站游戏频道一律关闭；各网站的娱乐频道和娱乐性音视频栏目一律用哀悼页面覆盖，相关栏目下的其他网页不得开放；各网站的娱乐论坛一律关闭；各搜索引擎的音乐和娱乐视频搜索功能一律关闭；各网站带有娱乐性的广告一律关闭。
三、组织好网上哀悼活动。各网站的网上氛围应与举国哀悼相适应。各重点新闻网站和主要商业网站要组织好由网民参与的网上哀悼活动，要全面反映广大网民的悲痛之情、爱国之心。
四、切实做好网上舆论管理工作。实行24小时值班，负责人在岗带班。
五、切实抓好落实。要立即行动起来，将上述要求传达到各新闻网站、各商业网站、各政府网站，并动员一切力量在网上检查落实情况。
六、严肃纪律。对相关工作落实不到位的地方和网站，将作出严肃处理。对不服从要求的网站，一律作关闭处理，并将在事后追究责任。  



今天早上打开一看，几乎所有大站，全部变成黑白界面。开始以为需要更改CSS的字体颜色，后来看到有人流传了代码，原来是使用了CSS的filter功能。

在CSS中加如下代码，均测试有效。
html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
或
html {filter:gray}  

显然，后者html {filter:gray} 较简单，我都是用这个代码来实现的。

@@080520@@update@@，据观察，使用此代码后，由于此filter效果需要客户端来处理这个效果，因此可能会导致配置较老的电脑的CPU占用率略微提高。
Tags - , ]]> http://www.9enjoy.com/post/276/ <![CDATA[整天对着电脑，一个保护眼睛的方法]]> enjoy <> Mon, 05 May 2008 11:49:38 +0000 http://www.9enjoy.com/post/276/
引用
告诉大家一种保护眼睛的好方法：  桌面->右键->属性->外观->高级－>项目选择（窗口）、颜色1（L）选择（其它）将色调改为：85。饱和度：123。亮度：205－>添加到自定义颜色－>在自定义颜色选定点确定－>确定这样所有的文档都不再是刺眼的白底黑字，而是非常柔和的豆沙绿色，这个色调是眼科专家配置的，长时间使用会很有效的缓解眼睛疲劳保护眼睛  别忘了分享给你们的好朋友!!


试了下，还行！
就是发现，许多网页(应该是白色底色)的底色不是白色了，变成我设置的绿色。包括许多大站都没有注意到这个细节。
看来，以后要白色底色的话，要在CSS的body中加上 background:#FFF 的选项。
Tags - , ]]>