按标签归档 jquery

JQ插件：slide滚动插件

由 愚人码头 撰写  |  2010/09/01 09:38 发表在 JS与RIA  |  评论 (6)

在很多原有的滚动插件上做了整合，重新封装了一下： 具体参数： JQ-Slide插件参数说明表 参数名 参数值(默认值可以省略) effect scroolY（默认）：垂直滚动 scroolX：水平滚动 scroolTxt：文本垂直滚动 fade：淡出 scroolLoop：水平左右点击滚动 autoPlay true（默认）： or false speed 动画速度时间，默认”normal”，可以使用毫秒或者JQ中的fast，slow，normal timer 滚动间隔时间，默认”1000，可以使用毫秒或者JQ中的fast，slow，normal claNav JQ-slide-nav（默认）：触点对象数组父级 claCon JQ-slide-content（默认）：滚动对象或滚动对象父级 steps 1（默认）：滚动几个 演示地址及使用请移步：http://d2.sodao.com/demo/Slide/

仿微软Office 迷你工具条（简易编辑器）

由 愚人码头 撰写  |  2010/05/26 23:42 发表在 JS与RIA  |  评论 (5)

前几天在网上看到一篇《Why and how to create Microsoft Office Minibar with jQuery and CSS3》,酷似一个简易编辑器。 只要实现了获取文本框（textarea）内的所选字符和光标位置索引值-selection实现这个效果其实还是蛮简单的。 由于原文代码太乱，所以我重写一下这个效果； demo：http://www.css88.com/demo/edit-box/

JQ插件：获取文本框（textarea）内的所选字符和光标位置索引值-selection

由 愚人码头 撰写  |  2010/05/26 16:51 发表在 JS与RIA  |  评论 (6)

用javascript写网页编辑器，获取textarea中的光标位置和选取的文本是一个非常常见的问题。今天用jQ封装了这么一个插件。 在Firefox，safari,chrome,opera的标准浏览器下获取这些textarea中的光标位置非常简单： function Selection(obj) var start =obj.selectionStart; var end = obj.selectionEnd; return {"start":start,"end":end} } 这里的obj是文本框或者文本域对象； 如果要获取所选择的文本那就很简单了: obj.value.substring(Selection(obj).start,Selection(obj).end) 点击查看demo：http://www.css88.com/demo/edit-box/ff-test.html 悲剧的是IE就比较麻烦了，ie如果要获取所选择的文本还是非常简单的，可以直接使用： document.selection.createRange().text; 但是ie要获取光标在字符串中的索引位置就比较麻烦了：

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

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>

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也存在这个问题！

用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/

jQuery广告轮播插件-ADRoll

由 愚人码头 撰写  |  2010/04/25 13:35 发表在 JS与RIA, 前端框架  |  评论 (3)

一个广告轮播效果,这个是应冰剑的要求写的一个滚动效果，不知道冰剑提的是不是这样。 大家可以看看上一个效果：jQuery广告轮播插件-ADSlide 插件的调用： $(“#myjQuery”).ADRoll({ speed : “normal”,//动画效果的速度 num : 4,//广告个数 timer : 3000,//动画效果的时间间隔 imgHeight:"289"//图片的高度 }); 演示地址：http://www.css88.com/demo/ADSlide/index2.html 下载地址：http://www.css88.com/demo/ADSlide/ADRoll.rar

jQuery广告轮播插件-ADSlide

由 愚人码头 撰写  |  2010/04/23 20:52 发表在 JS与RIA, 前端框架  |  评论 (5)

一个广告轮播效果,这个插件也曾经写过，参见：http://www.css88.com/archives/722 不过这次表现上和上个例子有些不同，其实是一样的代码。 插件的调用： $(“#myjQuery”).ADSlide({ speed : “normal”,//动画效果的速度 num : 4,//广告个数 timer : 3000,//动画效果的时间间隔 flowSpeed :300//滑块的延迟时间 }); 演示地址：http://www.css88.com/demo/ADSlide/ 下载地址：http://www.css88.com/demo/ADSlide/ADSlide.rar

【jQuery插件】冒泡效果

由 愚人码头 撰写  |  2010/04/13 00:16 发表在 JS与RIA, 前端框架  |  评论 (3)

今天网上看到了一个冒泡效果，所以自己照着样子重新写了一个，基本和原来的保持一直。 基本的使用方法： $("div#demo ul#menu li img").bubbleup({ tooltip: false,//是否提示文本 scale:120,//放大后的图片宽度 fontFamily:'Helvetica, Arial, sans-serif',//提示文本字体 color:'#333333',//提示文本字体颜色 fontSize:12,//提示文本字体大小 fontWeight:'bold',//提示文本字体粗细 inSpeed:'fast',//鼠标划过放大时的速度 outSpeed:'fast'//鼠标已出缩小时时的速度 }); 演示地址：http://www.css88.com/demo/bubbleup/ 原文地址：http://aext.net/2010/04/bubbleup-jquery-plugin/