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) 阅读(3707)

基于python的最简单jQuery File Upload示例

2015年3月27日 13:42

找到个很不错的文件上传插件jQuery File Upload. 资料太少. 只能自己搭个环境,照着例子摸索. 奈何最简单的例子是基于php的, 不熟. 弄了个基于python的例子.
  • github
https://github.com/blueimp/jQuery-File-Upload
  • 目录
使用flask做了个简单web服务器,接收上传请求. 目录结构如下
https://github.c➜  flask-demo  tree
.
├── app.py
├── static
│   ├── 123.txt
│   └── file-upload
│       ├── angularjs.html
│       ├── basic.html
│       ├── basic-plus.html
│       ├── blueimp-file-upload.jquery.json
│       ├── bower.json
│       ├── CONTRIBUTING.md
│       ├── cors
│       │   ├── postmessage.html
│       │   └── result.html
│       ├── css
│       │   ├── demo.css
│       │   ├── demo-ie8.css
│       │   ├── jquery.fileupload.css
│       │   ├── jquery.fileupload-noscript.css
│       │   ├── jquery.fileupload-ui.css
│       │   ├── jquery.fileupload-ui-noscript.css
│       │   └── style.css
│       ├── Gruntfile.js
│       ├── img
│       │   ├── loading.gif
│       │   └── progressbar.gif
│       ├── index.html
│       ├── jquery-ui.html
│       ├── js
│       │   ├── app.js
│       │   ├── cors
│       │   │   ├── jquery.postmessage-transport.js
│       │   │   └── jquery.xdr-transport.js
│       │   ├── jquery.fileupload-angular.js
│       │   ├── jquery.fileupload-audio.js
│       │   ├── jquery.fileupload-image.js
│       │   ├── jquery.fileupload-jquery-ui.js
│       │   ├── jquery.fileupload.js
│       │   ├── jquery.fileupload-process.js
│       │   ├── jquery.fileupload-ui.js
│       │   ├── jquery.fileupload-validate.js
│       │   ├── jquery.fileupload-video.js
│       │   ├── jquery.iframe-transport.js
│       │   ├── jquery.min.js
│       │   ├── main.js
│       │   └── vendor
│       │       └── jquery.ui.widget.js
│       ├── package.json
│       ├── README.md
│       ├── server
│       │   ├── gae-go
│       │   │   ├── app
│       │   │   │   └── main.go
│       │   │   ├── app.yaml
│       │   │   └── static
│       │   │       ├── favicon.ico
│       │   │       └── robots.txt
│       │   ├── gae-python
│       │   │   ├── app.yaml
│       │   │   ├── main.py
│       │   │   └── static
│       │   │       ├── favicon.ico
│       │   │       └── robots.txt
│       │   ├── node
│       │   │   ├── package.json
│       │   │   ├── public
│       │   │   │   └── files
│       │   │   │       └── thumbnail
│       │   │   ├── server.js
│       │   │   └── tmp
│       │   └── php
│       │       ├── files
│       │       ├── index.php
│       │       └── UploadHandler.php
│       ├── test
│       │   ├── index.html
│       │   └── test.js
│       └── test.html
└── templates
    └── index.html

23 directories, 57 filesom/blueimp/jQuery-File-Upload
  • app.py
#encoding=utf-8
from flask import Flask
from flask import request
from flask import abort, redirect, url_for
from flask import render_template
import json

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        f = request.files['files[]']
        filename = f.filename
        minetype = f.content_type
        f.save('static/' + filename)
    return json.dumps({"files": [{"name": filename, "minetype": minetype}]})


if __name__ == '__main__':
    app.run(host="0.0.0.0", port=7000, debug=True)
  • demo.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload 示例</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="/upload" multiple>
<script src="/static/file-upload/js/jquery.min.js"></script>
<script src="/static/file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/file-upload/js/jquery.iframe-transport.js"></script>
<script src="/static/file-upload/js/jquery.fileupload.js"></script>
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});
</script>
</body> 
</html>
试了之后,确实很不错.
 

Tags: python flask jquery
评论(232) 阅读(18173)

video.js视频播放插件初试

2015年3月25日 10:57

最近在弄视频服务器,首先找播放插件。当看到video.js,非常清爽,并且它支持flv、mp4、webm、ogv播放格式,比较喜欢,所以选它.

简单示例

  • video.js官网
http://www.videojs.com/
  • 下载
wget http://www.videojs.com/downloads/video-js-4.12.5.zip
  • 解压
unzip video-js-4.12.5.zip
  • 简易web服务器
进入video-js目录,使用python,运行一个简易服务器
➜  video-js  python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
 
在浏览器访问http://localhost:8000/demo.html 即可看到demo

demo.html文件介绍

<!DOCTYPE html>
<html>
<head>
  <title>Video.js | HTML5 Video Player</title>

  <!-- Chang URLs to wherever Video.js files will be hosted -->
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <!-- video.js must be in the <head> for older IEs to work. -->
  <script src="video.js"></script>

  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script>
    <!--支持播放flv -->
    videojs.options.flash.swf = "video-js.swf";
  </script>


</head>
<body>
  <!-- poster封面 preload预加载 -->
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <!-- 三种播放格式-->
    <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
    <!-- 字幕 -->
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>

</body>
</html>
 
从上可看出,支持四种播放格式flv、mp4、webm、ogv

测试自己的视频

  • 转换视频
找个mp4视频,然后转换为flv、ogv、webm、swf格式. 
➜  video-js  ls -sh video
总用量 303M
 25M demo.flv   96M demo.ogv   40M demo.webm
120M demo.mp4   25M demo.swf
  • 修改demo.html文件
<source src="/video/demo.flv" type='video/x-flv' />
<!--
<source src="/video/demo.ogv" type='video/ogg' />
<source src="/video/demo.mp4" type='video/mp4' />
<source src="/video/demo.webm" type='video/webm' />
-->
  • 播放效果
改成自己的视频后,发现播放非常慢. 由于视频在本地,这种情况不正常. 最后发现由于视频文件放在web服务器中,web服务器处理静态数据很慢.

nginx静态资源服务器

有没有更快的访问方式?想到nginx处理静态数据非常快. 
  • 安装nginx
nginx的安装就不说了
 
  • 修改配置
location / {
    root   /home/wyq/workspace/video-js/;
    #root   html;
    index  index.html index.htm;
}
启动nginx之后,通过它访问demo.html,发现此时播放视频非常流畅.
  • 限速   
假如视频把网页速度占了,怎么限制视频速度?在可以在nginx中添加如下参数.
location / {
    root   /home/wyq/workspace/video-js/;
    limit_rate_after 5m; #下载5M以后开始限速
    limit_rate 512k;     #每个链接速度限制为512K
    #root   html;
    index  index.html index.htm;
}
 
另外找资料发现,网上说播放视频需要http_flv_module模块才支持拖动播放flv视频. 按照上面方法,没有安装flv模块,也可以拖动播放。想了下原因,可能我用的是nginx1.6,比较新,不需要安装flv模块,也可以拖动播放. 
 

Tags: jquery
评论(9) 阅读(27909)

$('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
评论(132) 阅读(21777)