当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 豆瓣网的jquery代码实例

Javascript
玩透弹出窗口
几个常用的日期函数
简单的脚本帮你编排JScript程序中的缩进
得到 words.js?hello,world! 参数的处理方法
如何在javascript中传值
可输入的select
IE支持的HTML元素的DISABLE属性在NETSCAPE4.76中的实现
利用xml数据岛实现多级关联下拉选择框的做法
利用Wipe等ActiveX技术,实现n(n>>2)幅图片轮换擦洗显示
Javascript技术实现真正的网上试听
JavaScript实现在线编辑表格
根据客户端的分辨率不同而重定向到不同网页的脚本
几种不刷新页面取数据的方法
web进度条
随手写的一个动态添加删除行的HTC行为组件
农历与阳历的对照
关于在页面中解决打印的几个问题
"打开,另存为,属性,打印"等14个JS代码
无提示框关闭IE窗口
实现上传(增删)多个文件的客户端写法。

Javascript 中的 豆瓣网的jquery代码实例


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 48 ::
收藏到网摘: n/a

豆瓣网的jquery实例代码,效果不错,方便大家学习 在文档加载完毕后将执行的方法(参见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>

样式就省略了, 大家可以自己写, 最后发两个效果图:

收起时的样子