月度归档:2012年05月

ToFishes系列jQuery插件之jSuggest – 搜索框输入框自动下拉提示内容补全插件

很久前就完成的一款插件,应用于高人网(gaoren.com)自动补全提示功能。

该插件只托管了键盘各种事件,输入框change事件,及ajax请求过程。下拉提示内容如何显示,及数据请求后的格式解析等均可以自己自定义,可以说如何显示,如何安排数据格式,完全由心。算是比较灵活了,当然灵活的代价就是配置项,需要写的比较多了。

还没想好插件的使用帮助,先放出demo和下载。有个bug是opera最新版下,按住方向键,下拉选项不能连续选择。

在输入框内输入内容,可以获取到来自淘宝数据的提示:

点击查看单独Demo和和获取下载,已更新至V2。

wordpress主题制作常用到的方法函数

页面编码:<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />;
页面标题:wp_title( ‘|’, true, ‘right’ );
博客名称:bloginfo( ‘name’ );
博客描述:<?php bloginfo( ‘description’ ); ?>
博客样式:<link rel=”stylesheet” media=”all” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” />
博客主页地址:<a href=”<?php echo home_url( ‘/’ ); ?>”></a>
博客主题地址:<link rel=”shortcut icon” type=”image/x-icon” href=”<?php bloginfo(‘template_url’)?>/img-res/favicon.ico” />
博客导航,一步生成 :<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?>
全局当前页码:global $page, $paged;
wordpress官方列举的全局变量列表: http://codex.wordpress.org/Global_Variables

Continue reading wordpress主题制作常用到的方法函数

这才是真正的网站可用性

一直到现在,都认为一个网站的真正可用性,应该是开发之时就不考虑js应用,完全纯静态页面+后端程序打造一个网站,最后才去添加js应用,这个比较针对ajax部分,同一个url对应的后端方法至少需要两个,一个是对ajax请求响应,返回部分数据,一个是对普通get请求响应,返回整个页面。

js(比如jQuery)的事件绑定机制,可以让你轻松暴露真实的链接地址,但是点击了该链接,通过return false阻止浏览器默认行为,就可以走ajax途径,做到良好的页面效果。当js被禁用,该链接可以依然有效。

js(比如jQuery) 可以让你做到,对搜索引擎是纯静态的内容,而对用户却是由ajax动态载入和更新的内容。既不影响用户体验,也不会影响搜索引擎搜录 。

以上都是附属,非正题,而且说起来容易,想做好却是工作量巨大。回归正题,今天在浏览资讯,无意关联到了一个网站,发现其首页的幻灯切换真正体现了什么叫 网站可用性

看图,这是在禁用js的情况下截图:

这样的外观很常见,应该很容易想到js效果是怎样的。

而该幻灯效果在禁用了js的情况下, 外观没有很大改变,仅仅是右侧出现了一个滑动条,可以拖动以浏览幻灯的不同内容,而左下角的数字标识则是以锚点的方法依然起作用,点击数字可以跳到锚点对应的图片幻灯内容。

话说,之前从未想过如此去做一个幻灯效果,怎么样,有木有启示?!

该网站地址为:http://www.mymodernmet.com/

Node.js使用的场景

工欲善其事必先利其器, 利其器前也要选好这个“器”。Nodejs好像很好,但是也不是什么场景都好用,以下可以做些参考。

来源于:http://cnodejs.org/topic/4f97d5b8407edba2146030dd

原文地址在这里:http://nodeguide.com/convincingtheboss.html 英文版,题目的意思是说服老板的指南,文章中就Node.js应用场景这一重要话题说了一些看法,我摘取其中比较重要的段落,翻译在这里:

Continue reading Node.js使用的场景

Express.js中文入门指引手册

来源于:http://www.csser.com/board/4f77e6f996ca600f78000936

Express 是基于 Node.js,高性能、一流的web开发框架。

本手册由一回于 2011-4-24 首次翻译,如今已经过去接近一年,express 最新的版本已经与当时翻译有些脱节,为了方便内容更新,将使用 csser 开发的贴板功能进行维护,也方便大家针对细节进行讨论,并请指出翻译不当之处。

express 的安装

$ npm install express

或者

$ npm install -g express

创建服务器

要创建 express.HTTPServer 的实例,只需简单的调用 createServer() 方法即可。通过 HTTPServer 实例 app 我们可以定义基于 HTTP 动作(HTTP verbs)的路由(routes),本例中为 app.get()

var app = require('express').createServer();

app.get('/', function(req, res){
  res.send('hello world from csser.com!');
});

app.listen(3000);

Continue reading Express.js中文入门指引手册

NodeJS入门

来源于: http://www.nodebeginner.org/index-zh-cn.html

关于

本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。

状态

你正在阅读的已经是本书的最终版。因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新。

本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作。

读者对象

本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验;对JavaScript处于初学阶段,并且完全是一个Node.js的新手。

这里指的适合对其他编程语言有一定经验的开发者,意思是说,本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书,这些基础的概念我都默认你已经会了。

然而,本书还是会对JavaScript中的函数和对象作详细介绍,因为它们与其他同类编程语言中的函数和对象有很大的不同。

本书结构

读完本书之后,你将完成一个完整的web应用,该应用允许用户浏览页面以及上传文件。

当然了,应用本身并没有什么了不起的,相比为了实现该功能书写的代码本身,我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。 是不是很玄乎?稍后你就明白了。

本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。

紧接着,会带领大家完成一个最传统的“Hello World”应用,这也是最基础的Node.js应用。

最后,会和大家讨论如何设计一个“真正”完整的应用,剖析要完成该应用需要实现的不同模块,并一步一步介绍如何来实现这些模块。

可以确保的是,在这过程中,大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。

该应用所有的源代码都可以通过
本书Github代码仓库.

Continue reading NodeJS入门