码迷,mamicode.com
首页 > Web开发 > 详细

使用shake.js让你博客支持摇一摇

时间:2014-07-31 20:25:07      阅读:2826      评论:0      收藏:0      [点我收藏+]

标签:android   style   blog   color   使用   os   io   for   

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧。该功能已经集成在Oconnor1.8中。本文主要讲解这货的原理。
首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入。
添加“摇一摇”事件监听
window.addEventListener(‘shake‘, shakeEventDidOccur, false);

//function to call when shake occurs
function shakeEventDidOccur () {

    //put your own code here etc.
    if (confirm("Undo?")) {

    }
}
取消监听
window.removeEventListener(‘shake‘, shakeEventDidOccur, false);
随机文章实现方式
JS代码,当然在这之前需要进入shake.js脚本
window.addEventListener(‘shake‘, shakeEventDidOccur, false);

//function to call when shake occurs
function shakeEventDidOccur () {

    jQuery.post(Bigfa.ajaxurl, {
                action : ‘random_post‘,
                }, function(data) {
                    window.location.href = data;
            });
}
下面的代码扔到functions.php中,如果你已经添加了上一篇随机文章的代码这里就不需要
wp_enqueue_script( ‘key‘, true);
wp_localize_script(‘key‘, ‘Bigfa‘, array(
     "ajaxurl" => admin_url(‘admin-ajax.php‘)
));
add_action( ‘wp_ajax_random_post‘, ‘bigfa_random_post‘ );
add_action( ‘wp_ajax_nopriv_random_post‘, ‘bigfa_random_post‘ );
function bigfa_random_post() {
    $posts = get_posts(‘post_type=post&orderby=rand&numberposts=1‘);
    foreach($posts as $post) {
        $link = get_permalink($post);
    }
    echo $link;
    exit;
}
OK。just 摇 it。
浏览器和设备支持情况
iOS Safari 4.2.1 (and above)
Android 4.0.3 (default browser)
Opera Mobile (Android)
BlackBerry PlayBook 2.0
Firefox for Android
FirefoxOS Devices

 

使用shake.js让你博客支持摇一摇,布布扣,bubuko.com

使用shake.js让你博客支持摇一摇

标签:android   style   blog   color   使用   os   io   for   

原文地址:http://www.cnblogs.com/whlives/p/3881261.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!