豆瓣网的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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
Ionic快速安装教程
Jun 03 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python实现简易内存监控
2018/06/21 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python制作填词游戏步骤详解
2019/05/05 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
python脚本后台执行方式
2019/12/21 Python
python实现udp聊天窗口
2020/03/31 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
造型师求职自荐信
2013/09/27 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
暑期培训心得体会
2014/09/02 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL