专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • 开发全屏web操作项目,浏览器全屏的解决

    / 分类: 开发,实践 / No Comments

    目前为移动开发一个项目,是全触摸屏的,基于web的,当然我的工作只限于前端开发的工作,完成项目首先要解决的就是浏览器全屏展示网页。像移动的自助缴费系统、ATM机等有些应该是这样做的(记得有次还在某个银行看到了win2000的启动界面)

    找了下资料,以前的文章应该是通过js打开一个全屏的浏览器窗口的吧,不过那个好像会出现一些问题。

    后来才找到了IE的Kiosk Mode全屏模式(Kiosk ModeKiosk Software广泛用于公共电脑或者嵌入系统,如可以上网的公共电话、ATM、机场自助服务系统、网吧管理软件等) ,在ie的快捷方式里面加入“-k”这个参数,就实现了真正的全屏,而非F11(IE下的F11浏览器的菜单和底部的状态栏)还是能看到部分的。

    Kiosk模式下的一些快捷键:

    Alt + 左箭头:上一页
    Alt + 右箭头:下一页
    Ctrl + D:加到我的收藏夹
    Ctrl + H:开启历史文件夹
    Ctrl + B:开启整理收藏夹
    Ctrl + L:输入网址,开启新网页
    Ctrl + N:开新窗口
    Ctrl + R:刷新(或按 F5)
    Ctrl + W:关闭目前的窗口(或按 Alt+F4)

    该方法只对起始页有效,通过该页弹出的窗口不是全屏幕窗口

    还有一个就是chrome浏览器下的F11,这个效果是目前使用过的浏览器里面全屏比较彻底的,但是上面还是有一条黑边,鼠标移上去就好提示按F11退出全屏,所以根据需要最好的就是IE下面的Kiosk模式了,据说是IE5.0+都支持,我用IE8测试是没问题的。

  • jquery jsonp Ajax 跨域提交数据 (PHP)

    / 分类: 开发 / 6 Comments

    最近做了一个Ajax提交反馈页,但是由于空间不支持一些基本的函数,所以准备做个跨域提交。

    javascript部分:

    $("#btn").click(function(k) {
        //...
        var j = form.serializeArray();//序列化name/value
        $.ajax({
            url: "另一个域名/test.php",
            dataType: 'jsonp',
            data: j,
            jsonp: 'jsonp_callback',
            success: function(json) { //返回的json数据
                json = json || {};
                if (json.msg=='err'){
                    alert(json.info);
                }else if (json.msg=="ok"){
                    alert('提交成功');
                }else{
                    alert('提交失败');
                }
            },
            timeout: 3000
        })
        //...
    });

    php部分:

    $jsonp_callback=$_GET['jsonp_callback'];
    //...
    //如果正确
    echo $jsonp_callback,'({"msg":"ok"})';
    //如果错误
    echo $jsonp_callback,'({"msg":"err","info":"因人品问题,发送失败"})';
    //...

    值得注意的是采用jsonp 方式,beforeSend / error 都不能用了,所以beforeSend里面用js实现的验证只能用ajax在服务器端test.php上面验证了。

  • 开始使用 html5+css3吧

    / 分类: 开发,生活 / No Comments

     XHTML1.0、XHTML1.1的doctype不嫌长吗?虽然XHTML1.1比XHTML1.0的少了几个字母,但html5仅需:<!DOCTYPE html>,喜欢探索的同学应该注意到了淘宝、土豆的首页,都使用了html5的DTD。

    html5的编码仅需:<meta charset="utf-8">,html5可以直接<style></style>、<script></script>,不需要加type="text/css"、type="text/javascript"。而且还加入了更语义化的:header、nav、menu、article、aside、details、dialog、footer等,不过为了兼容IE(IE下css里设置html5新增元素的样式无效)目前还是使用div吧。或者是把<!--[if IE]>http://html5shiv.googlecode.com/svn/trunk/html5.js<![endif]-->加入<head>,然后用到的块级元素(section, article, aside, header, footer, nav, dialog, figure)在css加上:display:block也可以。原理就是用js先创建这些元素,然后ie下面就可以应用css的样式了。具体例子可看:http://ejohn.org/blog/html5-shiv/
     
    css3的圆角阴影等虽然在兼容上有问题,有些时候部分内容也可以用一下,毕竟新技术是要不断学习的。总要学点啥吧?
     
    最近用html5、css3写了一个门户站,感觉优化的极好,结构和兼容性都很满意,很有成就感,哈哈

     

  • 发现了一个IE6的2个form嵌套bug

    / 分类: 开发 / No Comments

    如果网站是.net程序的话,body下面紧跟着就是一个form,因此页面出现两个form的几率很高。在做公司目前的一个项目时,发现当在网页中加进去一个form后,用IE6测试时,发现加进去的form后面的文字变成居中对齐了。比如下面的代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
    <style>
    body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
    body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 
    
    #body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
    #body div{text-align:left;} 
    </style>  
    </head>  
      
    <body>  
    <form>第一个form 
        <div id="body">  
            <div>  
                <form>第二个form:这是一个神奇的Form,这个form下面的内容,IE6会居中显示,继承了body的text-align:center(#body:{text-align:left}没有起到作用)。删除这个form后,会发现ie6下下面的内容都变成正常的左对齐了。 
                </form>  
                此现象应该是form内又嵌套了一个form所导致。 
            </div>  
            <div>这里的内容,要再设置一次:#bd div{text-align:left;} ie6才会左对齐</div>  
            <h2>这里的内容IE6居中了</h2>  
        </div>  
    </form>
    </body>  
    </html>  

     由于以前接触的基本都是php的程序,从来没遇到过这样的情况,.net把body间的内容用一个form给包含了,当里面再加进去一个form后,上面描述的问题就出现了。

    我想到的解决办法就是:

    1、 把css里body的text-align:center;修改成:text-align /*IE5.5 only*/:center; (这里没照顾ie5.0),由于IE5、IE6都识别前面加下划线“_text-align:”这个hack,所以这个hack在这里也用不上(以前还以为加下划线只有IE6能识别)。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

    2、狠下心把body的text-align:center删掉也能解决,但是ie5就。。可惜IE5还有极少数的人在用。。

    3、<!--[if IE 6]> body{text-align:left;} <![endif]--> 或者 * html body{text-align:left;}/*IE6/ie7都识别*/

    4、重设#body下面的元素,#body div, #body h2{text-align:left;} 

    在实践中上面的四种方法都可能用到,个人更偏向于第三、四种方案。

     另外发现我blog的字体,在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体,等宽主要是方便用vim的时候选择,还有bug 所以还不能发布,等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体,所以才萌生了自己做的想法。这个合并字体搞了很久,也搞的很郁闷,制作字体的时候CUP经常100%,终于发现我的电脑年纪不小了。。英文使用DejaVu,是因为最喜欢它的等宽字体,Consolas、Monaco、Bitstream等等好多等宽字体测试后,发现DejaVu的效果是最好的,1、l和0、o、O很容易区分(dejavu也是Bitstream出的他们很接近)。

  • fieldset 在ie 和 firefox 下的不同

    / 分类: 开发 / No Comments

    最近用php做了一个留言板,用户发布留言的form就用到了fieldset,不过发现了一个问题,就是IE下面fieldset的margin-top和margin-bottom无效,当然margin横向是正常的。

    比如css里:fieldset{margin:100px auto;}那么这个fieldset在FF(包括safari等浏览器)显示是上下100px、左右居中。而IE下就是左右居中,margin的上下无效。(当然这里的ie是IE6-IE8、页面带DOCTYPE声明)。

    我的解决办法就是修改fieldset内legend的margin,或者fieldset外面加一个div,然后修改这个div的margin。

    顺便,这个表单也被我拿来当作练习js了,深刻的体会到:学到的理论如果不用到实践上,那永远也不会有提升。