- 浏览: 2112686 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1878)
- [网站分类]ASP.NET (141)
- [网站分类]C# (80)
- [随笔分类]NET知识库 (80)
- [随笔分类]摘抄文字[非技术] (3)
- [随笔分类]养生保健 (4)
- [网站分类]读书区 (16)
- [随笔分类]赚钱 (7)
- [网站分类].NET新手区 (233)
- [随笔分类]网站 (75)
- [网站分类]企业信息化其他 (4)
- [网站分类]首页候选区 (34)
- [网站分类]转载区 (12)
- [网站分类]SQL Server (16)
- [网站分类]程序人生 (7)
- [网站分类]WinForm (2)
- [随笔分类]错误集 (12)
- [网站分类]JavaScript (3)
- [随笔分类]小说九鼎记 (69)
- [随笔分类]技术文章 (15)
- [网站分类]求职面试 (3)
- [网站分类]其他技术区 (6)
- [网站分类]非技术区 (10)
- [发布至博客园首页] (5)
- [网站分类]jQuery (6)
- [网站分类].NET精华区 (6)
- [网站分类]Html/Css (10)
- [随笔分类]加速及SEO (10)
- [网站分类]Google开发 (4)
- [随笔分类]旅游备注 (2)
- [网站分类]架构设计 (3)
- [网站分类]Linux (23)
- [随笔分类]重要注册 (3)
- [随笔分类]Linux+PHP (10)
- [网站分类]PHP (11)
- [网站分类]VS2010 (2)
- [网站分类]CLR (1)
- [网站分类]C++ (1)
- [网站分类]ASP.NET MVC (2)
- [网站分类]项目与团队管理 (1)
- [随笔分类]个人总结 (1)
- [随笔分类]问题集 (3)
- [网站分类]代码与软件发布 (1)
- [网站分类]Android开发 (1)
- [网站分类]MySQL (1)
- [网站分类]开源研究 (6)
- ddd (0)
- 好久没写blog了 (0)
- sqlserver (2)
最新评论
-
JamesLiuX:
博主,能组个队么,我是Freelancer新手。
Freelancer.com(原GAF – GetAFreelancer)帐户里的钱如何取出? -
yw10260609:
我认为在混淆前,最好把相关代码备份一下比较好,不然项目完成后, ...
DotFuscator 小记 -
日月葬花魂:
大哥 能 加我个QQ 交流一下嘛 ?51264722 我Q ...
web应用程序和Web网站区别 -
iaimg:
我想问下嵌入delphi写的程序总是出现窗体后面感觉有个主窗体 ...
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部 -
iaimg:
代码地址下不了啊!
C#自定义控件:WinForm将其它应用程序窗体嵌入自己内部
Douban是2.0 社区里面比较成功的一个产品, 里面ajax技术也做得不错, 把它的源码拿来研究了一下, 它在页面上使用了jquery, 我比较喜欢它的一体式的事件处理机制,不用写很多的事件绑定代码,只需要通过一定的命名规则就可以自动给页面元素加上一些功能, 它上面几乎所有的功能都通过这个实现, 配合jquery强大的选择器,代码看起来比较简洁清晰. 下面我们就来看看它的一些核心部分. 我使用的是jquery 1.2.3,压缩之后29kb大小, 速度感觉上比以前有比较大的改善.废话不多说了,直接看看代码吧. 另外推荐一下blueprint 这个css框架,还挺好用的.
//定义命名空间
var Bowtech=new Object();
//注册全局的事件监视器.
Bowtech.EventMonitor = function(){ <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
this.listeners = new Object();
}
//广播事件
Bowtech.EventMonitor.prototype.broadcast=function(widgetObj, msg, data){
var lst = this.listeners[msg];
if(lst != null){
for(var o in lst){
lst[o](widgetObj, data);
}
}
}
//绑定所有的事件.
Bowtech.EventMonitor.prototype.subscribe=function(msg, callback){
var lst = this.listeners[msg];
if (lst) {
lst.push(callback);
} else {
this.listeners[msg] = [callback];
}
}
//取消事件绑定.
Bowtech.EventMonitor.prototype.unsubscribe=function(msg, callback){
var lst = this.listener[msg];
if (lst != null){
lst = lst.filter(function(ele, index, arr){return ele!=callback;});
}
}
// Page scope event-monitor obj.
var event_monitor = new Bowtech.EventMonitor();
//对于所有 class="j a_xxx yyy" id="xxx-123"的元素执行事件绑定, xxx-123部分用来获取元素的ID,比如一个帖子的ID,
// a_xxx 后面的部
//分用来标识应用如 vote / review / blog 等.
//绑定的事件就是 : Bowtech.init_vote / Bowtech.init_blog 等.
function load_event_monitor(root) {
var re = /a_(\w+)/; //正则表达式获取ID.
var fns = {};
$(".j", root).each(function(i) {
var m = re.exec(this.className);
if (m) {
var f = fns[m[1]];
if (!f) { //如果事件处理函数不存在则创建函数对象.
f = eval("Bowtech.init_"+m[1]);
fns[m[1]] = f;//调用绑定函数.
}
f && f(this);
}
});
}
//在文档加载完毕后将执行的方法(参见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();
}); <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
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 worlddt>
<dd>
hahahadd>
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>
样式就省略了, 大家可以自己写, 最后发两个效果图:
收起时的样子 <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
发表评论
-
UML
2010-08-09 11:39 1280开放分类:计算机技术计算机术语计算机科学 收藏分享到顶[6] ... -
用WebService实现调用新浪的天气预报功能
2010-07-15 21:47 2952用WebService实现调用新 ... -
Cookie简介及JSP处理Cookie的方法
2010-07-29 09:28 942Cookie简介及JSP处理Cookie的方法 一.什么是 ... -
SQL Server 2005/2008 用户数据库文件默认路径和默认备份路径修改方法
2010-06-09 22:16 1226一直想把数据库的默认 ... -
C#Winform调用网页中的JS方法
2010-07-12 11:07 2202其实还是还是相当的简单,本文将详细的用代码来展示一下如何调用, ... -
用WebService实现调用新浪的天气预报功能
2010-07-15 21:47 1492用WebService实现调用新 ... -
SQL Server 2005/2008 用户数据库文件默认路径和默认备份路径修改方法
2010-06-09 22:16 1064一直想把数据库的默认 ... -
基于 VS 2010 阐述C# 4个特性
2010-05-28 09:26 1045基于 VS 2010 阐述C# 4个特性基于 VS 20 ... -
Google AdSense中文官方博客今天公布了AdSense内容广告与AdSense搜索广告的收入分成比例
2010-05-25 09:12 1083google adsense 的广告分成比例总算是公布出来了。 ... -
权限管理数据表设计说明
2010-05-21 15:19 1061权限管理数据表设计说明 B/S系统中的权限比C/S中的更显的 ... -
权限管理的设计方法
2010-05-20 09:26 1397权限管理的设计方法是 ... -
多表分页存储过程
2010-05-17 14:25 1037分页存储过程 在网站设计,网页开发中,是要被经常遇到的。 ... -
vs2010跟vs2008比较增加了哪些功能
2010-05-18 09:10 2234随着vs2010的发布,新的 ... -
COM域名难逃实名监管 CN域名简化流程抢用户
2010-05-13 09:22 1153互联网实名制的落实第 ... -
网站安全之XSS漏洞攻击以及防范措施
2010-04-29 08:59 1372在网站开发中,安全问题是重中之重的问题,特别像一个sql注入, ... -
深入了解ASP.NET运行内幕
2010-04-28 09:04 1147做事情要知道根本所在 ... -
WebBrowser中显示乱码
2010-04-22 09:09 1704最近在开发cs项目的时候,因为嵌套了一个网页,要用到we ... -
vps配置笔记(10)架设svn服务
2010-04-21 09:41 1228linux 下面架设svn服务器,有点难度,我找了好多资料,现 ... -
IEnumerable
2010-04-16 09:12 1249在平常的代码编写中,虽然不常用到Ienumerable 但却不 ... -
JS代码实例:实现随机加载不同的CSS样式
2010-04-19 13:38 1397如果让网页浏览者每次打开页面都有新的感觉,可以通过替换css样 ...
相关推荐
微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:豆瓣电影:使用API(源代码+截图)微信小程序demo:...
douban_Website, 基于NodeJs MongoDB jQuery搭建的豆瓣电影音乐网站
资源名称:jQuery技术内幕:深入解析jQuery架构设计与实现原理内容简介:本书首先通过“总体架构”梳理了各个模块的分类、功能和依赖关系,让大家对jQuery的工作原理有大致的印象;进而通过“构造 jQuery 对象”章节...
豆瓣豆瓣豆瓣豆瓣
使用动态IP池+cookie爬取豆瓣豆瓣影评数据
微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小...
PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿...
微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣电影 (源码)微信小程序 豆瓣...
jquery实现点击菜单页面全屏滑动切换。 内容自适应窗口大小垂直居中,菜单永久悬浮。
小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 豆瓣电影 (代码+截图)小程序源码 ...
内Web2.0的著名网站豆瓣,土豆,以及CCTV的网站也使用了JQuery来开发。 JQuery实战课程是一个系列课,采用每节课动手实战一个实例效果的方式来介绍如何使用JQuery快速开发AJAX前端应用, 并结合实例介绍一些前端...
豆瓣镜像源
豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试豆瓣api测试
微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip 微信小程序——豆瓣图书(截图+源码).zip ...
豆瓣电影短评数据集,20年左右的数据,可以用来研究,80M左右 数据存储使用的是SQlite数据库。使用起来应该比较方便。要浏览的话下个可视化软件就行,用的是SQLiteStudio。 爬的豆瓣电影短评。目前豆瓣似乎对一部...
基于微信小程序,构建的豆瓣电影项目,接口访问来自豆瓣api,目前功能有 搜索功能 下拉刷新 上拉加载 功能说明 接口访问来自豆瓣api,目前功能有 搜索功能 下拉刷新 上拉加载 代码说明 部分采用es6语言,组件化,...
使用豆瓣API、vue-router vuex webpack axios,实现仿手机豆瓣的项目
豆瓣镜像源
电影,电视剧,综艺等影视资源豆瓣ID,部分链接需要登录豆瓣才能打开哦~! 共计8W多条,适用于豆瓣信息采集!
豆瓣匠是一款专门针对豆瓣音乐相册下载的下载工具,软件使用简单,赶快下载吧。 豆瓣匠使用方法 将音乐人小站地址或相册地址添加到软件的地址栏,点击确定。可将该歌手的作品或相册图片加载到下方列表栏,选择要...