Archive for the ‘Javascript’ Category

Twitter Connect 转载自 Twitter 官方 Wiki

April 22, 2010 by SLJ | Category:Javascript, PHP | No Comment 601

Twitter Connect

Sign in with Twitter is the pattern of authentication that allows users to connect their Twitter account with third-party services in as little is one click. It utilizes OAuth and although the flow is very similar, the authorization URL and workflow differs slightly as described below.

The normal flow dictates that applications send request tokens to oauth/authorize in Twitter’s implementation of the OAuth Specification. To take advantage of Sign in with Twitter, applications should send request tokens in the oauth_token parameter to oauth/authenticate instead.

More »

转:使用 Dojo 开发离线应用

April 4, 2010 by SLJ | Category:HTML/CSS, Javascript | No Comment 179

Dojo 离线功能简介

所谓离线,指的是用户能够在没有网络的环境下也可以进行工作,并且当网络环境恢复后,之前的操作能够自动地同步到服务器上。目前,离线应用可以分为两种,一种是桌面应用,其中以 IBM Lotus Notes 为代表。另外一种则是近来比较热门的 Web 离线应用,其中最具代表的为 Google 的离线应用,如 Google Docs, Gmail, Google Reader 等。而本文介绍的 Dojo 离线功能,则是目前最为流行的实现第二种离线应用的框架。

More »

[下载] Dojo 中文手册《实战Dojo工具包》PDF

March 30, 2010 by SLJ | Category:Javascript | No Comment 195

实战Dojo工具包

一个品质远远超出“原型建造”的Ajax库

点击下载PDF:Dojo中文手册

使用回车键提交网页表单的条件

March 29, 2010 by SLJ | Category:HTML/CSS, Javascript | No Comment 132

回车键提交表单是我们经常操作的一个动作,而什么条件下能使回车键提交却很少有人关心!

我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。

要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,这里总结几条规则:
1、如果表单里有一个type=”submit”的按钮,回车键生效。
2、如果表单里只有一个type=”text”的input,回车键生效。
3、如果按钮不是用input,而是用button,并且没有加type,IE下默认为type=button,FX默认为type=submit。
4、其他表单元素如textarea、select不影响。

实际应用的时候,要让表单响应回车键很容易,保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢?我的方法有点别扭,就是再写一个无意义的文本框,隐藏起来。根据第4条规则,我们在用button的时候,尽量显式声明type以使浏览器表现一致。

一个demo,列出了一些例子

[英,转]45个新鲜有用的JS与jQuery技术和工具

March 15, 2010 by SLJ | Category:HTML/CSS, Javascript | No Comment 484

45 Fresh Useful JavaScript and jQuery Techniques and Tools

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful. In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

The last section also covers a number of useful educational resources such as a compilation of useful JavaScript coding practices, a detailed comparison of JavaScript frameworks and general JavaScript programming conventions. We are looking forward to your feedback.

More »

【好书PDF】:Building iPhone Apps with HTML, CSS, and JavaScript

March 7, 2010 by SLJ | Category:HTML/CSS, Javascript, iPhone | No Comment 209

点击查看下载大图-QuanPC.com全品网

出版商: Oreilly | ISBN: 0596805780 | 2010年1月  | PDF | 192页 | 2.8 Mb

It’s a fact: if you know HTML, CSS, and JavaScript, you already have the tools you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for the iPhone and iPod Touch on the platform of your choice-without using Objective-C or Cocoa.

More »

[原创]多选/全选checkbox,AJAX提交。另附IE的onchange BUG

March 6, 2010 by SLJ | Category:Design, HTML/CSS, Javascript, MySQL, PHP, Projects | No Comment 226

最近在为MeePlace 2.7的后台编写多选功能。在一个接一个的版本中,MeePlace的后台是越来越强大了(不够谦虚,hoho),后台采用纯ajax异步(有的时候觉得编程会有点麻烦,但是从1.0开始就是这样的后台,现在要改的话也麻烦,况且AJAX能给用户带来更好的体验,就继续开发吧:D)

这次后台增加的功能中,有一个是能够多选/全选项目,这个已经是历史遗留问题了,在我所有开发的项目中都是用这套自己开发的后台系统,改一改就成。这次布莱恩吧multi-selectable列在了Milestone里,所以就写了。以前有做过多选,不过由于是原始form的post,所以比较简单。这次用AJAX的后台多选操作,我还是想了一下才开始动手的。

我的想法是,通过遍历checkbox,来得到有被选定了的checkbox的value,然后再传给后端进行多选处理。

下面公开MeePlace的这部分代码。

全选按钮。用户点击全选的那个checkbox后,checkbox的onclick=”select_item_all(this,”allitem”,”childitem”)”
其中”allitem”是全选的checkbox的classname,因为也许这个全选会出现两个,或者更多,比如表头和表尾各一。
“childitem”是所有的条目前的checkbox的classname。
JS代码:
More »

10个jQuery Lightbox效果插件

January 28, 2010 by SLJ | Category:HTML/CSS, Javascript | No Comment 195

Lightbox弹框效果在很多地方都很有用。而原始的Lightbox脚本已经被无数次的克隆到了所有的流行Javascript库中。本文收集10个最佳的Lightbox效果插件。

jQuery Lightbox Plugin

Download Lightbox script

More »

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

January 27, 2010 by SLJ | Category:HTML/CSS, Javascript | No Comment 215

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

More »

LazyLoad – jQuery延迟载入插件

December 23, 2009 by SLJ | Category:Javascript | No Comment 232

不知道大家有没有发现,在浏览一些网站时,只有当你滚动到相应的地方,本该在那里显示的图片才会开始载入并显示,这明显减少了服务器的压力和流量,也能够减小浏览器的负担。
今天推荐一个 jQuery 的插件,就是用来 Lazy Load 的,大家看下面的官方页面学习使用方法吧。
http://www.appelsiini.net/projects/lazyload

↑ Top