豆瓣网的jquery代码实例


Posted in Javascript onJune 15, 2008

在文档加载完毕后将执行的方法(参见jquery文档) 
一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外. 
比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定. 

//需要手动调用 load_event_monitor(element);   方法.  
$(function() {  
 load_event_monitor(document);  
});  
//注意这里的o对象是一个html 元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数  
//把它转化为jquery对象.  
Bowtech.init_forder = function(o) {  
 var eid = $(o).attr(“id“).split(“-“)[1];  
 var fo = $(“#f-“+eid);  
 var unfo = $(“#unf-“+eid);   fo.click(function() {  
 $(o).hide();  
 unfo.show();  
 fo.hide();  
 });  
 unfo.click(function() {  
 $(o).show();  
 fo.show();  
 unfo.hide();  
 });  
}  

jQuery.fn.extend({  
 set_caret: function(){  
 if(!$.browser.msie) return;  
 var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()};  
 this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);  
 },  
 insert_caret:function(textFeildValue){  
 var textObj = this[0];  
 if(document.all && textObj.createTextRange && textObj.caretPos){  
 var caretPos=textObj.caretPos;  
 caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == ” ? textFeildValue+” : textFeildValue;  
 } else if(textObj.setSelectionRange){  
 var rangeStart=textObj.selectionStart;  
 var rangeEnd=textObj.selectionEnd;  
 var tempStr1=textObj.value.substring(0,rangeStart);  
 var tempStr2=textObj.value.substring(rangeEnd);  
 textObj.value=tempStr1+textFeildValue+tempStr2;  
 textObj.focus();  
 var len=textFeildValue.length;  
 textObj.setSelectionRange(rangeStart+len,rangeStart+len);  
 textObj.blur();  
 } else {  
 textObj.value+=textFeildValue;  
 }  
 }  
}) 

前台要用就比较简单了, 只需要这样写:
<div id=”test2″ class=”mod”>  
 <h3>  
 这里可以放标题  
 </h3>  
 <div class=”j modb a_forder” id=”modb-1002″>  
 这里是一些主要的内容  
 <dl>  
 <dt>Hello world</dt>  
 <dd>  
 hahaha</dd>  
 </dl>  
 这个实验在沙加的神舟本上完成  
 </div>  
 <div class=”edit”>  
 <a id=”f-1002″ class=”forder” href=”javascript:void(0);”>[收起]</a> <a id=”unf-1002″  
 class=”unforder” href=”javascript:void(0);”>[展开]</a>  
 </div>  
 </div> 

样式就省略了, 大家可以自己写, 最后发两个效果图:
豆瓣网的jquery代码实例
收起时的样子
豆瓣网的jquery代码实例
Javascript 相关文章推荐
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
node.js中的console用法总结
Dec 15 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
个人小程序接入支付解决方案
May 23 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JQuery实现自定义对话框的代码
Jun 15 #Javascript
javascript基本语法分析说明
Jun 15 #Javascript
javascript新手语法小结
Jun 15 #Javascript
JavaScript入门学习书籍推荐
Jun 12 #Javascript
asp.net和asp下ACCESS的参数化查询
Jun 11 #Javascript
json跟xml的对比分析
Jun 10 #Javascript
json 定义
Jun 10 #Javascript
You might like
生成卡号php代码
2008/04/09 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
javascript hashtable实现代码
2009/10/13 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
js常用代码段整理
2011/11/30 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
jquery实现下拉菜单的手风琴效果
2017/07/23 jQuery
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
python Django模板的使用方法
2016/01/14 Python
玩转python爬虫之正则表达式
2016/02/17 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
django删除表重建的实现方法
2019/08/28 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
python PIL模块的基本使用
2020/09/29 Python
python request 模块详细介绍
2020/11/10 Python
会计专业毕业生自我评价
2013/09/25 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
校本研修个人总结
2015/02/28 职场文书
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS
Java异常处理try catch的基本用法
2021/12/06 Java/Android