jekyll云分类

2015年4月06日 16:48

分类太多,导致分类列表太长,页面很难看,该怎么办? 一个办法是改变展示形式. jquery正好有插件,可以让列表直接成为云标签.
  • 插件地址
https://github.com/addywaddy/jquery.tagcloud.js
插件本身用法非常简单,重点介绍在jekyll博客中的示例.
  • 新建模板(_includes/category_cloud.html)
<script type="text/javascript" src="{{ site.baseurl }}/static/js/jquery.tagcloud.js"></script>

<div id='category_cloud'>
    <h3>分类</h3>
    <div class="categories">
        {% for cat in site.categories\%}
        <a href="/categories.html#{{cat | first}}" rel="{{ cat|last|size  }}">{{cat | first}}</a>
        {% endfor \%}
    </div>
</div>
<script>
$.fn.tagcloud.defaults = {
  size: {start: 14, end: 18, unit: 'pt'},
  color: {start: '#555', end: '#428bca'}
};

$(function () {
  $('.categories a').tagcloud();
});
</script>
  • 包含模板  
在需要使用的地方包含category_cloud.html即可
<div class="well">
{% include category_cloud.html %}
</div>
 

Tags: jquery
评论(0) 阅读(1602)

$('a').click()无法触发页面跳转

2015年2月14日 22:55

描述

在用$("a").click()方法, 触发a元素点击事件,进行页面跳转效果. 结果发现页面未发生跳转.

示例

<html>
<meta charset='utf-8'>
<body>
<button id="btn">按钮</button>
<a href="http://www.baidu.com" target="_blank" id="link">链接</a>
</body>
<script src="/jquery1.91.js" type="text/javascript"></script>
<script>
$(function(){
    $("#btn").click(function(e){
        //触发点击事件
        $("a").click();
    });
</script>
</html>

解决方法

  • 第一种: 用原生的a对象触发事件
$("a")[0].click();
  • 第二种: 通过事件冒泡触发事件
<a href="http://www.baidu.com" target="_blank" id="link"><span id="link">链接</span></a>

$(function(){
    $("#btn").click(function(e){
        //触发点击事件
        $("#link").click();
    });
</script>
 

Tags: jquery
评论(0) 阅读(1278)