豆瓣网的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 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jquery 抽奖小程序实现代码
Oct 12 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
JS插件clipboard.js实现一键复制粘贴功能
Dec 04 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
js验证账户名是否重复
May 26 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字符串中插入子字符串方法总结
2016/05/06 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
JS启动应用程序的一个简单例子
2008/05/11 Javascript
JavaScript delete操作符应用实例
2009/01/13 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python中sys模块是做什么用的
2020/08/16 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
护士自我鉴定范文
2013/10/06 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
公司财务管理制度
2015/08/04 职场文书
课程设计感想范文
2015/08/11 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB