2017-05-04

Semantic Ui Tips

JS and CSS

一下代码都是基于 jQuery、Semantic Ui、Layer、Vue 来写的:

<link rel="stylesheet" href="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.css">
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="http://cdn.staticfile.org/vue/2.0.3/vue.js"></script>
<script src="http://cdn.staticfile.org/layer/2.3/layer.js"></script>

阅读全文

2017-05-04

分页计算工具

package com.xtuer.util;

/**
 * 分页时需要计算某一页的起始位置，或则使用记录总数计算共有多少页，PageUtils 的任务就是计算分页时的数据:
 *     PageUtils.offset(pageNumber, pageSize) 用于计算起始位置
 *     PageUtils.pageCount(recordCount, pageSize) 用于计算共有多少页
 */
public class PageUtils {
    /**
     * 根据传入的页数、每页上的最多记录数计算这一页面的开始位置 offset
     *
     * @param pageNumber 页数
     * @param pageSize 每页上的最多记录数
     * @return 开始的位置 offset
     */
    public static int offset(int pageNumber, int pageSize) {
        // 校正参数，pageNumber 从 1 开始，pageSize 最小为 1
        pageNumber = Math.max(1, pageNumber);
        pageSize   = Math.max(1, pageSize);

        int offset = (pageNumber -1) * pageSize; // 计算此页开始的位置 offset
        return offset;
    }

    /**
     * 根据传入的记录总数、每页上的最多记录数计算总页数 pageCount
     *
     * @param recordCount 记录的总数
     * @param pageSize 每页上的最多记录数
     * @return 总页数
     */
    public static int pageCount(int recordCount, int pageSize) {
        // 校正参数，recordCount 最小为 0，pageSize 最小为 1
        recordCount = Math.max(0, recordCount);
        pageSize    = Math.max(1, pageSize);

        int page = (recordCount-1) / pageSize + 1;
        return page;
    }
}

阅读全文

2017-05-03

修改 Semantic UI 的默认字体

Semantic Ui 默认使用的是谷歌提供的字体，并且是直接使用了谷歌的官方链接。谷歌网站在国内访问速度很差，甚至根本无法访问，需要对 Semantic UI 的源文件进行一下手动修改:

使用 Nodejs 下载 Semantic Ui 源码: http://www.semantic-ui.cn/introduction/getting-started.html
- 安装 Nodejs
- 安装 gulp: npm install -g gulp
- 下载 Semantic Ui: npm install semantic-ui –save
修改 src\themes\default\globals\site.variables
- 修改文件中的 @fontName 的值来设置 Semantic UI 的默认字体，这里使用了微软雅黑: Microsoft YaHei
- 修改文件中的 @importGoogleFonts 为 false 禁止使用 Google 的字体
使用命令 gulp build 编译一下 Semantic UI
复制生成的 dist 目录中的文件到项目里即可

阅读全文

2017-04-28

Vue 动态显示编辑按钮和计算 Class

下面介绍使用 vue

动态的显示编辑按钮

当鼠标移动到 segment 上时显示编辑按钮(@mouseenter 事件)，鼠标离开 segment 时隐藏编辑按钮(@mouseleave 事件)，需要定义一个属性如 editable 表示当前 segment 是否可编辑，使用 v-show 进行判断显示和隐藏
动态的计算 class

复杂情况下不同元素的 class 不一样，此时可以使用函数动态计算 class，在 :class 中使用此函数，不同的参数计算出来的 class 不一样

阅读全文

2017-04-24

Vue Todo

实现一个简单的 Todo 来介绍不同的 Vue 对象共享同一个 data 数组、Todo 的增加、删除、编辑:

左边的 Todo 和右边的 Dropdown 分别用一个 Vue 对象来渲染，它们共享使用同一个数组 todos，当左边的 Todo 修改了 todos 的数据后，右边的 Dropdown 的数据也会同时自动更新。点击编辑按钮，在 todo 原来的地方显示一个 input 进行编辑。

阅读全文

2017-04-21

Semantic Ui Grid

Semantic-Ui 是一套类似于 bootstrap 的 ui framework，相比 Bootstrap 有如下优点：

组件采用语义化的组织方式，容易理解，容易记忆
组件库非常丰富，几乎不需要引入第三方的组件，统一性强
由于采用语义化的方式命名，所有组件都有自己的命名空间，相互不受干扰，侵入性弱，对自定义 css 干扰小，bootstrap 则改写了很多元素的默认样式，复写困难
自定义容易，semantic ui 的源码中各个组件相互独立，依赖清晰，自定义方便

Fundamental Concepts

container
A fixed width container 具有固定宽度的容器
grid
网格
column
网格的列
row
网格的行

阅读全文

2017-04-20

Spring MVC 响应 JSONP

SpringMvc 中处理 JSONP 需要注意响应的 Content-Type，如果为 text/plain 时在某些浏览器下就不能正确的执行 JSONP 的回调函数，认为其是不可执行的格式。

SpringMvc 返回对象时会把其自动的转换为 JSON 字符串，并且设置 Content-Type 为 application/json，如果返回 String 的话则 Content-Type 会设置为 text/plain，使用 JSONP 时需要返回 JSONP 格式的 String，这时例如在高版本的 Chrome 中就会出错，因为 Content-Type 是 text/plain，而不是 application/javascript。

阅读全文

2017-04-20

zTree 右键菜单

zTree 使用右边的添加、编辑、删除按钮时容易误操作（踩过坑了），所以下面使用右键菜单来编辑 zTree。

既然需要对树进行编辑，说明数据是需要保存到服务器的，所以树的加载也是需要使用动态加载，不过事例中写死是为了无服务器时便与演示（注释中有动态访问服务器的代码）。

实现时需要注意几点:

重命名操作需要在 zTree 的回调函数 beforeRename 中进行
创建新节点时
- 节点没有展开，先展开它，这时如果还没有从服务器加载过数据，则会先从服务器中加载子节点数据，展开完成后会调用回调函数 onExpand，这时在 onExpand 中创建新节点。节点没有展开，且没有从服务器加载过子节点数据时不在 onExpand 中创建新节点，就会很有可能看到 2 个一样新建的节点，因为调用 window.tree.addNodes 创建了一个节点，服务器返回的数据中很可能也已经有这个节点的数据（因为是异步的），所以重复了，不过在数据库中并没有重复，只是浏览器本地的 zTree 中内存数据重复
- 是根节点，或者非根节点且已经展开了，则直接创建新节点，这时不会从服务器加载子节点数据

使用时需要修改 TODO 相关的部分:

配置 setting.async 从服务器加载数据，并删除 nodes 初始化代码
完成函数 createNode(), removeNode(), renameNode()，已有相关的注释作为提示

$.rest.syncCreate(), $.rest.syncRemove(), $.rest.syncUpdate() 是对 $.ajax() 的简单封装，为了简化 Ajax 请求操作，可以自己实现或则参考 jQuery 的 REST 插件

阅读全文

2017-04-16