按作者归档: 愚人码头

JQ插件：slide滚动插件

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

在很多原有的滚动插件上做了整合，重新封装了一下： 具体参数： 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/

【IE6的疯狂系列】IE6下position:absolute相邻元素margin-top失效的bug

由 愚人码头 撰写  |  2010/08/24 11:11 发表在 (x)html+css  |  评论 (7)

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效； 看demo把（请用ie6围观）：http://www.css88.com/demo/absolute-bug/absolute-bug.html 这里有几个条件： 相邻元素是有width属性的，如果去掉width属性，margin-top又会生效，点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-1.html 增加相邻元素浮动，margin-top也会又会生效；点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-2.html 如果没有复杂的背景什么的可以使用padding-top替换margin-top； 还可应在相邻元素间插入一个空标签的方法： <div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div> <!–[if IE 6]> <div></div> < ![endif]–> <div style="margin-top: 35px; width: 100px; float: left; background-color: #3fc;">此处eeeeeeeee显示新 Div 标签的内容</div> 点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-4.html ———————————————— 另赠送一个IE6下与float元素相邻的position:absolute元素消失BUG 围观地址：http://blog.dengsa.com/?p=342 http://www.webchina110.cn/?p=105

Javascript浅拷贝与深拷贝

由 愚人码头 撰写  |  2010/08/08 23:53 发表在 JS与RIA  |  评论 (3)

js中的赋值都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.引用就是浅拷贝。 深拷贝就是不紧复制对象的基本类,同时也复制原对象中的对象.就是说完全是新对象产生的，新对象所指向的不是原来对像的地址。 Javascript深拷贝有很多封装的方法，大家网上可以搜索一下.看下面这个例子： var S=KISSY, obj={a:"a",b:"b"}; var newObj=S.clone(obj);//深拷贝 var newObj1=obj;//浅拷贝，赋值 obj.b="b2"; S.log(obj);//{a:"a",b:"b2"} S.log(newObj);//{a:"a",b:"b"} S.log(newObj1)//{a:"a",b:"b2"}

js中的hasOwnProperty和isPrototypeOf方法

由 愚人码头 撰写  |  2010/08/05 19:26 发表在 JS与RIA  |  评论 (0)

hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。 isPrototypeOf是用来判断要检查其原型链的对象是否存在于指定对象实例中，是则返回true，否则返回false。 function siteAdmin(nickName,siteName){ this.nickName=nickName; this.siteName=siteName; } siteAdmin.prototype.showAdmin = function() { alert(this.nickName+"是"+this.siteName+"的站长!") }; siteAdmin.prototype.showSite = function(siteUrl) { this.siteUrl=siteUrl; return this.siteName+"的地址是"+this.siteUrl; }; var matou=new siteAdmin("愚人码头","WEB前端开发"); var matou2=new siteAdmin("愚人码头","WEB前端开发"); matou.age="30"; // matou.showAdmin(); // alert(matou.showSite("http://www.css88.com/")); alert(matou.hasOwnProperty("nickName"));//true alert(matou.hasOwnProperty("age"));//true alert(matou.hasOwnProperty("showAdmin"));//false alert(matou.hasOwnProperty("siteUrl"));//false alert(siteAdmin.prototype.hasOwnProperty("showAdmin"));//true alert(siteAdmin.prototype.hasOwnProperty("siteUrl"));//false alert(siteAdmin.prototype.isPrototypeOf(matou))//true alert(siteAdmin.prototype.isPrototypeOf(matou2))//true

js数组去重

由 愚人码头 撰写  |  2010/08/03 19:33 发表在 JS与RIA  |  评论 (13)

js数组去重就是把数组中重复的元素去掉： Array.prototype.delRepeat=function(){ var newArray=new Array(); var len=this.length; for (var i=0;i<len ;i++){ for(var j=i+1;j<len;j++){ if(this[i]===this[j]){ j=++i; } } newArray.push(this[i]); } return newArray; } 但是很明显这里有for循环内嵌了另一个for循环，在大数据量下肯定非常耗时！效率低下！经过查找和高人指点优化了一个新方法：

使<pre>的内容自动换行

由 愚人码头 撰写  |  2010/07/29 00:07 发表在 (x)html+css  |  评论 (9)

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源代码。 而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。 点击查看：http://www.css88.com/demo/pre/index-1.html 今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题： 1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。 点击查看：http://www.css88.com/demo/pre/index-2.html 2.查看了pre的浏览器默认样式：

各浏览器的默认CSS

由 愚人码头 撰写  |  2010/07/28 23:18 发表在 (x)html+css  |  评论 (6)

在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。 各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份： IE6(下载) IE7(下载) IE8(下载)

腾讯即时通讯企业产品中心招聘Web前端开发工程师、网页重构工程师

由 愚人码头 撰写  |  2010/07/21 16:02 发表在 前端招聘  |  评论 (3)

工作地点：上海 Web前端开发工程师 工作职责： 1．负责web产品网站的前端实现； 2．协助web产品网站的性能优化； 职位要求： 1．精通各种Web前端技术，包括XHTML/XML/CSS/Javascript/ActionScript等（JS和AS之一即可）； 2．深刻理解Web标准，对可用性、可访问性等相关知识有实际的了解和实践经验； 3．有基于Ajax或Flash的RIA应用开发经验； 4．至少精通一门非Web前端脚本的语言（如Java/PHP/C++，PHP优先），并有项目经验； 5．个性乐观开朗，逻辑性强，善于和各种背景的人合作； 6．计算机、数学、自动化等相关专业本科以上学历优先； 7．两年工作经验以上。 ============================================== 网页重构工程师 工作职责： 1．负责web产品网站的页面原型实现； 2．协助web产品网站的性能优化； 职位要求： 1．对符合web标准的网站重构有丰富经验，有成功案例； 2．精通结构化语言xhtml、xml与解释性语言css； 3．精通图像处理软件与网页编辑软件； 4．对业界最新的页面实现有浓厚的兴趣和深入的见解； 5．逻辑分析能力强，善于沟通，较强的学习能力； 6．熟悉对象模型与脚本语言，有前台开发、门户网站重构经验者优先考虑； 7．计算机、数学、自动化等相关专业本科以上学历优先； 8．两年工作经验以上。 ========================================= 以上岗位来都为急聘，请直接发简历到：phourmliang@tencent.com，主题注明“xxx应聘xxx岗位 ”，条件符合者我们马上安排面试，谢谢！

JS森林杂志创办建议征集

由 愚人码头 撰写  |  2010/07/20 11:05 发表在 未分类  |  评论 (0)

欢迎大家提出自己的看法，由于平常大家都忙于工作和学习，因此杂志内容会尽量简练却可以学到东西又不会太累。你想让杂志提供什么样的内容呢？欢迎在 http://www.jsforest.org/2010/07/19/jsfzine-is-running-out/ 留言，或者twitter森林：@jsforest_org

页面模块化实现的条件和基本实现思路

由 愚人码头 撰写  |  2010/07/10 16:14 发表在 (x)html+css, 前端观察  |  评论 (8)

页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。 比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。 《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件： 为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。 我们应给怎么样建立一套设计规则呢？ 首先我们要从页面的表现开始，视觉上我们要采用统一的视觉设计规则，比如： 应用网页栅格化来确定网页布局； 页面标题栏，字体大小，文本间距统一； 表单类的表现统一，比如按钮，文本框等； 图片规格统一； 行为类的弹窗，浮层等表现统一； 等等… 其次为模块编写统一的html结构， 要合理使用语言化的标签； 可以保存成代码片段或者单独的html文件等， 如果需要可以加上适当的注释； 考虑扩张性和维护性；