Laravel技巧库

评论提交atwho和hotkeys

此课程是收费课程,请先购买或加入会员后再访问。

这节课不涉及到php开发,就是一些前端js插件的使用。
第一个是,当我们敲击@后,自动的就出来了参与讨论的用户名,这个功能在微博、QQ上都非常常见了。另一个是,发表评论的时候,也不用鼠标点击提交按钮,而是直接用 Cmd+Enter快捷键就可以发布出去了。

atwho

先来实现@功能 https://github.com/ichord/At.js

需要用到这这个插件。还是老规矩,去vendor建一个目录,然后把插件的代码都下载下来。

cd public/assets/vendor
mkdir atwho
cd atwho
wget https://raw.githubusercontent.com/ichord/Caret.js/master/dist/jquery.caret.min.js
wget https://raw.githubusercontent.com/ichord/At.js/master/dist/js/jquery.atwho.min.js
wget https://raw.githubusercontent.com/ichord/At.js/master/dist/css/jquery.atwho.min.css

调用

<link rel="stylesheet" href="/assets/vendor/atwho/jquery.atwho.min.css">
<script src="/assets/vendor/atwho/jquery.caret.min.js"></script>
<script src="/assets/vendor/atwho/jquery.atwho.min.js"></script>

<script>
//atwho
var commenter_exist = [];
$('.am-comment-author').each(function() {
    if($.inArray($(this).text(), commenter_exist) < 0) {
        commenter_exist.push($(this).text());
    }
});
$('textarea').atwho({ at: "@", 'data': commenter_exist });
</script>

jquery.hotkeys

第二个要用的插件是 jquery.hotkeys https://github.com/jeresig/jquery.hotkeys

# 先返回到public/assets/vendor目录
cd ..
mkdir jquery.hotkeys
cd jquery.hotkeys
wget https://raw.githubusercontent.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js

调用

show.blade.php页面js代码中添加

//hotkeys
$("textarea").keydown(function (e) {
    if ((e.ctrlKey || e.metaKey) && e.keyCode == 13) {
        $("#store-comment").click()
    }
});

13 对应回车键,ctrKey 对应 ctrl,metaKey 在 Mac 下对应 Command 键, Windows 下应该对应 Ctrl 键。 到 源码 中可以看到更多的键值。

单独js文件

确认这些js写的都没有问题了,那就到public/assets/js中,新建一个show.js。然后将这里的js代码全部挪过去。show.blade.php中改为引用

<script src="/assets/js/show.js"></script>