- 浏览: 7944152 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
经常在微BLOG上,或者象tudou,ku6等视频网站上,看到"查看评论"的按钮,点后
就显示列表,是AJAX效果的,找到老外的一篇文,讲这个实现:
http://davidwalsh.name/twitter-button
摘录如下:
先做好按钮
<FORM class=follow-form action=twitter-follow.php method=post>
<INPUT type=hidden value=123456 name=followID>
<BUTTON class="btn follow" title=123456 type=submit value="Actions">
<I></I><SPAN>follow</SPAN>
</BUTTON>
</FORM>
之后是样式
/* twitter button and its children */
2button.btn {
3 -moz-border-radius:4px;
4 -webkit-border-radius:4px;
5 background-attachment:scroll;
6 background-color:#ddd;
7 background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
8 background-position:0 0;
9 background-repeat:repeat-x;
10 border:1px solid #ddd;
11 border-bottom:1px solid #ccc;
12 color:#333;
13 cursor:pointer;
14 font-family:"Lucida Grande",sans-serif;
15 font-size:11px;
16 line-height:14px;
17 padding:4px 8px 5px 8px;
18 text-shadow:1px 1px 0 #fff;
19 vertical-align:top;
20}
21button.btn:hover {
22 border:1px solid #999;
23 border-bottom-color:#888;
24 color:#000;
25 background-color:#d5d5d5;
26 background-position:0 -6px;
27}
28button.btn:active {
29 background-image:none !important;
30 text-shadow:none !important;
31}
32
33button.btn i {
34 background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
35 background-position:-176px -32px;
36 background-repeat:no-repeat;
37 display:inline-block;
38 height:13px;
39 margin-right:5px;
40 width:15px;
41}
42button.btn i.active { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
43
44/* properties for the element that is generated *after* following */
45span.following { background:#ffd; padding:5px 10px; }
46span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }
首先是mootools:
* with mootools */
2window.addEvent('domready',function() {
3 /* fetch elements */
4 $$('form.follow-form').each(function(form) {
5 /* stop form event */
6 form.addEvent('submit',function(e) {
7 /* stop event */
8 if(e) e.stop();
9 /* send ajax request */
10 var i = form.getElement('i');
11 new Request({
12 url: 'twitter-follow.php',
13 method: 'post',
14 data: {
15 followID: form.getElement('input').value
16 },
17 onRequest: function() {
18 i.addClass('active');
19 },
20 onSuccess: function() {
21 var button = form.getElement('button');
22 button.setStyle('display','none');
23 new Element('span',{
24 html: '<SPAN></SPAN>Following!',
25 'class': 'following'
26 }).inject(button,'after');
27 },
28 onComplete: function() {
29 i.removeClass('active');
30 }
31 }).send();
32 });
33 });
34});
jquery的:
// Idiomatic jQuery by Doug Neiner
2jQuery(function ($) {
3 /* fetch elements and stop form event */
4 $("form.follow-form").submit(function (e) {
5 /* stop event */
6 e.preventDefault();
7 /* "on request" */
8 $(this).find('i').addClass('active');
9 /* send ajax request */
10 $.post('twitter-follow.php', {
11 followID: $(this).find('input').val()
12 }, function () {
13 /* find and hide button, create element */
14 $(e.currentTarget)
15 .find('button').hide()
16 .after('<span class="following"><span></span>Following!</span>');
17 });
18 });
19});
dojo:
/* when the DOM is ready */
2dojo.ready(function() {
3 /* fetch elements */
4 dojo.query('form.follow-form').forEach(function(form) {
5 /* stop form event */
6 dojo.connect(form,'onsubmit',function(e) {
7 /* stop event */
8 dojo.stopEvent(e);
9 /* active class */
10 dojo.query('i',form).addClass('active');
11 /* get button */
12 var button = dojo.query('button',form)[0];
13 /* ajax request */
14 dojo.xhrPost({
15 form: form,
16 load: function() {
17 dojo.style(button,'display','none');
18 dojo.create('span',{
19 innerHTML: '<SPAN></SPAN>Following',
20 className: 'following'
21 },button,'after');
22 }
23 });
24 });
25 });
26});
就显示列表,是AJAX效果的,找到老外的一篇文,讲这个实现:
http://davidwalsh.name/twitter-button
摘录如下:
先做好按钮
<FORM class=follow-form action=twitter-follow.php method=post>
<INPUT type=hidden value=123456 name=followID>
<BUTTON class="btn follow" title=123456 type=submit value="Actions">
<I></I><SPAN>follow</SPAN>
</BUTTON>
</FORM>
之后是样式
/* twitter button and its children */
2button.btn {
3 -moz-border-radius:4px;
4 -webkit-border-radius:4px;
5 background-attachment:scroll;
6 background-color:#ddd;
7 background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
8 background-position:0 0;
9 background-repeat:repeat-x;
10 border:1px solid #ddd;
11 border-bottom:1px solid #ccc;
12 color:#333;
13 cursor:pointer;
14 font-family:"Lucida Grande",sans-serif;
15 font-size:11px;
16 line-height:14px;
17 padding:4px 8px 5px 8px;
18 text-shadow:1px 1px 0 #fff;
19 vertical-align:top;
20}
21button.btn:hover {
22 border:1px solid #999;
23 border-bottom-color:#888;
24 color:#000;
25 background-color:#d5d5d5;
26 background-position:0 -6px;
27}
28button.btn:active {
29 background-image:none !important;
30 text-shadow:none !important;
31}
32
33button.btn i {
34 background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
35 background-position:-176px -32px;
36 background-repeat:no-repeat;
37 display:inline-block;
38 height:13px;
39 margin-right:5px;
40 width:15px;
41}
42button.btn i.active { background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }
43
44/* properties for the element that is generated *after* following */
45span.following { background:#ffd; padding:5px 10px; }
46span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }
首先是mootools:
* with mootools */
2window.addEvent('domready',function() {
3 /* fetch elements */
4 $$('form.follow-form').each(function(form) {
5 /* stop form event */
6 form.addEvent('submit',function(e) {
7 /* stop event */
8 if(e) e.stop();
9 /* send ajax request */
10 var i = form.getElement('i');
11 new Request({
12 url: 'twitter-follow.php',
13 method: 'post',
14 data: {
15 followID: form.getElement('input').value
16 },
17 onRequest: function() {
18 i.addClass('active');
19 },
20 onSuccess: function() {
21 var button = form.getElement('button');
22 button.setStyle('display','none');
23 new Element('span',{
24 html: '<SPAN></SPAN>Following!',
25 'class': 'following'
26 }).inject(button,'after');
27 },
28 onComplete: function() {
29 i.removeClass('active');
30 }
31 }).send();
32 });
33 });
34});
jquery的:
// Idiomatic jQuery by Doug Neiner
2jQuery(function ($) {
3 /* fetch elements and stop form event */
4 $("form.follow-form").submit(function (e) {
5 /* stop event */
6 e.preventDefault();
7 /* "on request" */
8 $(this).find('i').addClass('active');
9 /* send ajax request */
10 $.post('twitter-follow.php', {
11 followID: $(this).find('input').val()
12 }, function () {
13 /* find and hide button, create element */
14 $(e.currentTarget)
15 .find('button').hide()
16 .after('<span class="following"><span></span>Following!</span>');
17 });
18 });
19});
dojo:
/* when the DOM is ready */
2dojo.ready(function() {
3 /* fetch elements */
4 dojo.query('form.follow-form').forEach(function(form) {
5 /* stop form event */
6 dojo.connect(form,'onsubmit',function(e) {
7 /* stop event */
8 dojo.stopEvent(e);
9 /* active class */
10 dojo.query('i',form).addClass('active');
11 /* get button */
12 var button = dojo.query('button',form)[0];
13 /* ajax request */
14 dojo.xhrPost({
15 form: form,
16 load: function() {
17 dojo.style(button,'display','none');
18 dojo.create('span',{
19 innerHTML: '<SPAN></SPAN>Following',
20 className: 'following'
21 },button,'after');
22 }
23 });
24 });
25 });
26});
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 826刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 553三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 822https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1701即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1013不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3027参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93221. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 649http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 850http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10071 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 593虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 569【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1431https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 982(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1151https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3160http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1592canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 579http://www.ruanyifeng.com/blog/ ...
相关推荐
四种时兴的框架jQuery,Mootools,Dojo,ExtJS的对比
### 四种流行的AJAX框架对比分析:jQuery, Mootools, Dojo, ExtJS #### 一、jQuery **主页**: <http://jquery.com/> **设计思想**: - **简洁性**: 几乎所有操作都始于选择DOM元素,并对其进行操作(支持Chaining...
四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比.docx
四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比.pdf
本文将详细探讨四种流行的AJAX框架:jQuery、MooTools、Dojo和ExtJS。 1. **jQuery** - **简介**:jQuery是由John Resig于2006年初创建的JavaScript库,旨在简化DOM操作和AJAX通信。它适用于初级和高级开发者,...
在给定的标题"JavaScript libraries--->jQuery, Prototype, Mootools, YUI, Extjs, Dojo"中,提到了五种著名的JavaScript库:jQuery、Prototype、Mootools、YUI和ExtJS。这些库都有各自的特性和优势,下面将详细介绍...
#### 三、ASP.NET Ajax框架的具体组成部分 ##### 1. ASP.NET Ajax的组成 ASP.NET Ajax框架主要包括以下几个组成部分: - **AjaxLibrary类库(客户端)**:这是ASP.NET Ajax框架的核心组成部分之一,包含了用于...
Buffalo 是一种新型的 Ajax 框架,它通过在 JavaScript 和 HTML 元素之间建立绑定关系来实现数据双向同步。这意味着当 HTML 元素的状态发生变化时,相关的 JavaScript 代码也会自动更新。这种机制极大地简化了 Web ...
本文将详细介绍几种流行的AJAX框架:jQuery、Mootools、Dojo、Ext JS,并对比它们的特点,帮助开发者根据项目的具体需求选择最合适的框架。 #### 二、AJAX框架概述 AJAX框架是一种提供了一组API和工具集的软件库,...
【标题】和【描述】提及的是一个关于AJAX脚本框架选型的学习教案,主要讨论了四个不同的JavaScript框架:Mootools、Dojo、Ext JS以及轻量级框架的选型,包括jQuery。这些框架在AJAX应用开发中各有优缺点,适用于不同...
以下是关于如何在jQuery、mootools和Dojo中使用编程别名的一些知识点: 1. jQuery中的别名使用: jQuery是一个非常流行的JavaScript库,它提供了一套简洁的方法来进行DOM操作和AJAX调用等。在使用jQuery时,一个...
- 作为主流的JavaScript框架之一,jQuery与其他如YUI、Dojo、mooTools、Prototype等竞争,其性能经过测试,在某些方面表现出色。 - jQuery的特点包括轻量级、链式语法、CSS选择器支持、跨浏览器兼容性、易于学习和...
本压缩包中包含了多个流行的JavaScript框架及其使用文档,包括Dojo、Clean-AJAX 4.3、jQuery 1.3.2、MochiKit 1.4.2、MooTools 1.2.1、Prototype 1.6.0.2以及RialtoJavaScript。让我们逐一探讨这些框架的核心特点和...
与其他JS类库如Prototype、Dojo、Mootools、YUI和ExtJs相比,JQuery在关注度、应用范围以及优劣性方面均表现出色。 #### 未来展望 JQuery的未来充满了机遇。它不仅赢得了开发者的青睐,也获得了诸如微软、Google、...
6. **Archetype JavaScript Framework**:这个框架提供了一种全新的开发模式,试图简化复杂的前端开发流程,但详细信息较少。 7. **June Framework**:June是一个轻量级的框架,专注于简单性和易用性,为开发者提供...
jQuery 是一个广泛应用于Web开发的JavaScript库,它的出现极大地简化了JavaScript的使用,尤其是在处理DOM操作、事件处理、动画效果和Ajax交互等方面。本章主要介绍了jQuery的基本概念、历史、优势以及与其他...
Buffalo是一个用于实现Ajax模式和Web服务调用的框架,它极大地简化了JavaScript与服务器端的交互过程。Buffalo的主要特点是Buffalo Binding,这是一种自动将JavaScript变量与HTML元素属性同步的机制,使得状态更新变...