I'm qiqiboy !

TouchSliderBox 1.0 –容器宽度可变的幻灯

qiqiboy — Mon, 09 Apr 2012 18:23:24 +0800

之前写过一个《TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片》，那么这个TouchSliderBox和之前的TouchSlider有什么区别呢？

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

用一副图片来解释：

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

为什么开发这个

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

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

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

如何使用

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

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

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

  

<script type="text/javascript">

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

TouchSliderBox('imgbox','t1');

</script>

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

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

  

<script type="text/javascript">

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

TouchSliderBox('imgbox','t1');

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

</script>



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

JS的源码可以点此查看。

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

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

Hi,welcome to leave your reply.

Related comments

2012年04月20日, wmtimes say: 现在都开始进军手机了哈。我还在原地经。唉。
2012年04月10日, 博彩通 say: 嗯不错拿moto860试试
2012年04月10日, qiqiboy say: @Veezy 多么优良的习惯，我长久坚持下来了
2012年04月10日, qiqiboy say: @不能吧哈哈，这个其实是基于我上一篇文章里的TouchScroll的，所以还得载入那个脚本才行。不过总的代码量却是也不多，一共不到10K
2012年04月10日, 不能吧 say: 感觉代码量很少啊，不过我木有智能手机……
2012年04月10日, Yafei say: 手机测试了，效果很好。
2012年04月10日, zwwooooo say: 我深更半夜来竟然发现某人自沙！你这个强大了，以后用得着直接CP好了。
2012年04月9日, Veezy say: @liuqiqi 多年的恶习仍然不改。。。

TouchSliderBox 1.0 –容器宽度可变的幻灯

qiqiboy — Mon, 09 Apr 2012 18:23:12 +0800

之前写过一个《TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片》，那么这个TouchSliderBox和之前的TouchSlider有什么区别呢？

用一副图片来解释：

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

为什么开发这个

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

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

如何使用

使用方法，载入TouchSliderBox的脚本文件，然后可以通过调用TouchSliderBox这个函数来使用：

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

  

TouchSliderBox('imgbox','t1');

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

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

There is no comments still.

Related comments

TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案

qiqiboy — Sun, 01 Apr 2012 16:20:40 +0800

大概三个月之前，我发布了一个JS组件，《 TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 》。后来陆续在项目中都有用到，觉自己得还是很方便的。

今天，我又带来了自己空余时间写的另一个组件，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内的时间和距离，从而以此推算出需要缓动的距离和速度。大概过程如下：

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

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

  

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

moveEvent=function(){

    ....

    disc.push(new Date());

    disc.push(getMousePoint());

    ....

}

  

endEvent=function(){

    ....

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

    var nowTime=new Date(),

        nowPos=getMousePoint();

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

        disc[0].shift();

        disc[1].shift();

    }

    if(disc[0].length){

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

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

          ...

    }

    ....

}

TouchScroll如何使用

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

new TouchScroll({

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

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

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

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

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

});

TouchScroll还存在的问题

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

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

目前可以使用的接口:

var t1=new TouchScroll();

/*容器滚动接口

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

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

 */

t1.scroll(offx,offy);

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

DEMO2: http://qiqiboy.sinaapp.com/touchscroll/scroll.html

查看源代码请点此处。

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

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

Hi,welcome to leave your reply.

Related comments

2012年04月24日, 普歌 say: 好像没有很大区别，是不是我的浏览器有问题呢。
2012年04月18日, mopvhs say: 我在这里看到了Apps for the iPad的页面模板~~点此查看Demo地址
2012年04月8日, 刘印博客 say: 算是有心的一个东西了，很多时候都觉得会自动有~
2012年04月6日, leilei say:
2012年04月4日, emric say: 支持!
2012年04月1日, liuqiqi say: 美美的沙发。。。

注意，有骗子。。。。。13790942055

qiqiboy — Fri, 23 Mar 2012 10:11:22 +0800

昨晚接到一电话：

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

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

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

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

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

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

第二天，

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

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

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

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

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

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

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

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

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

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

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

。。。。。。。。

我此刻满脸黑线。。。。

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

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

骗子电话：13790942055

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

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年04月9日, 刘印博客 say: 学到了，这是新招哟。哈哈
2012年04月9日, 岸边 say: 直接打一毛钱对方付手续费，嘎嘎
2012年04月9日, wmtimes say: 去骗骗子的钱还是不错的。
2012年04月9日, mopvhs say: 没听说过GTalk的骗子当时就斯巴达了~~
2012年04月6日, 宝佑博客 say: 不是我说，这年头骗子的胆量真的很大，而且手法多变态都有，钱，只有在自己手里才是安全的！
2012年04月5日, queenpro911 say: 哈哈哈哈，我有手机攻击器。就是无限发送垃圾短信的，我帮你干他。~
2012年04月4日, 分享元素 say: 最近这种骗子越来越多了
2012年03月30日, qiqiboy say: @Eversiming 嗯，对，粤语口音。。我帮他当成我国外一位朋友了。。

TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片

qiqiboy — Wed, 11 Jan 2012 20:39:41 +0800

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

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

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

为什么开发这个东西

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

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

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

这个TouchSlider的特点

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

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

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

    'mouseWheel':false,//是否支持鼠标滚轮

    '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://qiqiboy.sinaapp.com/touchslider/ 体验。PC用户可以使用鼠标拖拽模拟触摸操作）。可以通过改变浏览器宽度或者横竖屏切换来查看幻灯的自适应效果。

源码下载点击此处下载。

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年04月9日, TouchSliderBox 1.0 –容器宽度可变的幻灯 - I'm qiqiboy ! say: [...] 之前写过一个《TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片》，那么这个TouchSliderBox和之前的TouchSlider有什么区别呢？ [...]
2012年04月1日, leilei say: 嘻嘻，我又来顶一下。
2012年04月1日, TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案 - I'm qiqiboy ! say: [...] TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片 [...]
2012年03月17日, 苏州婚纱摄影 say: 看起来是不错，就是不知道自己能不能搞的定啊！我的站： http://www.zhenshi99.com，有时间帮踩下，感激不尽了！
2012年03月14日, 青浦房产 say: 幻灯片知道但代码就看不懂了
2012年03月13日, 爱音族 say: 很给力啊！
2012年03月10日, www.hioils.com say: 嗯。效果不错。一回来就出新作品了。支持。
2012年02月17日, 起航博客导航 say: 不懂代码-_-

qiqiboy归来 – 纯吐槽

qiqiboy — Sun, 08 Jan 2012 12:50:58 +0800

博客很久没更新了，上次更新还是去年的9月16日了。算来已经快三个月了。当然，从没想过要把博客停掉，只是期间太多杂事，也没有折腾什么可分享的技术文。

还是从最近来说。

订购火车票

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

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

网站宕机风波

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

重见天日了。

蜗居在帝都

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

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

博客未来

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

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

感谢各位支持。

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

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年04月4日, LL.CX say: 买票变得鸡巴容易了啊，直接付款就行
2012年03月10日, www.hioils.com say: 期待你的新文章
2012年02月9日, 爱蝌蚪 say: 期待你的新文章
2012年02月8日, 刘学政博客 say: 老兄终于回来了，以后要加强更新啊
2012年01月16日, 掌柜的马甲 say: 欢迎回来~网上买票买的早,没有遇到啥麻烦
2012年01月15日, 超人 say: 乍一看以为是船票~~没想到是帝都出来的火车票。哈哈。今年不用再为购票而烦恼了
2012年01月13日, 康康 say: 春节不回家，离家近感受不到买票的热闹氛围确实是一大憾事。
2012年01月12日, jixiangac say: 网上有个利用FIREBUG购票攻略的，很牛的

社交媒体连接 V1.6更新支持facebook 完全重写的注册流程

qiqiboy — Fri, 16 Sep 2011 15:14:09 +0800

这几天抽空对我的插件 社交媒体连接 进行了更新，一连更新了三个版本，新增的特性如下：

增加对facebook的支持

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

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

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

完全重写的账户注册流程

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

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

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

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

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

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

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

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年04月15日, Name (required) say:
笑话皇后 : 博主的博客很专业，我学到了很多东西。目前已经用上了你的一个插件。
2012年03月17日, AuZeonfung say: 一直在用這個插件，我填入了FB的appid和appsecret但是有動態的時候都不會同步到FB，是這個插件沒有這個功能嗎？還是我人品問題？
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: 支持！

wordpress 搜索自定义字段(模糊查询)

qiqiboy — Wed, 14 Sep 2011 17:11:13 +0800

如果有关注我博客人，应该会发现最近一周之内博客都一直打不开。我一直以为是主机问题，今天联系了客服，才发现原来是我自己的主题的问题。所以今天花了大半天的时间一点点排除问题，最后发现原来是和gravatar的服务器被墙有关。去掉了头像缓存，问题就解决了。

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

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;

}

仅供参考。

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

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年04月16日, beibei say: 还是不会使用，我想在搜索中含自定义字段!
2012年03月24日, citier say: Q大求救，wordpress多关键字分类筛选怎么做，有点类似你这个，纠结中
2012年02月7日, joysk say: 啊哈，头像还在的啊？
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: 赶紧试试去真不错

wordpress 按首字母排列文章/检索文章

qiqiboy — Wed, 10 Aug 2011 16:01:14 +0800

从标题中可以看出，本文要讲两个方面内容：

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

这个简单，只需在循环（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可看我在项目中的具体应用。

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

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

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: 代码看不明白。

JavaScript: 支持iphone、ipad 使用两根手指放大图片

qiqiboy — Sun, 17 Jul 2011 15:13:20 +0800

昨天写了一篇《 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;

        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设备查看）。

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2012年02月21日, 地方 say: gggggggggggg
2012年02月21日, 地方 say: 对方的身份
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还可以这么搞，哈哈

I'm qiqiboy !

TouchSliderBox 1.0 –容器宽度可变的幻灯

为什么开发这个

如何使用

Hi,welcome to leave your reply.

Related comments

TouchSliderBox 1.0 –容器宽度可变的幻灯

为什么开发这个

如何使用

There is no comments still.

Related comments

TouchScroll 1.0 – 统一视觉样式的容器滚动解决方案

为什么开发这个东西

TouchScroll开发注意的问题

TouchScroll如何使用

TouchScroll还存在的问题

Hi,welcome to leave your reply.

Related comments

注意，有骗子。。。。。13790942055

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

TouchSlider 1.0 – 兼容触摸屏手机与PC的幻灯片

为什么开发这个东西

这个TouchSlider的特点

TouchSlider的使用以及demo

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

qiqiboy归来 – 纯吐槽

订购火车票

网站宕机风波

蜗居在帝都

博客未来

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

社交媒体连接 V1.6更新 支持facebook 完全重写的注册流程

增加对facebook的支持

完全重写的账户注册流程

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

wordpress 搜索自定义字段(模糊查询)

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

wordpress 按首字母排列文章/检索文章

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

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

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

JavaScript: 支持iphone、ipad 使用两根手指放大图片

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

社交媒体连接 V1.6更新支持facebook 完全重写的注册流程