ria之家--RIA三部曲：jquery、ext、flex http://www.36ria.com RIA三部曲：jquery、ext、flex Wed, 08 Sep 2010 08:38:37 +0000 en hourly 1 http://wordpress.org/?v=3.0 5个有意思的html5+javascript试验 http://www.36ria.com/3078 http://www.36ria.com/3078#comments Wed, 08 Sep 2010 08:38:37 +0000 明河共影 http://www.36ria.com/?p=3078 ……明河又出了趟远门，又好几天没更新博客了，罪过……

今天明河继续推荐html5+javascript的动画效果，好像近几篇文章都是关于html5的华丽效果推荐。以后的文章将更多介绍html5教程。

1、The wilderness downtown

相当华丽，也相当耗资源…..模拟候鸟的飞行场景，鸟多了，也就卡了…….

2、Catch It!

碰撞侦测的例子

3、Sand Trap

相当不错的小游戏，倒沙子。

4、Galactic Inbox

5、Element Dots

原文：http://www.queness.com/post/4709/7-brilliant-and-highly-addictive-html5-and-js-experiments

]]> http://www.36ria.com/3078/feed 0 补充推荐5个html5+javascript的华丽效果实验 http://www.36ria.com/3070 http://www.36ria.com/3070#comments Fri, 03 Sep 2010 02:07:53 +0000 明河共影 http://www.36ria.com/?p=3070 昨天刚推荐了14个华丽的html5的Canvas实验，今天继续补充几个html5+javascript的华丽效果。

1、Breathing Galaxies

相当华丽！膜拜html5.

2、Keylight

当你双击产生个绿点后，自动形成回路效果。

3、Swirling Tentacles

这页面运行起来有点卡。

4、Rotating Spiral

……看十分钟，小心头晕……..

5、Graph Layout

运行起来相当卡，不过效果还是非常华丽。

]]> http://www.36ria.com/3070/feed 12 14个华丽的html5的Canvas实验 http://www.36ria.com/3052 http://www.36ria.com/3052#comments Thu, 02 Sep 2010 01:19:45 +0000 明河共影 http://www.36ria.com/?p=3052 之前明河已经推荐过不少html5华丽的效果：

1、8 Bit Color Cycle

非常强悍的瀑布效果！（webKit的浏览器好像无法加载，不知其原因）

2、Particle System

燃烧的火焰！

3、Strange Attractors

华丽的线条曲线。

4、Cloth Simulation

5、Beauty of Maths

6、9Elements Particle Play

7、Flower Power

极度华丽，按住鼠标拖拉，伴随一路盛开的各色花朵！

8、Shattering Box Physics Simulation

该demo主要是演示物理碰撞效果。

9、Particles

令人眼花缭乱的效果………

10、Magnetic System

来看个华丽的粒子运动效果

11、Blob

相当可爱的效果，液化、弹性、缓动。

12、Water in HTML5

颇为真实的水波效果

13、Sinous

这是一个小游戏，规则很简单，碰到红点就”game over”。

14、Fake Floor Reflections

3d效果演示

原文：http://net.tutsplus.com/articles/web-roundups/21-ridiculously-impressive-html5-canvas-experiments/

]]> http://www.36ria.com/3052/feed 6 wordpress3.0之comment_form()实战（下） http://www.36ria.com/3045 http://www.36ria.com/3045#comments Wed, 01 Sep 2010 02:15:39 +0000 明河共影 http://www.36ria.com/?p=3045 上一篇教程《wordpress3.0之comment_form()实战（上）》主要讲解了wordpress3.0中comment_form()函数的基础用法，今天这篇教程，明河将讲述comment_form()的高级技巧。

过滤评论表单的字段

举个例子，默认的评论表单包含名称、email、url、评论内容，现在明河觉得url是多余的，想把url这个字段去掉，如何控制呢？
1、请打开你当前主题的Functions.php页面
2、加入如下代码：

  1. add_filter('comment_form_default_fields', 'mytheme_remove_url');
  2. function mytheme_remove_url($arg) {
  3.     $arg['url'] = '';
  4.     return $arg;
  5. }

保存后刷新页面，你就会看到“url”输入框已经不复存在。

添加新的表单字段

继续在Functions.php操作，现在加入“QQ”字段。
加入如下代码：

  1. function my_fields($fields) {
  2. $fields['qq'] = '<p class="comment-form-qq">' . '<label for="qq">QQ</label> ' .
  3.                     '<input id="qq" name="qq" type="text" value="' . esc_attr( $commenter['comment_qq'] ) . '" size="30" /></p>';
  4. return $fields;
  5. }
  6. add_filter('comment_form_default_fields','my_fields');

保存后，刷新页面就会看到“QQ”了。
如果你设置$fields['author']，与默认字段（author、email、url）相同，就会覆盖默认字段。

comment_form()的钩子（Hooks）

comment_form()全部钩子

• comment_form_before
• comment_form_must_log_in_after
• comment_form_top
• comment_form_logged_in_after
• comment_notes_before
• comment_form_before_fields
• comment_form_field_{$name}
• comment_form_after_fields
• comment_form_field_comment
• comment_form
• comment_form_after
• comment_form_comments_closed

钩子的使用

明河举个例子，我希望在表单前面加上一句话，看代码（还是操作Functions.php）：

  1. function comment_form_before_test(){
  2.     echo "<p>明河的测试</p>";
  3. }
  4. add_action( 'comment_form_before', 'comment_form_before_test' );

comment_form()其他钩子的使用与之类似。

改变comment_form()的布局和样式

在上一篇教程中，guny曾问明河，“如何处理皮肤(skin or 表单布局)”，接下来明河演示如何自定义出任何想要的布局和样式。
一般主题的表单如下图：

我们希望表单的结构类似于RIA之家的评论表单，如下图：

来看代码（先把之前的测试代码去掉）：

  1. function ria_fields($fields) {
  2.     $fields =  array(
  3.         'author' => '<p class="comment-form-field comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
  4.                     '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="13"' . $aria_req . ' /></p>',
  5.         'email'  => '<p class="comment-form-field comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
  6.                     '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="13"' . $aria_req . ' /></p>',
  7.         'url'    => '<p class="comment-form-field comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
  8.                     '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="13" /></p>',
  9.     );
  10. return $fields;
  11. }
  12. add_filter('comment_form_default_fields','ria_fields');

我们主要是让author、email、url排成三列，需要将默认的字段使用自定义的结构覆盖掉，如上代码，给每个”p”加上个新的”comment-form-field”。
接下来就是在style.css对这个样式进行操作，代码如下：

  1. #commentform {
  2.     display:block;
  3.     height:1%;
  4.     content:".";
  5. }
  6. #commentform .comment-form-field{
  7.     width:33%;float:left;
  8. }
  9. #commentform .comment-form-field input{
  10.     width:190px;
  11. }
  12. #commentform .comment-form-comment{
  13.     float:left;width:100%;
  14. }
  15. #commentform .comment-form-comment textarea{
  16.     width:614px;
  17. }

OK！完毕！

作者结语

wordpress的强大和优良的扩展性的确让人叹为观止，有太多的使用技巧等待挖掘，欢迎各路朋友与明河一起探讨，谢谢！

]]> http://www.36ria.com/3045/feed 4 30个富有想象力的flash预加载动画欣赏 http://www.36ria.com/3010 http://www.36ria.com/3010#comments Mon, 30 Aug 2010 07:01:08 +0000 明河共影 http://www.36ria.com/?p=3010 1、Happy Greenville

非常可爱的预加载画面，铅笔画式的进度条，漂浮的人物，力荐，是一个精品flash站点效果。

2、Ad Eight

看着这动画，明河就想起章鱼帝保罗(ˇˍˇ） …….

3、Antpaw

有点华丽。

4、BTOB

声音的应用是个亮点。

5、Bunker

很有旧式电影的感觉。

6、ZUNE

随着加载进度不断清晰的手机轮廓，配合纯黑的背景，是否想一睹其芳容的冲动？

7、Elipse Agency

立体长方形的加载进度条，非常不错的背景音乐。

8、Dave Werner’s Portfolio

华丽的墙壁…….

9、Food of the Food

与上一个站点的效果类似。

10、XIXI NO BANHO

跟随鼠标移动的进度，随进度绘制的曲线。

11、AB “Pieno žvaigždės”

杯子里不断加满的水。

12、DeVotchKa

留意手指的变化。

13、Starbucks Coffee

14、Sir-Patroclo

相当可爱的人物。

15、Sourcebits TangledDecals

16、Mellow Mushroom Pizza Bakers

17、Maria Filó

纸团……

18、Por Liniers

有点夸张的吸管…..

19、Red Bull Soapbox Racer

留意卷尺的变化

20、Vicente Díaz Peñas

21、Galaicofolia

22、David Ohana

23、Corny

24、Coca-Cola Happiness Factory

25、ZEEBEE VISUAL COMMUNICATIONS

26、Dissident-wear

27、Critter Creative

28、CONCEPT 007 / 005

29、Mynthon Kaira Ice Fishing Game

30、Sazacat Portfolio

原文：http://www.1stwebdesigner.com/inspiration/creative-flash-preloaders/

]]> http://www.36ria.com/3010/feed 8 wordpress3.0之comment_form()实战（上） http://www.36ria.com/3007 http://www.36ria.com/3007#comments Sat, 28 Aug 2010 07:48:48 +0000 明河共影 http://www.36ria.com/?p=3007 comment_form()是wordpress3.0出现的新的实用方法，作用是快速生成评论表单。comment_form大大简化了评论表单构建过程，从此以后你无须书写一堆html代码产生评论表格，只要一行：

  1. <?php comment_form(); ?>

就搞定问题了！明河借用个广告词“so easy！” -_-!

comment_form()未出现前

你可以打开你主题的comments.php ，你会看到类似如下的表单代码：

  1. <?php if ( comments_open() ) : ?>
  2.  
  3. <div id="respond">
  4.     <div class="single-box mar-t-10">
  5.          <div class="single-box-header clearfix"><span></span>有话要说？请在此留下阁下高见</div>
  6.     </div>
  7.  
  8.     <div id="cancel-comment-reply">
  9.         <small><?php cancel_comment_reply_link() ?></small>
  10.     </div>
  11.  
  12. <?php if ( get_option('comment_registration') && !is_user_logged_in() ) : ?>
  13. <p><?php printf(__('请先<a href="%s">登录</a>，然后再发表评论', 'kubrick'), wp_login_url( get_permalink() )); ?></p>
  14. <?php else : ?>
  15.  
  16. <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
  17. <table width="100%" border="0" cellspacing="0" cellpadding="0" class="comment-table mar-t-10">
  18. <?php if ( is_user_logged_in() ) : ?>
  19.  
  20. <p class="mar-t-b-10"><?php printf(__('你的用户名是<a href="%1$s">%2$s</a>', 'kubrick'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity); ?> ，<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account', 'kubrick'); ?>"><?php _e('注销;', 'kubrick'); ?></a></p>
  21.  
  22. <?php else : ?>
  23.   <tr>
  24.     <td><label for="author"><?php _e('用户名', 'kubrick'); ?> <?php if ($req) _e("(必须)", "kubrick"); ?></label></td>
  25.     <td><label for="email"><?php _e('邮箱 (不会公开', 'kubrick'); ?> <?php if ($req) _e(",必须)", "kubrick"); ?></label></td>
  26.     <td><label for="url"><?php _e('站点URL', 'kubrick'); ?></label></td>
  27.   </tr>
  28.   <tr>
  29.     <td><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="25" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> class="comment-input" /></td>
  30.     <td><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="25" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> class="comment-input" /></td>
  31.     <td><input type="text" name="url" id="url" value="<?php echo  esc_attr($comment_author_url); ?>" size="25" tabindex="3" class="comment-input" />
  32. </td>
  33.   </tr>
  34. <?php endif; ?>
  35.   <tr>
  36.     <td colspan="3">你的评论</td>
  37.   </tr>
  38.   <tr>
  39.      <td colspan="3"><textarea name="comment" id="comment" cols="58" rows="10" tabindex="4" class="comment-input" ></textarea></td>
  40.   </tr>
  41.   <tr>
  42.     <td><input name="submit" type="submit" id="submit" class="comment-submit" tabindex="5" value="<?php _e('提交评论', 'kubrick'); ?>" /><?php comment_id_fields(); ?></td>
  43.     <td>&nbsp;</td>
  44.     <td></td>
  45.   </tr>
  46. </table>
  47. <?php do_action('comment_form', $post->ID); ?>
  48.  
  49. </form>
  50.  
  51. <?php endif; // If registration required and not logged in ?>

以上代码来自明河自制的RIA之家主题，大部分的评论的表单都与之类似，是不是觉得有些头晕？

comment_form()出现之后

  1. <?php comment_form(); ?>

一行搞定！这里明河说明下，wordpress3.0的默认模板依旧采用旧的表单生成形式，而wordpress3.0新加入的twentyten已经使用comment_form()来生成评论表单了。
实际上还需要做一些处理，比如评论中按钮和lable是英文，设置中文，还需要comment_form的参数帮忙

comment_form()参数说明

comment_form()有二个参数

  1. <?php comment_form($args, $post_id); ?>
  • $args：comment_form()的输出配置参数，为一个关联数组，配置项非常丰富，将再下一步说明。
  • $post_id：文章id，默认为空，即当前id

comment_form()的$args参数详解

$args的默认配置项如下：

  1. $defaults = array(
  2.         'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
  3.         'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
  4.         'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  5.         'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( 'Logged in as <a href="%1$s">%2$s</a>. <a href="%3$s" title="Log out of this account">Log out?</a>' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  6.         'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',
  7.         'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( 'You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  8.         'id_form'              => 'commentform',
  9.         'id_submit'            => 'submit',
  10.         'title_reply'          => __( 'Leave a Reply' ),
  11.         'title_reply_to'       => __( 'Leave a Reply to %s' ),
  12.         'cancel_reply_link'    => __( 'Cancel reply' ),
  13.         'label_submit'         => __( 'Post Comment' ),
  14.     );

配置项很多，明河以评论表单中的英文改中文为例：

  1. $comment_form_args = array('must_log_in'          => '<p class="must-log-in">' .  sprintf( __( '你必须先 <a href="%s">登录</a>才能发表评论。' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  2.                            'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s">%2$s</a>已经登录，要 <a href="%3$s" title="注销用户">注销</a>此用户吗?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  3.                            'comment_notes_before' => '<p class="comment-notes">' . __( '你的email不会被公开。' ) . ( $req ? $required_text : '' ) . '</p>',
  4.                            'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( '你只能使用以下 <abbr title="HyperText Markup Language">HTML</abbr> 标签和属性: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  5.                            'title_reply'          => __( '留下一个回复' ),
  6.                            'title_reply_to'       => __( '给%s的回复' ),
  7.                            'cancel_reply_link'    => __( '取消回复' ),
  8.                            'label_submit'         => __( '提交评论' ));
  9. comment_form($comment_form_args);


可以看到表单已经全部汉化了。但是这样只适用于一个主题，如果我希望所有的主题（有应用该函数）都是汉化的，如何处理呢。请看下一步解说

修改comment_form()的$args默认参数

1、请打开“wp-includes”，再打开“comment-template.php”。
2、找到comment_form函数。
3、找到“$defaults”变量，将其覆盖成：

  1. $defaults = array(
  2.         'fields'               => apply_filters( 'comment_form_default_fields', $fields ),
  3.         'comment_field'        => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
  4.         'must_log_in'          => '<p class="must-log-in">' .  sprintf( __( '你必须先 <a href="%s">登录</a>才能发表评论。' ), wp_login_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  5.         'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s">%2$s</a>已经登录，要 <a href="%3$s" title="注销用户">注销</a>此用户吗?' ), admin_url( 'profile.php' ), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink( $post_id ) ) ) ) . '</p>',
  6.         'comment_notes_before' => '<p class="comment-notes">' . __( '你的email不会被公开。' ) . ( $req ? $required_text : '' ) . '</p>',
  7.         'comment_notes_after'  => '<p class="form-allowed-tags">' . sprintf( __( '你只能使用以下 <abbr title="HyperText Markup Language">HTML</abbr> 标签和属性: %s' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>',
  8.         'id_form'              => 'commentform',
  9.         'id_submit'            => 'submit',
  10.         'title_reply'          => __( '留下一个回复' ),
  11.         'title_reply_to'       => __( '给%s的回复' ),
  12.         'cancel_reply_link'    => __( '取消回复' ),
  13.         'label_submit'         => __( '提交评论' ),
  14.     );

还有一个地方要修改的，查找“$required_text”，修改此变量如下：

  1. $required_text = sprintf( ' ' . __('带%s号为必填选项'), '<span class="required">*</span>' );

保存，完毕！

明河语：comment_form()远比想象中的强大，下一篇教程将讲解自定义表单字段和该函数的钩子用法。

]]> http://www.36ria.com/3007/feed 4 推荐5个有用的jquery表单插件 http://www.36ria.com/2997 http://www.36ria.com/2997#comments Sat, 28 Aug 2010 00:53:39 +0000 明河共影 http://www.36ria.com/?p=2997 出了趟远门，上不了网，这几天都没更新博客，今天终于有网了，8点起来更新下…….
明河曾在上个月发了篇《推荐10个jquery表单增强插件》，介绍了十个实用的jquery表单插件，今天再推荐5个。

1、jQuery File Style Plugin

通过这个插件，你可以自由地修改文件域中的按钮样式。

明河备注：这个插件的原理很简单，即在文件域上嵌套一个层（层包含你自定义的上传按钮样式），然后设置文件域的透明度为0，就实现了这个功能。值得一提的是firefox和chome下样式并不统一，应该是bug。作者的想法还是很不错的。

2、jQuery ComboBox


顾名思义是类似ext中的ComboBox组件，优化版的选择框，而这款选择框的优势在于对选择框内部选择项样式的自由设置。可以呈现出类似树级效果。
明河备注：ComboBox的原理就是用层去模拟选择框的行为，从而规避选择框存在的诸多缺陷。这个ComboBox不算是最强大的、样式也很一般、API的名字还很别扭（太长）….但作者的思路还是没问题的。

3、jQuery AlphaNumeric


这个插件非常实用，用于限制输入框的输入（不止限制数字输入）。
明河备注：AlphaNumeric的原理本身并不复杂，关键在于对用户输入时的键盘监听，获取用户按下的键值，然后再去跟插件的“限制”参数做匹配，不匹配则加入输入框。

4、jQuery Validity


又一个表单验证插件，但跟validationEngine比还有非常明显的差距，不支持即时验证。
明河备注：现在的表单验证插件真是多，不过大同小异，明河最欣赏的还是validationEngine。

5、jQuery Color


力荐，颜色拾取插件明河之前还没推荐过。实际上颜色拾取插件非常少，而这款，是明河见过最优秀的，有需要的朋友，强烈推进下。

]]> http://www.36ria.com/2997/feed 0 25个使用html5的优秀站点案例 http://www.36ria.com/2968 http://www.36ria.com/2968#comments Mon, 23 Aug 2010 15:26:23 +0000 明河共影 http://www.36ria.com/?p=2968 今天在浏览WDL时发现非常经典的文章：55 Excellent Examples of Websites Using HTML5，该文章收集了55个应用了html5的优秀站点案例，非常值得收藏，明河顺手做了整理转过来，O(∩_∩)O~。

你可以在不同的浏览器下测试其效果（对比IE），也许你会发现好像没什么差别，但你打开其源代码会发现一些之前没接触过的html5的语义标签。

1、fishtank

2、Information Highwayman

特别留意其导航部分的效果。

3、Jeroen Homan


留意鼠标滑过图片时的效果。

4、Keyzo IT Solutions

5、M-M Studio


亮点：可以使用鼠标滚轮控制图片左右滚动。

6、mollar


使用IE浏览该站点，直接给错误提示，有个性，明河喜欢。

7、OusmaneNdiaye


跟mollar类似，使用IE浏览该站点，直接给错误提示。非常优秀的站点设计，明河要赞一个。

8、Benoit Letondor


有个小bug，鼠标滑过菜单会出现多次闪烁。

9、Avon Renew


非常华丽的站点，明河力荐。

10、Cazinc

11、mike mai


亮点在于图片滚动时，一些细节的交互。

12、kloudesign

13、Rider


相当华丽，明河推荐看下。

14、Studio78

15、subcide.com


16、Sports et Loisirs

17、D’Âme Bio


大量应用css3，非常优秀的博客设计。
18、Isabelle Montminy

19、Daily Abduzeedo

颇具亮点的图片画廊。

20、Bounty Bev


相当大胆的设计。

21、Daniel Dengler

22、Ella Design


充满童趣的设计。
23、András Lengyel

24、Clear Ideaz

25、Fedena

]]> http://www.36ria.com/2968/feed 8 《HTML5 for Web Designers》下载（关于html5设计） http://www.36ria.com/2963 http://www.36ria.com/2963#comments Mon, 23 Aug 2010 01:57:29 +0000 明河共影 http://www.36ria.com/?p=2963

HTML5在今年ipad推出后炒的非常的火，html5方面的教程开始增加，可惜相关书籍还是非常之少，国内更是空白，今天明河推荐一本html5设计方面的好书。

书名：HTML5 for Web Designers

页数：88

语言：英文

作者：Jeremy Keith

整本书分6个部分：

  1. 1、HTML5的历史
  2. 2、html5设计
  3. 3、富媒体
  4. 4、web表单2.0
  5. 5、新的语义标签
  6. 6、使用html5

（明河注：目前这个电子版没有书签，排版也有点糟糕，而且全英文，是一本好学，看下去需要一些耐心）

]]> http://www.36ria.com/2963/feed 4 ld—jquery多级联动插件（明河作品） http://www.36ria.com/2955 http://www.36ria.com/2955#comments Sat, 21 Aug 2010 13:35:32 +0000 明河共影 http://www.36ria.com/?p=2955 jquery多级联动插件明河曾经写过二个版本，期间得到各路朋友的不少反馈（特别是网名为Fox的朋友，提出的建议非常的详细而且很有建设性），不得否认seriesComboBoxs（jquery多级联动插件）存在诸多缺陷，比如：无法设置选择框的默认值。

于是明河决定重构query多级联动插件，由于相对于seriesComboBoxs变动相当大，所以明河将这个插件重新命名为ld，旧的seriesComboBoxs明河将不再做维护。

ldV1.0相对于seriesComboBoxsV0.2的改进：
  • 可以设置选择框的默认值
  • 不再需要对联动的所有选择框添加id（需要有相同的样式名）
  • 新增几个新的使用方法
  • 简化了API
  • 使用新的事件机制

改动还是非常大的，建议使用ldV1.0。

使用教程

1、导入地区数据库（mysql）

数据库文件为teashop_region.sql，此数据库来源于ecshop，Fox曾告知明河此数据库并不全，很感谢Fox提供了一个新的数据库，下个版本将使用Fox提供的数据库。

2、连接数据库

请打开get_region.php，找到：

  1. $hostname = 'localhost';// 数据库服务器
  2.     $username = 'root';        // 数据库用户名
  3.     $password = '123';        // 数据库密码
  4.     $dbname   = 'ld';            // 数据库名

按照本地服务器的情况，自行修改。

3、引入jquery库、jquery.ld.js和示例css

  1. <link href="style/css/base.css" rel="stylesheet" type="text/css" />
  2. <link href="style/css/demo.css" rel="stylesheet" type="text/css" />
  3.  
  4. <script src="js/jquery-1.4.2.min.js"></script>
  5. <script src="js/jquery.ld.js"></script>

4、建立4个打算联动的选择框

  1. <table width="700" border="0" cellspacing="0" cellpadding="0" class="tab1">
  2.   <tr>
  3.       <td>国家</td>
  4.       <td><select  class="ld-select-1" name="country">
  5.             <option value="">请选择你的国家</option>
  6.         </select>
  7.    
  8.     </td>
  9.     <td>省份</td>
  10.     <td><select  class="ld-select-1" name="province">
  11.             <option value="">请选择你的省份</option>
  12.         </select>
  13.     </td>
  14.     <td>城市</td>
  15.     <td><select class="ld-select-1" name="city">
  16.             <option value="">请选择你的城市</option>
  17.         </select>
  18.     </td>
  19.     <td>区县</td>
  20.     <td><select class="ld-select-1" name="county">
  21.             <option value="">请选择你的区县</option>
  22.         </select>
  23.     </td>
  24.   </tr>
  25. </table>

联动的选择框，必须要有相同的样式名，比如这里的“ld-select-1”。

5、初始化插件

  1. $(".ld-select-1").ld({ajaxOptions : {"url" : "get_region.php"},
  2.                      style : {"width" : 120}
  3.                          });

ajaxOptions用于设置ajax获取数据的参数
style设置选择框的样式
留意这里的调用与明河之前写的seriesComboBoxs有明显差异。
seriesComboBoxs初始化：

  1. $.seriesComboBoxs({selects : ["#country","#province","#city","#county"],
  2.                             ajaxOptions : {"url" : "get_region.php"}     });

新的ld插件已经不存在selects参数。

6、ld参数设置

参数 默认值 类型 描述
ajaxOptions {
url : null,
type : ‘get’,
data : {},
dataType : ‘json’,
success : function(){},
beforeSend : function(){}
}

Object

ajax获取数据时的配置默认的数据源格式为json
defaultParentId 0 Number 默认父级id，设置为0，即获取parent_id为0的数据（示例中返回“中国”）
defaultLoadSelectIndex 0 Number 默认读取数据的选择框，尽量使用默认的，这个参数用于设置读取那个选择框的数据。
texts [] Array

默认选择框中的选中项，比如设置为：texts:['福建','福州','长乐']

那么三个选择框会分别加载数据，并且选中与texts中字符串相同的项
style null Object 选择框的样式
field {
region_id : "region_id",
region_name : "region_name",
parent_id : "parent_id"
}		 Object 前台处理后台返回的数据时所使用的字段名，一般采用默认的即可。

7、方法说明

使用ld的方法，先要获取ld的API，比如示例4：

  1. var $ld4 = $(".ld-select-4");                     
  2.     $ld4.ld({ajaxOptions : {"url" : "get_region.php"},
  3.                defaultParentId : 1,
  4.            style : {"width" : 120}
  5.              })    
  6.     var ld4_api = $ld4.ld("api");
方法1：texts

描述：用于获取联动选择框的字符串数据。
返回：数组，比如“['福建','泉州','丰泽']”

  1. var text = ld4_api.texts().join('');
方法2：selected

描述：用于设置选择框的选中值
参数：

  • t：数组，要选中的选择框的字符串
  • completeCallBack：回调函数，当选择框数据全部加载完毕后触发
  1. ld4_api.selected(['福建','泉州','丰泽'],function(){
  2.             var text = ld4_api.texts().join('');
  3.             alert(text);           
  4.         });
方法3：size

描述：获取联动选择框的数量

  1. ld4_api.size()
方法4：css

描述：设置选择框的样式

  1. ld4_api.css({"width" : 120})

作者结语

欢迎各路朋友反馈bug和建议，谢谢！

]]> http://www.36ria.com/2955/feed 6 15个免费的wordpress3.0二栏式主题 http://www.36ria.com/2938 http://www.36ria.com/2938#comments Thu, 19 Aug 2010 01:17:47 +0000 明河共影 http://www.36ria.com/?p=2938 1、Freshblog

非常简洁但不落单调的主题。

2、MobileWorld


用于介绍手机的主题。

3、Simplo


非常简洁大方的主题。

4、Akylas

5、Gadget

6、Magazeen


这个主题明河非常喜欢，推荐下。

7、Side Blog


非常喜欢此主题的侧边栏。

8、Suffusion

9、Orsted Theme


亮点在于图片滚动部分。

10、Polaris Theme

11、Channel


12、Meissa

13、Carbonified


14、Mistique

15、 Graphene

原文：http://www.1stwebdesigner.com/wordpress/free-wordpress-3-0-ready-themes/

]]> http://www.36ria.com/2938/feed 0 8个css3代码产生工具 http://www.36ria.com/2927 http://www.36ria.com/2927#comments Sun, 15 Aug 2010 12:43:04 +0000 明河共影 http://www.36ria.com/?p=2927 今天明河推荐几个实用的css3代码产生工具，不用css3一样可以制作css3效果。

1、CSS3 Menu Generator

这是个简单的软件，用于产生各种css3菜单，内置了非常丰富的css3菜单效果。

2、CSS3 Rounded Corner Generator

用于产生css3的圆角效果，值得一提的是该站点还提供其他的css工具，比如css3示例、css验证等。

3、CSS3 Maker

明河极力推荐，非常全面的css3在线工具，可以产生圆角、文字阴影、css3动画等。

4、Border Image

css3边框图片产生器。

5、CSS3 Gradient Generator

用于在线产生css3渐变。

6、Font Squirrel @Font-Face Kit Generator

字体嵌入工具。

7、CSS-Tricks Button Maker

css3按钮产生器

8、CSS3 Click Chart by Impressive Webs

提供常用的css3效果的demo和源代码。

]]> http://www.36ria.com/2927/feed 8 09—10年明河作品集合 http://www.36ria.com/2912 http://www.36ria.com/2912#comments Fri, 13 Aug 2010 01:39:13 +0000 明河共影 http://www.36ria.com/?p=2912 昨天明河回顾了RIA之家09—10年的精华教程集合，今天也专门发篇文章，推荐下近一年多以来明河发布在博客上的全部作品。

1、yitip—jquery工具提示插件

  • 版本：0.1
  • 最近更新时间：2010-07-17

2、wp-share-list—wordpress分享收藏插件

  • 版本：1.3
  • 最近更新时间：2010-08-05

3、verticalTab — jquery竖型选项卡插件

  • 版本：0.12
  • 最近更新时间：2010-06-28

4、seriesComboBoxs — jquery多级联动插件

  • 版本：0.2
  • 最近更新时间：2010-07-14

5、shareList — jquery收藏&分享插件

  • 版本：0.12
  • 最近更新时间：2010-06-17

6、divSlider — jquery滑动门插件

  • 版本：0.12
  • 最近更新时间：2010-06-17

7、float — jquery悬浮广告插件

  • 版本：0.1
  • 最近更新时间：2010-04-18

8、yijs.File — 基于flash多文件上传组件

  • 版本：0.1
  • 最近更新时间：2009-12-20

9、yijs.Carousel—图片滚动组件

  • 版本：0.1
  • 最近更新时间：2010-1-1

10、yijs.ImagesView—带有缩略图的幻灯片组件

  • 版本：0.1
  • 最近更新时间：2009-10-08

11、ImagesSlider—jquery滑动幻灯片插件

  • 版本：0.2
  • 最近更新时间：2009-12-19

还有不少js组件没发出来，主要是由于前期作品，存在很多改进的空间。日后重构完成后将予以发表。

]]> http://www.36ria.com/2912/feed 9 RIA之家09-10年精华教程集合 http://www.36ria.com/2898 http://www.36ria.com/2898#comments Thu, 12 Aug 2010 14:05:59 +0000 明河共影 http://www.36ria.com/?p=2898 明河开始写博，应该是在2009年2月，那时候明河还还在念大四，时间太多了，就萌生了开个博客发些自己学习js的笔记（那时候JS水平相当之差），起初博客的名字叫ajax代码仓库（那时候ajax这个概念炒的非常热），域名好像是51zgf.cn，09年8月改成36ria.cn，名字也改成RIA之家，10年5月底完成改版，域名改成36ria.com（那时候天朝备案门让人胆战心惊），使用国外主机。

RIA之家记录了明河一年来前端技术方面的成长，今天就把RIA之家09-10年精华教程做个整理，好让旧的文章发挥下余热。

]]> http://www.36ria.com/2898/feed 1 推荐6个学习html5的好站点 http://www.36ria.com/2886 http://www.36ria.com/2886#comments Thu, 12 Aug 2010 01:34:34 +0000 明河共影 http://www.36ria.com/?p=2886 1、HTML5 Doctor

HTML5 Doctor在html5上面颇有名气，也是最早关注html5的博客之一。

2、HTML5 Gallery

HTML5 Gallery主要是收集使用html5技术的站点，提供了不少html5案例。

3、The WHATWG Blog

和HTML5 Doctor类似也是关注html5的技术博客。

4、A Web Developer’s Guide to HTML 5

w3c的关于html5的标准指南。

5、Dive Into HTML 5

类似手册的结构，文章还配有漫画………

6、html5demos

这个站点，明河严重推荐，收集了很多html5的示例。

原文来自：http://webdesignledger.com/

补充

明河严重推荐《你不可不知的25个html特征和技巧》这篇文章。

]]> http://www.36ria.com/2886/feed 1 jquery的ajax全局事件详解—明河谈jquery http://www.36ria.com/2882 http://www.36ria.com/2882#comments Mon, 09 Aug 2010 14:31:39 +0000 明河共影 http://www.36ria.com/?p=2882 jquery在ajax方面是非常强大和方便的，以下是jquery进行ajax请求时方法模板：

  1. $.ajax({
  2.            type: "get",
  3.            url: "",
  4.                    data : {},
  5.            beforeSend : function(){
  6.  
  7.            },
  8.            success : function(data){
  9.  
  10.            },
  11.            complete : function(){
  12.  
  13.            }
  14.         });

关于$.ajax()方法的使用，不是明河写这篇文章的目的，今天明河主要讲解当进行ajax请求时整个完整的事件流程。

jquery的ajax方法的全部全局事件：

  • ajaxStart：ajax请求开始前
  • ajaxSend：ajax请求时
  • ajaxSuccess：ajax获取数据后
  • ajaxComplete：ajax请求完成时
  • ajaxError：ajax请求发生错误后
  • ajaxStop：ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件，只是通常不绑定全局事件，但实际上这些全局事件非常有用处。

ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

  1. $(document).ajaxStart(onStart)
  2.                .ajaxComplete(onComplete)
  3.                .ajaxSuccess(onSuccess);
  4.    
  5.     function onStart(event) {
  6.         //.....
  7.     }
  8.     function onComplete(event, xhr, settings) {
  9.         //.....
  10.     }
  11.     function onSuccess(event, xhr, settings) {
  12.         //.....
  13.     }

ajax方法完整事件流

为了更直观的说明，明河使用Axure画了二个流程图，画的不好还请见谅，O(∩_∩)O

ajax方法完整事件流演示

为了让朋友更容易理解整个事件流，明河做了以下demo。

]]> http://www.36ria.com/2882/feed 5 实用的css代码片段集合 http://www.36ria.com/2877 http://www.36ria.com/2877#comments Mon, 09 Aug 2010 02:25:49 +0000 明河共影 http://www.36ria.com/?p=2877 这几天明河出了趟远门，博客的更新落下了，这二天将多发几篇实用的文章\(^o^)/~

以下css代码片段都非常实用，是不可多得的css技巧。

利用text-indent隐藏文本

text-indent的主要作用在于文本缩进，但text-indent还有个妙用，先看代码：

  1. h1&nbsp;{
  2.     text-indent:-9999px;
  3.     margin:0&nbsp;auto;
  4.     width:400px;
  5.     height:100px;
  6.     background:transparent&nbsp;url("images/logo.jpg")&nbsp;no-repeat&nbsp;scroll;
  7. }

text-indent:-9999px;即文本负缩进-9999像素（溢出容器），那么你在屏幕上就无法看到文本了，达到隐藏文本的作用。
那么其意义在哪呢？
主要是考虑SEO。举个典型例子，你的站点的logo部分是个图片，为了SEO，一般加title属性，但效果显然没有直接加文本来的好，而利用text-indent，你既加上了文本，同时不影响logo效果。

删除IE下文本域的滚动条
  1. textarea{
  2.     overflow:auto;
  3. }
全兼容浏览器的透明度设置
  1. .transparent{
  2.     filter:alpha(opacity=50);
  3.     -moz-opacity:0.5;
  4.     -khtml-opacity:0.5;
  5.     opacity:0.5;
  6. }

非常实用，通用大部分浏览器。-moz-opacity的作用是为了支持一些老版本的Mozilla浏览器，-khtml-opacity的作用是支持一些老版本的Safari浏览器。

Eric Meyer写的经典重置样式
  1. html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym,address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
  2.     margin: 0;
  3.     padding: 0;
  4.     border: 0;
  5.     outline: 0;
  6.     font-size: 100%;
  7.     vertical-align: baseline;
  8.     background: transparent;
  9. }
  10.  
  11. body {
  12.     line-height: 1;
  13. }
  14.  
  15. ol, ul {
  16.     list-style: none;
  17. }
  18.  
  19. blockquote, q {
  20.     quotes: none;
  21. }
  22.  
  23. blockquote:before, blockquote:after,
  24. q:before, q:after {
  25.     content: '';
  26.     content: none;
  27. }
  28.  
  29. /* remember to define focus styles! */
  30. :focus {
  31.     outline: 0;
  32. }
  33.  
  34. /* remember to highlight inserts somehow! */
  35. ins {
  36.     text-decoration: none;
  37. }
  38.  
  39. del {
  40.     text-decoration: line-through;
  41. }
  42.  
  43. /* tables still need 'cellspacing="0"' in the markup */
  44. table {
  45.     border-collapse: collapse;
  46.     border-spacing: 0;
  47. }
基础的css使用图片的按钮样式
  1. a {
  2. display: block;
  3. background: url(sprite.png) no-repeat;
  4. height: 30px;
  5. width: 250px;
  6. }
  7.  
  8. a:hover {
  9.     background-position: 0 -30px;
  10. }
谷歌的字体服务API
  1. <head>
  2.     Inconsolata:italic|Droid+Sans">
  3. </head>
  1. body {
  2.     font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
  3. }

目前好像还没有中文的字体。

浏览器的特殊hacks
  1. /* IE 6 */
  2. * html .yourclass { }
  3.  
  4. /* IE 7 */
  5. *+html .yourclass{ }
  6.  
  7. /* IE 7 and modern browsers */
  8. html>body .yourclass { }
  9.  
  10. /* Modern browsers (not IE 7) */
  11. html>/**/body .yourclass { }
  12.  
  13. /* Opera 9.27 and below */
  14. html:first-child .yourclass { }
  15.  
  16. /* Safari */
  17. html[xmlns*=""] body:last-child .yourclass { }
  18.  
  19. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  20. body:nth-of-type(1) .yourclass { }
  21.  
  22. /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
  23. body:first-of-type .yourclass {  }
  24.  
  25. /* Safari 3+, Chrome 1+ */
  26. @media screen and (-webkit-min-device-pixel-ratio:0) {
  27.  .yourclass  {  }
  28. }

非常经典，明河严重推荐收藏。

固定定位，通用于IE6
  1. #footer {
  2.     position:fixed;
  3.     left:0px;
  4.     bottom:0px;
  5.     height:30px;
  6.     width:100%;
  7.     background:#999;
  8. }
  9.  
  10. /* IE 6 */
  11. * html #footer {
  12.     position:absolute;
  13.     top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
  14. }

IE 6是不支持position:fixed;的，这里使用绝对定位来模拟。代码中的expression是啥含义？请点此。

翻转图片
  1. img.flip {
  2.     -moz-transform: scaleX(-1);
  3.     -o-transform: scaleX(-1);
  4.     -webkit-transform: scaleX(-1);
  5.     transform: scaleX(-1);
  6.     filter: FlipH;
  7.     -ms-filter: "FlipH";
  8. }
清理浮动
  1. .clearfix:after {
  2.     visibility: hidden;
  3.     display: block;
  4.     font-size: 0;
  5.     content: " ";
  6.     clear: both;
  7.     height: 0;
  8. }
  9.  
  10. .clearfix { display: inline-block; }
  11.  
  12. /* start commented backslash hack */
  13. * html .clearfix { height: 1%; }
  14. .clearfix { display: block; }
  15. /* close commented backslash hack */

极度经典，明河严重推荐收藏。

圆角（不支持IE）
  1. .round{
  2.     -moz-border-radius: 10px;
  3.     -webkit-border-radius: 10px;
  4.     border-radius: 10px; /* future proofing */
  5.     -khtml-border-radius: 10px; /* for old Konqueror browsers */
  6. }
@font-face字体设置
  1. @font-face {
  2.     font-family: 'Graublau Web';
  3.     src: url('GraublauWeb.eot');
  4.     src: local('☺'),
  5.         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
  6. }
居中页面
  1. .wrapper {
  2.     width:960px;
  3.     margin:0&nbsp;auto;
  4. }
IE中的最小高度
  1. .box {
  2.     min-height:500px;
  3.     height:auto !important;
  4.     height:500px;
  5. }
正在读取图片的效果
  1. img {
  2.     background: url(loader.gif) no−repeat 50% 50%;
  3. }
垂直居中
  1. .container {
  2.     min-height: 10em;
  3.     display: table-cell;
  4.     vertical-align: middle;
  5. }

原文：http://www.1stwebdesigner.com/development/useful-css-snippets/

]]> http://www.36ria.com/2877/feed 9 10个使用css3构建的图片画廊 http://www.36ria.com/2862 http://www.36ria.com/2862#comments Wed, 04 Aug 2010 13:16:54 +0000 明河共影 http://www.36ria.com/?p=2862 之前明河介绍了不少图片画廊效果，但效果基本上大同小异，今天明河介绍些使用css3构建的图片画廊，利用css3可以实现图片的旋转、倒影等，使画廊看上去相当华丽（当然IE支持不善）。

1、Polaroid from Tutorialzine

css3、拖拉、灯箱效果的混合体，相当不错的效果。

2、Polaroid from 3site

相对于第一个效果，此画廊效果有些别扭，交互上有待加强。

3、Polaroid from Zurb

这个效果倒是很值得效仿，默认的图片是带有一些角度的，鼠标滑过后图片放大并转正。

4、Polaroid from 23 Ways

效果与第三个非常类似。

5、Polaroid from line25

上一个效果的简化版。鼠标滑过只变化图片容器的阴影

6、Gallery

相当华丽的画廊，变化的不止是阴影、还有角度、透明度等。

7、Snowstack

8、Sexy Image Hover Effects

9、Fancy Image Gallery

10、Beautiful Photo Stack Gallery

十个中最为华丽的图片画廊效果，图片滚动+灯箱、倒影等效果。

原文：http://www.queness.com/post/4302/11-photo-galleries-made-by-the-awesome-css3

]]> http://www.36ria.com/2862/feed 9 使用jquery制作背景变化菜单 http://www.36ria.com/2852 http://www.36ria.com/2852#comments Tue, 03 Aug 2010 06:45:58 +0000 明河共影 http://www.36ria.com/?p=2852 jquery动画函数animate是不支持背景移动动画的，即无法对backgroundPosition进行处理，需要使用一个插件，这个插件名为jquery.backgroundPosition，接下来将使用这个插件，制作一个背景变化的菜单。

制作过程

1、创建如下html菜单结构
  1. <ul>
  2.                 <li><a href="http://www.36ria.com/">首页</a></li>
  3.                 <li><a href="http://www.36ria.com/">关于作者</a></li>
  4.                 <li><a href="http://www.36ria.com/">联系作者</a></li>
  5.             </ul>
2、加上css样式
  1. ul {list-style:none;margin:0;padding:0;}
  2. li {float:left;width:100px;margin:0;padding:0;text-align:center;font-size:14px;}
  3. li a {display:block;padding:5px 10px;height:100%;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
  4. li a {background:url(../images/bg2.jpg) repeat 0 0;}
  5. li a:hover, li a:focus, li a:active {background-position:-150px 0;}

示例中有5个demo，共用了四张背景图片：




分别对应相应的动画demo样式：

  1. #a a {background:url(../images/bg.jpg) repeat -20px 35px;}
  2. #b a {background:url(../images/bg2.jpg) repeat 0 0;}
  3. #c a {background:url(../images/bg3.jpg) repeat 0 0;}
  4. #d a {background:url(../images/bg4.jpg) repeat 0 0;}
3、javascript脚本

引入jquery库和jquery.backgroundPosition：

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
  1. $(function(){
  2.     $('#a a')
  3.         .css( {backgroundPosition: "-20px 35px"} )
  4.         .mouseover(function(){
  5.             $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
  6.         })
  7.         .mouseout(function(){
  8.             $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
  9.                 $(this).css({backgroundPosition: "-20px 35px"})
  10.             }})
  11.         })
  12.     $('#b a')
  13.         .css( {backgroundPosition: "0 0"} )
  14.         .mouseover(function(){
  15.             $(this).stop().animate({backgroundPosition:"(-150px 0)"}, {duration:500})
  16.         })
  17.         .mouseout(function(){
  18.             $(this).stop().animate({backgroundPosition:"(-300px 0)"}, {duration:200, complete:function(){
  19.                 $(this).css({backgroundPosition: "0 0"})
  20.             }})
  21.         })
  22.     $('#c a')
  23.         .css( {backgroundPosition: "0 0"} )
  24.         .mouseover(function(){
  25.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  26.         })
  27.         .mouseout(function(){
  28.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  29.         })
  30.     $('#d a')
  31.         .css( {backgroundPosition: "0 0"} )
  32.         .mouseover(function(){
  33.             $(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
  34.         })
  35.         .mouseout(function(){
  36.             $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
  37.         })
  38. });

引入jquery.backgroundPosition后animate()开始支持backgroundPosition背景位移动画。后二个颜色渐变的例子，也是通过渐变背景图片上下移动产生的。

原文：http://snook.ca/archives/javascript/jquery-bg-image-animations/

]]> http://www.36ria.com/2852/feed 6 基础模板的缺陷—jquery插件开发进阶教程（2） http://www.36ria.com/2847 http://www.36ria.com/2847#comments Mon, 02 Aug 2010 01:56:41 +0000 明河共影 http://www.36ria.com/?p=2847 这个系列的第一篇教程明河讲述了：jquery插件开发规范，今天这篇教程明河将讲述jquery插件基础模板的缺陷。

在jquery插件实战教程，明河曾以Colortip文字提示插件，讲解了jquery插件的基础模板：

  1. (function($){
  2.     $.fn.插件名 = function(settings){ 
  3.         var defaultSettings = {
  4.          
  5.         }
  6.         /* 合并默认参数和用户自定义参数 */
  7.         settings = $.extend({},defaultSettings,settings);
  8.         return this.each(function(){
  9.          
  10.         });
  11.      
  12.     } 
  13. })(jQuery)

（明河再次提醒，这个基础模板很重要，尽量看懂用懂它。）
在教程的最后，明河同时也指出了Colortip这个插件的缺陷，Colortip的缺陷，归根到底还是jquery插件基础模板的缺陷引起的。

jquery插件基础模板的缺陷

1、难以实现类与类之间的继承

比如明河写了yitip，原理与colortip一样，但是无法通过扩展colortip的方式，只能重新写个完整插件。

2、无法开放API供外部调用

这是jquery插件基础模板最大的缺陷，以colortip例子，在初始化colortip后，你无法改变提示框出现的位置、内容、动画效果、延迟时间等，colortip没有相应的API，但是明河写的yitip，却可以实现相应的控制。
colortip的演示：http://www.36ria.com/demo/colortips/colortips.html
yitip的演示：http://www.36ria.com/demo/yitip/
可以看到yitip提供了相应的API供使用者操作，那么yitip又是如何实现API的开放呢？接下来的教程明河会展开叙述。

3、无法提供自定义事件支持

比如你想要在提示框显示前弹出一个对话框，在隐藏提示框后删除提示框等。

4、无法模拟出接口。

你无法很直观的知道你所使用的方法插件支不支持，插件到底有几个方法，传递给方法的参数个数和数据类型对不对等。

5、缺少debug能力。

插件有可能会调用失败，这时候你希望知道插件在调用的过程中所发生的所有的事，你需要打印一系列的流程到调用面板中，jquery插件基础模板无法提供这一功能。

结语

正是jquery插件基础模板存在如此多的缺陷，所以明河才觉得有必要讲述一个jquery插件的高级模板，用于解决这些缺陷。
下一篇教程：jquery插件的高级模板

]]> http://www.36ria.com/2847/feed 2 cornerV2.0—jquery强大的圆角插件 http://www.36ria.com/2844 http://www.36ria.com/2844#comments Sun, 01 Aug 2010 13:58:13 +0000 明河共影 http://www.36ria.com/?p=2844

jquery.corner是一款强大的圆角插件（所产生的不止只是圆角效果），兼容包括IE6、IE7、IE8、firefox、Opera 、Safari、Chrome等主流浏览器。

原理说明：

产生圆角的技术很多，jquery.corner是利用产生十几个带有边框的层（宽度不同），来模拟四个不同的边角的效果，所以可以保证所有浏览器的兼容性。（具体可以用firebug查看其层的分布和样式）

初始化插件：

  1. $(".demo").corner();
]]> http://www.36ria.com/2844/feed 1 明河关于jquery的一些解答—明河谈jquery http://www.36ria.com/2839 http://www.36ria.com/2839#comments Sat, 31 Jul 2010 07:08:53 +0000 明河共影 http://www.36ria.com/?p=2839 新版的RIA之家已经上线2个多月了，这二个月来，不少朋友向明河询问jquery的问题。今天突然萌生将这些问题整理出来供遇到类似困惑的朋友做参考的想法，于是就写了这篇文章，答案只代表明河个人观点，难免有错误，仅供参考。

问：学javascript好还是jquery好？

明河答：这是个伪命题，随着jquery的大行其道，很多新手以为jquery是一种语言，其实jquery只是一个javascript的框架（javascript的框架很多，比如ext、dojo、yui等），本质还是javascript，想学好用好jquery绕不开javascript。

问：先学javascript，还是先学jquery？

明河答：这是类似先有鸡还是先有蛋的问题，很多朋友是先接触jquery然后才回过头来学javascript。我个人是推荐先学javascript，后学jquery，因为很多朋友见识到jquery的便利后，我觉得原生javascript异常笨拙，影响到学js的热情，但不学js，会很大限制你jquery的水平。

问：从开始学jquery，先学什么？从哪方面入手？

明河答：这个问题不少人问过明河，我回答的第一句话都一样：请买本jquery的书，从头看到练到尾。我知道很多朋友不喜欢看书，认为google（明河一向忽略百度，理由你懂的……）可以解决一切，明河并不否认，但依旧推荐你耐下心来看完一本书，也许你会有不一样的体会。

问：能推荐几本jquery方面的好书吗？

明河答：明河一向觉得一本好书，就是一个好的老师，jquery方面的书很多，明河推荐以下几本：

1）入门书

  • jQuery实战
  • 锋利的jQuery

二选一，明河更推荐《jQuery实战》

2）进阶书

  • jQuery Cookbook
  • jQuery1.3 + php

后二本只有英文版，你可以在网上载的到，尤其是《jQuery Cookbook》，明河严重推荐。

3）javascript好书

  1. javascript高级编程（第二版）
  2. javascript权威指南

二本二选一，明河推荐javascript高级编程。

问：学jquery好还是学ext好？

明河答：jquery拥有最为广泛的群众基础，当然ext用的人也不少，jquery和ext正好明河都学过，jquery与ext是二种风格的框架，没有简单的谁更好的问题，jquery的优势在于轻量级、数以千计的插件，而ext的优势在于完整和强大的UI，应用于企业级。

二者是可以共存的，所以可以根据你实际的使用环境而变化。明河是推荐二者都学，可以先学jquery后学ext，javascript基础好的（熟悉javascript面向对象编程）更要学ext。

问：发现自己的jquery水平遇到瓶颈了，没法提高，如何办？

明河答：这是个好现象，说明你的前端编程已经到了要质变的临界点，这时候请思考一下几个问题：

  • 你写的代码效率如何？有没有优化的空间和可能？
  • 你能够完成大部分的web前端UI功能吗？
  • 你能够快速的完成前端开发吗？
  • 你能够深入的把握可用性、web标准和用户体验吗？
  • ………

当你思考这些问题的时候，我想你会和明河一样发现，前端还有无穷的潜力等着你去挖掘。

问：如何突破jquery水平的瓶颈？

明河答：其实没什么太多的技巧，就是多看多练。多看，指的是多看别人写的jquery插件源代码，还有多看优秀的前端博客，不管是国内的还是国外的；多练，指的是试着自己写jquery插件，要多写代码。

问：如何写一个jquery插件？

明河答：明河会发布一系列的教程，有兴趣的朋友可以多留意下。别把jquery插件看的太玄，别因为自己是新手就不敢去写，只要去尝试了，你会慢慢掌握其中的技巧。

先写到这里，关于jquery，如果你有什么疑问，可以给明河留言，愿看到这篇文章的朋友，jquery水平能够快速进步！

]]> http://www.36ria.com/2839/feed 4 实用jquery代码片段集合（下） http://www.36ria.com/2836 http://www.36ria.com/2836#comments Thu, 29 Jul 2010 01:51:40 +0000 明河共影 http://www.36ria.com/?p=2836

如何隐藏除了特定选择器下的全部对象
  1. $('#target div:not(#exclude)').hide(); 
  2.  //或者 
  3. $('#target').children().filter(':not(#exclude)').hide();

filter()起到过滤的作用。

寻找带有指定字符串的元素
  1. var foundin = $('*:contains("明河")');
获取垂直滚动距离
  1. alert($(document).scrollTop());

scrollTop()非常实用的一个方法。

向表格追加一行数据
  1. $('#myTable tr:last').after('<tr>...</tr>');
超过一个属性时的过滤
  1. var elements = $('#someid input[type=sometype][value=somevalue]').get();
让cookies在X分钟后过期
  1. var date = new Date();
  2. date.setTime(date.getTime() + (x * 60 * 1000));
  3. $.cookie('example', 'foo', { expires: date });
选择从第一个到第X个的元素
  1. //从第一个到第10个
  2. $('a').slice(0,10);
  3. //或者
  4. $('a:lt(10)');
获取客户端的IP
  1. $.getJSON("http://jsonip.appspot.com?callback=?",function(data){
  2.     alert( "你的IP：" + data.ip);
  3. });

这是利用了jsonip.appspot.com提供的取IP服务。

解析XML数据源
  1. <?xml version="1.0" ?>
  2. <result>
  3.     <item>
  4.         <id>1</id>
  5.         <title>title1</title>
  6.         <description>desc1</description>
  7.     </item>
  8.     <item>
  9.         <id>2</id>
  10.         <title>title2</title>
  11.         <description>desc2</description>
  12.     </item>
  13.     <!-- ... -->
  14. </result>
  1. $.get('file.xml',{},function(data){
  2.     $('item',data).each(function(){
  3.         var $this&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; = $(this);
  4.         var id &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;= $this.find('id').text();
  5.         var title &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;= $this.find('title').text();
  6.         var description = $this.find('description').text();
  7.         //do something ...
  8.     });
  9. });
获取在id中的数字
  1. <div id="sites">
  2.     <a id="site_1" href="http://siteA.com">siteA</a>
  3.     <a id="site_2" href="http://siteB.com">siteB</a>
  4.     <a id="site_3" href="http://siteB.com">siteC</a>
  5.     ...
  6. </div>
  1. $("#sites a").click(function(){
  2.     var $this &nbsp;&nbsp; &nbsp;= $(this);
  3.     var nmb &nbsp;&nbsp; &nbsp;= $this.attr('id').match(/site_(\d+)/)[1];
  4.     ...
  5. });
将类似12343778 转成 12.343.778的形式
  1. var delimiter = '.';
  2. $('#result').html()
  3.             .toString()
  4.             .replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1" + delimiter)
  5.             .replace(/(\d{3})(?=\d)/g,"$1" + delimiter);

这个正则值得收藏，颇为经典。

向firebug的控制面板发送消息
  1. jQuery.fn.log = function (msg) {
  2.     console.log("%s: %o", msg, this);
  3.     return this;
  4. };
  5. $('#some_div').find('li.source > input:checkbox').log("sources to uncheck").removeAttr("checked");
获取图片的宽高
  1. var img = $('#imageid');
  2. var theImage = new Image();
  3. theImage.src = img.attr("src");
  4. alert("Width: " + theImage.width);
  5. alert("Height: " + theImage.height);
]]> http://www.36ria.com/2836/feed 3 实用jquery代码片段集合（上） http://www.36ria.com/2833 http://www.36ria.com/2833#comments Wed, 28 Jul 2010 08:47:53 +0000 明河共影 http://www.36ria.com/?p=2833

加载google的jquery库
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

有利于加快加载速度（已经得到验证）。

修改图片src更新图片
  1. $(imageobj).attr('src', $(imageobj).attr('src') + '?' + Math.random() );

（这是很实用的技巧，曾经有人问明河，为什么他已经修改了图片的src，但图片没变化呢？原因在于缓存，给图片路径后加个随机数参数即可。

加载多张图片，判断加载完成状态
  1. var totalimages  = 10; 
  2. var loadedimages = 0; 
  3. $("<img/>").load(function() { 
  4.      ++loadedimages; 
  5.      if(loadedimages == totalimages){ 
  6.         //全部图片加载完成时..... 
  7.      } 
  8.  });
双击不选中文本
  1. var clearSelection =  function () { 
  2.      if(document.selection && document.selection.empty) { 
  3.          document.selection.empty(); 
  4.      } else if(window.getSelection) { 
  5.          var sel = window.getSelection(); 
  6.          sel.removeAllRanges(); 
  7.      } 
  8.  } 
  9.  
  10. $(element).bind('dblclick',function(event){ 
  11.      clearSelection(); 
  12.  });
对一个列表进行排序
  1. <ul> 
  2.  <li>cloud</li> 
  3.  <li>sun</li> 
  4.  <li>rain</li> 
  5.  <li>snow</li> 
  6. </ul
  1. var items = $('.to_order li').get(); 
  2.  
  3.  items.sort(function(a,b){ 
  4.      var keyA = $(a).text(); 
  5.      var keyB = $(b).text();     
  6.      if (keyA < keyB) return -1; 
  7.      if (keyA > keyB) return 1; 
  8.      return 0; 
  9.  }); 
  10.  var ul = $('.to_order'); 
  11. $.each(items, function(i, li){ 
  12.      ul.append(li); 
  13.  });

（中文无效）

绑定右击事件
  1. $(document).ready(function(){ 
  2.      $(document).bind("contextmenu",function(e){ 
  3.          return false; 
  4.      }); 
  5.  });
扩展jquery的对象选择器
  1. $.extend($.expr[':'], {  
  2.     //选择器名
  3.     moreThanAThousand : function (a){ 
  4.          return parseInt($(a).html()) > 1000; 
  5.     } 
  6.  }); 
  7. $(document).ready(function() { 
  8.      $('td:moreThanAThousand').css('background-color', '#ff0000'); 
  9.  });
检查对象是否存在
  1. if ($("#elementid").length) { 
  2.      //......
  3.  }
取消一个ajax请求
  1. var req = $.ajax({ 
  2.  type:     "POST", 
  3.  url:     "someurl", 
  4.  data:     "id=1", 
  5.  success: function(){ 
  6.  
  7.  } 
  8.  }); 
  9.  //取消ajax请求 
  10.  req.abort()
检查cookies是否可用
  1. $(document).ready(function() { 
  2.      var dt = new Date(); 
  3.      dt.setSeconds(dt.getSeconds() + 60); 
  4.      document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
  5.      var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
  6.      if(!cookiesEnabled){ 
  7.          //cookies不能用........ 
  8.      } 
  9.  });
获取当前元素在元素集内的索引值
  1. $("ul > li").click(function () { 
  2.      var index = $(this).prevAll().length; 
  3.  });

如果你用的是jquery1.4，明河推荐使用以下方法：

  1. $("ul > li").click(function () { 
  2.      var index = $(this).index(); 
  3.  });
让一个元素相对于屏幕居中
  1. jQuery.fn.center = function () { 
  2.      this.css("position","absolute"); 
  3.      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); 
  4.      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); 
  5.      return this; 
  6.  }  
  7. $(element).center();

这个方法非常实用，明河严重推荐收藏

获取当前页面的URL
  1. $(document).ready(function() { 
  2.      var pathname = window.location.pathname; 
  3.  });

原文：http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/

]]> http://www.36ria.com/2833/feed 3 yitip—jquery工具提示插件（明河作品） http://www.36ria.com/2827 http://www.36ria.com/2827#comments Wed, 28 Jul 2010 02:44:09 +0000 明河共影 http://www.36ria.com/?p=2827 明河写yitip的灵感来自于 Tutorials写的Colortip ，明河上周曾以Colortip 为例详解了jquery插件开发，同时指出Colortip 的缺陷，于是明河对其进行了重构，写了这个新的插件，我将其命名为yitip。

使用教程

一、引入jquery库和yitip的js及其css

  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.yitip.js"></script>
  3. <link rel="stylesheet" type="text/css" href="style/css/base.css" />
  4. <link rel="stylesheet" type="text/css" href="style/css/jquery.yitip.css" />

二、创建如下的html结构

  1. <h2><a href="http://www.36ria.com/" title="这款的插件名为yitip">默认提示框</a></h2>

如果你想要改变提示框颜色可以加color属性（默认为黄色）：

  1. <h2><a href="http://www.36ria.com/" title="这款的插件名为yitip" color="blue">默认提示框</a></h2>

三、初始化插件

  1. $('[title]').yitip();

四、获取插件API

比如你有如下目标元素：

  1. <a href="http://www.36ria.com/" title="yitip的作者为明河共影" id="demo3-title">demo3：这是第三个标题</a>

初始化插件后，按如下代码获取API：

  1. var demo3Tip = $("#demo3-title").yitip("api");
  2.     demo3Tip.options.offest = {"left":10,"top":0};
  3.     demo3Tip.setPosition("rightMiddle");

这里重新设置该目标元素的提示框的位置。
（详见demo文件）

五、配置参数详解

参数

默认值

类型

描述

content

null

String | Object

提示框的内容

当为Object时，获取远程数据，需要传入一个ajax配置参数
position "topMiddle" String

提示框位置

目前开放四个位置：上中、下中、左中、右中
offest {"left":0,"top":0} Object 提示框位置偏移
color "yellow" String

提示框颜色

目前共有6种颜色：：黄色、蓝色、绿色、红色、黑色、白色
hideDelay 500 Number 隐藏延迟
showDelay 0 Number 显示延迟
showEvent "mouseover" String 显示事件，设置为"click"，即单击目标元素才显示提示框
hideEvent "mouseout" String 隐藏事件，阻止隐藏事件，将此参数设置为null即可
effect   Object

提示框动画效果配置，默认为：

{
show : {"speed":"slow","offest":10,"startOpacity":0,"endOpacity":1},
hide : {"speed":"slow","offest":10,"startOpacity":1,"endOpacity":0}
}

六、作者结语

yitip目前在IE下效果存在瑕疵，尤其是在IE8以下版本的IE浏览器，所以IE8以下明河做了特殊处理，没有开启偏移。日后明河将会予以修正，目前yitip的位置设置只有4个，下个版本，明河将更新左、右、上、下。
如果你有什么好的意见或发现了bug，欢迎给明河留言，谢谢！

]]> http://www.36ria.com/2827/feed 6 jquery插件开发规范—jquery插件开发进阶教程（1） http://www.36ria.com/2822 http://www.36ria.com/2822#comments Tue, 27 Jul 2010 02:28:16 +0000 明河共影 http://www.36ria.com/?p=2822 在明河真正讲解jquery插件开发进阶教程前，明河觉得很有必要先来说明下jquery插件开发规范，这些规范是明河学习jquery时不断积累下来的，不一定完全正确，甚至于你在开始编写第一个jquery插件时，觉得这些规范毫无意义。如果你有一天编写jquery时突然发现这些规范很有用处，恭喜你，你的水平上升了一个层次！

一、请给你的代码加上注释

明河以前很不喜欢加注释，嫌太麻烦了，这是个非常糟糕的习惯，幸运的是现在明河已经改正了这个不良习惯。

这个世界不存在百分百的完美的jquery插件，注释不止是给别人看、更重要的是给自己看。

你应该把注释当做你代码的一部分，养成随手加注释的习惯，尤其是编写javascript的时候。

1、在全部代码前加上文件说明注释

以下是明河给自己写的yitip插件加的注释：

  1. /**
  2. * $.yitip
  3. * @extends jquery.1.4.2
  4. * @fileOverview 创建文字提示框
  5. * @author 明河共影
  6. * @email mohaiguyan12@126.com
  7. * @site wwww.36ria.com
  8. * @version 0.1
  9. * @date 2010-07-17
  10. * Copyright (c) 2010-2010 明河共影
  11. * @example
  12. *    $("a").yitip();
  13. */
  14. (function($){
  15. .......
  16. })(jQuery);

这是jsdoc的写法，什么是jsdoc？请点此。jsdoc简单点来说是一种javascript文档工具，使用方法可以点此。现在对jsdoc不理解没关系，你只要创建明河上述类似的说明文档即可。jsdoc的命令请点此查看。

2、函数务必加注释

比如以下代码是yijs.Yitip一个方法setContent：

  1. yijs.Yitip.prototype = {
  2.         /**
  3.          *向提示框添加内容
  4.          * @param {Object | String} content 内容
  5.          */
  6.         setContent : function(content){
  7.                         ...........               
  8.         }    
  9. }

依旧遵循jsdoc规范，而不是匆匆加上“//”了事，关于jsdoc，有机会明河会详细讲解。

3、参数务必加注释

比如：

  1. //默认参数
  2.     $.fn.yitip.defaults = {
  3.         /**目标容器*/
  4.         applyTo : null,
  5.         /**内容*/
  6.         content : "",
  7.         /**提示框位置*/
  8.         position : "topMiddle",
  9.         /**提示框位置偏移*/
  10.         offest : {"left":0,"top":0},
  11.         /**提示框颜色*/
  12.         color : "yellow"
  13.          }

4、函数体内关键代码前加注释

二、javascript变量规范

在javascript世界中，没有真正意义的共有变量、私有变量、常量等概念，当你的javascript代码达到一定数量级时，过段时间你回头看自己的代码，都会把自己搞晕。

1、请在私有变量前加“_”

比如：

  1. var _pos = this.pos;

2、常量请大写

比如：

  1. this.DATA_COLOR = "color";

3、jquery对象变量前加“$”

比如：

  1. this.$applyTo  = $(".yitip");

4、object、array变量前加“o”、“a”

很多人喜欢给数组变量加个”s”，这也是可以的，按个人习惯，如果你觉得有必要还可以给函数前加个“fn”。

三、jquery插件开发的一些建议

1、请多使用data()方法

jquery中data()方法非常有用，尤其在jquery插件开发中，因为data()所创建的缓存，可以完整的保存各种数据类型的数据，这是其他缓存机制无法比拟的。

2、请使用bind来绑定事件

很多朋友喜欢以下的代码：

  1. $(".yitip").click(function(){
  2.         ........
  3.     })

但在jquery插件开发中明河更提倡使用bind：

  1. $(".yitip").bind('click',function(){
  2.               .........
  3.      })

以后的教程中明河会予以解释。

3、善用typeof

typeof用于判断数据类型，这个方法在参数判断中非常有用处

4、插件名加个独有前缀

jquery插件成千上万，插件撞车时很容易的事，比如提示框插件：

  1. $.fn.tip = function(options){
  2. }

但tip的冲突率无疑很高，所以明河加个“yi”前缀，如果你有在网上看到以yi做前缀的插件，那估计就是明河写的，呵呵。

四、其他规范

1、设置版本号

有很多插件作者将版本号作为插件的一个属性，也是一个比较好的做法，比如：

  1. $.fn.yitip.version = 0.1

你可以不设置为属性，但在你的文件头务必加上版本注释，比如：

  1. /**
  2. * $.yitip
  3. * @version 0.1
  4. */

明河喜欢以0.1起始，然后把正式版的插件设置为1.0

2、将插件代码托管到网上

可以去sourceforge注册个账号，新建个开源项目，将代码托管上去，如果你不喜欢sourceforge，可以使用google的代码托管，可以看明河曾发表过的使用Google Code托管代码教程。有机会发篇教程讲述如何在sourceforge上托管代码。

（欢迎指正和补充）

]]> http://www.36ria.com/2822/feed 0 Colortip的缺陷—jquery插件实战教程（完结篇） http://www.36ria.com/2818 http://www.36ria.com/2818#comments Mon, 26 Jul 2010 02:42:17 +0000 明河共影 http://www.36ria.com/?p=2818 jquery插件实战教程，明河已经发了四篇教程：

今天这篇教程将是这个系列教程的完结篇，明河主要讲解Colortip这个jquery提示框插件的缺陷，既然有缺陷，当然明河会提供相应的解决方案，所以这篇教程既是完结篇，又是下一个jquery插件进阶教程的引子。

整个系列教程，最重要的是第二篇教程：jquery插件基础解析—jquery插件实战教程（2），所以如果你想学jquery插件制作，这篇教程尽量把它看懂，至于其他篇教程，看不懂，不影响你实际演练。

Colortip的缺陷

这个世上没有百分百完美的人，同样也没有百分百完美的程序，Tutorials无疑是个优秀的前端工程师，但Colortip一样有缺陷。

一、Colortip的bug

根据明河的测试，Colortip在IE6下存在2个bug：

1、IE6下，倒三角部分高度失效，出现难看的背景颜色：（请看下图的高亮部分）


明河说明：其实这个是IE6常见的一个bug，就是一个层，无端出现12px的高度，当你所设置的高度小于12px时都无效。解决方法很简单，给这个层加上overflow:hidden;

2、IE6下，提示框位置错误，提示框不是相对于目标容器居中显示，而是变成靠右显示

二、Colortip的先天缺陷

1、将提示框添加到目标容器内部

Tutorials的思路是把提示框当做目标容器的子容器，当鼠标滑过目标容器时，显示子容器提示框，这个思路本身没错，但明河觉得考虑不足。当把提示框当做目标容器的子容器，也就是说提示框的样式将会继承于目标容器，而目标容器的样式你无法确定，这是一个样式继承的风险！

2、提示框的内容无法修改，只针对带有title属性的目标元素

Colortip只能处理一种情况，如果你想要在提示框中显示图片或者列表，Colortip就爱莫能助了。

三、Colortip的功能缺陷

请跟着明河思考以下问题：

  • 如果我想控制提示框的出现位置，该如何办？
  • 有没有一种方法我可以控制提示框的内容？
  • 我能不能自由的控制提示框的显示/隐藏？
  • 显示/隐藏提示框的效果能不能自由控制？
  • 我能不能在显示/隐藏提示框后干些其他事？

你思考完这些问题，再回头看Colortip，你会发现，很遗憾，Colortip明显无法满足我们的要求。
所以明河依照Colortip的原理，写了个新的jquery提示框插件，明河将其命名为：yitip，而yitip，恰恰能解决以上问题。

四、jquery插件基础模板的缺陷

先来回忆下jquery插件基础模板：

  1. (function($){
  2.     $.fn.插件名 = function(settings){
  3.  
  4.         var defaultSettings = {
  5.           
  6.         }
  7.       
  8.         /* 合并默认参数和用户自定义参数 */
  9.         settings = $.extend({},defaultSettings,settings);
  10.         return this.each(function(){
  11.           
  12.         });
  13.       
  14.     }
  15.   
  16. })(jQuery);

（明河再次提醒：这个模板非常重要，请尽量看懂它。）
Colortip的功能缺陷，实际上有很大原因是由于jquery插件基础模板的缺陷引起的。那么jquery插件基础模板的缺陷在哪呢？又是如何解决这些缺陷呢？请看下一个系列教程：jquery插件制作进阶教程

]]> http://www.36ria.com/2818/feed 1 microgallery — jquery图片画廊插件 http://www.36ria.com/2815 http://www.36ria.com/2815#comments Sun, 25 Jul 2010 13:22:13 +0000 明河共影 http://www.36ria.com/?p=2815 明河好久没有推荐jquery插件了，今天发现了一款颇有意思的jquery图片画廊插件，有意思的地方在于它的迷你…….

使用教程

插件首页：http://tympanus.net/codrops/2010/04/19/micro-image-gallery-a-jquery-plugin-2/

所需的html结构如下：

  1. <div id="mG1" class="microGallery">
  2.     <img src="gallery/2.jpg"/>
  3.     <img src="gallery/3.jpg"/>
  4.     <img src="gallery/4.jpg"/>
  5.     <img src="gallery/5.jpg"/>
  6. </div>

初始化插件

  1. $("#mG1").microgallery();

这个jquery图片画廊插件的优势就是小，如果你希望你的侧边栏显示一个图片画廊，这款插件倒是可以考虑。
如果你想要大尺寸的图片画廊插件，不妨看下明河曾发的以下文章：

]]> http://www.36ria.com/2815/feed 7 Colortip代码实现—jquery插件实战教程（4） http://www.36ria.com/2808 http://www.36ria.com/2808#comments Fri, 23 Jul 2010 12:56:00 +0000 明河共影 http://www.36ria.com/?p=2808 jquery插件实战教程，明河已经发了三篇教程：

上一篇Colortip难点解析，明河主要讲解了如何使用border生成三角图形，其实这部分并不是jquery插件必须的内容，最关键还是第二篇教程关于jquery插件基础解析，特别是下面这个jquery插件模板：

  1. (function($){
  2.     $.fn.插件名 = function(settings){
  3.  
  4.         var defaultSettings = {
  5.            
  6.         }
  7.        
  8.         /* 合并默认参数和用户自定义参数 */
  9.         settings = $.extend({},defaultSettings,settings);
  10.         return this.each(function(){
  11.            
  12.         });
  13.        
  14.     }
  15.    
  16. })(jQuery);

接下来的教程重要讲解Colortip的代码实现。

1、设置参数

  1. var defaultSettings = {
  2.             //颜色
  3.             color        : 'yellow',
  4.             //延迟
  5.             timeout        : 500
  6.         }
  7.         /* 合并默认参数和用户自定义参数 */
  8.         settings = $.extend({},defaultSettings,settings);

我们需要提供2个参数：颜色和隐藏提示框的延迟时间。当然你可以提供更多的配置参数给用户。

2、创建个包含所有颜色信息的数组

  1. //提示框的颜色
  2.         var supportedColors = ['red','green','blue','white','yellow','black'];

3、定时器

我们需要一个定时器，这个定时器用途在于，当你鼠标移开目标容器时，多久隐藏提示框。

  1. /*
  2.     /    定时器类
  3.     */
  4.     function eventScheduler(){}
  5.    
  6.     eventScheduler.prototype = {
  7.         set    : function (func,timeout){
  8.             //添加定时器
  9.             this.timer = setTimeout(func,timeout);
  10.         },
  11.         clear: function(){
  12.             //清理定时器
  13.             clearTimeout(this.timer);
  14.         }
  15.     }

这里需要你具备javascript面向对象编程方面的一些知识。
eventScheduler类很简单，只有二个方法，set()：添加定时器，clear ()：清理定时器

4、创建提示框类

  1. /*
  2.     /    提示类
  3.     */
  4.  
  5.     function Tip(txt){
  6.         this.content = txt;
  7.         this.shown = false;
  8.     }
  9.    
  10.     Tip.prototype = {
  11.         generate: function(){
  12.             //产生提示框
  13.            
  14.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  15.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  16.         },
  17.         show: function(){
  18.             //显示提示框
  19.             if(this.shown) return;
  20.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  21.             this.shown = true;
  22.         },
  23.         hide: function(){
  24.             //隐藏提示框
  25.             this.tip.fadeOut();
  26.             this.shown = false;
  27.         }
  28.     }

Tip也是个javascript类，具有三个方法：generate、show、hide。
值得一提的是，Tip和eventScheduler类是在$.fn.colorTip函数体外。

5、Colortip具体的代码实现

1）实例化Tip和eventScheduler类
  1. // 实例化eventScheduler（定时器）           
  2.             var scheduleEvent = new eventScheduler();
  3.             //实例化Tip(提示类，产生、显示、隐藏)
  4.             var tip = new Tip(elem.attr('title'));
2）产生提示框，将提示框加入到目标容器
  1. // 产生提示框，并给提示框父容器添加样式
  2.             elem.append(tip.generate()).addClass('colorTipContainer');
3）检查目标容器是否有颜色样式
  1. var hasClass = false;
  2.             for(var i=0;i<supportedColors.length;i++)
  3.             {
  4.                 if(elem.hasClass(supportedColors[i])){
  5.                     hasClass = true;
  6.                     break;
  7.                 }
  8.             }

我们只需给没有颜色样式的目标容器，加入默认的颜色样式（黄色）。

4）给目标容器添加鼠标滑过事件
  1. elem.hover(function(){
  2.  
  3.                 tip.show();
  4.                
  5.                 //清理定时器
  6.                
  7.                 scheduleEvent.clear();
  8.  
  9.             },function(){
  10.  
  11.                 //启动定时器
  12.                
  13.                 scheduleEvent.set(function(){
  14.                     tip.hide();
  15.                 },settings.timeout);
  16.  
  17.             });

鼠标滑过目标容器时显示提示框，并清理定时器；当鼠标移开时启动定时器。

6、完整代码如下

  1. (function($){
  2.     $.fn.colorTip = function(settings){
  3.  
  4.         var defaultSettings = {
  5.             //颜色
  6.             color        : 'yellow',
  7.             //延迟
  8.             timeout        : 500
  9.         }
  10.         //提示框的颜色
  11.         var supportedColors = ['red','green','blue','white','yellow','black'];
  12.        
  13.         /* 合并默认参数和用户自定义参数 */
  14.         settings = $.extend(true,defaultSettings,settings);
  15.         return this.each(function(){
  16.  
  17.             var elem = $(this);
  18.            
  19.             // 如果该对象不包含title属性，直接予以返回
  20.             if(!elem.attr('title')) return true;
  21.            
  22.             // 实例化eventScheduler（定时器）           
  23.             var scheduleEvent = new eventScheduler();
  24.             //实例化Tip(提示类，产生、显示、隐藏)
  25.             var tip = new Tip(elem.attr('title'));
  26.  
  27.             // 产生提示框，并给提示框父容器添加样式
  28.            
  29.             elem.append(tip.generate()).addClass('colorTipContainer');
  30.  
  31.             // 检查提示框父容器是否有颜色样式
  32.            
  33.             var hasClass = false;
  34.             for(var i=0;i<supportedColors.length;i++)
  35.             {
  36.                 if(elem.hasClass(supportedColors[i])){
  37.                     hasClass = true;
  38.                     break;
  39.                 }
  40.             }
  41.            
  42.             // 如果没有，使用默认的颜色
  43.            
  44.             if(!hasClass){
  45.                 elem.addClass(settings.color);
  46.             }
  47.            
  48.             // 鼠标滑过提示框父容器时，显示提示框
  49.             // 鼠标移出，则隐藏
  50.            
  51.             elem.hover(function(){
  52.  
  53.                 tip.show();
  54.                
  55.                 //清理定时器
  56.                
  57.                 scheduleEvent.clear();
  58.  
  59.             },function(){
  60.  
  61.                 //启动定时器
  62.                
  63.                 scheduleEvent.set(function(){
  64.                     tip.hide();
  65.                 },settings.timeout);
  66.  
  67.             });
  68.            
  69.             //删除title属性
  70.             elem.removeAttr('title');
  71.         });
  72.        
  73.     }
  74.  
  75.  
  76.     /*
  77.     /    定时器类
  78.     */
  79.  
  80.     function eventScheduler(){}
  81.    
  82.     eventScheduler.prototype = {
  83.         set    : function (func,timeout){
  84.             //添加定时器
  85.             this.timer = setTimeout(func,timeout);
  86.         },
  87.         clear: function(){
  88.             //清理定时器
  89.             clearTimeout(this.timer);
  90.         }
  91.     }
  92.  
  93.  
  94.     /*
  95.     /    提示类
  96.     */
  97.  
  98.     function Tip(txt){
  99.         this.content = txt;
  100.         this.shown = false;
  101.     }
  102.    
  103.     Tip.prototype = {
  104.         generate: function(){
  105.             //产生提示框
  106.            
  107.             return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
  108.                                              '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
  109.         },
  110.         show: function(){
  111.             //显示提示框
  112.             if(this.shown) return;
  113.             this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
  114.             this.shown = true;
  115.         },
  116.         hide: function(){
  117.             //隐藏提示框
  118.             this.tip.fadeOut();
  119.             this.shown = false;
  120.         }
  121.     }
  122.    
  123. })(jQuery);

至此Colortip的代码讲解全部结束，Colortip有个优点就是能够自由控制提示框颜色，但Colortip存在不少的局限性，只能满足基本的应用，下篇教程将对其局限性进行详述，从而进入进阶篇。

]]> http://www.36ria.com/2808/feed 1 Jquery幻灯片实践（使用明河的verticalTab插件） http://www.36ria.com/2774 http://www.36ria.com/2774#comments Thu, 22 Jul 2010 00:47:54 +0000 银月闪舞 http://www.36ria.com/?p=2774 这几天有几个幻灯片要做，所以就拿明河的verticalTab插件玩了玩，呵呵，设置很简单，只需自己改一下css即可，另外如果自己有特殊需要也可以根据自己特殊情况添加代码。以下给出两个demo效果很接近，只有css做了改动。
demo1：

demo2：

具体关于verticalTab的用法请参看明河的文章http://www.36ria.com/2613
由于本人js和css方面并不是很专业，文中可能存在一些不合理或者不合适的写法，本文仅供参考。


补充另外一个demo

]]> http://www.36ria.com/2774/feed 6