自定义nice-validator的theme

工作中使用到nice-validator.js,发现默认的theme无法满足要求,默认theme的提示框是在控件的右方,但是实际的页面中那个位置不一定可以放得下提示框,所以想到可以放在空间内部的右边(也可以浮动在上方,使用默认的“yellow_right_effect”进行调整)

因此研究了下nice-validator.js自带的theme,找到了修改的办法,下面是将提示框放在控件内部的右方的代码:

$.validator.setTheme({
    'inner-right': {
        formClass: 'n-inner-right', // 修改form的class
        msgClass: 'n-inner-right', // 修改msg-box的class
        msgShow: function ($msgbox, type) { // 重新定义msg-box的位置,可以参见zh-CN.js的代码
            $msgbox.css({
                'line-height': '0',
                'display': 'inline-block',
                'vertical-align': 'top',
                'outline': '0',
                // '+5px' 是为了更好看
                'left': -($msgbox.width() + 5) + 'px',
                // '5px' 是为了更好看
                'margin-top': '5px'
            });
            // 改变了msg-box的class,所以默认的css样式失效,需要重新设置
            $msgbox.find('.n-icon').css('background-image', 'url(../component/nice-validator-1.1.1/images/validator_default.png)');
        }
        //,
        // 这里还可以设置其他更多的方法,可以参见文档
        //msgHide: function(){}
    }
    /*
     ,
     更多主题可以在这里设置
     */
});

将代码保存到custom_theme.js中,并在nice-validator.js的下方引入,调用方法就是 {theme: ‘inner-right’}

这里给出了DEMO,可以F12研究下,这里是文档地址:https://niceue.com/validator,搜索“setTheme()”即可找到

jquery.ztree.js搜索插件v1.0发布:jquery.ztree.search.js

之前工作中有个需求,是模糊搜索ztree树节点名称,然后展示出来,当时研究了下ztree,然后做出来了,当时只是写了几个零散的方法就实现了(DEMO见之前一篇文章:《我也来实现ztree模糊搜索功能》)。

这几天,突然有同事问我要代码,看来其他同事也会使用呢,于是我把几个零散的方法给了他。可是我在给他的过程中,觉得零散方法是挺乱的,而且有些过度方法也会暴露给调用者,为什么不自己封装一下呢?另外既然ztree原生没有这种功能(原生ztree只能找到搜索出来的节点,要展示还需要结合另外几个方法),那么我应该做一个插件实现这个功能,就一个js,其他的同事只要引入,然后直接用tree对象调用方法就可以实现。

于是研究了下ztree的源码,发现ztree对象的生成是靠绑定在$上的zTree.init方法实现的,于是按照作者的思路和写法对zTree.init方法进行了重写,这样我自己就可以很容易的插入自定义的方法了,于是就完成了这个插件。

插件下载地址:
https://github.com/strangeen/jquery.ztree.search

下面是Quick Start,详见上面的地址:

<script type="text/javascript" src="jquery.ztree.all.min.js"></script>
<script type="text/javascript" src="jquery.ztree.search.js"></script>
<script type="text/javascript">
  var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
</script>
  
<input type="text" value="" id="in" />
<input type="button" value="SEARCH" onclick="zTreeObj.searchNodes($('#in').val())" />
  1. jquery.ztree.search.js必须在jquery.ztree.all.min.js下方引入
  2. 点击search按钮,zTree对象zTreeObj在页面上的显示状态就为按输入框中值搜索后的结果,清空输入框会擦除高亮展示,tree视图不改变

我也来实现ztree模糊搜索功能

之前看了一篇oschina上的关于ztree模糊搜索的文章,我很负责任的说,作者很不负责任,代码不COPY完就贴出来,反正看完似懂非懂,想了想,还是自己实现来得快,于是就自己实现咯…

先看demo,如果感觉效果还不错就继续看下面代码:

主要代码就3块:

1,搜索:

// 模糊搜索name满足条件的节点
function searchNode(value) {
	if (value == "") return;
	
	// 获取与value匹配的节点,使用的ztreeAPI getNodesByParamFuzzy
	var nodes = treeObj.getNodesByParamFuzzy("name", value);

	// 关闭所有节点的高亮
	// 使用API transformToArray获取所有的节点,getNodes()只能获得根节点,属性children也只能获取下一级节点
	var allNodes = treeObj.transformToArray(treeObj.getNodes());

	for (var i = 0; i < allNodes.length; i ++) {

		// 关闭高亮是利用节点属性highlight来控制fontCss实现的
		// 需要配合setting.view中设置的fontCss使用,后面代码会说
		allNodes[i].highlight = false;

		// 更新节点,因为hightlight改变了,使用updateNode可以更新节点
		treeObj.updateNode(allNodes[i]);
	}
	// 先关闭所有节点
	treeObj.expandAll(false);

	// 展开根节点(如果不展开根节点,下面的节点无法展开,不知道是不是bug)
	treeObj.expandNode(treeObj.getNodes()[0],true);

	// 高亮并展开搜索到的节点
	for (var i = 0; i < nodes.length; i ++) {

		nodes[i].highlight = true;
		treeObj.updateNode(nodes[i]); // 更新节点,让高亮生效

		// 展开搜索到的节点的父节点
		treeObj.expandNode(nodes[i].getParentNode(),true);
	}
}

继续阅读

ztree实现叶子节点半勾选状态

ztree叶子节点半勾选

这只是效果图,demo点击链接查看

ztree是一个前端的基于jQuery的树形结构插件,最近项目要用到,所以就学习了下,功能还是很强大的,但是一些小细节还是无法满足的,于是研究了一天,自己写了几个方法把小细节实现了。

具体业务是这样的:
1,节点可以勾选
2,叶子节点可以半勾选/取消,
3,勾选状态和父节点关联
4,点击叶子节点可以执行方法
5,点击父节点只能展开或收缩

但是研究后发现,ztree不能提供叶子节点自动半勾选和半勾选的自动计算(即自动取消,比如取消父节点,所有叶子节点的半勾选都要取消),也就是说只能手动设置,而后面发现这个还是比较坑:
1,手动设置的半勾选状态必须手动去清除
2,父节点自动计算的半勾选的halfCheck居然是false…

所以需要注意这点,先看看改造后的实例
继续阅读

Javascript浅尝:《贪吃蛇》续1——网页上的键盘事件

上一篇文章,我挂出了一个我用JS写的贪吃蛇,感觉怎么样呢?

因为最近在学习JS,就想找个项目来练习练习,之前用Java写过贪吃蛇,实现方法是现成的,所以就想到再用JS来写一个。

写代码之前,第一个考虑的就是按键的实现问题,这里有2点:

  1. 按方向键和空格键可以进行转向和暂停操作。
  2. 一般情况下,按方向键和空格键的时候页面会滚动,会影响玩游戏,所以游戏中,按键时滚动条必须锁定,而结束游戏后需要解锁。

那么就先来说说第一点,比较容易,给document添加onkeydown事件,通过event.keyCode来判断是哪些按键被按下,然后执行相应的操作。 继续阅读

Javascript浅尝:贪吃蛇,好不好玩吖~

开 始 游 戏

提示: 游戏中按 [空格键] 暂停


重 新 开 始
结 束 游 戏

按方向键开始移动…

得分: 0

Javascript的贪吃蛇终于写完了,后面再放出教程!最好使用Chrom来玩~

源码放在了github上,这里直达:github.com/Strangeen/JS_Snake