I'm qiqiboy !

之前写过一个《TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片》，那么这个TouchSliderBox和之前的TouchSlider有什么区别呢？ TouchSlider是支持幻灯宽度自适应的，也就是支持Responsive Layout（响应式布局）设计的页面上的slider。而TouchSliderBox其实也是支持响应式布局页面的，只不过每个幻灯的宽度是固定的，变化的是包围幻灯片的容器的宽度。其实差别就是TouchSlider你只能一次看到一张幻灯，而TouchSliderBox则随着幻灯容器宽度的不同，你可能同时可以看到多个幻灯片。 用一副图片来解释： 如上图，黄色线框即为幻灯容器。 为什么开发这个 这个主要是用来展示图片的，虽然TouchSlider也可以用来展示图片，但是由于每次只能显示一张图片，浪费了页面空间（在响应式布局中，从320到1920宽度都支持的话）。 还有一个原因就是模仿苹果的AppStore的页面下部的应用截图

大概三个月之前，我发布了一个JS组件，《 TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 》。后来陆续在项目中都有用到，觉自己得还是很方便的。 今天，我又带来了自己空余时间写的另一个组件，TouchScroll。它最大程度上模拟了ios上的默认UI组件的滚动条效果。 为什么开发这个东西 其实很大一部分原因是自己想通过写这么一个东西来更好地熟悉PC和触屏手机的JS开发方案中的差别和特点。当然还有一个原因当然就是有可能项目中会用到这个，例如，在多栏功能页面中。 在页面上，一个容器如果内容的尺寸超过容器的大小，会自动出现滚动条，这个滚动条在不同浏览器中时各有差别的（windows 8上的IE的滚动条的metro风更是颠覆了IE多年的滚动条样式），并且自定义样式性也各不相同（如IE和chrome的通过css改变滚动条的方法就很不一样）或不可定义。而

昨晚接到一电话： 骗子：“XX，我到天津办事儿。你能猜到我是谁么？” 我：“额。。。你是A还是B？” 骗子：“嗯，对。”（我从这里开始以为对方就是B了） 我：“你不是在国外么，怎么突然回来了” 骗子：“。。。。。。。”骗子：“明天我去北京找你。”我：“好。” =========================== 第一部分结束============================ 第二天， 骗子：“XX，我这边办事儿钱不够了，先借我点钱行不？8K就行了” 我：“你的卡号发我？”（我很信任这个朋友，虽然我觉得以他的财力根本不可能去借钱） 骗子：“我没带卡，我发你我朋友的卡” 我此时才觉得对方肯定是个骗子，因为谁回国会他妈的忘记带银行卡！！！ 于是我登陆了gtalk，发现这位朋友在线。 我灵机一动，要骗子在gtalk上给我发个消息。 骗子：“你是不信任我是吧？” 我：“你用gtalk给

注：应该是不支持IE6的。支持安卓系、iOS苹果机、平板以及PC上的浏览器，包括IE7、IE8等。 触屏手机越来越流行，所以制作网站也要越来越多的考虑手机用户的使用体验。网站上如果有轮换图片的幻灯片（走马灯）之类的功能，就要考虑触屏手机用户的使用体验，而提供他们可以通过手指滑动来切换上一张/下一张的功能，将会是很大的体验提升。 基于此考虑，我在参考了Swipe的实现后，开发了可以同时支持触屏手机手指滑动与PC上鼠标点击滑动的一段脚本，命名为“TouchSlider”。(已经有叫这个名字的脚本了？俺NO Care ^_^)。 为什么开发这个东西 上面已经说了，是为了支持触屏手机。其实还有一个更重要的原因是，为了适应手机版网站的自适应宽度特性。 由于手机、平板终端的多样性，其手机屏的分辨率各不相同，而许多网站为了适应多种设备的显

博客很久没更新了，上次更新还是去年的9月16日了。算来已经快三个月了。当然，从没想过要把博客停掉，只是期间太多杂事，也没有折腾什么可分享的技术文。 还是从最近来说。 订购火车票 今天早上一早7点半多我爬起来，打开12306.cn来定火车票，战战兢兢地连续登陆了几十遍后终于在八点15分时登陆了上去。然后是订票，依然是提交了无数遍后网站依然淡定的显示着“系统忙。。。”。我眼睁睁的看着卧铺票数量从“有”变成“10”最后成为“无”。最后三十分钟后，又一次提交订单时，终于看到了“有未完成订单”的提示。遂迅速付款完成车票购买。当然，只是硬座了。 我已经问候了铁道部全家数遍。 网站宕机风波 1月5号之前的两周，我的博客访问的话会一直是“域名已被阻断”的提示。最初以为是暂时的，后来发现一个多星期了还是这个提

这几天抽空对我的插件 社交媒体连接 进行了更新，一连更新了三个版本，新增的特性如下： 增加对facebook的支持 使用了V1.6的同学应该已经在后台看到facebook的连接登陆图标。需要说明的是，管理员在启用facebook连接注册前，自己一定要到后台的 “绑定微博同步文章” 页面， 点击facebook的登陆连接，在弹出的要求输入facebook appid窗口中，填写为你网站申请的appid和appsecret。（不知道如何申请，那还是不要用facebook了） 设置完成后，你的网站用户才可以在前台使用facebook连接功能。 如果要修改输入的appid和appsecret。可以点击facebook连接按钮右边的“修改appKey”按钮，进行修改操作。 完全重写的账户注册流程 这是V1.6重点功能。原先的账号注册流程是： 用户点击微博连接 –》 带入到微博授权页面 –》 授权后返回网站 –》 获得授权的用户信息 –

如果有关注我博客人，应该会发现最近一周之内博客都一直打不开。我一直以为是主机问题，今天联系了客服，才发现原来是我自己的主题的问题。所以今天花了大半天的时间一点点排除问题，最后发现原来是和gravatar的服务器被墙有关。去掉了头像缓存，问题就解决了。 当然，不会白白更新一篇博客的。下面说一个根据自定义字段查询文章的方法。 query_posts可以实现多种组合查询，但是我遇到的一个问题是，需要搜索自定义字段的值。比如为一个post定义了一个字段“my_address”，它的值表示一个地址，比如“中国 北京 海淀区 北四环路”。如果我们要想通过搜索“北京”这个关键词来找到这篇post，那么通过query_posts就办不到了。虽然query_posts的查询有“meta_value”这个方法，但是这个必须是完整的值，也就是只有查询“中国 北京 海淀区 北四环路

从标题中可以看出，本文要讲两个方面内容： 第一，按标题首字母排列文章 这个简单，只需在循环（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

昨天写了一篇《 JavaScript: 让拖动支持iphone/ipad触摸 》，今天又无聊，想到了图片放大(zoom)，让使用ios设备的的用户可以使用两根手指来缩放图片。想了一下，很容易就实现了。 其实原理也就是在图片接收了两个有效触摸点后，在手指移动过程中检测两点之间的距离的变化，以此来对图片进行放大缩小。 不多说，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;

一般的通过mousedown、mousemove、mouseup等打造的拖动，仅仅在普通的键盘+鼠标的电脑设备上可以工作。而到了ios设备上（iphone itouch ipad），则不能工作了。最近因为做个东西，需要支持ios设备，所以只好看了下webkit浏览器的触摸事件。 其实也很简单，对应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" : &quo