注：应该是不支持IE6的。支持安卓系、iOS苹果机、平板以及PC上的浏览器，包括IE7、IE8等。

触屏手机越来越流行，所以制作网站也要越来越多的考虑手机用户的使用体验。网站上如果有轮换图片的幻灯片（走马灯）之类的功能，就要考虑触屏手机用户的使用体验，而提供他们可以通过手指滑动来切换上一张/下一张的功能，将会是很大的体验提升。

基于此考虑，我在参考了Swipe的实现后，开发了可以同时支持触屏手机手指滑动与PC上鼠标点击滑动的一段脚本，命名为“TouchSlider”。(已经有叫这个名字的脚本了？俺NO Care ^_^)。

为什么开发这个东西

上面已经说了，是为了支持触屏手机。其实还有一个更重要的原因是，为了适应手机版网站的自适应宽度特性。

由于手机、平板终端的多样性，其手机屏的分辨率各不相同，而许多网站为了适应多种设备的显示，往往是使用了自适应宽度的设计，也就是说页面宽度会随着所使用的设备的分辨率不同而有所变化，旋转设备方向后网站宽度也会变化。

之前的许多幻灯脚本只支持固定高宽的幻灯显示，所以在手机上并不能很好的工作。

这个TouchSlider的特点

也没什么特别的，主要是以下几点：

1. 无JS库依赖，使用原生javascript开发。
   手机端我个人并不建议载入太多JS，能少一个请求少一个。尤其是如果为了一个很小的功能而去载入一个jQuery或者prototype之类的库，有点太不划算了。TouchSlider整个脚本大小约12KB，压缩后只有6KB。
2. 触摸滑动与点击拖动切换全支持
   支持触屏手机上的触摸滑动切换，也支持PC上的点击拖动切换。详细可以参见DEMO页面，并实际使用体验。用触屏手机的可以用手指滑动切换，电脑端的用户可以用鼠标点击拖动切换。
3. 幻灯支持多个方向切换
   支持向左、向右以及向上和向下滑动切换。
4. 支持自适应浏览器宽度
   手机横竖屏切换或者改变浏览器宽度时，全宽度幻灯依然能正常工作适应

TouchSlider的使用以及demo

使用方法，载入TouchSlider的脚本文件，然后可以通过实例化“TouchSlider”这个类来使用。例如：

new TouchSlider({

    'id': 'slider', //幻灯容器的id

    'auto': 0, //是否自动开始，负数表示非自动开始，0,1,2,3....表示自动开始以及从第几个开始

    'speed':600, //动画效果持续时间 ms

    'timeout':5000,//幻灯切换的间隔时间 ms

    'className':'', //每个幻灯所在的li标签的classname,

    'direction':'left', //left right up down

    'before':new Function(),//幻灯切换前的回调

    'after':new Function() //幻灯切换后的回调

});

这样子幻灯就会工作了。

当然，为了方便用户通过点击“上一张”/“下一张”来切换，实例化后的这个对象也具有一些方法来很方便的进行操作：

var slider=new TouchSlider({id:'slider'});

//切换上一张

slider.prev();

//切换下一张

slider.next();

//向前或者向后切换N张，例如，向前切换2张，可以通过 slider.prev(2) 来实现

sldier.prev(num);

slider.next(num);

//暂停幻灯播放

slider.pause();

//开始播放

slider.begin();

//停止播放

slider.stop();

//播放第N张幻灯片。N等于0,1,2...幻灯片数量

sldier.slide(N)

//TouchSlider对象具有的其他属性

slider.index //当前显示的幻灯的次序

slider.length //幻灯片数量

slider.width, slider.height //幻灯当前的宽度 高度（可能会随着浏览器尺寸变化而变化）

slider.status //幻灯的状态。0表示停止，1表示正在播放，2表示暂停。-1表示脚本出错。如果出错，slider.errorInfo提供了出错信息

具体的效果以及使用可以参见我提供的 DEMO （可以用你的安卓或者苹果手机访问http://u.boy.im/iphone-test/touch 体验。PC用户可以使用鼠标拖拽模拟触摸操作）。可以通过改变浏览器宽度或者横竖屏切换来查看幻灯的自适应效果。

源码下载点击此处下载。

• JavaScript: 支持iphone、ipad 使用两根手指放大图片 (18)
• 终极完美版javascript获取并限制调整图片尺寸 (40)
• wordpress的微博时间显示方法 (18)
• javascript 图片预加载 (25)
• JavaScript & images LazyLoad 图片延迟加载(伪lazyload) (43)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/fg

• 2012年02月1日, 胡 say: 这么玩的啊 没搞明白
• 2012年01月19日, 牧风 say: 收走研究去
• 2012年01月13日, 十年灯 say: 高手啊，我最佩服能写出漂亮代码的人了
• 2012年01月13日, wmtimes say: 嗯。效果不错。一回来就出新作品了。支持。
• 2012年01月12日, 鑫爷 say: 板凳~~~
• 2012年01月11日, liuqiqi say: 美美的沙发。。。

还是从最近来说。

订购火车票

今天早上一早7点半多我爬起来，打开12306.cn来定火车票，战战兢兢地连续登陆了几十遍后终于在八点15分时登陆了上去。然后是订票，依然是提交了无数遍后网站依然淡定的显示着“系统忙。。。”。我眼睁睁的看着卧铺票数量从“有”变成“10”最后成为“无”。最后三十分钟后，又一次提交订单时，终于看到了“有未完成订单”的提示。遂迅速付款完成车票购买。当然，只是硬座了。

我已经问候了铁道部全家数遍。

网站宕机风波

1月5号之前的两周，我的博客访问的话会一直是“域名已被阻断”的提示。最初以为是暂时的，后来发现一个多星期了还是这个提示。于是我询问了万网（域名在万网）工作人员，答曰“域名正常解析，与他们无关”。于是联系了我的主机提供商，确认是机房屏蔽的，说是前段时间的数据库大面积泄露导致上头对未备案网站的监察收紧，他们临时屏蔽了未备案网站。我的域名是备过案的，所以我在提交了备案号后网站立马就解封了。

重见天日了。

蜗居在帝都

正因为身在帝都苟活，所以才有了开头的订购火车票回家的需求。

当然，求被请客，求腐败的需求也很旺盛。↖(^ω^)↗

博客未来

博客继续更新，内容依然是与javascript、wordpress等技术文为主。

相信有不少之前的博客主都已经陆续离开这个圈子了，当然也有不少新人加入。有意与小站友链的，欢迎留言板申请。

感谢各位支持。

• 旅行在云南 (35)
• 最近口腔溃疡+牙龈疼 (4)
• Social Medias Connect（社交媒体连接） (434)
• Guestbook (353)
• 插件发布：边栏最新评论及ajax回复——WP RC Reply AJAX (188)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/fd

• 2012年01月16日, 掌柜的马甲 say: 欢迎回来~网上买票买的早,没有遇到啥麻烦
• 2012年01月15日, 超人 say: 乍一看以为是船票~~没想到是帝都出来的火车票。哈哈。今年不用再为购票而烦恼了
• 2012年01月13日, 康康 say: 春节不回家，离家近感受不到买票的热闹氛围确实是一大憾事。
• 2012年01月12日, jixiangac say: 网上有个利用FIREBUG购票攻略的，很牛的
• 2012年01月12日, Maplews say: 铁道部的网站都是个极品货.. 太坑人.. 太坑爹
• 2012年01月11日, qiqiboy say: @鑫爷 空间在国内放着的迟早得备案
• 2012年01月11日, qiqiboy say: @axiu 嗯，买票不易了。。过几天还要买回程票
• 2012年01月11日, qiqiboy say: @无冷 嗯，现在好了。。

增加对facebook的支持

使用了V1.6的同学应该已经在后台看到facebook的连接登陆图标。需要说明的是，管理员在启用facebook连接注册前，自己一定要到后台的 “绑定微博同步文章” 页面， 点击facebook的登陆连接，在弹出的要求输入facebook appid窗口中，填写为你网站申请的appid和appsecret。（不知道如何申请，那还是不要用facebook了）

设置完成后，你的网站用户才可以在前台使用facebook连接功能。

如果要修改输入的appid和appsecret。可以点击facebook连接按钮右边的“修改appKey”按钮，进行修改操作。

完全重写的账户注册流程

这是V1.6重点功能。原先的账号注册流程是：

用户点击微博连接 –》 带入到微博授权页面 –》 授权后返回网站 –》 获得授权的用户信息 –》 使用这些信息自动为用户建立账号

上面的缺点是，整个过程是自动的，用户没有选择用户名、邮箱的权利。尤其是邮箱，由于权限限制，即使授权后也无法获得用户的真实邮箱，所以使用虚拟的邮箱为用户注册后，用户也无法即时从网站得到信息（如评论回复信息）。

新的注册流程，在最后一步，将用户带到一个全新的注册页面，让他输入自己的真实可用的邮箱，这样一来就避免了上面的不足。并且如果用户愿意，他还可以自行更换一个用户名，并修改自己的网站地址（默认是用户的微博地址）。

最重要的是，使用新的注册流程后，旧的注册用户完全不受影响。

欢迎大家去更新最新版。wordpress官方下载地址

有任何问题可以在新浪微博：http://weibo.com/qiqiboy 或者我博客任意页面留言交流。

• Social Medias Connect V1.3发布 新增图片同步 (25)
• WordPress插件发布: Social Medias Connect (80)
• 有关社交媒体连接插件对饭否、follow5支持的说明 (32)
• Social Medias Connect V1.4更新，自定义同步格式 vs 标签、摘要同步 (49)
• 新玩意儿-Social Medias Connect 微博连接 (64)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/f8

• 2011年12月16日, 蓝颜博客 say: 第一次过来，围观一下
• 2011年11月26日, 笑话皇后 say: 博主的博客很专业，我学到了很多东西。目前已经用上了你的一个插件。
• 2011年11月14日, 微代码-鸿枫业 say: 我又来看你的新博了~~支持一下
• 2011年11月12日, 大学便民网 say: 收下了 还不错 之前的bug解决的了不少 但是不知道用户名太长这个解决了没 之前是太长不能注册 顺便问下 你的评论框这的编辑器怎么弄的呢？
• 2011年11月3日, 懒人工具 say: 懒人已阅，哈哈
• 2011年11月3日, s.ing say: 支持！
• 2011年10月31日, brushes8 say: 曾经出现 空间不支持的情况 而且···文章发送的时候 异常的卡啊····
• 2011年10月14日, 顶屋韩国空间 say: 关注了，支持您

当然，不会白白更新一篇博客的。下面说一个根据自定义字段查询文章的方法。

query_posts可以实现多种组合查询，但是我遇到的一个问题是，需要搜索自定义字段的值。比如为一个post定义了一个字段“my_address”，它的值表示一个地址，比如“中国 北京 海淀区 北四环路”。如果我们要想通过搜索“北京”这个关键词来找到这篇post，那么通过query_posts就办不到了。

虽然query_posts的查询有“meta_value”这个方法，但是这个必须是完整的值，也就是只有查询“中国 北京 海淀区 北四环路”这个长关键句才能找到文章，而只通过“北京”是会查询失败的。也就是说meta_value是精确查询的，而不能模糊查询。

最后，我琢磨了两种方法，虽然我自己都感觉并不怎么完美。

方法一，通过add_filter处理posts_join、posts_search勾子

add_filter( 'posts_search', 'wp_custom_search' );

function wp_custom_search($search){

    if(!isset($_GET['meta_search']))return $search;//通过$_GET['meta_search']确保是要进行meta查询

    $s=get_query_var('s');

    $search = "AND (((wp_posts.post_title LIKE '%{$s}%') 

                OR (wp_posts.post_content LIKE '%{$s}%') 

                OR (wp_postmeta.meta_value LIKE '%{$s}%')

               )) AND (wp_posts.post_password = '')";

    return $search;

}

add_filter( 'posts_join', 'wp_custom_search_join' );

function wp_custom_search_join($join){

    if(!isset($_GET['meta_search']))return $join;

    $join = "INNER JOIN wp_postmeta ON (wp_posts.ID = wp_postmeta.post_id)";

    return $join;

}

为了不影响其它地方的query，所以我们通过检查是否有一个get请求meta_search，来判断是否要对查询进行处理。

方法二，将字段信息加入到post_content中

因为默认的post_title和post_content里的内容是模糊查询的，所以我们可以将postmeta的内容追加到post_content中。手动添加可以，自动加入也行。

下面是自动加入的方法：

add_action('wp_insert_post_data','wp_my_post',10,2);

function wp_my_post($data, $postarr){

    $arrmeta=array('my_address','meta2','meta3');

    $info='<span style="display:none;color:#fff;">';

    foreach($arrmeta as $meta){

        $info .= ' '.$_POST[$meta];

    }

    $info.='</span>';

    $data['post_content'] .= $info;

    return $data;

}

仅供参考。

如果你还有更好的方法,欢迎与我交流分享。

• wordpress 按首字母排列文章/检索文章 (19)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• wordpress的微博时间显示方法 (18)
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (107)
• JavaScript: 让拖动支持iphone/ipad触摸 (14)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/f7

• 2011年12月12日, 胡实 say: 挖宝中 你懂得
• 2011年11月19日, beyondme say: "Fuck you! Ni Ma Bi!" 这什么意思，网站不能留言了？
• 2011年10月29日, 宝宝健康成长 say: 新的theme很给力啊！
• 2011年10月3日, wmtimes say: 模糊查询啊。主题完成了再试。
• 2011年09月28日, 软件风暴 say: 赶紧试试去 真不错
• 2011年09月17日, 残影 say: @liuqiqi = = 好久没来了~~
• 2011年09月16日, qiqiboy say: @yetone 好久不见呐
• 2011年09月16日, qiqiboy say: @丕子 哈 好久不见

第一，按标题首字母排列文章

这个简单，只需在循环（loop）前，添加

/**

 * 方式一，直接添加查询字符串

 */

<?php query_posts( $query_string . '&orderby=title&order=asc' ); ?>

/**

 * 方式二，合并查询数组

 */

<?php $args=array_merge( $wp_query->query, array( 'orderby' => 'title', 'order' => 'asc' ) );

    query_posts($args); ?>

注: query_posts($args)用来改变主循环，相关使用方法可查询wordpress官方说明文档。

第二，按首标题字母检索文章

这个普通用户可能用处不大，但是对于一些将wordpress用来做产品展示的网站来说，按照字母名称快速查询相关产品则是一个很基本的需求。最近在一个项目中有用到，研究了wordpress的query后，一点小心得在这里分享出来。

既然是检索，那肯定就是要用到”s=word”这个查询变量了。比如查找以字母“A”开头的文章

<?php query_posts('s=A'); ?>

这样的话,wordpress会通过标题和内容查找包含字母A的文章,而不是我们需要的”以字母A开头的文章”.要达到我们的目的应该怎么做呢？

add_filter( 'posts_search', 'wp_custom_search' );

function wp_custom_search($search){

    $s=get_query_var('s');

    if(!$s)return $search;//非搜索，直接返回。

    $search = "AND (((wp_ymimds_posts.post_title LIKE '{$s}%'))) AND (wp_ymimds_posts.post_password = '')";//会sql的你应该懂得，模糊查询

    return $search;

}

将以上代码放到主题的functions.php中即可。

demo可看我在项目中的具体应用。

查询以某一字母开头的文章示例

• wordpress 搜索自定义字段(模糊查询) (17)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (46)
• wordpress的微博时间显示方法 (18)
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (107)
• JavaScript: 让拖动支持iphone/ipad触摸 (14)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/f5

• 2011年11月9日, 微代码 say: 非常不错的博客，顶一个，欢迎回访，更欢迎互换链接
• 2011年11月3日, 懒人工具 say: 不错，受益了
• 2011年09月2日, 扒站 say: 很专业的博客,受益匪浅.
• 2011年08月26日, zhbconan say: 隔壁工位的哥们介绍我看你的网站，做的很不错，希望以后可以多向你学习。
• 2011年08月23日, c say: 感觉你的博客有点像cms了哦。。
• 2011年08月16日, 美容护肤小窍门 say: 通过百度访问到您的博客 内容很好 页面很漂亮 以后会常来看看你的博文的 谢谢你的分享
• 2011年08月14日, loosky say: 有的时候的却需要这个功能。
• 2011年08月13日, 毕节教育网 say: 代码看不明白。

其实原理也就是在图片接收了两个有效触摸点后，在手指移动过程中检测两点之间的距离的变化，以此来对图片进行放大缩小。

不多说，demo在这里（必须使用ios设备查看）。代码如下：

var getZoomClass=(function(){

var SupportsTouches = ("createTouch" in document),//判断是否支持触摸

    $=function(id){

        return document.getElementById(id);

    },

    preventDefault=function(ev){

        if(ev)ev.preventDefault();

        else window.event.returnValue = false;

    },

    getTwoPointSub=function(ev){

        var x1=x2=y1=y2=0,sub;

        x1=ev.touches.item(0).pageX;x2=ev.touches.item(1).pageX;

        y1=ev.touches.item(0).pageY;y2=ev.touches.item(1).pageY;

        sub=Math.round(Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2)));

        return sub;

    },

    getSize=function(img){

        return {width:img.width,height:img.height};

    };

    function _zoom(opt){

        if(!SupportsTouches)return false;

        this.el=typeof opt.el=='string'?$(opt.el):opt.el;

        this.onstart=opt.start || new Function();//

        this.onmove=opt.move || new Function();

        this.onend=opt.end || new Function();

        this.action=false;

        this.init();

    }

    _zoom.prototype={

        init:function(){

            this.el['ontouchstart']=this.bind(function(e){//绑定节点的 [鼠标按下/触摸开始] 事件

                if(this.action || e.touches.length<2)return false;//这里监测了触摸点的数量，小于两个说明不是在进行缩放操作

                else this.action=true;

                preventDefault(e);

                this.startSub=getTwoPointSub(e);

                this.startSize=getSize(this.el);

                this.onstart();

                document.ontouchmove=this.bind(function(e){

                    if(e.touches.length>1){

                        preventDefault(e);//取消文档的默认行为[鼠标移动、触摸移动]

                        this.nowSub=getTwoPointSub(e);

                        this.el.width=this.startSize.width*this.nowSub/this.startSub;

                        this.el.height=this.startSize.height*this.nowSub/this.startSub;

                        this.onmove();

                    }

                },this);

                document.ontouchend=document.ontouchcancel=this.bind(function(){

                    document.ontouchend=document.ontouchcancel=document.ontouchmove=null;

                    this.action=false;

                    this.onend();

                },this);

            },this);

        },

        bind:function(fn,obj){

            return function(){

                fn.apply(obj,arguments);

            }

        },

        tool:null

    }

    return function(opt){

        return new _zoom(opt);

    }

})();

demo在这里（必须使用ios设备查看）。

• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (6)
• JavaScript: 让拖动支持iphone/ipad触摸 (14)
• javascript 图片预加载 (25)
• JavaScript & images LazyLoad 图片延迟加载(伪lazyload) (43)
• 终极完美版javascript获取并限制调整图片尺寸 (40)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/ez

• 2011年10月25日, 懒人 say: 我还在折腾安卓
• 2011年07月31日, 晨光 say: 这方面懂得还是很少呀
• 2011年07月25日, 丰禾棋牌 say: 电脑这方面不是特别懂 学习了
• 2011年07月24日, 小五 say: 没有接触过IP4
• 2011年07月23日, 孤夜狂狼 say: Android 平板 XOOM 测试成功…… 好东西啊~ 收藏了~ 虽然暂时没有什么用法方面的创意……
• 2011年07月23日, 人好哇！ say: 唔。。。我表示现在为IOS做的优化随处可见了呢~~不过还真没想过JS还可以这么搞，哈哈
• 2011年07月22日, mirror say: 评论框的AJAX好牛啊
• 2011年07月21日, 权子 say: 木有那么高档的设备~~~哈哈~~~

其实也很简单，对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo，花了不少的时间，所以为了节省时间，我文章里就不多说了，仅贴一下相关代码。

DEMO可以在此查看。

var getDragClass=(function(){

var SupportsTouches = ("createTouch" in document),//判断是否支持触摸

    StartEvent = SupportsTouches ? "touchstart" : "mousedown",//支持触摸式使用相应的事件替代

    MoveEvent = SupportsTouches ? "touchmove" : "mousemove",

    EndEvent = SupportsTouches ? "touchend" : "mouseup",

    $=function(id){

        return document.getElementById(id);

    },

    preventDefault=function(ev){

        if(ev)ev.preventDefault();

        else window.event.returnValue = false;

    },

    getMousePoint=function(ev){

        var x = y = 0,

            doc = document.documentElement,

            body = document.body;

            if(!ev) ev=window.event;

            if (window.pageYoffset) {

                x = window.pageXOffset;

                y = window.pageYOffset;

            }else{

                x = (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);

                y = (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);

            }

            if(SupportsTouches){

                var evt = ev.touches.item(0);//仅支持单点触摸,第一个触摸点

                x=evt.pageX;

                y=evt.pageY;

            }else{

                x += ev.clientX;

                y += ev.clientY;

            }

            return {'x' : x, 'y' : y};

    };

    function _drag(opt){

        this.el=typeof opt.el=='string'?$(opt.el):opt.el;//被拖动节点

        this.onstart=opt.start || new Function();//

        this.onmove=opt.move || new Function();

        this.onend=opt.end || new Function();

        this.action=false;

        this.init();

    }

    _drag.prototype={

        init:function(){

            this.el.style.position='relative';

            this.el['on'+StartEvent]=this.bind(function(e){//绑定节点的 [鼠标按下/触摸开始] 事件

                preventDefault(e);

                if(this.action)return false;

                else this.action=true;

                this.startPoint=getMousePoint(e);

                this.onstart();

                document['on'+MoveEvent]=this.bind(function(e){

                    preventDefault(e);//取消文档的默认行为[鼠标移动、触摸移动]

                    this.nowPoint=getMousePoint(e);

                    this.el.style.left=this.nowPoint.x-this.startPoint.x+'px';

                    this.el.style.top=this.nowPoint.y-this.startPoint.y+'px';

                    this.onmove();

                },this);

                document['on'+EndEvent]=document['ontouchcancel']=this.bind(function(){

                    document['on'+EndEvent]=document['ontouchcancel']=document['on'+MoveEvent]=null;

                    this.action=false;

                    this.onend();

                },this);

            },this);

        },

        bind:function(fn,obj){

            return function(){

                fn.apply(obj,arguments);

            }

        }

    }

    return function(opt){

        return new _drag(opt);

    }

})();

其实就是很简单的了，需要注意跌其实就是获取鼠标坐(getMousePoint)标的那里了，touches.item(0)表示第一个生效触摸点。

DEMO可以在此查看。（触摸效果请使用ios相关设备）

也可以查看http://www.qiqiboy.com/demo/2008/09/layout-test.html 的那个评分拖动长条。

• JavaScript: 支持iphone、ipad 使用两根手指放大图片 (18)
• 优化javascript中mouseover和mouseout事件 (30)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (6)
• wordpress 搜索自定义字段(模糊查询) (17)
• wordpress 按首字母排列文章/检索文章 (19)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/ey

• 2011年12月6日, 心随雨下 say: 你好，这个效果确实不错。但是，我想问一下，如果是地图怎样可以实现这样的拖动效果呢？
• 2011年07月18日, 无冷 say: 这个东西比ui插件好用多了
• 2011年07月18日, IM路人 say: 高级技术文哟~~~~
• 2011年07月18日, QiQiBoY say: @刘印 基本上新款都是了。。而且只会越来越多
• 2011年07月17日, QiQiBoY say: @WayJam 嗯。现在这种用户很多。。其实这个好像包括安卓系统也适用
• 2011年07月17日, QiQiBoY say: @A.shun 哈哈。
• 2011年07月17日, JavaScript: 支持iphone、ipad 使用两根手指放大图片 - I'm qiqiboy ! say: [...] JavaScript: 让拖动支持iphone/ipad触摸 [...]
• 2011年07月17日, 小邪 say: 来晚了-m-，twitter上面的发布真慢 ╮(╯▽╰)╭。

求新！求变！

一直以来wordpress的评论也算一个开发重点，每个主题制作者在评论展现方式上的开发也下足了功夫，但是也不外乎都是样式上的变化。淫淫网的新鲜事都可以评论，我很喜欢这种即时评论的方式。所以一直有想法想要移植过来到wordpress上，但是又很懒，所以没有动手。说到懒，博客很久没更新了，很多评论也没回复。

前天有空，所以便动手搞了一下，发现还是很容易的。主要的实现思路说一下：

首先是要设置评论嵌套为2层

只有两层的话，我们就可以将第一层（主评论）当做主体，然后第二层都是对其的回复。

其次在是每条主评论下插入一个输入框

这个对于自定义评论显示结构的主题来说是很容易的，只要在functions.php中的评论回调函数中加上一个textarea就行了。具体的样式就需要自己去定义了，我就不多说了，更具体些的动态变化（点击展开输入框，焦点移开复原输入框）则需要js控制了。我是将这个框简单化，只有一条，点击后用js展开（第三点要说的）。

<?php if ($depth===1): ?>

    <div class="quick-comment-form">

        <textarea class="quick-comment"></textarea>

    </div>

<?php endif; ?>

这样子插入的输入框都是直接附加到主评论后面的，本来其实我想实现的是，有子评论时我想将输入框直接输出到子评论的末尾，但是最后没有实现。有做到的同学可以可以与我不吝分享下哈。

点击输入框展开完整的评论输入

就想淫淫网的一样，点击后展开输入区域。wordpress这里涉及到两点，第一，用户登录，第二未登录。未登录下还分有cookie记录用户名 邮箱和没有这些信息。我是通过一段js代码将这些信息输出到页面上，以供后续代码调用判断。

<?php 

    $commenter=array(

        'login' => (bool)is_user_logged_in(),

        'author' => $username,

        'email' => $useremail,

        'url' => $userurl,

        'avatar' => get_avatar($useremail, 32)

    );

    echo '<script id="guestbookcommentlist" type="text/javascript">window.commenter='.json_encode($commenter).';</script>';

?>

这样我就可以知道用户有没有登录，也可以很方便的取到用户存储在cookie中的用户名和邮箱值了，还有头像。

取得以上信息后我们就可以通过js操纵dom来将评论框展开，加上输入姓名 邮箱的部分。第一步是初始状态的输入框在获得焦点后（onfocus）后要展开，这点容易，我们直接循环对每个输入框绑定onfocus事件就行了。第二步则是要实现恢复展开的输入框为初始状态。这个不能用失焦（onblur）来做了。因为输入框下可能会有姓名 邮箱等其它输入部分，我们点击那些输入域或者回复按钮时会造成评论框失焦触发动作。所以这样是不行的。我是通过document的click事件，然后取得srcElement，通过和包含评论框、姓名 邮箱输入的那个节点（div#quick-comment-form）的contains关系比较来判断是否需要关闭恢复评论框。

addListener(document,'click',function(e){

    var target=window.event && window.event.srcElement||e && e.target;

    for(var i=0;i<quickcomments.length;i++){//quickcomments为取得的所有快速输入框的集合

        if(quickcomments[i].value=='' && !contains(quickcomments[i].parentNode,target)){

            //处理部分

        }

    }

},false);

最后就是发布评论了

这个就简单了，就是一个简单的ajax评论。登陆用户直接只取评论内容和post_id, comment_parent_id格式化后发送就行了。未登录用户还要去获取下姓名 邮箱输入的值，然后一块发送。后台加上相应的响应代码就行了。

Over。说的很简单，也没具体的代码，大家凑活看。主要是想说wordpress的评论其实可以千变万化，做出很多的新奇来。

我博客还没加上这个，不过这儿有一个线上例子，也欢迎大家有html5相关的问题到这里进行提问，会有一帮热心人帮助你的。点此浏览效果。

• wordpress 搜索自定义字段(模糊查询) (17)
• wordpress 按首字母排列文章/检索文章 (19)
• WordPress技术: 无限多级楼层显示 (61)
• 超级无语的新一代中文spam (87)
• 围观wordpress中文圈内好玩的spam (133)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/ex

• 2012年01月15日, citier say: 之前做主题就是卡在评论页面的美化上，你这个比较帅
• 2011年12月20日, hit9 say: 好cool啊，你的评论部分很给力！
• 2011年12月20日, hit9 say: 来测试下
• 2011年11月20日, MurphyL say: 哈哈～来学习啊～
• 2011年09月21日, set sail say: 介个很不错啊，有没有放淫淫网那种相册的每张图片都可以评论的创建啊
• 2011年08月13日, sprityaoyao say: 不错，我也改成这样的了
• 2011年07月22日, yetone say: 不错，尝试下
• 2011年07月21日, 套图部落 say: 很好的功能，按方法尝试下，希望能成功。

我在开发社交媒体连接插件的最新微博功能时，也想将微博的时间显示与新浪微博的显示方式一致。具体的要求如下：

一分钟之内显示“刚刚”；大于一分钟小于一个小时显示“XX分钟之前”；大于一个小时但在当天之内（小于当天24点），显示“今天 XX:XX”，今天之前，但是在今年之内的显示“XX月XX日，XX:XX”，今年以前的显示“XXXXXX月XX日，XX:XX”。

由于要考虑到不同地区的时差问题，我的实现方式如下：

/** 微博时间格式化显示

 * @param $timestamp，标准时间戳

 */

function smc_time_since($timestamp) {

    $since = abs(time()-$timestamp);

    $gmt_offset = get_option('gmt_offset') * 3600;//获取wordpress的时区偏移值

    $timestamp += $gmt_offset; $current_time = mktime() + $gmt_offset;

    if(floor($since/3600)){

        if(gmdate('Y-m-d',$timestamp) == gmdate('Y-m-d',$current_time)){

            $output = '今天 ';

            $output.= gmdate('H:i',$timestamp);

        }else{

            if(gmdate('Y',$timestamp) == gmdate('Y',$current_time)){

                $output = gmdate('m月d日 H:i',$timestamp);

            }else{

                $output = gmdate('Y年m月d日 H:i',$timestamp);

            }

        }

    }else{

        if(($output=floor($since/60))){

            $output = $output.'分钟前';

        }else $output = '刚刚';

    }

    return $output;

}

另外我后来在新浪微博发布的开源Xweibo的源码中找到了其所用的方法，只是我觉得一点繁琐，有兴趣的同学可以下载Xweibo的源码，然后在xweibo_upload\application\function\format_time.func.php的12行可以看到新浪微博的实现方式。个人觉得其有一点繁琐了，也许我没看懂他的思路。有兴趣各位可以参考下。

效果见我博客右边栏的微博显示部分。你也可以下载社交媒体连接插件，在你的博客上显示最新微博。

• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (107)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (6)
• wordpress 搜索自定义字段(模糊查询) (17)
• wordpress 按首字母排列文章/检索文章 (19)
• javascript自定义Dialog对话框(alert, confirm, prompt) — (一) (31)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/ew

• 2011年11月25日, 皇家元林 say: 这个在WordPress里怎么调用啊
• 2011年08月4日, syshack say: 不错的主题 很好～
• 2011年07月31日, yoyiorlee say: 顶一个！！！
• 2011年07月30日, heson say: 给力 受用咯
• 2011年07月12日, WayJam say: 做微博主题也要用到哦。
• 2011年06月26日, 晨光 say: 非常的个性化哦
• 2011年06月25日, 浩子 say: 我是来围观的
• 2011年06月21日, sprityaoyao say: QiQiboy果然很强大

对了，应该会在昆明去观看28日零点的《功夫熊猫2》首映。

以前没远行过，未知的旅行一定会带来不一样的感觉。亲，我走了，10天后回来。

我应该会在我的新浪微博汇报每日行程，本文也将不定时更新旅行体验与心得。

有云南的朋友吗，也许我们可以大理碰头。

==========================05.27===========================

我对云南的印象是神马赶尸、背尸、苗巫、蛊术、降头之类的，好嘛，这都是来自盗墓小说了。

下午三点二十从郑州坐南航灰机，下午6点达到昆明。歇脚，然后干嘛呢。。。再然后去看《功夫熊猫2》。

==========================05.28===========================

28日凌晨看了《功夫熊猫2》3D的首映，中文配音版，大概90分钟，剧情大概就是熊猫斗孔雀，具体点的记不清了，最后要提的就是台词超搞笑。。“神马都是浮云”类的都上去了都。。。

早上七点半起来买了到大理的车票，65块钱，10点17分发车，下午4点一刻终于到了，然后在大理新城（下关）直接坐在古城开旅馆的人家的车到了大理古城。现在应该还不算旺季，大理的游人不是很多。我表示不是很感冒，明天再看看，大概会去做索道，游洱海，等等。

暂且。

==========================05.29===========================

做旅馆的包车，早上8点半出发，先去了苍山索道，乘坐索道上到那啥山的半山腰，很短的一段索道，然后进去那个啥天龙八部的拍摄的那个溶洞，里面有个 神仙姐姐 雕像，我看了之后到目前为止还毫无魂牵梦绕的感觉，以后相信也不会了，因为我已经记不得那个雕像的样子了。接着就是在山洞中的各种行走，没什么感觉，到处是被游人抚摸得油乎乎，黑不溜秋的石头、钟乳啥的，导游还一个劲的让人去摸，我表示毫无兴趣。有一段阶梯路，应该是由于山洞太深，氧气有点稀薄，所以走上去会觉得比较累，呼吸会沉重。

然后是洱海游船，绕着洱海一圈，票价140多。洱海就是一个湖泊嘛。。

还去了一处白族人家，什么四道茶、三道茶的，其实就是像游客推销茶叶，当然他们没强买强卖。

返回古城后，晚上去了一个特他妈的三俗的酒吧，樱花屋，完了。

==========================05.30===========================

依然呆在古城，本来今天要去双廊的，在三俗酒吧里临时将双廊水时光的房间预订后移了一天。所以今天依然是古城里各种转。不过不巧的是，下雨了。夏天，就适合做两件事：睡觉和吃西瓜。下雨的夏天，只适合睡觉 。所以当我晃了两条街后毅然决定还是回去睡觉吧。

晚上去了洋人街上的太白楼，在二楼一直坐到了晚上10点。这期间点了牛肉披萨和一盘毛豆，我表示披萨很好吃，毛豆我吃了很多没放屁。

==========================05.31 – 06.01===========================

在古城中坐车到南关，然后转车去双廊，后半段路基本上是在小路上颠簸过去的。到了双廊后下雨了，雨后的洱海烟波缭绕，更增添一种情调。在双廊是住在 水时光 的海景房，200一晚，感觉值了。躺在床上，透过大大的落地玻璃门，可以一眼望到洱海。听着雨滴滴滴答，真想就那样一直躺在床上到永久。

住了两晚，六月二号又回到了古城。

==========================06.02 – 06.03===========================

在古城又晃荡了两天，很安逸，很好，各种好。

期间在古城墙上晃荡过，电影博物馆中参观过，又在太白楼坐过，唐朝酒吧听过唱现场，斗过两只恶狗(凶恶的小狗)。。。。。这是一段恍惚的记忆，各种美好。

城墙上仿佛有个女巫

==========================06.04===========================

回到昆明。念。

==========================06.05===========================

离别。伤。

==========================06.06===========================

我坐川航的早七点的飞机回到郑州。安。

========================== 总结 ===========================

仿佛一场梦。

只不过一场旅行的结束，人生的旅途需要我们一起努力，过的精彩灿烂。

• qiqiboy归来 – 纯吐槽 (45)
• Social Medias Connect（社交媒体连接） (434)
• Guestbook (353)
• 插件发布：边栏最新评论及ajax回复——WP RC Reply AJAX (188)
• 围观wordpress中文圈内好玩的spam (133)

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/eu

• 2011年12月14日, tinnitus treatment otc say: Read was interesting, stay in touch... [...]listed below are some references to internet pages which I connect to for the fact we think they’re truly worth checking out[...]...
• 2011年09月15日, 梦飞 say: 彩云之南……羡慕
• 2011年08月19日, 维斯王 say: 有机会再去，呵呵。看的我都心痒了~
• 2011年08月8日, 尘色记忆 say: 不错的旅行啊 我也在凑花我的 单身之路 呵呵
• 2011年07月30日, 习小衣 say: 好美的云南~~~~向往中~~~~其实去过一次了，可惜就到了昆明，真正漂亮的地儿都还没去呢。。。
• 2011年06月18日, asd say: 哇啊
• 2011年06月18日, sailor say: 很羡慕出去旅游的人啊，那个有女巫的图片吓到我了，呵呵
• 2011年06月17日, 秦大少 say: 话说赶尸、放蛊之类的应该是湘西才有的吧……