随着移动互联网的发展，越来越的传统站点都在为移动化做努力，如开发一套手机专用的网站主题，甚至专门为其开发app！但是开发app（非嵌入移动版网页的PhoneGap），就会涉及到接口调用！如何才能在不影响网站原来内容、模板的情况下快速开发出可供第三方调用的数据接口呢？

也许有同学会说，wordpress具有强大的主题切换能力，通过一个简单的主题预览插件就可以实现不同主题显示不同的内容，接口就在另一个主题下实现！

没错，这种方式确实可以，但是由于wordpress目前cms功能越来越强大，很多网站都使用了自定义模板、register_post_type、register_nav_menus等功能，wordpress的主题切换不能很好的兼容这些地方（即使register_post_type代码照搬）。即使克服了以上的困难，如果以后网站增加版块或者新功能，要维护就得同时改动网站主题和api主题模板，工作量巨大。

那么有没有什么简单的方法呢？

当然有，不然我在这里罗里吧嗦开头那些屁话干啥！我的这个方法可以在原有的主题基础上进行方便的接口开发。

如何做呢？

首先在网站所用主题的functions.php文件中增加以下代码：

   1: if(isset($_GET['json'])){

   2:    add_filter('template_include','wp_my_api');

   3: }

   4: function wp_my_api($template){

   5:     return preg_replace('#([^/]+\.php)#','api/$1',$template);

   6: }

然后在网站当前所用主题目录下新建一个文件夹，名字为“api”。然后把主题下的模板文件复制进api文件夹里，就可以对这些模板进行接口数据转化了。比如输出json或者xml等。

这种方法原理就是将wordpress的模板重新定义到api文件下寻找同名模板文件。如果你愿意做更多的探寻，还可以实现更加智能的接口模板匹配功能出来。我这里就展示了最简单的方法。

这种方法完全不影响网站原有的模板文件，不需要改动任何原有模板，接口的实现在api文件夹下的同名文件里实现。

使用示例

要将你的主题下的page.php模板进行json化输出，只需要在api文件下新建一个叫page.php的模板（或者复制page.php过来），里面写入：

   1: <?php //这里偷懒了，直接将wordpress的$wp_query对象json化输出，实际中最好提取自己需要的内容输出，以减少http传输量

   2: header("Content-type:application/json");

   3: if(isset($_GET['debug'])){

   4:     print_r($wp_query);

   5: }else echo json_encode($wp_query);

比如网站有个页面，地址是http://yoursite.com/pagename，其对应的接口地址就是http://yoursite.com/pagename?json。如果要调试，查看json接口，可以加上debug参数，如http://yoursite.com/pagename?json&debug。

是不是很简单呢？如果你的网站不需要这个接口了，只需要直接删除api文件夹就行了。

• wordpress 搜索自定义字段(模糊查询) (21)
• wordpress 按首字母排列文章/检索文章 (19)
• wordpress的微博时间显示方法 (20)
• 仿腾讯微博式访客信息悬浮显示（JavaScript & ajax） (115)
• wordpress开发 – 仿淫淫网新鲜事评论的评论列表实现 (49)

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

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

• 2013年06月18日, 新葡京 say: 这篇文章首页调用的图片太邪恶了。。话说评论这个样式真给力啊。。。有点明信片的意思。
• 2013年06月8日, zwwooooo say: 好像很方便的样子，再写写具体应用方案吧，哈。
• 2013年06月8日, 一堵墙 say: 感觉好高 的说
• 2013年05月30日, mopvhs say: @liuqiqi = = 坐大腿~~
• 2013年05月30日, soping say: 虽不明，但觉厉！
• 2013年05月30日, key4ever say: @liuqiqi 沙发你也自己抢，你还有节操吗？
• 2013年05月29日, liuqiqi say: 美美的沙发。。。
• 2013年05月29日, QiQiBoY say: @key4ever 不抢我就丢了节操泥。。。

不过，我2月 3月有写过博客吗？貌似没有吧。反正我不记得了。

一转眼，wordpress十周年了，google reader也被遗弃了。说实话，我确实很久没刷reader了，一方面是自己懒，还有一方面是上面的几百个订阅也很少更新了。很多当初的博主估计像我一样都可耻的匿了。

某日一论坛，一同学跟帖对我说，“我从高中的尾巴就开始关注你了，现在已经到了大学的尾巴了”。我一瞬间觉得焦虑感骤增，我老了。时间悄无声息的溜走，把人狠狠地摔在身后。

博客恢复后，我看了一眼文章存档，最后一篇更新是去年12月份，大概我离职上家公司的前几天。之后我去了云南旅行了三周（部分照片可见我的flickr相册）。

这几年来，我眼睁睁地瞅着QQ空间上大家从发男默女泪的美文到现在各种怀孕、孩子、房子的杂事，静悄悄的看着当初一起折腾wp的博友从博客更新wordpress技术文到各种家常、孩子、房子的博文。

虽然我不喜欢看到这些，但是还是祝福你们都幸福啦。

对了，最后自荐一下自己的一项目，卧槽！。

这个项目源自去年12月份，我产生的删掉微博的想法，当时完成了一个雏形，一直是我自己在用。清明节时抽空完善了下，放到了sae上。

这个项目的功能就是，清理你的微博，可以暴力选择删除全部微博，也可以设置删除某一时间段内的微博。还可以设置删除xxx以前的微博。xxx是指距离当前的一段时间，比如删除一个月前的微博。卧槽！就会每天去抓取你的微博，然后删除符合“一个月前”的微博。

当然，不想使用自动清理，也可以手动批量删除微博。智能清理后台运行，无需人为干预。

卧槽！的用户现在已有五百余人，运行稳定。最快可在20小时内删除1.6W条微博（实际数据）。

卧槽！的地址: http://wocao123.sinaapp.com

• 如何快速为wordpress网站开发对外的数据接口 (8)
• 社交媒体连接 V2 更新 更快更稳定更易用 (39)
• wordpress 搜索自定义字段(模糊查询) (21)
• wordpress 按首字母排列文章/检索文章 (19)
• wordpress的微博时间显示方法 (20)

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

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

• 2013年06月6日, tiandi say: 应用用不到了，因为账号早就被封杀了。
• 2013年05月30日, yesure say: 存在一下。
• 2013年05月20日, wmtimes say: 存在了一下， 又消失了。
• 2013年05月18日, 折子戏 say: 悲剧啊，看来要时时备份数据库啊，要不然挂掉真NM蛋痛！
• 2013年05月18日, 大发 say: 不错，把微博全删了，哈哈。
• 2013年05月18日, QiQiBoY say: @W3Cshare 哈哈，感谢支持哈
• 2013年05月17日, W3Cshare say: 卧槽！很强大的项目
• 2013年05月11日, QiQiBoY say: 死去活来啦

进行拖动开发时，一般都是使用mousestart（鼠标按下）、mousemove（鼠标移动）、mouseend（鼠标抬起）这三个事件实现的，而click事件与这个事件也是有关系的，它是在mouseend后才会被触发的。

如果event.target是个链接，在经过前三个mouse事件后，click还是会,则会在拖动时看到图片或链接跟着鼠标有个拖影.所以在在此情况下,必须取消该默认行为. 如下图。

普通页面上我们按住鼠标可以选择上一段文字,而这个行为不同浏览器的发生阶段也不一样,有的是取消mousestart行为就不会选择了,而有的则是取消mousemove则不会选择,有的则需要同时取消mousestart和mousemove.

综上,我总结了一下各种情况,在自己的开发中应用了以下方法来兼容各个浏览器.

说明:以下例子均运行在标准浏览器环境. 对相关事件接口进行兼容,也是可以运行在ie等早期浏览器中的.

   1: //首先定义一个后面会用到的函数

   2: function returnFlase(evt){

   3:     evt.preventDefault();

   4: }

首先是对于mousestart(touchstart)

   1: function mousestart(evt){

   2:     var name=evt.target.nodeName.toLowerCase();

   3:     if(evt.type!='touchstart' && ( //触摸设备上的浏览器就不需要了

   4:         name=='a' ||

   5:         name=='img' ||

   6:     )) evt.preventDefault();

   7:     this.removeEventListener('click',returnFalse,false); //取消 阻止默认行为

   8: }

对于mousemove(touchmove)

在该事件中，最重要的是根据你的需求做出判断，比如是否锁定拖动方向、是否单方向拖动、是否有效拖动距离（ie下即使没有移动鼠标也有可能会触发mousemove）。如果用户确实执行了有效鼠标移动

   1: function mousemove(evt){

   2:     // ....

   3:     if(move){

   4:         evt.preventDefault();

   5:         /* 这里是因为如果单方向拖动，会出现文字被选中的情况，这里需要去除文字选中效果 */

   6:         if(window.getSelection!=null){//这里只需要考虑标准浏览器就行了，ie7 8下无此问题

   7:             range=getSelection();

   8:             if(range.empty)range.empty();

   9:             else if(range.removeAllRanges)range.removeAllRanges();

  10:         }

  11:     }

  12:     // ....

  13: }

对于mouseend(touchend, touchcancel)

该事件中,重要的是判断用户是否是拖动后抬起的鼠标操作, 如果是的话,则需要阻止click事件. 与第一步中相呼应,第一步中我们需要removeEventListener这一步中添加的函数

   1: function mouseend(){

   2:     // ....

   3:     if(move){

   4:         /* 如果用户在第二步中有效拖动，则需要取消click事件的默认行为 */

   5:         this.addEventListener('click',returnFalse,false);

   6:     }

   7:     // ....

   8: }

如此以上处理后，拖动节点里的input select等都可以正常接收用户操作了。

说了不多也不少，没看懂就算了。我这里有个例子：http://u.boy.im/touchscroll/scroll.html

该例子是纵向拖动，横向是可以照常选择文字的。纵向拖动时也不会出现其它地方文字被选中的情况。

• JavaScript: 让拖动支持iphone/ipad触摸 (20)
• 优化javascript中mouseover和mouseout事件 (32)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (26)
• wordpress 搜索自定义字段(模糊查询) (21)
• wordpress 按首字母排列文章/检索文章 (19)

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

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

• 2012年12月22日, furk say: 测试一下留言
• 2012年12月19日, wmtimes say: 原来是手机上的啊。
• 2012年12月18日, liuqiqi say: 美美的沙发。。。

转眼间春夏秋冬，物是人非。世纪末日前，我终于更新了该组件的1.2版本。在支持原来版本的所有特性上，新增加了支持不固定单个幻灯宽度的slider（比较绕口，看demo就明白了）。更新这一特性的原因是，原先的版本一次只能看到一个幻灯，随着容器宽度的变化，每个幻灯的宽度也被强制设置了和容易宽度一致！但是我的需求现在需要在容器变宽后，希望用户可以看到当前幻灯前后的那一张幻灯的部分局部。

先看Demo吧：

TouchSlider DEMO

刚才所说的 不固定单个幻灯宽度的意思，即如demo里第一个例子所呈现的，该组幻灯有五个，每一个的宽度都不一样，有些甚至还设置了margin、padding、border等。随着容器宽度的变化，同时看到的幻灯会有多个。

其实这种类型的幻灯在appStore里就是这种，你在浏览应用的当前截图时，可以同时看到上一张和下一张的局部。

要实现这种效果，怎么在touchslider里设置呢？其实很简单：只要将fixWidth参数设置为false就行了（默认为true，即单个幻灯的宽度会被强制设置为容器的宽度）。

2012年12月2日更新：新增加align参数支持，（前提是fixWidth=false）align:left即可实现ipad版appstore上应用截图的展现方式，align:center即可实现iphone版appstore上应用截图的展现方式。具体请参见DEMO里的示例。

更多的TouchSlider使用技巧，请参看上边的DEMO里的说明。

需要特别注意的是，TouchSlider现在指定幻灯节点id时，需要指定该组幻灯父级容器的id（与旧版不同），并且不再限定为ul li结构。提供id或者目标节点给touchslider后，touchslider会将该节点的所有子节点转换为幻灯。

   1: <!-- 例如，实现该组幻灯的正确写法是：TouchSlider('slider',{auto:true,speed:8000}) -->

   2: <div id="slider">

   3:     <div class="child">1</div>

   4:     <div class="child">2</div>

   5:     <div class="child">3</div>

   6:     <div class="child">4</div>

   7: </div>

如上，TouchSlider目前参数也变为两个了，也不用一定要用new方式来声明了。

   1: /**

   2:  * TouchSlider 1.2

   3:  * @param id string|node

   4:  * @param config object

   5:  * 也可以只有一个参数config，id在config对象里提供

   6:  */

   7: function TouchSlider(id,config){

   8:     //code

   9: }

介绍就以上那么多了，下载demo包，请点击https://github.com/qiqiboy/touchslider

因为是这两天抽空更新的，时间比较紧，可能会有一些小bug，如有发现，欢迎留言告知。我要过周末了。

备注：我还写过一个类似这个非全宽幻灯的例子：TouchSliderBox，demo点击这里，两者效果差不多，稍微有区别。

备注2：将TouchSliderBox的例子用TouchSlider 1.2后的demo效果：http://u.boy.im/touchsliderbox/

• TouchSliderBox 1.0 –容器宽度可变的幻灯 (13)
• TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案 (19)
• 千变万化的幻灯效果–Banner Rotator FX (41)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (26)
• JavaScript: 支持iphone、ipad 使用两根手指放大图片 (21)

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

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

• 2013年06月18日, IT say: 在手机怎么不能自适应，我的是小屏手机
• 2013年05月30日, blex say: 使用这个工具的路过表示支持
• 2013年05月30日, blex say: 抢占沙了个发
• 2013年05月28日, QiQiBoY say: @eyeliving 没太明白你要实现的效果，有线上可以预览的地址么？ 因为after是忽略幻灯是否变化的，页面重绘resize什么的都会触发after。也许你可以通过设置一个标识当前幻灯索引值的变量，当after被触发时，比较下此时的幻灯是否还是当前幻灯，如果有变化再执行callback
• 2013年05月27日, eyeliving say: @QiQiBoY 额， @eyeliving 额，以上的问题的都已解决。 多谢 QiQiBoY ！good Buy！
• 2013年05月27日, eyeliving say: @QiQiBoY 问题都已解决！but and 有一个新问题：感觉好像是bug 了， 我的demo 操作流程：进入页面，在某个默认 产品分类下面,首先加载两张幻灯片，滑动后，调用 TouchSlide 的 after callback function。这一步是正确的。 但是问题出来了：我选择产品的某个分类后，首先调用加载数据的function，加载两张幻灯片，再调用 TouchSlide 的 after callback function，但是 该方法 即after 调用了两次，如果再继续选择 产品的 某个分类，after 调用了三次，以此类推，问题也就是：点击产品分类，after就会 多执行一次。点击了5下产品分类，after 就会 多执行 5次。请教......
• 2013年05月27日, QiQiBoY say:

  eyeliving :

  @eyeliving
  问题 已解决：but and 又一个新问题，操作流程：第一步，首先加载两张幻灯片，开始滑动，页面闪了一下，已经加载了一张，已经append，但是显示的还是第一张幻灯片，再次滑动，直接跳转到第三张 幻灯片。希望 LZ 指出 问题所在，谢谢！

  由第一张跳到第三张？你可以确认下是不是append两个新幻灯时，顺序反了呢？ 还有一种情况，就是你不是顺序滑动，第一张向前滑动prev时，会跳到最后一张上。
• 2013年05月27日, eyeliving say: @eyeliving 问题 已解决：but and 又一个新问题，操作流程：第一步，首先加载两张幻灯片，开始滑动，页面闪了一下，已经加载了一张，已经append，但是显示的还是第一张幻灯片，再次滑动，直接跳转到第三张 幻灯片。希望 LZ 指出 问题所在，谢谢！

前两天发烧了，因为那晚突然而至的秋雨，晚上着了凉。发烧后让我也明白了一件事：有许多人能陪你一起开心，但是没有几个人能陪你一起难过。对我而言，目前没有。当然，这也正常，我也不想自己的情绪影响到别人。我也在避免别人的情绪影响到我。

然后说点几个月来自己的购买的新玩意儿。首先是 macbook air和beats pro。这俩在一起简直是无敌装逼货。

air放在家里用来上网，非常棒。耳机放在上班地儿，白天工作时听音乐用的。所以这俩玩意儿我从来没一起用过，浪费了大大的装B利器。耳机我也没出街戴过。

beats pro性价比不高，买的就是亮骚的外观。虽说音质不能和同价位的耳机相提并论，但是我用的这几个月感受，还是很蛮满意的。唯一一点，就是金属机身，太沉了，我怀疑现在我脊椎病和戴这个耳机有关。

后来又入手了个宾得单反。镜头参数就不说了，算个小牛头。就这一个镜头，单反穷三代，为了子孙的幸福，我觉得镜头投入上我该止步了。我也就是挂脖子上让自己看起来更像个游客，其它用处不大。反正到现在也没拍出过一张好照片。

最近买的一个玩意儿是块手表，就不贴图了晒了。上个手表是石英表，大三末我自己换电池时给弄坏掉了。这次直接买了块机械表，不用再担心换电池的问题了，啊哈哈哈哈。

下个月要买的估计是手机，你懂的。

最后还要晒一下工作台。。哈哈。。两个大屁股对着，甭提多爽了。。（右边的thinkpad W520是去年末入的，用的机会不多）

微博出没：@qiqiboy ，帝都混的请无情的微博私信我吃喝嫖赌。

• qiqiboy归来 – 纯吐槽 (50)
• 最近口腔溃疡+牙龈疼 (4)
• 旅行在云南 (38)
• 国产神漫——《茗记2 – 初织恋》 (32)
• Free Style[please tell me why] (9)

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

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

• 2013年02月3日, 小红帽 say: 估计您老也会因为挂单反而驼背的 啊哈～～
• 2012年12月4日, 超人 say: 快来找我吃喝嫖赌！
• 2012年12月3日, QiQiBoY say: @vega 嗯,是啊....
• 2012年12月3日, 儿童安全座椅 say: 电脑还挺多的
• 2012年11月26日, looping say: 不错，小伙子有前途
• 2012年11月25日, 小雪 say: 好久沒更新了啊親～ 話說你這個首頁……好豐富，我頭好晕orz
• 2012年11月23日, 穿衣 say: 这设备真是帅气~
• 2012年11月21日, vega say: qiqi住牡丹园么

COOKIE，不是说的曲奇饼，吃货走开！

最近用到了在前端需要使用javascript对cookie进行操作，本来想找个现成的代码来用，无奈搜了半天没有找到。

于是自己写了个，也随手分享出来，凑个博客更新。。。。。

   1: var COOKIE=(function(){

   2:     var cookie=document.cookie||'',

   3:         subs=cookie.split(';'),

   4:         cks={},

   5:         trim=function(str){

   6:             return str.replace(/^\s+|\s+$/g,'');

   7:         },

   8:         getDateString=function(offset){

   9:             var date=new Date();

  10:             date.setTime(+date+offset*1000);

  11:             return date.toGMTString();

  12:         }

  13:     for(var i=0;i<subs.length;i++){

  14:         var _sub=subs[i];

  15:         var pos=_sub.indexOf("=");

  16:         var key,value;

  17:         if(pos>=0){

  18:             key=trim(_sub.substring(0,pos));

  19:             value=_sub.substring(pos+1);

  20:             cks[unescape(key)]=unescape(value);

  21:         }

  22:     }

  23:  

  24:     return {

  25:         has:function(key){

  26:             return typeof cks[key]!='undefined';

  27:         },

  28:         set:function(key,value,expire,path,domain){

  29:             cks[key]=value;

  30:             var myck=escape(key)+'='+escape(value);

  31:             if(typeof expire!='undefined')

  32:                 myck+=';expires='+getDateString(expire);

  33:             if(typeof path!='undefined')

  34:                 myck+=';path='+path;

  35:             if(typeof domain!='undefined')

  36:                 myck+=';domain='+domain;

  37:             document.cookie=myck;

  38:         },

  39:         remove:function(key){

  40:             delete cks[key];

  41:             document.cookie=escape(key)+'=;path=/;expires='+getDateString(-10000);

  42:         },

  43:         get:function(key){

  44:             return cks[key];

  45:         },

  46:         cookies:cks

  47:     }

  48: })();

相对于javascript，通过后端的php来操作cookie是更容易简单的。所以由于以前很少通过JS去操作cookie，在使用javascript操作cookie时遇到了一些弯路，也分享出来，免得大家跟我犯同样的错误。

第一点，就是我知道document.cookie返回所有cookie组成的字符串，所以在设置cookie时，我想当然的以为是将新cookie拼接到该字符串上，再赋值给document.cookie就行了。

经过测试，完全不是这样，document.cookie=””; 是添加或更新新的cookie，比如document.cookie=”myck=yes;”则添加了个名字为myck的cookie；如果要同时添加多个cookie，document.cookie=”key1=1;key2=2;“ 就行了。如果要加上过期时间，存储域等信息，直接后面加上相关参数即可。比如：document.cookie=’myck=yes; expires=expire_time;domain=domain’。

该操作完全不影响已有的非同名cookie。

第二点，设置cookie的过期时间时，我错误的以为是设置个时间戳就行了，结果测来测去，发现没有效，cookie有效期总是session周期。后来才发现要用标准字符串时间格式，类似”Mon Jul 23 2012 20:08:10 GMT+0800 GMT“。如果用1343045321299这种，则是无效的。

。。。。。。。额。。没了。。。

如何使用？

   1: //检测是否存在名字为abc的cookie

   2: COOKIE.has('abc');

   3:  

   4: //获取名字为abc的cookie的值

   5: COOKIE.get('abc');

   6:  

   7: //添加一个新cookie

   8: COOKIE.set('abc','123');

   9: COOKIE.set('abc','123',7*24*3600);//带过期时间的，单位是秒

  10:  

  11: //移除名字为abc的cookie

  12: COOKIE.remove('abc');

• 【JS温故知新】之——给力的鼠标坐标位置获取 (53)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (26)
• JavaScript: 让拖动支持iphone/ipad触摸 (20)
• javascript自定义Dialog对话框(alert, confirm, prompt) — (一) (33)
• 终极完美版javascript获取并限制调整图片尺寸 (45)

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

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

• 2012年12月23日, furk say: 看不懂，过来抽个热闹
• 2012年11月23日, ch say: 好吧，其实我看不懂。。
• 2012年10月24日, 超人 say: 别整的这么高级好么！！！
• 2012年09月22日, Fanr say: 又专业了,那个饼干有点类似趣多多~
• 2012年09月21日, QiQiBoY say: test456
• 2012年08月27日, asfdas say: fadsfasf111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
• 2012年08月27日, 代码王子 say: 楼主的cookie操作真是太牛逼了
• 2012年08月24日, wmtimes say: 讲代码，我看不懂。 能写代码的感觉很牛啊。

本次更新V2版，完全是重写了所有的代码。最初构思V2版本是在四月初的时候，从开工到完成，过去了差不多快三个月了。

V2版与V1相比，主要是去掉了V1的“我的微博”功能。其它功能无变化，并且得到了大大的增强。

1. 部分微博的认证流程更新使用了OAuth2，更快更方便和安全。例如新浪微博、腾讯微博等。
2. 支持的第三方网站更多，在以往的基础上，新增支持了google账号（google+）、雅虎Yahoo账号、百度、QQ号码、MSN、淘宝、360等。
3. 文章同步更稳定。
4. 支持多作者博客，支持网站用户绑定多个第三方账号。

插件下载地址：http://wordpress.org/extend/plugins/social-medias-connect/

插件FAQ：http://www.qiqiboy.com/products/plugins/social-medias-connect

插件效果预览：本站。

插件部分截图：

欢迎各位试用，如果觉得好，请广而告之。。。哈哈

• 社交媒体连接 V1.6更新 支持facebook 完全重写的注册流程 (46)
• 有关社交媒体连接插件对饭否、follow5支持的说明 (32)
• WordPress插件发布: Social Medias Connect (86)
• 新玩意儿-Social Medias Connect 微博连接 (67)
• wordpress的微博时间显示方法 (20)

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

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

• 2013年02月15日, 凤翼天堂 say: 腾讯微博 token获取失败（code to access token error）T T
• 2013年01月4日, keyibai say: 非常不错的一个扩展，谢谢！有个问题报告下：一个Facebook page(https://www.facebook.com/keyibai)显示绑定成功，但是无法同步，不知何故？
• 2012年12月6日, cheap nfl nike jerseys say: 真的很强悍啊。先支持一下下。
• 2012年11月30日, 第三眼 say: 完全自己写的，牛！期待加入twitter和facebook
• 2012年11月27日, 少女时代-哦 say: 什么意思？我都搞不懂，是连接还是做什么的呀？
• 2012年09月25日, odayou say: "对不起，该微博已经绑定了其他帐号"是麽子个意识？绑定百度也是这个提示，博主能帮忙解答下吗
• 2012年08月29日, 红袖女装 say: hopeshow now.文章不错。
• 2012年08月28日, 80memo say: @QiQiBoY 是最新版的啊，也是管理员的，不知道什么原因

TouchSlider是支持幻灯宽度自适应的，也就是支持Responsive Layout（响应式布局）设计的页面上的slider。而TouchSliderBox其实也是支持响应式布局页面的，只不过每个幻灯的宽度是固定的，变化的是包围幻灯片的容器的宽度。其实差别就是TouchSlider你只能一次看到一张幻灯，而TouchSliderBox则随着幻灯容器宽度的不同，你可能同时可以看到多个幻灯片。

用一副图片来解释：

如上图，黄色线框即为幻灯容器。

为什么开发这个

这个主要是用来展示图片的，虽然TouchSlider也可以用来展示图片，但是由于每次只能显示一张图片，浪费了页面空间（在响应式布局中，从320到1920宽度都支持的话）。

还有一个原因就是模仿苹果的AppStore的页面下部的应用截图：

使用TouchSliderBox可以做到所有浏览器上保持样式统一，并且支持前后切换、鼠标滚动切换以及自适应页面宽度。

如何使用

使用方法，先载入前一篇文章中提到的那个TouchScroll脚本，然后再载入TouchSliderBox的脚本文件，然后可以通过调用TouchSliderBox这个函数来使用：

   1: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/touchscroll/touchScroll.js"></script>

   2: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/sliderbox/touchSliderBox.dev.js"></script>

   3:  

   4: <script type="text/javascript">

   5: //第一个参数是幻灯所在容器的id，第二个参数为返回的幻灯实例的所附加的全局变量，可省略

   6: TouchSliderBox('imgbox','t1');

   7: </script>

为什么要载入TouchScroll呢？因为TouchSliderBox是基于TouchScroll开发的，也可以说是扩展了TouchScroll的一个插件，所以你需要预先载入TouchScroll。当然，你也可以只载入TouchSliderBox，然后会自动在页面中引入TouchScroll：

   1: <script type="text/javascript" src="http://qiqiboy.sinaapp.com/sliderbox/touchSliderBox.dev.js"></script>

   2:  

   3: <script type="text/javascript">

   4: //第一个参数是幻灯所在容器的id，第二个参数为返回的幻灯实例的所附加的全局变量，可省略

   5: TouchSliderBox('imgbox','t1');

   6: /*不引入TouchScroll，这样子也是可以工作的*/

   7: </script>

   8:  

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

JS的源码可以点此查看。

• TouchSlider 1.2发布 – 支持宽度不固定幻灯 (22)
• TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案 (19)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (26)
• JavaScript: 支持iphone、ipad 使用两根手指放大图片 (21)
• JavaScript: 让拖动支持iphone/ipad触摸 (20)

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

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

• 2012年11月30日, TouchSlider 1.2发布 – 支持宽度不固定幻灯 - I'm qiqiboy ! say: [...] 备注：我还写过一个类似这个非全宽幻灯的例子：TouchSliderBox，demo点击这里，两者效果差不多，稍微有区别。 [...]
• 2012年11月11日, kictpov say: 效果很好，我想去掉垂直滚动的功能可不可以啊？怎么去掉啊？还请赐教！
• 2012年10月30日, 深蓝心语 say: 楼主，有没考虑到一个问题啊？ 跟APPSTORE一样，同时有几万个产品的时候，怎么加载？ APP STORE是异步加载的
• 2012年04月20日, wmtimes say: 现在都开始进军手机了哈。我还在原地经。唉。
• 2012年04月12日, 瘦腿精油 say: 移动平台是趋势啊
• 2012年04月10日, 博彩通 say: 嗯 不错 拿moto860试试
• 2012年04月10日, qiqiboy say: @Veezy 多么优良的习惯，我长久坚持下来了
• 2012年04月10日, qiqiboy say: @不能吧 哈哈，这个其实是基于我上一篇文章里的TouchScroll的，所以还得载入那个脚本才行。不过总的代码量却是也不多，一共不到10K

今天，我又带来了自己空余时间写的另一个组件，TouchScroll。它最大程度上模拟了ios上的默认UI组件的滚动条效果。

为什么开发这个东西

其实很大一部分原因是自己想通过写这么一个东西来更好地熟悉PC和触屏手机的JS开发方案中的差别和特点。当然还有一个原因当然就是有可能项目中会用到这个，例如，在多栏功能页面中。

在页面上，一个容器如果内容的尺寸超过容器的大小，会自动出现滚动条，这个滚动条在不同浏览器中时各有差别的（windows 8上的IE的滚动条的metro风更是颠覆了IE多年的滚动条样式），并且自定义样式性也各不相同（如IE和chrome的通过css改变滚动条的方法就很不一样）或不可定义。而且，在IOS4上，出现滚动条的容器是不可被手指滚动浏览的（IOS5上的safair已经没有这个问题了），你一拖动页面，总是整个网页被拖动了。

而TouchScroll正是解决这个问题的，并且它在所有PC和手机浏览器上提供了统一的滚动条样式。PC上支持鼠标拖动页面浏览或者拖动滚轮来滚动容器，手机上支持手指滑动滚动容器。它也支持自适应大小的容器（目前有一些类似插件则是渲染出不可改变大小的容器）。TouchScroll压缩后只有8K。

TouchScroll开发注意的问题

首先是用不用css3，TouchScroll我前后开发了两版，第一版在支持css3的浏览器上，容器的移动以及缓动效果均有css3提供，在IE上则有JS动画提供缓动效果。这个版本遇到了一个我无法解决的问题（因为要兼容IE，所以我没用translate，而是普通的绝对定位absolute，这样子遇到了滚动条动画中时的位置定位问题，没找到解决办法），关于css3的，后来又由于各种原因，这个版本放弃了，又重新开发了目前这个版本。这个版本里的缓动效果是由JS支持的。

还遇到一个快速移动后的缓动问题，需要取一定时间内的移动距离以及时间来计算加速度并从而计算出缓动的距离以及开始的速度。最后我是在拖动过程中（moveEvent）记录了每一次的时间与坐标，然后在拖动结束时（endEvent），取最后不大于200ms内的时间和距离，从而以此推算出需要缓动的距离和速度。大概过程如下：

   1: var disc=[[/*时间*/],[/*坐标*/]]; //disc是用来保存时间与坐标的二维数组

   2: var getMousePoint=function(){....} //获取鼠标坐标

   3:  

   4: /* 每一次触发moveEvent时记录当前的时间与坐标 */

   5: moveEvent=function(){

   6:     ....

   7:     disc.push(new Date());

   8:     disc.push(getMousePoint());

   9:     ....

  10: }

  11:  

  12: endEvent=function(){

  13:     ....

  14:     //计算出最近不超过200豪秒内数据

  15:     var nowTime=new Date(),

  16:         nowPos=getMousePoint();

  17:     while(disc[0].length && nowTime-disc[0][0]>200){

  18:         disc[0].shift();

  19:         disc[1].shift();

  20:     }

  21:     if(disc[0].length){

  22:         time=nowTime-disc[0][0];//间隔时间

  23:          offX=nowPos.x-disc[0][1].x;//横向间隔距离

  24:           ...

  25:     }

  26:     ....

  27: }

TouchScroll如何使用

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

   1: new TouchScroll({

   2:     'id': 'slider',//要处理的容器的id

   3:     'width':4,//滚动条宽度

   4:     'minLength':20,//滚动条最小长度

   5:     'opacity':0.8,//滚动条透明度

   6:     'color':'black',//滚动条颜色

   7: });

TouchScroll还存在的问题

目前可能还存在一些bug，另外在滚动超出边界后的动画处理也不是很理想，过渡有点生硬。

目前TouchScroll也未提供一些操作接口，我会在日后慢慢完善，包括添加PC上的鼠标滚动支持(已添加)、更多自定义内容等。

目前可以使用的接口:

   1: var t1=new TouchScroll();

   2: /*容器滚动接口

   3:  *@param Number offx: 水平方向上滚动offx距离

   4:  *@param Number offy: 垂直方向上滚动offy距离

   5:  */

   6: t1.scroll(offx,offy);

查看DEMO请点击http://u.boy.im/touchscroll/。可以使用手机浏览器输入地址访问。

DEMO2: http://u.boy.im/touchscroll/scroll.html

查看源代码请点此处。

• TouchSliderBox 1.0 –容器宽度可变的幻灯 (13)
• JavaScript: 支持iphone、ipad 使用两根手指放大图片 (21)
• TouchSlider 1.2发布 – 支持宽度不固定幻灯 (22)
• TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 (26)
• JavaScript: 让拖动支持iphone/ipad触摸 (20)

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

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

• 2013年02月2日, cheap nfl nike jerseys say: 我很想说的是这个留言做的太酷了。有点像明信片。
• 2012年07月12日, 睡眠博士旗舰店 say: 文章不错90524
• 2012年07月7日, QiQiBoY say: @wiiking http://www.qiqiboy.com/products/plugins/social-medias-connect
• 2012年07月7日, wiiking say: 为什么用新浪微博登录反映这么慢！ 2.01放出来了？求下载地址亲！
• 2012年07月6日, geme_over say: sinaapp上下载不了，求下载地址，email：z11750@gmail.com。 先谢了
• 2012年07月6日, 广州骨科 say: 我正找这个 就放出来了 很不错的
• 2012年06月15日, fugui say: 这是手机的?未来的主流啊
• 2012年05月21日, www. say: 是做移动开发的？

骗子：“XX，我到天津办事儿。你能猜到我是谁么？”

我：“额。。。你是A还是B？”

骗子：“嗯，对。”（我从这里开始以为对方就是B了）

我：“你不是在国外么，怎么突然回来了”

骗子：“。。。。。。。”
骗子：“明天我去北京找你。”
我：“好。”

=========================== 第一部分结束============================

第二天，

骗子：“XX，我这边办事儿钱不够了，先借我点钱行不？8K就行了”

我：“你的卡号发我？”（我很信任这个朋友，虽然我觉得以他的财力根本不可能去借钱）

骗子：“我没带卡，我发你我朋友的卡”

我此时才觉得对方肯定是个骗子，因为谁回国会他妈的忘记带银行卡！！！

于是我登陆了gtalk，发现这位朋友在线。

我灵机一动，要骗子在gtalk上给我发个消息。

骗子：“你是不信任我是吧？”

我：“你用gtalk给我发个消息我就给你转钱”

骗子：“啥？”（骗子估计没听过gtalk，只会QQ）
“你是不相信我是吧”（此时骗子提高了分贝数）

我gtalk问了下我朋友，他说他没回过，还在澳洲。所以这时可以确定被骗了。
我：“我操你姑奶奶的二舅的妹的。。。。……%&&*&*”

骗子：“。。。。嘟嘟嘟”（挂电话了）

。。。。。。。。

我此刻满脸黑线。。。。

=========================== 第二部分结束============================

骗子骗术：事先得到你的手机号和你的名字，然后打电话给你，让你猜他的名字，在你说出了你朋友名字时，他顺势说你猜对了，他就是你说的那个人。然后并不急于立马向你要钱，他会说明天到你那里去找你。等到第二天，他会再给你打电弧找借口借钱。

骗子电话：13790942055

求骚扰，求组队攻击骗子啊！！！！大家可以去和骗子玩玩。。没准你还能从它那里骗来钱呢。。

• Social Medias Connect（社交媒体连接） (541)
• Guestbook (414)
• 插件发布：边栏最新评论及ajax回复——WP RC Reply AJAX (193)
• 围观wordpress中文圈内好玩的spam (133)
• 【插件发布】WP Enjoy Reading(尽享阅读) (133)

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

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

• 2012年12月22日, furk say: 这种骗人技俩太常见了，小心点。
• 2012年10月22日, 雨樹&烏鴉 say: 记得N年以前在天津就接到过这种电话，当时还跟女朋友一起研究怎样招待远方来的朋友呢，后来对方提钱，所以就提高了警惕，哈哈，妹的，再后来就经常接这样的电话，索性聊呗，反正也是那个王八犊子花长途话费。。。。
• 2012年09月15日, 行客工作室 say: 这个太不好玩了 应该直接说好的 我马上给你汇款 然后呆着不动 一会他肯定又来电话 说已经在去银行的路上了 ，堵车 依然不动 ……马上就到了 已经汇了 你再看看 是不是银行系统出问题了 什么什么的 其实依然坐着不动—— 玩死他
• 2012年09月8日, ross say: 楼主听声音识别不出来它是不是你的同学？我想，一般听声音应该就有所怀疑了！
• 2012年09月1日, 秦大少 say: 可以拿这个号码玩玩，不过估计对骗子也没多大影响，换号太容易了。
• 2012年08月20日, Minmi say: @超人 超人！
• 2012年08月20日, Minmi say: @QiQiBoY 恩哼！！！ =w=
• 2012年08月19日, 超人 say: 哈哈。原来真有这样的骗子。。老骗术了