作者归档：在线疯狂

RSS feed of 在线疯狂

使用zTree绘制行政区划树状图
作者是 发布于 在 JavaScript.

zTree是一款基于jQuery的js树形插件，可以将树形结构的数据以可折叠的树状图的形式进行展现，该组件的Github项目地址为：https://github.com/zTree/zTree_v3。

本文以行政区划树状图为例，简述zTree插件的使用过程。

访问国家民政部网站的URL：http://www.mca.gov.cn/article/sj/tjbz/a/2016/201605/20160506281034.html，可以查看2016年5月中华人民共和国县以上行政区划代码。

访问国家统计局网站的URL：http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html，即可浏览最新县及县以上行政区划代码（截止2014年10月31日）。

将页面上的行政区划正文复制并保存在一个文本文件中，命名为xzqh.txt，使用文本编辑器（例如Notepad++）移除文本中的多余空行，并对内容进行校验和修改，参考：https://github.com/qinjiannet/ztree-xzqh.js/blob/master/xzqh.txt。

使用下面的Python代码将行政区划文本转换为以“孩子表示法”存储的树形结构，并使用json进行序列化，Python代码如下：

#encoding=utf-8
import json

#树的后根遍历
def traverse(node, func):
    if node and node['children']:
        for child in node['children']:
            traverse(child, func)
    func(node)

#清除节点的多余属性，树使用孩子表示法进行表示
def clearNode(node):
    if node:
        del node['parent']
        del node['depth']
        if not node['children']: ...

继续阅读

CKEditor允许输入空标签配置方法
作者是 发布于 在 CKEditor, JavaScript.

使用CKEditor编辑HTML文本时，有时可能需要插入带有样式的空标签，例如显示glyphicons图标的<i>标签：

<i class="glyphicon glyphicon-user"></i>

但是，默认设置下，CKEditor会过滤掉空的<i>标签。

在ckeditor.config.js中添加如下代码即可实现在CKEditor (4.3.x)编辑器中插入一个带有样式的空的<i>标签：

// allow i tags to be empty (for font awesome)
config.protectedSource.push(/<i[^>]><\/i>/g);
CKEDITOR.dtd.$removeEmpty['i'] = false;
config.allowedContent = true;

参考博文：Configure CKEditor to allow entering empty tags

原文步骤摘录如下：

The (empty) <i> tag kept on being removed ...

继续阅读

jQuery事件重复绑定示例及解决方法
作者是 发布于 在 JavaScript.

jQuery嵌套事件绑定时，如果逻辑处理不当，有时会出现事件重复绑定的问题，例如下面的例子。

点击“添加文本框”按钮时，会在div中新增一个textarea，同时使用bind方法为class为demo-textarea的元素绑定click事件

jQuery事件重复绑定Demo，点击“新增文本框”按钮追加textarea
点击textarea弹出提示，重复添加时会重复绑定
第n次新增之后，textarea在点击时会重复弹出n次提示。

相关代码如下所示：

<script>
$(document).ready(function(){
  $("#add-btn").on("click",function(){
    $("#first-p").after('<p id="demo-p"><textarea class="demo-textarea">点击textarea弹出提示</textarea></p>');
    $("#demo-div").find(".demo-textarea").bind("click",function(){
      alert("Textarea Clicked!"); ...

继续阅读

django-blog-zinnia添加文本编辑器ckeditor
作者是 发布于 在 CKEditor, django-blog-zinnia.

CKEditor文本编辑器是一款旨在简化Web内容编辑的即用（ready for use）的HTML文本编辑器。它是一款所见即所得（WYSIWYG）的编辑器，涵盖了常用的文本编辑功能。CKEditor是一款开源的应用，也就是说开发者可以根据实际需求修改源码。下面是CKEditor的实例

django-blog-zinnia的生态系统提供了对ckeditor编辑器的支持

具体配置过程如下：

一、配置django-ckeditor：

1. 从https://github.com/shaunsephton/django-ckeditor/下载django-ckeditor的源码压缩包，解压后将ckeditor目录拷贝至django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加ckeditor
3. 执行collectstatic管理命令manage.py collectstatic（或者将django-ckeditor源码目录/static/下的/ckeditor/手工拷贝至django工程项目的静态文件目录STATIC_ROOT下）
4. 在项目配置文件settings.py中添加CKEDITOR_UPLOAD_PATH配置，由此指定CKEditor的媒体上传路径，CKEditor使用Django的存储API。缺省设置下Django使用文件系统储存后端（使用MEDIA_ROOT和MEDIA_URL），如果没有另外指定存储后端，你需要对MEDIA_ROOT下的CKEDITOR_UPLOAD_PATH路径拥有写权限。
5. 在项目urls.py文件中新增CKEditor的URL配置：
(r'^ckeditor/', include('ckeditor.urls')),
6. 设置CKEDITOR_IMAGE_BACKEND来启用CKEditor缩略图，缺省设置下图像不显示缩略图，以全尺寸形式展现。

二、配置zinnia-wysiwyg-ckeditor：

1. 从https://github.com/django-blog-zinnia/zinnia-wysiwyg-ckeditor下载zinnia-wysiwyg-ckeditor源码压缩包，解压后将zinnia_ckeditor拷贝到django项目的工程目录下
2. 在settings.py文件的INSTALLED_APPS数组中添加zinnia_ckeditor（添加到zinnia之后）

三、修改zinnia WYSIWYG配置：

修改zinnia/settings.py文件的WYSIWYG_MARKUP_MAPPING字典，变更为如下内容：

WYSIWYG_MARKUP_MAPPING = {
    'textile': 'markitup',
    'markdown': 'markitup',
    'restructuredtext': 'markitup',
    'html': ...

继续阅读

jQuery Raty星级评分插件使用方法
作者是 发布于 在 JavaScript.

使用jQuery Raty，可以很方便的在页面上嵌入一个评分组件，如下所示：

使用方法很简单，首先从https://github.com/wbotelhos/raty下载raty的源代码（依赖于jquery）

然后在页面中引入相应的js文件、css文件、图片资源，在需要添加评分组件的元素上（比如span标签）添加下面的jquery代码即可：

$('span').raty();

以上为jQuery Raty的缺省使用方法，此外，该组件还支持丰富的传入参数和回调函数，例如：

设置jQuery Raty的初始评分：

评分回调函数

如果需要根据后台动态设置初始评分，可以使用回调函数实现。例如使用div中的data-attribute属性：

继续阅读