类别归档：JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

RSS feed of JavaScript

使用D3js绘制Force-Directed Graph（力导向图）
作者是 发布于 在 JavaScript.

Force-directed（力导向）图形绘制算法通过图形本身的结构（图中顶点与边的拓扑关系）计算出图形的层次，而不依赖于特定领域的知识。使用力导向算法绘制的平面图形通常比较美观，并且图中各条边之间的交叉尽可能的少。

本文对使用D3js绘制Foorce-Directed Graph（力导向图）的过程进行简要的介绍，以下面的逻辑图（包含6个节点和5条边）为例。

import json
#nodes为图的节点集合
nodes = [{'name' : 'nodeA'}, 
         {'name' : 'nodeB'}, 
         {'name' : 'nodeC'}, 
         {'name' : 'nodeD'}, 
         {'name' : 'nodeE'}, 
         {'name' : 'nodeF'}]
#links为图的边集合，source为起点，target为终点
links = [{'source' : 0 , 'target' : 1}, 
         {'source ...

继续阅读

jQuery遮罩插件jQuery.blockUI.js简介
作者是 发布于 在 JavaScript.

jQuery BlockUI Plugin概述：

jQuery BlockUI插件可以在不锁定浏览器的同时，模拟同步模式下发起Ajax请求的行为。该插件激活时，会阻止用户在页面进行的操作，直到插件被关闭。BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为。

使用jQuery BlockUI，首先需要添加插件js源码的引用：

<script type="text/javascript" src="http://malsup.github.io/min/jquery.blockUI.min.js"></script>

用法很简单，阻止用户对页面的交互：

$.blockUI();

使用自定义信息阻塞UI：

$.blockUI({ message: '<h1><img src="busy.gif" .> ...

继续阅读

Django CKEditor未保存窗口关闭提醒
作者是 发布于 在 CKEditor, django, JavaScript.

在使用文本编辑器写博客时，有时可能不小心将页面关闭，或者刷新页面，来不及保存的博文就会消失的无影无踪，令人感到十分沮丧。

如果使用Django CKEditor文本编辑器，只需添加一个js插件并进行简单的配置就可以防止不小心关闭表单尚未保存页面的情况，设置步骤如下：

1. 添加jquery.AreYouSure插件，该插件可以在关闭包含未保存表单的页面时弹出相应提示，Github项目地址为：https://github.com/codedance/jquery.AreYouSure。

2. 修改ckeditor\templates\ckeditor\widget.html，将内容替换为下面的代码：

<p><textarea{{ final_attrs|safe }}>{{ value }}</textarea></p>
<script type="text/javascript" src ...

继续阅读

使用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日）。

将页面上的行政区划正文复制并保存在一个文本文件中 ...

继续阅读

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 ...

继续阅读