分类: 技术

  • 同一段文本中,英文和汉字调用不同class样式

    感谢东鳞西爪、Sevencity、Homelink、LeXRus。

    需求:要求所有文本中,汉字使用微软雅黑,数字和英语使用Arial。(文本中有好多的编号数字和部分英语)

     

    解决方式有两个。css方法和js方法

    一、css方法

    先定义一个英文字体再定义中文字体,这是因为英文字体中一般不含有中文,执行的时候英文和阿拉伯数字选用“Arial”,中文的字体使用第二个字体“微软雅黑”。比如,可以这样来定义WordPress中的中英文字体:

    body{

        font-family: Arial,"微软雅黑";

    }

    *需要注意的是,这样的做法对符合网页规范的浏览器比如Firefox虽然有效,但对IE6、IE7会导致中文字体设定无效,也就是说,这样的办法对于微软的IE系列来说等于不设置中文字体,而只是采用系统默认的“宋体”来显示网页内容。

    也可以指定两个class分别分配给中文和英文内容,这样就可以对IE也实现如上的字体效果,并可以为中英文的显示进行更详细的定制(比如字号等属性),但缺点是这样的做法比较繁杂,使用上不太方便,特别是对博客这样的中英文混编的文章内容来说更是麻烦。

    二、使用js实现

    当然也能用JavaScript+Css来实现这个效果,实现方式可以参考经典论坛上的相关帖子:

    <style>

    .cn{font-size:12px;font-family:宋体;}

    body{font-size:9px;font-family:verdana;}

    </style>

    <script >

    function xsize(xstr){
    return xstr.replace(/([u0391-uFFE5]+)/ig,"<font class="cn">$1</font>");}

    </script>

    <body onload="bb.innerHTML=xsize(bb.innerHTML)" id="bb">

    –Qui est ce? –C'est LeXRus. –Est ce que c'est LeXRus? –Que, c'est LeXRus..<br/>
    –这是谁? –这是来克斯露斯~ –这是来克斯露斯? –是的, 这是来克斯露斯~

    </body>

    如下效果

    *需要注意的是,若文本中有图片,图片不能写width、height、alt,不然也会在js下把其中的数字汉字执行转换,变成乱码。只要图片的长宽合适,不用定义,在各浏览器中也没问题。

  • z-index 各个浏览器中的最大值

    先上图

    CSS z-index 属性

    定义和用法

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    注释:元素可拥有负的 z-index 属性值。

    注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

    说明该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。

    我们知道z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象,z-index 值为正数的对象会在其之上,而 z-index 值为负数的对象在其之下。

    z-index最大值:
    IE FireFox Safari的z-index最大值是2147483647 。 
    Opera的最大值是2147483584.。 
    IE Safari Opera在超过其最大值时按最大值处理。 
    FireFox 在超过最大值时会数据溢出正负不定,但有一点可以肯定绝对不会高于2147483647层

    z-index最小值:
    IE FireFox Safari的z-index最小值是-2147483648 
    Opera的z-index最小值-2147483584 
    FireFox在-2147483648<=z-index<0时层不显示 在z-index<-2147483648时溢出实际数字正负不定 
    IE Safari Opera在z-index<0时显示,在小于其最小值时都按其最小值处理

    z-index等值时

    各个浏览器当两个层z-index相同时,按网页代码中层出现的顺序,后出现的层高于先出现的层。 
    跨浏览器永远最大:2147483647 
    跨浏览器永远最小:Hack(”IE,Safari,Opera”:-2147483648,”FireFox”:0)

    最大数值和使用的字符有关。以前一直以为超过999就不成了呢。现在晓得差得远呢。纵然浏览器的取值不大一样。

    貘  23:31:27
    应该跟int或者long的最大值有关,不应该会超界限的吧
    Franky  23:31:38
    恩 
    Franky  23:31:51
    好像是int.max  不确定
    小河  23:32:41
    z-index 这个的最大值,与最小值,分浏览器吗
    貘  23:32:57
    -32758到32767,如果是int的话。。。
    小河  23:32:59
    还是每个浏览器都是统一的
    貘  23:33:15
    都是C写的,貌似应该一样
    Franky  23:33:17
    饿
    Franky  23:33:23
    不确定 我也是挺别人说
    貘  23:33:30
    看看规范上有写没,平时没注意
    Franky  23:33:40
    所以说这种问题….就是难为人的
    小河  23:34:01
    面试官当天心情不好
    Franky  23:34:04
    呵呵
    Franky  23:34:12
    那哥们 没说是哪个公司
    Franky  23:34:28
    他之前在 yahoo 亚洲 现在 在天涯
    Franky  23:34:48
    不知道是不是这俩公司里的某一个问他这个问题…
    貘  23:35:00
    也可能是long的min-max
    小河  23:35:02
    = =b
    Franky  23:35:05
    恩 也有可能
    貘  23:35:12
    int有点小
    Franky  23:35:31
    貘  23:39:21
    规范上说是integer值
    Franky  23:40:03
    也许是无符号的?
    貘  23:40:24
    根据java的interget推算,应该在-2147483647到2147483647之间 
    Franky  23:40:46
    恩 这个数绝对够大了
    Franky  23:40:51
    再大没意义了
    貘  23:41:05
    基本证实了
    貘  23:41:20
    百度查的z-index最大也是2147483647
    Franky  23:42:09
    貘  23:42:20
    不过个浏览器有数字上的小出入,只有比interget.MAX小一点,不会比它大
    Franky  23:43:07
    学习.

    参考资料:

                    http://joeist.com/2012/06/what-is-the-highest-possible-z-index-value/

                    http://hi.baidu.com/runner/item/a10faee0511d39266cabb8ea

                    http://blog.sina.com.cn/s/blog_53d3c24a0100mpny.html

  • 同一元素背景css下放多个图片

    .bg{ width:100%; height:500px;

     background-image:url(image/parallax_octocat.png), url(image/ProfileIconDouban.png), url(image/caomei_02.jpg); 

    background-position:center center,  50px center,top;
    background-repeat:no-repeat, no-repeat, repeat-x; background-clip:padding;}

  • submit 和 button的区别

    type=button      就单纯是按钮功能   
    type=submit      是发送表单

    但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:
    使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一. 

    用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。

     

     

    <input type="submit" name="b1" value="提交"     onClick="bt_submit_onclick()">
    执行完onClick,转到action。可以自动提交不需要onClick。所以说onclick这里可以不要。

    <input type="button" name="b1" value="提交"     onClick="bt_submit_onclick()">
    执行完onClick,跳转文件在 js文件里控制。提交需要onClick。

     

     

    比如:

    1,onclick="form1.action='a.jsp';form1.submit();"     这样就实现了submit的功能了。

    2,<form    name="form1"    method="post"    action="http://www.sina.com.cn">   
           <input    type="button"    name="Button"    value="Button"    onClick="submit()">   
       </form>

    3,<input    type="button"    name="Button"    value="Button"    onClick="javascript:windows.location.href="你的url"">

     

     

    ===============submit 和 button的区别=================================== 

     submit:特殊的button,会自动将表单的数据提交 ,onClick方法不加return 会自动提交,并不会起到约束的作用,所以,使用submit时需要验证请加 return 例: 
      <input type="submit" name="Submit" value="  注 册  " onClick=" return check();">  ,在JS中判断的时候 写return true 或者 return false

     button:普通的按钮,不会自动提交表单数据  可以在JS中显式提交:document.form1.submit(),使用场合: 一个页面有多个提交按钮,需要根据用户的操作来确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1.submit()来提交

     

    ===============如果想好所有的提交都在一个servlet中处理,该怎么做==================
     提交的按钮也是HTML组件,所以也可以通过 getParameter()来
     得到,那么getParameter()的参数也需要固定下来
     参数就是所有的表单的提交按钮的name,当然提交按钮的name要一样才能统一在一个servlet中根据提交按钮的值来区别操作

     

    ======================关于路径的设置===================================
    A。在页面中直接写路径,如 href="jsp/a.html" 表示 平级目录的访问,此例表示平级目录中有个JSP文件夹,访问的是文件夹中的a.html文件

    B。在JAVA中直接写路径 如 response.sendRedirect("jsp/a.jsp")表示项目根目录下有个JSP文件夹,访问的是文件夹中的a.jsp文件

    c.如果发现以上设置在浏览器中的地址栏不正确,可以采取绝对路径写法: 
      /工程名/文件夹名/文件名

    ************在以后的开发中可能有N多的文件夹N多的类和页面,在访问的过程中可能需要访问上几层中的文件夹
    —–aaa文件夹      a.html
     |
     |——bbb文件夹  b.html
       |
       |
       |——-CCC文件夹  c.html
     

     如果想要在c.html中访问  a.html 有几 种写法: 
      1。 ../../a.html  说明:  ../表示上级目录
      2.  /工程名/aaa/a.html 说明:使用绝对路径

    ***********以上内容供以后开发复杂项目时参考,暂时作为了解
    ***********更改路径小窍门: 可以根据浏览器中地址栏显示出来的路径来有针对性的修改至正确的URL
      

    ========================默认显示页面=================================
    当访问 web项目时,默认会显示根目录下的index.jsp or index.html文件

    资料来源

    http://www.cnblogs.com/Myhsg/archive/2008/08/14/1268201.html

    http://blog.csdn.net/qianjunxian/article/details/4088515

     

    今天在做拖拽效果的时候发现用a点击可以实现,用button与submit都不可以,搜索后有其他发现。转载之。

     

  • 移动应用的四大分类

    目前市面上有着各种各样的移动应用,Chris Dixon根据人们使用应用的方式给出了一个“黄金四分类”。这一分类可以为那些想做一个新应用的开发者和想判断一个应用是否有价值的投资者提供更好的指导。

    ceb748cf-5676-3a8d-9762-69ce16981ef8.jpg

    1.  消磨时间的应用

          该分类的代表是各类游戏:比如水果忍者和愤怒的小鸟。这类应用就是供用户在短暂的闲暇时间里使用,比如等人或者排队时。当然有一些应用兼具消磨时间和核心应用两种特性。比如Facebook,排队时隔一会就刷新下好友新鲜事属于消磨时间,但是发送Facebook站内信息就属于核心功能了。

          此类应用会随着时间推移渐渐冷下去。人们很容易迷上新游戏,但也很容易觉得厌烦。如果你想创立一个专门做消磨时间应用的大公司,你需要建立相应的制作、营销和货币化机制,就像Zynga做的一样。

    2.  核心应用

          核心应用是指你主屏幕上的应用,相机、照片、联系人、日历、短信等等。核心应用的使用模式大多在智能手机出现之前已经变得根深蒂固了。过去人们一般会带着纸质日历,或者是莱卡相机。核心应用对用户的黏性是惊人的,如果你能做出一款用户众多的核心应用,那将是一笔长期的生意。

          对创业公司来说一个可能的进入策略是用自己的应用来置换某类核心应用。Instagram正是用这一招成功取代了手机内置相机的地位。目前我们尚不清楚视频版Instagram是否会取代手机内置摄像机成为核心应用。相较而言,创造一种全新的核心应用类别是比较困难的,目前做的比较好的有Foursquare,它成功的创造出了“签到”这一之前从未有过的核心应用。

    3.  边缘应用

          这类应用一般不会出现在你的主屏幕上,但是在某些情况会非常有用。比如当你需要打车时,Uber能帮你实时找到空车;或者当你需要在餐馆订位置时,Opentable可以帮你轻松订位。这类边缘应用一般着眼于特定的细分市场,做精做细,让消费者在碰到此类问题时第一时间想到它们。此类应用大多需要用户进行购买,因此更容易产生现金流。

    4.  消息提醒类应用

          消息提醒类应用在市场上出现的越来越多。人们一般对联系类应用比如Email、短信会开启消息提醒。其他的应用目前还没有广泛采用此类消息提醒,因为提醒的时机选择不当会很容易让用户心烦,而且这种后台程序会极大的消耗电池电量。随着将来提醒系统更加智能,手机电池容量的增大,这一领域的应用会逐渐增多。

          当然这一分类并未遵循严格的“相互独立,完全穷尽”的MECE原则,有些应用可能在不同的使用场景下处于不同的分类中(文中的Facebook就是一例)。

    http://cdixon.org/2012/05/21/four-use-cases-for-mobile-apps/

  • Jquery插件–easyUI属性汇总(转)

    找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大部分功能属性做了一下汇总。

    此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里

    属性分为CSS片段和JS片段。

    CSS类定义:
    1、div easyui-window        生成一个window窗口样式。
          属性如下:
                       1)modal:是否生成模态窗口。true[是] false[否]
                       2)shadow:是否显示窗口阴影。true[显示] false[不显示]
                
    2、div easyui-panel           生成一个面板。
           属性如下:
                     1)title:该标题文本显示在面板头部。
                     2)iconCls:在面板上通过一个CSS类显示16×16图标。
                     3)width:设置面板宽度。默认auto。
                     4)height:设置面板高度。默认auto。
                     5)left:设置面板左边距。
                     6)top:设置面板顶部位置。
                     7)cls:在面板中增加一个Class类。
                     8)headerCls:在面板头部中增加一个Class类。
                     9)bodyCls:在面板内容中增加一个Class类。
                    10)style:在面板中增加一个指定样式。
                    11)fit:当True时设置该面板尺寸适合于它的父容器。默认false。
                    12)border:当定义时显示面板边界。默认true。
                    13)doSize:如果设置为True,该面板将重绘大小,并重建布局。默认true。
                    14)collapsible:当定义时显示可折叠面板的按钮。默认false。
                    15)minimizable:当定义时显示最小化面板的按钮。默认false。
                    16)maximizable:当定义时显示最大化面板的按钮。默认false。
                    17)closable:当定义时显示关闭面板的按钮。默认false。
                    18)tools:自定义工具栏,每个工具都包含两个属性:iconCls、handler。
                    19)collapsed:当定义时该面板初始化时处于收缩状态。默认false。
                    20)minimized:当定义时该面板初始化时处于最小化状态。默认false。
                    21)maximized:当定义时该面板初始化时处于最大化状态。默认false。
                    22)closed:当定义时该面板初始化时处于关闭状态。默认false。
                    23)href:一个url,加载远程数据并显示在面板中。
                    24)loadingMessage:当加载远程数据时,在面板中显示一个消息。默认Loading…
                 事件如下:
                     1)onLoad:当远程数据加载完毕后激活。
                     2)onBeforeOpen:当面板打开前激活。
                     3)onOpen:当面板打开后激活。
                     4)onBeforeClose:当面板关闭前激活。
                     5)onClose:当面板关闭后激活。
                     6)onBeforeDestroy:当面板销毁前激活。
                     7)onDestroy:当面板销毁后激活。
                     8)onBeforeCollpase:当面板收缩前激活。
                     9)onCollapse:当面板收缩后激活。
                    10)onBeforeExpand:当面板扩展前激活。
                    11)onExpand:当面板扩展后激活。
                    12)onResize:当面板重绘后激活。
                          width:新建的外部宽度
                          height:新建的外部高度
                    13)onMove:当面板移动后激活。
                         left:左侧新位置。
                         top:顶部新位置。
                    14)onMaximize:当窗口最大化

  • jquery-easyui Calendar 日历中文

    这两天一直在试用jquery-easyui

    里面的日历是英文的

     

    直接调用locale里面的语言版本cn或者tw

     

  • JS代码放在head和body中有区别吗?

    很多人对js代码放在网页中的位置并没有太多的了解,一般认为是放在head中的,放在body里也没什么所谓吧。

    事实上还是有区别的。

    放在head中的JS代码会在页面加载完成之前就读取,而放在body中的JS代码,会在整个页面加载完成之后读取。

    那么有什么不同呢?先看一个例子:
    一个二级级联动态下拉列表框,一级分类(即大类别)id=”vSort0″.
    代码如下:
    <head>
    function changelocation(id)
    {…………}
    </head>
    <body><select id=”vSort0″ name=”vSort0″ onChange=”changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value);” style=”width:100px;”>……省略……</select>
    ………………
    </body>

    现在有个js脚本:
    代码如下:
    <script LANGUAGE= “JavaScript” >
    changelocation(document.form4.vSort0.options[document.form4.vSort0.selectedIndex].value); //初始化第一个一级分类的二级分类,去掉后第一个一级分类的二级分类在页面载入之后不显示。回选才显示。将一级分类的value传给changelocation()函数,生成二级分类的列表
    </script>

    那么把这个js脚本放head里面还是body里面呢?
    答案是不仅要放到body里面,而且还得放到定义id=’vSort0′的列表框后面,因为这个js脚本中有document.form4.vSort0.selectedIndex,如果放到head里或者body的id=’vSort0′前,页面加载后顺序执行代码,执行到这个js发现vSort0未定义(即undefind),这个js也就失去了作用。
    而为什么我们经常看到有很多的人把js脚本放到head里面没事呢?对!
    就是因为你看到的在head里的js代码有onclick等事件传递了变量给函数。
    这就告诉我们,如果我们想定义一个全局对象,而这个对象与页面中的某个按钮(等等)有关时, 我们必须将其放入body中,道理很明显:如果放入head,那当页面加载head部分的时候,那个按钮(等等)都还没有被定义(也可以说是还没有被加 载,因为加载的过程就是执行代码的过程,包括了定义),你能得到的只可能是一个undefind。

    看来还是要注意了,js放的位置也很重要的。

  • CSS基础:解决图片元素下多余空白的BUG

     
     屏幕尺(推荐fast stone capture)

     

     
    在进行页面的DIV+CSS排版时,遇到IE6、IE7(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的对于该问题的解决方法也是「见机行事」,根据原因的不同要用不同的解决方法,这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳, 供大家参考。
    1、将图片转换为块级对像
    即,设置img为:
    display:block;
    在本例中添加一组CSS代码:
    #sub img {display:block;}
    2、设置图片的垂直对齐方式
    即设置图片的vertical-align属性为「top,text-top,bottom,text-bottom」也可以解决。如本例中增加一组CSS代码:
    #sub img {vertical-align:top;}
    3、设置父对象的文字大小为0px
    即,在#sub中添加一行:
    font-size:0;
    可以解决问题。但这也引发了新的问题,在父对像中的文字都无法显示。就算文字部分被子对像括起来,设置子对像文字大小依然可以显示,但在CSS效验的时候会提示文字过小的错误。
    4、改变父对象的属性
    如果父对象的宽、高固定,图片大小随父对像而定,那麽可以设置:
    overflow:hidden;
    来解决。如本例中可以向#sub中添加以下代码:
    width:88px;height:31px;overflow:hidden;
    5、设置图片的浮动属性
    即在本例中增加一行CSS代码:
    #sub img {float:left;}
    如果要实现图文混排,这种方法是很好的选择。
    6、取消图片标签和其父对象的最後一个结束标签之间的空格。
    这个方法要强调下,在实际开发中该方法可能会出乱子,因为在写代码的时候为了让代码更体现语义和层次清晰,难免要通过IDE提供代码缩进显示,这必然 会让标签和其他标签换行显示,比如说DW的「套用源格式」命令。所以说这个方法可以供我们了解出现BUG的一种情况,具体解决方案的还得各位见招拆招了.

  • 来自某群的99的分享

    盛大创新院面试页面重构的js题目。。。

    ★列出display的值
    可用值 值的说明
    block 象块类型元素一样显示。
    none 缺省值。向行内元素类型一样显示。
    inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
    list-item 象块类型元素一样显示,并添加样式列表标记。
    table-header-group 显示在任何表格行和行组合之前,在头部标题之后。
    table-footer-group 显示在任何表格行和行组合之后,在底部标题前。

    ★清除浮动与闭合浮动的不同点 (http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html)

    ★如何为元素绑定事件(就是addEvent)

    function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);//DOM2.0
    return true;
    }
    else if (elm.attachEvent) {
    var r = elm.attachEvent(‘on’ + evType, fn);//IE5+
    return r;
    }
    else {
    elm['on' + evType] = fn;//DOM 0
    }
    }

    ★window.onbeforeunload 的用法
    (http://www.cnblogs.com/snandy/archive/2012/05/03/2481019.html)

    ★说一下window.onerror的参数
    (http://blog.csdn.net/zzxll5566/article/details/6187943)

    ★列出IE与FF的事件对象的不同点
    (http://www.ok12.net/js/125.html)

    ★如何用CSS画三角形
    (利用border属性)

    ★你平时是如何调试JS代码的
    (firebug,IE开发人员工具,opera是当中最好的)

    ★如何判定一个脚本是否加载成功

    var script = document.createElement(‘script’) ;
    var head = document.getElementsByTagName(“head”)[0];
    head.insertBefore(script, head.firstChild);//规避IE6下自闭合base标签BUG
    script.onload = script.onreadystatechange = function(){//先绑定事件再指定src发出请求
    if(/loaded|complete|undefined/.test(this.readyState) && !this.once ){
    this.once = 1;
    this.parentNode.removeChild(this);
    }
    }
    script.src = ’http://files.cnblogs.com/rubylouvre/html5.js’

    (IE onreadystatechange事件,判定节点的readyState值是否为loaded或complete, 其他浏览器则使用onload)

    ★如何判定iframe里面的资源都加载完毕
    (http://www.cnblogs.com/lhgstudio/archive/2010/10/24/1859946.html)

    ★怎么判定一个节点是在DOM树中
    (http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583523.html)

    ★指出JS拖动的原理
    (将元素绝对定位,一点点地改变其top,left样式来实现移动的效果,top,left可以通过鼠标获取)

    ★说一下css transform2D与transform3D的区别(一个是2*3矩阵,一个是4*4矩阵,transform3D支持GPU硬件加速,更加流畅,建议用transform3D模拟transform2D)

    ★指出{}+[]与[]+{}的值,为什么 (第一个为0,因为{}放在语句在前面,JS引擎认为它只是一个块,不是空对象,相当于+[] ===> +”" ==> 0, 第二个是”[object Object]“,两者取toString(),然后相加)

    ★说一下浏览器资源加载的情况,IE与其他浏览器各版本的不同之外
    (http://www.otakustay.com/browser-strategy-loading-external-resource/)

    ★说一下最近非常流行模块加载,大概是怎么实现的,有什么好处(http://www.cnblogs.com/muguaworld/archive/2011/11/27/2265356.html)