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

基于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

评论(305) 阅读(18837)

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

$('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

评论(135) 阅读(21921)

妙音

jekyll云分类

2015年4月06日 16:48

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

2015年3月27日 13:42

video.js视频播放插件初试

2015年3月25日 10:57

简单示例

demo.html文件介绍

测试自己的视频

nginx静态资源服务器

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

2015年2月14日 22:55

描述

示例

解决方法

妙音

搜索

分类

热门文章

最新评论

最新留言

计数器

功能

链接