大空翼

       grayscale.js这个文件是用来兼容各个浏览器的，在一般情况下，使用它绝对不会有问题，但是在实际的操作中，还是遇到了一些麻烦。

      1、在IE中，如果用了相对定位，即<div style="background:url();position:relative;"></div>，那个背景图片无法变灰。

      2、在火狐或者谷歌浏览器中，如果某个元素通过js变换了className，那么变换后的className样式无法显示出来，因为那个js文件，在网页加载完之后，直接将样式加在元素中了，导致无法正常切换。

     第一种的解决方案是，IE下使用html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }这段代码即可，它在火狐或者其他浏览器下是不起作用的。

     第二种的解决方案，我也不知道，为了能正常切换，我只能将这一块的div重置，即不让它灰掉，代码如下：

     grayscale.reset(div);

      前一阵子听说了这本书，在网上也看了几章，觉得不错，于是在当当网上订购了这本书。

      书在前天送到，今天下午读完。因为最近公司没什么事，所以看得比较多一点。这是一本值得阅读和收藏的书。下面我简单分享一下这本书带给我的知识。

      以前和一个做前端的朋友聊天，他问我，div+css和table有什么区别。我当时回答他的是table加载速度慢，而且不容易修改。他说你认识的太少了。读了这本书之后，我才真正明白了，最本质的区别其实不是那两个原因，而指前者比后者更语义化。举个简单的例子来说，一张图片和一段文字，通常用img和p标签就可以了，可是一个“多div症”的人会写成多个div+img+span，就像以前的我。在这一点上，我受益不少。当然受益归受益，实践到代码上，这需要日后时间上的积累与总结，我相信以后在写页面时会注意到这些问题的。

      语义化，在此举两个例子：

      1、form。一个好的表单，我个人觉得至少含有fieldset、legend、label等标签。fieldset用来表述框架集，及表单集合，legend注释表单名称，label用来和input交互，提高用户体验。

      2、table。一直以来，我都觉得没必要写thead、tbody等标签，看了这本书之后，才知道为了更好的语义化，有些标签还是要加上去的。

      关于如何组织css，作者提到一种方法：base.css+common.css+page.css。

      base.css层提供css reset功能和粒度最小的通用类，它可以应用于所有的项目，所以它一定要精简和通用。

      与common.css层相关的是样式的模块化，我们可以将页面中大量重复的模块视为一个组件。这一点我感慨很多，因为以前的页面，头部的样式和底部的样式，我都写在页面里面的，而这两个页面包含进来后，<style>成了body里面的元素，这样也不符合W3C标准。现在有了这一层，我完全可以把头部和底部的样式放进去，同时也可以将各个页面中大量重复的模块抽取出来，由此节省了很多代码。

       page.css层是作为当前页面的样式，这一点我就不详细说了，因为确实也没什么好说的。

       这种方法，在实际中绝对有操作性，可以说是这本书带给我最大的收获了。

       在js方面，作者提到了全局变量应该注意的细节，以及js的一些继承或者js的其他特性。说句老实话，看过js高级编程的话，会对这些东西没多大兴趣了，因为里面大多用到js高级编程里面的东西。不过也有所收益，毕竟重新温习了一遍，也对我日后看jquery有一定的帮助。

       这篇文章搁置了很久，终究决定想把它写完，前些日子一方面冷，一方面确实偷懒了。有时候想想，偷懒要不得，但是到了关键时候，还是会那样，哎，希望自己能减少一点吧！如果大家对那本书感兴趣的话，就把它买了吧，它值得前端开发人员买！

       可能是因为excel版本的问题的，excel日期的格式为yyyy-mm-dd，用cells[1].getContents().trim()得到的值是yy-mm-dd，比如在excel里面的值是2010-12-15，读到的是10-12-15，让我很头疼了。最后查了很长的时间，终于用下面的方法解决了，代码如下： 

判断是否是日期的格式

if (cells[1].getType() == CellType.DATE) {
        DateCell dateCell = (DateCell) cells[1];
        Date date = dateCell.getDate();
        String year = new SimpleDateFormat("yyyy-MM-dd").format(date);
        info.setYear(parseTimestamp(year));     //发文日期
 } 

//说明：parseTimestamp是一个转化时间的方法，因为考虑到日期的格式可能为2010/12/14，代码如下：
//转换时间戳
    public Timestamp parseTimestamp(String date) {
        String d = date;
        if (date.indexOf("/") > 0) {
            d = date.replace("/", "-");
        }
        String temp = d + " 00:00:00";
        try {
            SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            Date time = df.parse(temp);
            return new Timestamp(time.getTime());
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }

      当然可能也有人会把日期写成文本的格式，所以可以在判断是否是日期格式的后面，再加一个判断，代码如下： 

1 if (cells[1].getType() == CellType.LABEL) {
2     info.setYear(parseTimestamp(cells[1].getContents().trim()));//项目起始日期
3   }

     ibatis的resultClass与resultMap还是有很大的区别。以下是我碰到的一个问题。

     配置文件写法如下：   

 1 <sqlMap>
 2     <typeAlias alias="notice" type="path.country.basic.entity.Notice"/>
 3     <resultMap id="noticeResult" class="notice" >
 4         <result property="id" column="MainID"/>
 5         <result property="content" column="Notice_Content"/>
 6         <result property="isUsed" column="Notice_IsUsed"/>
 7         <result property="createMan" column="CreateId"/>
 8         <result property="createDate" column="CreateDate"/>
 9         <result property="createIp" column="CreateIP" />
10         <result property="lastModifyMan" column="ModifyId"/>
11         <result property="lastModifyDate" column="ModifyDate" />
12         <result property="lastModifyIp" column="ModifyIP" />
13         <result property="manName" column="CreateId" select="getUserNameById"/>
14     </resultMap>
15      <select id="getNewNotice" resultClass="notice">
16         SELECT *  FROM Bse_Notice WHERE Notice_IsUsed='1'
17     </select>
18  </sqlMap>

      在前台调用时，对象是取到了，但是里面的属性值为空。

      查了相关资料才知道：resultclass属于隐身映射，虽然你指定resultclass=“”，具体某一个类，但是select语句得到的结果是一条实力记录，但如果数据库字段与类的属性名字不一致，这个时候就会出现映射错误，有一种方式可以解决就是在写select语句时，给每个字段用as运算符取名字与属性一样：例如：select realname as name...其中realname是字段列名，name是属性字段名。

      当然解决问题还是很容易的，只需要把resultClass改为resultMap就行了。

      在性能方面，resultMap要比resultClass高，所以建议尽量使用resultMap。

      要实现这样一个功能，文字在某块区域内横向无间隙滚动。

      我一开始想到的标签是marquee，因为它可以实现横向滚动。经理说它的起始位置从最右边出来的，能不能将它改成从中间出来，或者从最左边出来也行。查了相关资料，才知道marquee标签无法指定起始位置。后来在网上找到一段代码，它是用图片来实现的，我将图片改成文字之后，顺利地实现了我所想要的功能。代码如下：

<style type="text/css">
     #gongaodiv{width:1000px;height:30px;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';background:#DDE5ED;color:#0C77CF;font-weight:bold;}
    #gongaodiv #scroll_begin, #gongao #scroll_end{display:inline}
</style>
<script type="text/javascript">
        function ScrollImgLeft(){
            var speed=50;
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML=scroll_begin.innerHTML;
            function Marquee(){
                if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
                    scroll_div.scrollLeft-=scroll_begin.offsetWidth;
                else
                    scroll_div.scrollLeft++;
            }
            var MyMar=setInterval(Marquee,speed);
            scroll_div.onmouseover=function() {clearInterval(MyMar);}
            scroll_div.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
        }
    </script>
<div id="gongaodiv">
        <div style="width:900px;height:30px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div" class="scroll_div">
            <div id="scroll_begin">
                ${affiche.content}  ${affiche.content}  ${affiche.content}
                ${affiche.content}  ${affiche.content}  ${affiche.content}
            </div>
            <div id="scroll_end"></div>  
        </div>
        <script type="text/javascript">ScrollImgLeft();</script>
    </div>

这里${affiche.content}是从数据库取出来的文字。

之所以在scroll_begin的div里面写这个多重复的文字，是因为这些文字的长度必须要大于scroll_div的div容器。如果小于div容易，则不会有一直滚动的效果。

换句话说：无缝滚动的内容宽度加起来必须要大于容器的宽度。

      一般来说，像input里面的值都可以通过将内容去空格判断是否为空，但是FCK没那么简单，因为当你多打几个空格或者多打一些回车，它会自动地生成一些<p>标签，如果再用原先去空格判断的方法，显然是不可取的。

      在网上找到一段合适的代码，与大家分享。      

 //判断fck的内容是否为空
 var oEditor = FCKeditorAPI.GetInstance('content'); //这里的content是FCK的ID值
                if(GetLength("content")<=0) {
                    alert('内容不能为空!');
                    oEditor.Focus();
                    return false;
                }


function GetLength(str){
                var oEditor = FCKeditorAPI.GetInstance(str) ;
                var checkContent= oEditor.EditorDocument ;
                var contentLength ;
                if ( document.all ){
                    contentLength= checkContent.body.innerText.trim().length ;
                }
                else{
                    var r = checkContent.createRange() ;
                    r.selectNodeContents( checkContent.body ) ;
                    contentLength= r.toString().trim().length ;
                }
                return contentLength;
            }

            //去掉字符串的空格
            String.prototype.trim = function()
            {
                return this.replace(/(^[\s]*)|([\s]*$)/g, "");
            }