IT花园

10个非常值得收藏的JavaScript参考手册

2012年2月2日橄榄皮没有评论

目前，越来越多的开发者认识到了客户端脚本和Ajax的强大作用，纷纷在网站或Web应用中加入了交互功能或者视觉效果，JavaScript俨然成为了他们开发过程中不可或缺的语言。

本文整理了10个JavaScript参考手册，希望能够提高你的Web开发的效率。

1. QuicklyCode——速查表和编程素材

你可以在这个网站中找到各种速查表以及其他开发者的资源，这些对于你的JavaScript编程工作非常有用。

2. gotAPI——开发文档速查工具

针对HTML、JavaScript、CSS、AJAX、Web2.0以及其他技术文档的速查工具。

3. JavaScript 速查表

一个JavaScript快速参考指南，内容涉及各种函数、方法、正则表达式以及XMLHttpRequest对象。

4. Dojo 1.3 API 速查表

由Kyle Hayes设计，包含了完整的API，完全兼容Dojo 1.3。

5. MooTools 1.2 速查表

包含了Core、Native、Class、Element、Utilities 和Request有关的文档。

6. jQuery 1.3 速查表

该速查表提供了jQuery 1.3库中的函数和属性的快速参考。

7. jQuery 选择器

理解jQuery选择器是更有效地使用jQuery库的关键。这个参考手册主要就是针对jQuery选择器的。

8. JQuery 1.3 可视化速查表

这是一个对于设计师和开发者来说非常实用的jQuery参考手册，基于jQuery 1.3，包含了完整的jQuery API，并有详细的说明和示例代码。

9. DOM JavaScript 速查表（PDF）

包含了最常见的DOM方法，一目了然。

10. JavaScript 功能支持一览

该页面显示了主流浏览器对于JavaScript各个功能的支持情况。

英文原文：10 Must Have JavaScript Cheat Sheets

From: http://www.iteye.com/news/24119

分类: Web前端标签:

节约时间提高效率的CSS工具们

2012年2月2日橄榄皮没有评论

设计师应该在追求完美的同时学会如何偷懒。本文为你介绍18个节约时间提高效率的CSS工具，尽管手写CSS代码是件很牛逼的事情，但善用工具会让你避免沦为傻逼。

CSS3 Generator

CSS3现在已经开始进入越来越多网络工作者的视线内。无论你是想学一门新技术，还是想进一步优化自己手中或未来的项目，CSS3都是不错的选择。这个网站为你生成CSS3提供的各种特效源码，还配有特效示例，相当不错！

Color Scheme Designer

设计师们最头疼又最基本的工作是什么？当然是那些眼花缭乱的颜色。网站为你提供直观的色盘和你的搭配示例。

Ultimate CSS Gradient Generator

现在许多网站都喜欢用渐变色，它可能出现在网站背景、按钮或字体上，这样设计显得生动、有层次、更漂亮。这款在线工具为你生成常见的更神渐变效果，当然包括示例和CSS代码。

CSS Layout Generator

许多用过CSS的同学都知道，CSS布局是令人抓狂的课题。相信这个网站能帮到大家（或许还有我自己）。

CSS Grid Builder Online

自960Grid起，Grid的设计理念广为流传。这个在线工具让你创建更贴合自己需要的网格。

Type Setter

信息的载体离不了文字，如何利用合适的文字类型吸引用户注意并表达信息，是设计师重要工作。网站提供各类字体的在线预览。

Awesome Font stacks

多种独特的字体可供选择。

From: http://paranimage.com/18-tools-for-css/ (注：经过整理)

分类: Web前端标签:

30 jQuery Accordion Menus, Tutorials And Best Examples

2011年8月12日橄榄皮没有评论

1. Yup, Yet another JQuery Accordion Plugin

Simple free jQuery accordion plugin. Available in 4 versions. Check out the tutorial how to use it, get the code, and download all the source files. Some of the new features:

Built according to the JQuery Plugin pattern
No more need for menus to have an ID
An ‘active’ class is now added to each toggle that has an open panel below it
Panels that hold other things than lists. You can now add anything
Nested accordions

Check out the demo here.

2. jQuery UI Demo

See examples of different use of accordion, see how to set it up, get the source and read about Options, Events, Theming.

3. Stupid Simple jQuery Accordion Menu

Very detailed tutorial about including jQuery in your mockup, creating the JavaScript, creating CSS and HTML. You can also view the demo and download all files.

4. Making Accordion Menu Using jQuery

In this post, you’ll see two examples of accordion. First menu’s visibility gets toggled on clicking on the header while the another menu’s visibility gets toggled when mouse is moved over it. See the tutorial and download source files as well.

5. jQuery Accordion Menu

Step by step tutorial that will take you through the creation of a jQuery accordion menu. Of course, you can view the demo and download source files.

6. jQuery Examples – Horizontal Accordion

Learn how to create easy horizontal accordion menu.

7. jQuery – Horizontal Accordion

This jQuery plugin allows you to easily transform any unordered list into a horizontal menu. Explore tutorial, see documentation and different examples of use here.

8. State-Saving jQuery Accordion Menu Without Reloading the Page

Learn how to create tweaked accordion menu, in which you can bookmark and re-access sections without re-clicking on them. View demo and download source too.

9. Accordion Menu Screencast Tutorial

Learn how to build a simple, unobtrusive, accordion style menu using basic events and animations.

10. Regular and Hover Accordion Menus

See example of hover accordion menu, learn how to create it and download the plugins.

11. Haccordion – Simple Horizontal Accordion Plugin for jQuery

Simple and fast plugin for creating simple horizontal accordion menus. Demo included.

12. Exactly How to Create a Custom jQuery Accordion

The plan for this tutorial is to show how to create an accordion using the jQuery UI function, then create one using some custom coding. You’ll be using a blog sidebar as an example. View demo and get the source.

13. Simple Accordion w/ CSS and jQuery

Detailed tutorial how to create great looking accordion menu. You can also check out Toggle tutorial. View demo.

14. Accordion Madness

One of the options how to create accordion menu.

15. A Simple and Beautiful jQuery Accordion Tutorial

Learn how to create the well-known JavaScript accordion with the most minimal amount of HTML, CSS, JS and of course, with a beautiful interface as well. Check out demo and download source.

16. Slide Out and Drawer Effect

This tutorial will walk through how to create your own simple plugin, and then replicate the Apple downloads drawers using the very excellent Accordion plugin. Demo and code included.

17. Create Simplest Accordion Menu using jQuery

Another simple tutorial how to create standard accordion menu. View demo and download files.

18. TinyAccordion JavaScript Accordion

This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. It now includes multi-level support, a parameter to determine whether only one panel can be expanded concurrently, and a hide/show all toggle. For more information visit leigeber.com.

19. Javascript Accordion Menu Wizard

Javascript Accordion Menu is an image based site navigation menu. Scriptocean Accordion Menu Wizard supports horizontal and vertical accordion menus. Download here.

20. Horizontal JavaScript Accordion 1kb

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more.

Examples

21. Alex Cohaniuc Portfolio

22. Deluge Studios

23. Rzmota

24. Screenfluent

25. Artisanmedia

26. Exotics RTC

27. Two Chaps

28. Ten 18 Photography

29. We Are Lighthouse

30. DJ Eric C

Extra: Grid Accordion – $8

Perfect for a grid gallery. The usual worry about displaying multiple images at the same time is eliminated here because of its smart code structure. Seen in Code Canyon, a marketplace of Envato where all sold items are topnotch in quality because before they even get to be showcased, experts see to it that products are up to standards. Plus very warm support from the coder himself/herself!

From: http://www.1stwebdesigner.com/freebies/jquery-accordion-menus-tutorials/

分类: Web前端标签: jQuery, WEB

CodeIgniter实现多文件上传

2011年8月10日橄榄皮没有评论

方法一：

You either need to give each file input a unique name (featured_image_0, featured_image_1) etc, and process each one in a loop, or overload the Uploader class to handle file upload arrays.

Copying this from an earlier post I made:

So, yeah, I was failing to pass $config from my constructor to CI_Upload’s constructor…

I also updated it so the API remains the same, just call $this->upload->do_upload(), not ->do_multi_upload()

<?php

class MY_Upload extends CI_Upload {

function MY_Upload($props = array())
{
parent::CI_Upload($props);
}

function do_upload($field = ’userfile’)
{
$success = FALSE;
if (isset($_FILES[$field]) and is_array($_FILES[$field]['error']))
{
// Create a pseudo file field for each file in our array
for ($i = 0; $i < count($_FILES[$field]['error']); $i++)
{
// Give it a name not likely to already exist!
$pseudo_field_name = ’_psuedo_’. $field .’_’. $i;
// Mimick the file
$_FILES[$pseudo_field_name] = array(
‘name’ => $_FILES[$field]['name'][$i],
‘size’ => $_FILES[$field]['size'][$i],
‘type’ => $_FILES[$field]['type'][$i],
‘tmp_name’ => $_FILES[$field]['tmp_name'][$i],
‘error’ => $_FILES[$field]['error'][$i]
);
// Let do_upload work it’s magic on our pseudo file field
$success = parent::do_upload($pseudo_field_name);
}
}
else
// Works just like do_upload since it’s not an array of files
{
$success = parent::do_upload($field);
}
return $success;
}

}

A few caveats that should be addressed: The $this->upload->data() method will only return data of the last file to be uploaded, not all files uploaded. If one of the fields errors, there is no way to know which individual one was erroneous. Not impossible problems to solve, but the code above has yet to address either of them. I’ll work on rounding it out if I get some time, or need to do it myself.
For now, it might be good to just have unique names for x number of upload fields, then process each one individually.
Here’s my controller:

<?php

class Upload extends Controller {

function Upload()
{
parent::Controller();
}

function index()
{
$data = array(
‘error’ => array(),
‘upload_data’ => array(),
);

$this->load->helper(‘form’);

$config['upload_path'] = ’uploads’;
$config['allowed_types'] = ’gif|jpg|png’;
$config['max_size'] = ’2048′;
$config['max_width'] = ’1024′;
$config['max_height'] = ’768′;
$this->load->library(‘upload’, $config);

if ( !

$this->upload->do_upload())
{
$data['error'] = array(‘error’ => $this->upload->display_errors());
}
else
{
$data['upload_data'] = $this->upload->data();
}

$this

->load->view(‘sandbox/upload’, $data);

}

}

And my view:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html > <head> <title>Multi Upload Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body>

<? foreach ($error as $msg) : ?>
<div style=”color: red; display: block; margin: 12px 0″><?= $msg ?></div>
<? endforeach; ?>

<?

if (count($upload_data)) : ?>
<ul>
<?php foreach($upload_data as $item => $value):?>
<li><?php echo $item;?>: <?php echo $value;?></li>
<?php endforeach; ?>
</ul>
<? endif; ?>

<h1>Single File Upload</h1>

<?= form_open_multipart(‘sandbox/upload’) ?>
<div><?= form_upload(‘userfile’) ?></div>
<div><button type=”submit”>Upload!</button></div>
</form>

<

h1>Multiple File Upload</h1>

<?= form_open_multipart(‘sandbox/upload’) ?>
<div><?= form_upload(‘userfile[]‘) ?></div>
<div><?= form_upload(‘userfile[]‘) ?></div>
<div><?= form_upload(‘userfile[]‘) ?></div>
<div><button type=”submit”>Upload!</button></div>
</form>

</

body> </html>

Signature

Check out the Template Library
Oh yeah, I tweet, too (regarding CodeIgniter on occassion).

方法二：

public function upload() { // setup the config $config['upload_path'] = "/Projects/{$this->config->item('common_path')}/assets/images/series/featured/"; $config['allowed_types'] = 'gif|jpg|png'; $config['overwrite'] = TRUE; $config['remove_spaces'] = TRUE; $this->load->library('upload', $config);

$image_types = array(“image/jpeg”, ”image/gif”, ”image/x-png”, ”image/png”);

$images = array();
// $imagesarray = array();
$series = $this->input->post(‘featured_series’);
// we are saving the featured series…
for($i =0; $i <= count($_FILES); $i++)
{
if(in_array(strtolower($_FILES['featured_image_'.$i]['type']), $image_types))
{
// get the extension
$extension = split(“[/\\.]“, strtolower($_FILES['featured_image_'.$i]['name']));
$extension = $extension[(count($extension)) - 1];

// get the new filename... $category = $this->category_model->getCatbyID($series[$i]); $_FILES['featured_image_'.$i]['name'] = url_title(strtolower($category['name']),'dash') . '.' . $extension; if(!$this->upload->do_upload("featured_image_{$i}")) { $error = $this->upload->display_errors(); dump($error); } else { $data = $this->upload->data(); dump($data); } } } }

分类: CodeIgniter, PHP+MySQL 标签: CodeIgniter, MySQL, PHP

全球3大项目外包和接单网站介绍

2010年12月2日橄榄皮没有评论

1. Elance
Elance成立于1999年，位于美国加利福尼亚州山景城，是全球最好的外包网站之一。

Elance可以帮助企业在线雇用和管理专业人才，并最终顺利完成项目工作。与此同时，Elance也为个人和团队及外包公司提供了一个没有时间地点限制的找项目平台。网站另外也提供了很多非常好的工具来帮助发包方和接包方顺利地完成项目工作和费用结算。

Elance被誉为目前含金量最高的项目兼职网站。根据万事网(VastWork.com)统计，Elance最近一个月(2010-11)，项目平均金额1,173美元；最近一周，项目平均金额1,134美元；最近24小时内，新增项目607个，项目平均金额1,281美元。

根据Elance官方最近的数据，Elance已经拥有接近17万位各类有效并且活跃的专业人才，包括：技术、市场和商务等类别。有超过20万的雇主通过Elance发布项目。项目交易总额超过3亿美元。相对于Guru和Freelancer上100万的注册用户数， Elance的注册用户数量并不十分突出，然而其项目交易总额却名列前茅。由此可见，Elance被誉为目前含金量最高的项目兼职网站并非浪得虚名。从这里可以了解更多Elance介绍。

2. oDesk

oDesk成立于2002年，位于美国加利福尼亚州门洛帕克，它是全球最好的外包网站之一。成立时间比其他外包网站晚，但发展却非常迅速。oDesk在其官方介绍中就表示: 自2004年，oDesk每年都在成倍地增长。

VastWork的统计数据表明，在oDesk上，按小时付费的项目数量较其他项目外包网站高出很多。oDesk官方也声称，通过oDesk独特的方式，可以保障雇主付出一小时的费用，得到一小时的工作。相同地，oDesk也可以保障接包方每工作一个小时，得到一小时的付款。

根据 VastWork.com统计，oDesk最近一个月(2010-11)，项目平均金额3,259美元；最近一周，项目平均金额838美元；最近24小时内，新增项目651个，项目平均金额235美元。

根据oDesk官方最近的数据，oDesk每个月有数千家发包方发布规模不一的项目，项目涉及金额6,500万美元。oDesk已经拥有接近数十万的各类优秀专业人才，包括：开发，图形设计，作家，客服，虚拟助手等类别。从这里可以了解更多oDesk介绍。

3. Freelancer

Freelancer成立于2004年2月，位于澳大利亚悉尼市，在瑞典也有设有分支机构。它是全球最好、最活跃的外包网站之一。

官方网站声称，自成立到目前，有效注册会员高达180多万。这是国外项目外包网站中声称拥有超过100万用户的两家网站之一，另一家是Guru。该网站接项目的费用比Elance更低廉，这个项目网站的不足之处是项目金额普遍不大。根据其官方的数据统计，自成立到目前，发布项目数量接近80万个，涉及项目金额 6,380万美元。不过，根据VastWork.com最近的统计数字来看，该网站的项目平均预算金额已经大有增长。参见下面的数据。

根据VastWork.com统计，Freelancer最近一个月(2010-11)，项目平均金额636美元；最近一周，项目平均金额559美元；最近 24小时内，新增项目535个，项目平均金额528美元。

Freelancer网站的项目种类包括：技术，市场和商务等类别。绝大多数的项目都是固定预算类，按小时付费的项目较少。从这里可以了解更多Freelancer介绍。

本文来源：伯乐在线 - 职场博客 - 自由职业者
数据来源：万事网
本文链接：http://www.jobbole.com/entry.php/351

转载请注明原文出处和超链接等版权信息，否则视为侵权，谢谢合作！

分类: DeoWorks 标签: WEB, 项目外包

在magento模板开发中, jQuery与Prototype库同时使用

2010年11月26日橄榄皮没有评论

如何才能在magento 中共用jQuery和Prototype呢，方法有很多种，jQuery 早就考虑到这点而提供了接口来帮助程序员处理共用两个库或能引起的冲突。

如果是先加载其它的js库，之后加载jQuery库，可以使用下列方法来处理。

方法一：jQuery 库和它的所有插件都是在jQuery 名字空间内的，包括全局变量也是保存在jQuery 名字空间内的。默认使用$符号作为jQuery 的缩写。jQuery.noConflict();则是在任何时候，只要是在jQuery 库加载后就可以调用，将$符号的使用权返回给其它的js库，如果你想知道是什么实现的，其实很简单，jQuery 在创建它自己的名字空间时就将其它库的$保存在自己的一个变量当中，你可以自己去看一下jQuery 的源代码。

<mce:script src=”prototype.js” mce_src=”prototype.js”></mce:script>
<mce:script src=”jquery.js” mce_src=”jquery.js”></mce:script>
<mce:script type=”text/javascript”><!–
//各个js库之间的主要冲突在于$的冲突，这个方法是用来处理这个问题的
jQuery.noConflict();

//原本使用jQuery代码部分的$用jQuery替代
jQuery(document).ready(function(){
jQuery(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).hide();

// –></mce:script>

方法三，如果你还是想使用$，而不想使用别的字符，也是可以的。而且通常程序员都比较喜欢这样做，因为这样做写好的代码几乎都不用替换原来的$符号。那就是利用名字空间的概念就所有的jQuery代码封装在document的ready事件名字空间范围内，如：

<mce:script src=”prototype.js” mce_src=”prototype.js”></mce:script>
<mce:script src=”jquery.js” mce_src=”jquery.js”></mce:script>
<mce:script type=”text/javascript”><!–
//$j就相当于jQuery，名称你可以自主定义
var $j = jQuery.noConflict();

// Use jQuery via $j(…)
$j(document).ready(function(){
$j(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).hide();

// –></mce:script>

如果是先加载jQuery库，再加载其它的js库

按照这样的顺序加载，就不存在其它js库的$符号被jQuery占用的问题。所以对其它的js库的代码可以不作任何修改，照常使用$，而对jQuery可以使用jQuery来替代$.如：

<mce:script src=”prototype.js” mce_src=”prototype.js”></mce:script>
<mce:script src=”jquery.js” mce_src=”jquery.js”></mce:script>
<mce:script type=”text/javascript”><!–
jQuery.noConflict();

// Put all your code in your document ready area
jQuery(document).ready(function($){
// 这样你可以在这个范围内随意使用$而不用担心冲突
$(“div”).hide();
});

// Use Prototype with $(…), etc.
$(‘someid’).hide();

// –></mce:script>

或者你不想写jQuery这么长的字符，你可以通过

var $j = jQuery;

来实现简短一点的$j，这可能是最好的办法了。

不过，当你只想使用jQuery来写代码时，你可以通过名字空间仍然使用$,即采用和jQuery源代码一样的方法：

(function($) {
/* 在这个名字空间内，你可以随意使用$符号来引用jQuery，只不过是其它$被jQuery使用，你不能使用prototype或其它的js库 */ }
)(jQuery)

这样我们就可以轻松的在magento 中同时使用多个js库，尤其是jQuery这个插件丰富的而且社区活跃的js库。

分类: Magento, Web前端标签: jQuery, Magento, WEB

Problem sending mail with PHP mail function

2010年10月21日橄榄皮没有评论

PHP mail function change From info solution:

The problem seems to be that PHP use the ini directive sendmail_from to set the from email address in the SMTP protocol. If this is not correctly set, or if it does not match the from header in the email headers, the email is caught by spam protection software.

The simplest solution is to set the directive during execution:

ini_set("sendmail_from", $email_from);


$headers = "From: $email_from";

mail($to, $subject, $message, $headers);

分类: PHP+MySQL 标签: Mail, PHP

如何在网页中显示特殊字体??

2010年9月24日橄榄皮没有评论

一：通过 @font-face 引入外部字体

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

技术实现：

@font-face { font-family: “Baroque Script”; src: url(‘BaroqueScript.ttf’) }

优点：

简单易行，且此方案会成为今后在此类问题上一个主流的处理方法。

缺点：

截止到目前为止其却并没有获得很多浏览器，尤其是 IE 系列浏览器的完整支持。

@font-face

IE（≥ 4，仅支持 OpenType）Firefox（≥ 3.5） Opera（≥ 10.0） Safari（≥ 3.1）

二：SIFR网页字体替换技术

sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。示例：http://newlifeuniting.com/

优点：

sIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成；
如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来。
sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸。
sIFR兼容所有的屏幕阅读机，至今还没有问题被报道出来。
sIFR的文本可以被鼠标选择，尽管当全选文本时，选中的状态看上去不那么确切。
sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容。

缺点：

不支持浏览器的右键点击功能（上下文菜单）
不支持apple的option键
没有状态条信息
页面必须完全载入后，JavaScript才能替换文本
如果在同一时间屏幕上有很多的sIFR实例，会有明显的延迟；虽然一个好的服务器可以帮助你，但是真正消耗时间的是运行那些体积庞大的Javascript

总结：

在页面标题上使用sIFR。
有限度的使用sIFR，以获得最佳的下载时间。
不要在链接上使用sIFR。

技术实现：

选择合适的SWF生成工具：http://ianpurton.com/sifr/ or http://www.sifrgenerator.com/wizard.html
原理及调用方法：通过生成的JS文件，sIFR.replaceElement(“h2″)替换掉自己网站中对应标签内的文字。当访问者不支持JS的时候（例如手机访问），样式表内的visibility: visible!important就不会生效。（题外话，虽然都是隐藏内容，但是display:none会把占用的空间抹掉，而visibility 会保留他占用的空间。）
官方参考资料（文章底部有FLA源文件下载）：http://www.mikeindustries.com/blog/sifr/

三：使用 Cufon 渲染网页字体

Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。

简言之 Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，这也就意味着其也可以通过 <script /> 标记引入到当前页面下，并交由 Cufon 类库进行解析和处理。

这真是一个“伟大”的创意！虽然其也面临着一个天然的障碍，那就是大部分的字体创建者并不会根据 Cufon 标准，来发布他们的字体文件。比如在上例中所使用的 Baroque Script 字体就是一种 TrueType 标准字体。因此显然的，如果我们希望某一字体可以为 Cufon 类库所处理，那么开发人员首先面临的问题，就是如何将使用其他标准描述的字体文件，转换为 Cufon 字体文件。这对大部分的开发人员而言当然是一个非常艰难的工作。

所幸的是 Cufon 已经为开发人员，准备了相应的在线工具 http://cufon.shoqolate.com/generate/，来实现这一转换过程。而目前工具所可以转换的字体标准则包括了 TrueType、FreeType2、OpenType、PostScript Font 等多种，应该说这几乎囊括了当前主流的一些字体创建标准，Cufon 的普适性由是可见一斑。

优点：

相对于@font-face来说，Cufon可兼容大部分浏览器：

Cufon IE（≥ 5） Firefox（≥ 1.5）Opera（≥ 9.5）Safari（≥ 3）Google Chrome（≥ 1.0）

Cufon 不仅能够针对标记文字进行字体的渲染，而且更为重要的是，这种渲染显然还参考了标记所对应的 CSS 风格 font-size，这对于实际的 Web 应用开发当然是非常重要的，也是 Cufon 技术的一个“特色”所在。

Cufon 配置项	对应 CSS 风格	备注
color	color
fontSize	font-size	在 Cufon 配置项下使用时，仅允许使用 px 作为风格的单位
fontStyle	font-style
fontWeight	font-weight
fontStretch	font-stretch	CSS3 风格，仅允许通过 cufon 配置项进行使用，如果在 CSS 文件中指定，则会被部分浏览器视为无效而忽略
letterSpacing	letter-spacing
textTransform	text-transform

技术实现：

引入 Cufon 核心库：<script src=”cufon-yui.js” type=”text/javascript”></script> //下载：cufon-yui.js
引入 Cufon 字体文件：<script src=”Baroque_Script_400.font.js” type=”text/javascript”></script>
使用 Cufon.replace 方法对标记字体进行渲染<script> Cufon.replace(‘p’); </script>

说明：

语法	说明
value	渲染所有以 value 为名称的标记下文本
#value	渲染以 value 为标记的 id 属性值的标记下文本
.value	渲染所有 class 属性值为 value 的标记下文本
选择符联合	可以使用的联合符有空格（“ ”），大于号（“>”）等，相关含义则可参考 CSS 选择符联合的相关说明

在 Cufon 中设定相关字体渲染配置项值的方法，则主要有以下两个。

通过 Cufon.set 方法设定相关配置项。Cufon 类库提供有专门的 Cufon.set 方法，可用于指定当前所使用的配置项值，其语法规范为：Cufon.set(“配置项名称”, 配置项值 )，如：Cufon.set(“color”, “#FF0000″);
在 Cufon.replace 方法中，直接设定相关的配置项值：Cufon.replace(“选择符”, {“配置项 1″ : 值 , “配置项 2″: 值 , …… });如：Cufon.replace(“#id1″, {fontFamily : “Baroque Script”});Cufon.replace(“#id2″, {fontFamily : “Whiteboard Modern Demo”});

点这里下载资源(src.zip 140K)

注意：

Cufon 在处理字符问题上的一个策略，即 Cufon 会“忽略”掉不存在于其字体文件中的字符。比如在 Whiteboard Modern Demo 字体中，并没有包含针对字符“2”的书写方法，因此自然的当 Cufon 在使用这一字体显示字符时，如果遇到需要输出“2”的情形，其就会主动的将其“忽略”处理
如果不指明所需要使用的字体，那么在使用 Cufon.replace 方法，对字体进行渲染时，系统将缺省使用最后引入的字体。
Cufon 仅能够且仅允许处理使用 Cufon 字体文件描述的字体。
使用 Cufon 渲染的标记将会覆盖对应标记下所有子标记的 font-family 属性

Cufon 实现原理初探及应用：

在 Firefox 浏览器上，如果读者使用鼠标右键，单击经 Cufon 渲染的文字，就可以发现这些文字，现在“竟然”已经可以按照图片模式进行查看和存储了。

这无疑暗示了，Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。

而这自然就牵涉到了一个非常重要的问题，即如何“直接”在网页上实现“作画”呢？总体来看目前业界比较成熟的方案，有以下三种。

使用 Java Applet 进行绘画。
通过 ActionScript 语言在 Flash 内进行绘画。
借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。通常的，这些方案又都和浏览器 DOM 对象以及 JavaScript 语言紧密相关。

Cufon 使用的正是上述第三种解决方案。

四： Google Font API

Google从2010年5月19日启动了网页在线字体服务，并一口气发布了十八字体族。但与 Monotype Web Fonts、FontShop 等字体商不同，Google 这次开放的字体与它其他很多服务一样，完全免费。

Google 目前提供的字体共有十八种，均为目前比较流行的免费字体，包括为 Android 而开发的 Droid 系列，被称为“Fonts for Scholars”的 Cardo，为代码印刷而设计的 Inconsolata，业余之作而不胫走红的 Yanone Kaffeesatz 等等，其中最能引人注目的是字体师 John Fell 设计的 IM Fell 字体。

优点：

可兼容大部分浏览器在Google字体库里也有很多时尚和个性化的字体供你选择，并且由于是开源字库，所以不管是商业或者个人，Google Font API都适用。
Google Font API并不依赖于JavaScript，因此即使用户禁用了JavaScript，Google字体依然可以显示。Google字体在CSS 3中的表现同样出色，任何额外的样式都可以被添加，比如CSS 3中的text-shadow属性

缺点：

对中文字体大小估计不足，中文字体的大小确实不是一般的大，如果要在Google的开放字体目录中提供完整的中文字体，估计有困难，依据现在的带宽来看，即使可以提供，用户也不愿意的那么长的时间。
尽管在Google字体库里有一些字体是不错的选择，但这种选择有相当有限的。
绝大多数浏览器在字体渲染前，就会加载剩余的页面，这可能会留下一个空白。
Google Font API并不支持移动浏览器，例如在iPhone、iPad或者Android里并不适用。

技术实现：

在浏览器中打开Goggle字体库
引入 google在线字体文件：<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>
调用方法：<style> body { font-family: ‘Tangerine’, serif; font-size: 48px; } </style>

实现原理：

Google Font API的实现得益于浏览器可加载服务器端字体文件的功能。这一功能的使用是通过在样式中定义@font-face属性，也就是本文所介绍的第一种方法。 Google Font API中加载的正是Google开放字体目录中的字体文件，拿Reenie Beanie字体来说，Google定义的方式如下：

view source print ?

`1`	`@font-face {`

`2`	`font-family:` `'Reenie Beanie';`

`3`	`src:` `url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');`

4 }

个人推荐：综合上述三种方法，从浏览器兼容性、中英文兼容性、性能方面考虑，第三种方法——Cufon无疑是最值得推荐的方法！

from:http://icejune.com/?p=704

分类: Web前端标签: Font, WEB

HTML5 WebSockets 基础使用教程

2010年8月11日橄榄皮没有评论

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。

您还可以参考以下HTML5相关文章:

《关于HTML 5 canvas 的基础教程》

《让所有IE支持HTML5的解决方案》

《一起感受HTML5和CSS3的能量》

什么是WebSockets？

WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。

WebSockets将会替代什么？

WebSockets可以替代Long Polling(PHP服务端推送技术)，这是一个有趣的概念。客户端发送一个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另一个请求。这有它的好处：减少任一连接的延迟，当一个连接已经打开时就不需要创建另一个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发生请求暂停，因此会需要建立新的连接。

一些AJAX应用使用上述技术-这经常是归因于低资源利用。

试想一下，如果服务器在早晨会自启动并发送数据到那些希望接收而不用提前建立一些连接端口的客户端，这是一件多棒的事情啊！欢迎来到PUSH技术的世界！

第一步：搞定WebSocket服务器

这篇教程会把更多的精力放在客户端的创建而不是服务器端的执行等操作。

我使用基于windows 7的XAMPP来实现本地运行PHP。phpwebsockets是PHP WebSocket服务器。(以我的经验这个版本存在一些小问题，我已对它做了些修改并上传源文件共享给大家)下面的这些不同版本也可以实现WebSocket，如果某个不能用，你可以试试其它版本或者继续看下面的教程。

jWebSocket (Java)

web-socket-ruby (ruby)

Socket IO-node (node.js)

启动Apache服务器

html5-websocket-apache

第二步：修改URLs和端口

根据你之前的安装修改服务器，下面是setup.class.php中的例子：

1
2
3
4

public function __construct($host=‘localhost’,$port=8000,$max=100)

{

$this->createSocket($host,$port);

}

浏览文件并在适当情况下进行更改。

第三步：开始创建客户端

下面来创建基本模板，这是我的client.php文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>

<html>

<head>

<title>WebSockets Client</title>

</head>

<body>

<h1>WebSockets Client</h1>

</div><!– #chatLog –>

<p id=“examples”>e.g. try ‘hi’, ‘name’, ‘age’, ‘today’</p>

<button id=“disconnect”>Disconnect</button>

</div><!– #container –>

</div>

</body>

</html>

我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。

第四步：添加一些CSS

没什么花俏代码，只是处理一下标签的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {

font-family:Arial, Helvetica, sans-serif;

}

#container{

border:5px solid grey;

width:800px;

margin:0 auto;

padding:10px;

}

#chatLog{

padding:5px;

border:1px solid black;

}

#chatLog p {

margin:0;

}

.event {

color:#999;

}

.warning{

font-weight:bold;

color:#CCC;

}

第五步：WebSocket事件

首先让我们尝试并理解WebSocket事件的概念：

WebSocket-事件

WebSocket事件：

我们将使用三个WebSocket事件：

onopen: 当接口打开时

onmessage: 当收到信息时

onclose: 当接口关闭时

我们如何来实现呢？

首先创建WebSocket对象

1	var socket = new WebSocket(“ws://localhost:8000/socket/server/startDaemon.php”);

然后向下面这样检测事件

1
2
3

socket.onopen = function(){

alert(“Socket has been opened!”);

}

当我们收到信息时这样做：

1
2
3

socket.onmessage = function(msg){

alert(msg); //Awesome!

}

但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

第六步：JavaScript

首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持WebSocket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function() {

if(!(“WebSocket” in window)){

$(‘#chatLog, input, button, #examples’).fadeOut(“fast”);

$(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);

}else{

//The user has WebSockets

connect();

function connect(){

//the connect function code is below

}

});

如你所见，如果用户浏览器支持WebSocket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。

我们将在我们的服务器定义URL。

1 2	var socket; var host = “ws://localhost:8000/socket/server/startDaemon.php”;

你可能会发现URL中怎么没有http？恩，是的，这是一个WebSocket URL，使用了不同的协议。下面是URL分解图示：

html5-websocket-url

下面让我们继续完成connect()函数，我们将代码放入try/catch块，这样如果代码出现问题，我们能让用户知道。我们创建WebSocket，并将信息传递到message()函数，之后会做讲解。我们创建我们的onopen、onmessage和onclose函数. 需要注意的是我们为用户提供了端口状态，这并不是必需的，但我们把它放进来主要是为了方便调试。

CONNECTING = 0

OPEN = 1

CLOSED = 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

function connect(){

try{

var socket;

var host = “ws://localhost:8000/socket/server/startDaemon.php”;

var socket = new WebSocket(host);

message(‘<p class=”event”>Socket Status: ‘+socket.readyState);

socket.onopen = function(){

message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);

}

socket.onmessage = function(msg){

message(‘<p class=”message”>Received: ‘+msg.data);

}

socket.onclose = function(){

message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);

}

} catch(exception){

message(‘<p>Error’+exception);

}

message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

1
2
3

function message(msg){

$(‘#chatLog’).append(msg+‘</p>’);

}

目前的成果

如果你已按上面教程按部就班的做的话，很好，我们已经创建了 HTML/CSS 模板、创建并建立Websocket连接、通过创建连接保持用户的进展更新。

HTML5-websocket

第七步：发送数据

现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

1
2
3
4
5

$(‘#text’).keypress(function(event) {

if (event.keyCode == ’13′) {

send();

}

});

下面是send()函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function send(){

var text = $(‘#text’).val();

if(text==“”){

message(‘<p class=”warning”>Please enter a message’);

return ;

}

try{

socket.send(text);

message(‘<p class=”event”>Sent: ‘+text)

} catch(exception){

message(‘<p class=”warning”> Error:’ + exception);

}

$(‘#text’).val(“”);

}

下面我们需要：

1	socket.send();

那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

关闭Socket

关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

1
2
3

$(‘#disconnect’).click(function(){

socket.close();

});

完整JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

$(document).ready(function() {

if(!(“WebSocket” in window)){

$(‘#chatLog, input, button, #examples’).fadeOut(“fast”);

$(‘<p>Oh no, you need a browser that supports WebSockets. How about <a href=”http://www.google.com/chrome”>Google Chrome</a>?</p>’).appendTo(‘#container’);

}else{

//The user has WebSockets

connect();

function connect(){

var socket;

var host = “ws://localhost:8000/socket/server/startDaemon.php”;

try{

var socket = new WebSocket(host);

message(‘<p class=”event”>Socket Status: ‘+socket.readyState);

socket.onopen = function(){

message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (open)’);

}

socket.onmessage = function(msg){

message(‘<p class=”message”>Received: ‘+msg.data);

}

socket.onclose = function(){

message(‘<p class=”event”>Socket Status: ‘+socket.readyState+‘ (Closed)’);

}

} catch(exception){

message(‘<p>Error’+exception);

}

function send(){

var text = $(‘#text’).val();

if(text==“”){

message(‘<p class=”warning”>Please enter a message’);

return ;

}

try{

socket.send(text);

message(‘<p class=”event”>Sent: ‘+text)

} catch(exception){

message(‘<p class=”warning”>’);

}

$(‘#text’).val(“”);

}

function message(msg){

$(‘#chatLog’).append(msg+‘</p>’);

}

$(‘#text’).keypress(function(event) {

if (event.keyCode == ’13′) {

send();

}

});

$(‘#disconnect’).click(function(){

socket.close();

});

}//End connect

}//End else

});

第九步：运行WebSocket服务器

我们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：

php -q path\to\server.php

现在你已经运行了WebSocket服务器！

HTML5-webSocket

大功告成！

当页面读取后，将尝试创建一个WebSocket连接，然后用户可以输入信息并从服务器接收信息。

html5-websocket-教程实例

感谢大家耐心阅读本教程，希望你能从中学到有用的知识，HTML5 WebSocket的确令人兴奋不已！大家可以通过The WebSocket API了解HTML5 WebSocket的最新动态。

点击这里下载源文件

英文原文:Start Using HTML5 WebSockets Today

翻译原文:HTML5 WebSockets 基础使用教程(彬Go)

分类: Web前端标签: HTML5, WEB

Muro：基于HTML5的绘图应用程序

2010年8月11日橄榄皮没有评论

DeviantArt是分享和发现数码艺术作品的好地方；现在，他们希望用户同样可以把这里作为创作平台。

DeviantArt发布了Muro，一款基于HTML5打造的免费绘图应用程序。

通过任何一个现代的、兼容性强的浏览器都可以访问并使用Muro创造自己的作品。

Muro有“基础”和“高级”两种模式。在基础模式中，工作区里面只有一个简单的画布；高级模式会提供类似Photoshop中的导航器和图层面板。功能方面自然支持多图层处理和回退操作，另外包含6款可设置参数的预设笔刷；橡皮擦、滴管、填充等功能也一应俱全。
Muro支持在线协作模式，如果你觉得预设的笔刷不够用，还可以购买更多的付费笔刷样式；另外Muro Gallery中有一些不错的手绘作品供大家围观。”

分类: Web前端标签: HTML5, Tools, WEB

1. Yup, Yet another JQuery Accordion Plugin

2. jQuery UI Demo

3. Stupid Simple jQuery Accordion Menu

4. Making Accordion Menu Using jQuery

5. jQuery Accordion Menu

6. jQuery Examples – Horizontal Accordion

7. jQuery – Horizontal Accordion

8. State-Saving jQuery Accordion Menu Without Reloading the Page

9. Accordion Menu Screencast Tutorial

10. Regular and Hover Accordion Menus

11. Haccordion – Simple Horizontal Accordion Plugin for jQuery

12. Exactly How to Create a Custom jQuery Accordion

13. Simple Accordion w/ CSS and jQuery

14. Accordion Madness

15. A Simple and Beautiful jQuery Accordion Tutorial

16. Slide Out and Drawer Effect

17. Create Simplest Accordion Menu using jQuery

18. TinyAccordion JavaScript Accordion

19. Javascript Accordion Menu Wizard

20. Horizontal JavaScript Accordion 1kb

Examples

21. Alex Cohaniuc Portfolio

22. Deluge Studios

23. Rzmota

24. Screenfluent

25. Artisanmedia

26. Exotics RTC

27. Two Chaps

28. Ten 18 Photography

29. We Are Lighthouse

30. DJ Eric C

Extra: Grid Accordion – $8

一：通过 @font-face 引入外部字体

二：SIFR网页字体替换技术

三： 使用 Cufon 渲染网页字体

四： Google Font API

什么是WebSockets？

WebSockets将会替代什么？

第一步：搞定WebSocket服务器

启动Apache服务器

第二步：修改URLs和端口

第三步：开始创建客户端

第四步：添加一些CSS

第五步：WebSocket事件

第六步：JavaScript

目前的成果

第七步：发送数据

关闭Socket

完整JavaScript代码

第九步：运行WebSocket服务器

大功告成！

Random Posts

Tag Cloud

Categories

Blogroll

Archives

Meta

三：使用 Cufon 渲染网页字体