jQuery中的mouseenter和mouseleave事件

由 愚人码头 撰写  |  2010/05/14 22:30 发表在 JS与RIA  |  评论 (6)

今天做一个下拉菜单的时候碰到了一个bug，用mouseout的时候，鼠标还没移出拉菜单就自动关闭了，
看案例：http://www.css88.com/demo/mouseleave/2.html

经过几番查阅发现了jQuery中还有mouseenter和mouseleave事件，这两个事件在手册中找不到，所以特地查阅了一番。

大家知道事件的冒泡特性，在上面的BUG中也正是因为这个冒泡特性，对于mouseover事件来说 ，当鼠标从其他元素 移动到 child节点时发生，但此事件会冒泡 所以会导致 parent 也出发mouseover。如果我们对 parent注册了 mouseover监听，从 parent移动到child 同样出发parent的mouseover 有时候我们不希望这样的事情发生。

对于 mouseover 和mouseenter 两个事件 最大的区别就是 mouseenter 是 不冒泡的事件，这时候 如果注册的监听 是mouseenter的话 无论鼠标从任何元素 移动到child时 只有child元素 发生mouseenter事件 而其祖宗节点 都不会因为冒泡 而触发此事件。

对于 mouseout 和mouseleave 也是如此 当鼠标从child 移出时 mouseout同样会冒泡到 parent 从而触发parent的 mouseout 二mouseleave 同样无此问题。

看demo：http://www.css88.com/demo/mouseleave/1.html

该日志被浏览1458次 标签：: | 阅读全文

[广州]招聘web前端开发工程师

由 愚人码头 撰写  |  2010/05/14 19:34 发表在 前端招聘  |  评论 (1)

web前端开发工程师
职位描述：
1、 负责Web前端系统和功能的开发、调试和维护；
2、 负责与设计人员和程序人员的沟通；
3、 前端技术框架和JS等互动效果开发。
职位要求：
1、 精通各种web前端技术，包括XHTML/XML/CSS/Javascript/Flash ActionScript等；
2、 能快速理解设计师意图，精通各种设计软件:Dreamweaver,Photoshop,Flash, Fireworks,ImageReady等；
3、 精通DIV+CSS布局的HTML代码编写，熟练手写标准CSS样式表，兼容各浏览器；
4、 精通前端展现框架的一种: Jquery, prototype EXT等JS框架；
5、 对用户可用性，用户体验，用户研究等相关知识有深入的了解和实践经验；
6、 熟悉基于Ajax技术的应用开发。
7、 （请在简历中附带近期作品）

有意者发送简历到 songzhumei_2007@163.com，工作地点：广州机场路 松竹梅唱片文化公司

该日志被浏览1060次 标签：: | 阅读全文

10个javascript Frameworks 外连

由 愚人码头 撰写  |  2010/05/14 15:46 发表在 JS与RIA  |  评论 (2)

google提供的10个javascript Frameworks 外连：

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


jquery UI


<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>




Chrome Frame


<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>




swfobject


<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>




mootools


<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>




Yahoo! UI


<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js"></script>




Prototype


<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>




Ext.JS


<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>




Dojo


<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>




Scriptaculous


<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

                        

          
该日志被浏览1030次
          标签：:, ,  | 阅读全文

          

        

      
        
        
      

        
jQuery1.4.2中关于:not(:first)一个问题
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/13 15:53
            发表在 JS与RIA
             | 
            
                        评论 (4)
            

          
          

            
            
昨天写了《用jq做的一个简单的折叠效果》结果发现了一个问题：


$(".acc_container:not(:first)").hide();



悲剧发生了，所有.acc_container类都被隐藏了，


尝试了很多方法之后页面找到问题所在，更加悲剧的事$(“.acc_container:not(:last)”).hide();在chrome下能运行，在ie下却不行，$(“.acc_container:not(:odd)”).hide();却能正常运行，悲剧了！


幸好jq森林群里的jackie给出了一个解决的方案：


$(".acc_container:not('.acc_container:first')").hide();



这样就能正常运行了。感谢jackie！


====================2010.5.14更新==================


redky在留言中也给出了一个新方法：


$('.acc_container').not(':first').hide();



经测试，jQuery1.3.2也存在这个问题！

                        

          
该日志被浏览1035次
          标签：: | 阅读全文

          

        

      
        
        
      

        
用jq做的一个简单的折叠效果
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/12 14:07
            发表在 JS与RIA
             | 
            
                        评论 (4)
            

          
          

            
            


今天看到了一个简单的折叠效果：http://www.sohtanaka.com/web-design/examples/accordion/


不过个人认为这个demo还有一点瑕疵，就是当该项已经展示的时侯，再次点击该项，那么该项应该关闭；所以做了个简单的demo。


查看demo：http://www.css88.com/demo/accordion/

                        

          
该日志被浏览1628次
          标签：:,  | 阅读全文

          

        

      
        
        
      

        
推荐一个svg的javascript库-Raphaël
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/11 15:37
            发表在 JS与RIA
             | 
            
                        评论 (2)
            

          
          

            
            
Raphaël是一个小型的Javascript库，它能够简化你为网页上的矢量图所作的工作。如果你想创建你自己的特定的图表或者图片剪裁和旋转部件，你可以用这个库简单轻松地实现它。


Raphaël使用SVG W3C推荐标准和VML作为创建图形的标准。这意味着你创建的每一个图形对象也是一个DOM对象，因此，您可以附加JavaScript的事件处理程序或以后修改它们。Raphaël的目标是提供一种适配器，使绘画艺术载体轻松做到跨浏览器兼容


Raphaël currently supports Firefox3.0+, Safari 3.0+, Opera 9.5+, Chrome 2.0+ and Internet Explorer 6.0+. Raphaël现在支持Firefox 3.0以上版本，Safari 3.0以上版本, Opera 9.5以上版本 , Chrome 2.0以上版本以及IE6.0以上版本。


官方网站：http://raphaeljs.com/


官方文档：http://raphaeljs.com/reference.html


一些插件：http://g.raphaeljs.com/

                        

          
该日志被浏览1057次
          标签：: | 阅读全文

          

        

      
        
        
      

        
【jq插件】Grade-打分效果
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/10 15:01
            发表在 JS与RIA
             | 
            
                        评论 (8)
            

          
          

            
            
一个打分效果：



$("#numberBox").grade({

addNum:5,

speed:300,

fontStyle:{                 "width":"100px",                 "height":"100px",                 "position":"absolute",                 "top":"0", "left":"0",                 "font-size":"36px",                 "font-weight":"700",                 "text-align":"center",                 "line-height":"100px"},

gradetype:"upmove"//默认“zoom”

})



addNum：加分的数值，可以为负数


speed：动画执行的速度


fontStyle：执行动画的层样式


gradetype：动画的类型，有:”upmove”何“zoom”（默认）


演示地址：http://www.css88.com/demo/grade/


下载地址：http://www.css88.com/demo/grade/grade.rar

                        

          
该日志被浏览1343次
          标签：: | 阅读全文

          

        

      
        
        
      

        
前端工程师的尴尬处境
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/10 08:28
            发表在 前端观察
             | 
            
                        评论 (19)
            

          
          

            
            
今天在《css那些事儿》群（82991297）里看到henry发的一段话，觉得非常有意思，所以转载过来跟大家分享一下：


A: 某小白MM，B: 后端程序员，C: 美工，D: 前端


A: 哎～D，你是做什么的呀？


D: 前端啊。


A: 前端是干什么的？


D: 前端… 前端就是做网站的。


A: 唉？我看网站不是 B 写出来的嘛，也没见你整天写代码呀？


D: 额… 我是做网站外观…


A: 唉？外观不是 C 画出来的吗？也没见你整天开 PS 呀？


D: （汗）我的工作就是把他俩的活儿结合起来…


A: [斜视] 唔，就这么轻松的工作嘛，什么都不用你干。


D: [内牛成河]

                        

          
该日志被浏览2386次
          标签： | 阅读全文

          

        

      
        
        
      

        
【jq插件】文字向上滚动textSlider
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/08 16:12
            发表在 JS与RIA
             | 
            
                        评论 (2)
            

          
          

            
            
一个文字向上滚动的插件。


调用代码：



$(document).ready(function(){
$(“#scrollDiv”).textSlider({
line:4,
speed:500,
timer:3000
});
});



其中：

line：滚动几行；

speed：滚动速度；

timer：自动滚动间隔；

演示地址：http://www.css88.com/demo/textSlider/textSlider.html


下载地址：http://www.css88.com/demo/textSlider/textSlider.rar


更多参考：http://www.css88.com/archives/717

                        

          
该日志被浏览1286次
          标签： | 阅读全文

          

        

      
        
        
      

        
模拟input type=file
          

        
        

          

            

            由 愚人码头 撰写
             | 
            2010/05/05 19:16
            发表在 (x)html+css, JS与RIA
             | 
            
                        评论 (6)
            

          
          

            
            
表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；




通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。


HTML代码如下：



<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>



这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。


注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input type=”file”的宽度


CSS代码如下：



.type-file-box{ position:relative;width:260px}

input{ vertical-align:middle; margin:0; padding:0}

.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}

.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }



注意：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”；


js代码：





$(function(){
var textButton="<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value='浏览...' class='type-file-button' />"
$(textButton).insertBefore("#fileField")；
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);





这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了


                        

          
该日志被浏览2548次
          标签： | 阅读全文