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

大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧。该功能已经集成在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让你博客支持摇一摇

时间: 2024-10-13 23:27:10

使用shake.js让你博客支持摇一摇的相关文章

js 多个checkedBox分组互斥功能实现 由于QQ邮件无法发送暂且将js写在博客园

今天有一项目需要实现多个checkbox分组实现组内互斥功能 . 具体要求如下:大的分类分为A B C 三类, 其中 A   B 中又分为 A1 A2 A3   B1 B2 B3  二级分类,二级分类下又有 A11  A12 A13 A14  A21 A22 A31 A32  B11 B12 B13 B14 ... .要求实现 A B C 互斥 A1 A2 A3 B1 B2 B3 组内互斥.具体结构及代码如下 具体功能树如下: A A1 A11 A12 A13 A2 A21 A22 A3 A31

用node.js 搭建的博客程序心得(node.js实战读书笔记1)

学习node已经有一段时间了,之前把了不起的node.js看完了,基本算了解了一些node的基本的用法还有一些概念了,然后就开始看第二本node.js实战,第一章就是搭建一个博客程序.但是不得不吐槽一下node,发展得太块了,很多库已经和之前的用法不一样了,就要一直去百度google来查询最新的用法,其实我觉得这样并不见得是一件好事,因为不稳定,所以就不好学习,就要一直保持对于node的关注.不废话了,这篇文章就大概说一些在这章里面所学习到的一些东西,经验总结吧 1.express - 基于 N

让GitHub Pages博客支持百度搜索引擎收录

原文链接:http://tabalt.net/blog/make-blog-support-baidu-search-engine/本博文章如无说明均为原创,转载时请注明以上链接 GitHub Pages搭建的网站,在百度搜索引擎访问的时候,经常性的会返回 403 forbidden,从而百度会认为网站访问不稳定,对网站降权,甚至K站. 要想解决这个问题,只有买个VPS自己撘一个jekyll解析博客了.但是我的域名没有备案,单纯用国外的VPS,用户访问起来也会有慢的问题,毕竟Github Pag

搭建Ghost 基于Node.js的开源博客系统

 安装MySQL # 安装MySql $ apt-get update # 更新组件 $ apt-get install mysql-server mysql-client -y # 快速安装-y代表默认选择y省去了回车,这时只需要设置mysql的root密码 # 设置mysql的编码 $ sudo vi /etc/mysql/mysql.cnf # 搜索到[mysqld] 插入collation-server = utf8_unicode_ci init-connect = 'SET NA

JS批量删除博客园文章

$('tr').each(function(){ if($(this).attr('id')!=null){ var s = $(this).attr('id').slice(9); console.info("正在删除:"+s); deletePost(s); } }); window.location.reload(); 以前都是用新浪博客的,但是新浪博客对编程类文章支持不好,记录一些html代码总是隐藏. 第一次用博客园,被他简洁的界面吸引. 一看还有博客搬家功能,于是把新浪博客

使用CSS/JS代码修改博客模板plus

之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和.对应的东西控制的都是啥子,这回不在看那个CSS了,直接用浏览器的开发者模式打开博客,一级一级找下去,看控制要改的内容的都是哪个DIV,把那些呆滞傻二的字体一一改掉: .cnblogs_code pre { font-family: Courier New!important; font-size:

[JS]玩转博客园的几个“奇技淫巧”

混迹博客园快一个月了,非常喜欢这块技术氛围浓厚的园地,不过在玩转园子的过程中也发现了几个小缺陷,不过好在申请了JS权限之后可以解决大部分的不方便,而在不能植入自定义JS的页面也可以用比较hack的方式来缓解问题.本文就来说一说我这一个月来碰到的几个问题以及解决之道:D 一.判断当前用户 写随笔的过程中可能经常需要对页面进行一下预览,然而编辑器的预览功能没办法带上自定义的CSS和JS,所以通常都得保存草稿然后查看随笔.预览完之后想要继续编辑的话就得一直拉到随笔的结尾,这个实在是不太方便,于是自然就

JavaWeb个人博客支持插入源码和在线聊天(含源码)

原文地址:http://www.cnblogs.com/liaoyu/p/uudisk.html 源码地址:https://github.com/liaoyu/uublogs 用JavaWeb写了一个简单的博客系统,支持在线插入源码和图片,编辑器为KindEditor,为了练习JQuery,加入在线聊天功能.用得还是很古老的JSP+Servlet,由于做到后来,兴趣减少及时间的原因,还有很多功能没有完成.. 开发环境:myeclipse mysql5 jdk6 主页: 留言: 在线聊天: 搭配项

hexo 博客支持PWA和压缩博文

目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed to sw-precache. service_worker: maximumFileSizeToCacheInBytes: 5242880 staticFileGlobs: - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2} - /l