ztree的最新实现
1.基本介绍 树形结构菜单的功能属于非常常见的一种菜单交互，本人先后也使用过多种树形结构的插件，有 ztree、xloadtree、treeview、datagrid-tree 等等等等。近期有个功能恰好又要使用tree菜单了，由于可自行选择使用的组件，所以略加思索的就选择了ztree，第一因为它的功能和特性确实较为丰富，第二因为使用过它很多次了。 距离上次使用ztree的功能已经有许多年了，现在再来看它的效果，总是感觉菜单之间的间距比较的小，所以本次分享一下将它的间距给调大一些，同时也稍微的做一个功能稍微全面的简单示例，先看下间距改造后的示例图如下： （改造前后对比） 2.示例分享 本次示例的分享主要是包含两个例子，节点间距和树的操作两部分，前者主要是通过增加一些css样式的形式将节点间的间距调大，使得看上去更加美观；后者是近期使用到的一些交互性的功能实现，分为：全选/取消、反选、展开、...
文章分类：前端技术 jQuery
tree菜单jquery右键菜单插件
背景介绍 关于右键菜单的交互一般还真使用的不多，不过在某些适合用起来感觉还挺好。在一个项目中前端框架使用到了Bootstrap、Bootstrap-Table和jQuery，于是围绕着这三个框架展开了一些找寻，主要是想给Bootstrap-Table表格增加右键菜单，找了一些Bootstrap和jQuery的插件，实际情况是表格的主列表使用的是Bootstrap-Table插件，插件本身不支持右键菜单，作者以为“网页上右键比较少用吧，或者你可以找找有没有相关的插件，可以对其扩展”，所以推荐的扩展实现有“https://github.com/prograhammer/bootstrap-table-contextmenu”、“https://github.com/sydcanem/bootstrap-contextmenu”、“https://github.com/dgoguerra/boo...
文章分类：前端技术 jQuery
jquery表格合并插件
前一段时间需要使用单元格合并，网上查了N下，找到了一个jquery实现的合并单元格插件，比较简单，其中在项目里面使用到了纵向合并单元格的功能（横向没有用到，故不敢保证一定没问题），参考代码如下： 横向合并 //函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 function _w_table_rowspan(_w_table_id, _w_table_colnum) { _w_table_firsttd = ""; _w_table_currentt...
文章分类：前端技术 jQuery
我理解的jquery.ajax请求的loading处理方式
背景介绍 满项目中到处都飘着ajax请求，基本上这几年所有的项目当中都如此，特别是前端使用某个富客户端js框架，传统的form表单提交请求的方式已经很少见了，反正我现在是这种情况，就谈一谈对在jquery中ajax请求的一个通用loading效果的处理吧。 先简单说一下适合做loading效果的jquery插件吧，主要有弹出框和弹出层两种方式，以jquery.block插件为例吧。 假设打开loading和关闭loading的函数为： function showLoading() { $.blockUI({ message : "<font size='3'>操作执行中...请稍后</font>", css : { border : "none", padding : "15px", "-webkit-border-radius" :...
文章分类：前端技术 jQuery
写了个jquery.numberbox插件
easyui的某些组件还是比较不错的，比如说easyui-numberbox组件吧，使用它的时候拿来就用，发现在使用的时候，由于它只允许输入数字，即其他字符根本无法输入，而不是那种输入后一眼就看到被清空的效果，可能我个人比较洁癖吧，不做就不做，做了就必须做到自己认为是最好的一种实现方案。至于easyui的具体实现效果可自行去官网demo中查看其例子，这里不多赘述。 这种简单效果，真想具体实现的时候，发现好像不是那么好做的，但是总感觉不难的样子，看了下easyui的numberbox组件代码，发现没有什么帮助性的效果，于是就自己琢磨呀琢磨。琢磨出了两种可以实现的方案： 第一种实现方案： 将input type="text" 设置成readonly只读的，然后根据onkeyup事件来判断当前点击的键盘按钮是否为数字，如果为数字则讲此值设置为此文本框的value，每次键盘按下时同样做此追加的动作...
文章分类：前端技术 jQuery
按需改造jquery.flexigrid插件的小部分
标题党，改造了此插件的部分， 最近参与接入的一个widget系统的点点功能，需要将本系统的数据迁移到widget系统中做显示，主要是生成一些数据表格，同事建议使用轻量级的jquery.fiexigrid插件，好，用就用，此为背景，下面说一下遇到的相关问题以及这个插件的修改。 1、跨域请求，解决此插件支持jsonp的请求协议 此插件在使用时，通过其dataType属性来定义请求回执的数据类型，将其修改为如下所示： 1）找到flexigrid.js的401行处修改 if (p.dataType == 'json' || p.dataType == 'jsonp') { //..... } 2）找到flexigrid.js的438行处修改 修改方法同上 2、添加全选checkbox列，解决数据全选问题 添加这个功能需要解决的问题至少有2个，问题分别是： A、先在标题栏添加 <input type...
文章分类：前端技术 jQuery
jQuery插件—ajax提交form
有可能有别的插件，也有可能有别的办法实现ajax提交form表单，先看下例子运行截图，如果觉得有兴趣的话再往下看吧。 说明：上图为清晰的看到提交成功前的loading...状态，特地将线程沉睡3秒钟的效果，等效代码为：Thread.sleep(3000L); 运行效果图.gif 注意上图大小为2.8M，为了节省流量，可以另存到本地去打开下载看看。 ajax提交form表单数据，页面无刷新，提交form主要用到了jquery.form插件，弹出框口主要用到了lhgdialog插件，本例子实现的时候很简单，就是讲这两个的用法合并了，自己用jquery插件的形式封装了一下调用方式，使之适用更加简单方便，扩展性更强，所在JS文件jqform.dialog.js内容代码为： 顺便说一句：关于jquery.form和lhgdialog的插件网上资料很多。值得去研究研究，jquery.form还支持附带...
文章分类：前端技术 jQuery
jQuery表格隔行换色插件
1、先从www.jquery.com官网上下载jquery.js文件 2、插件模板 3、根据插件模块，往里面添加数据，详细实现代码如下： 4、调用的html代码实现为： 5、运行截图为： 注意 1、jQuey 的even表示奇数行执行的函数，odd表示偶数行执行的函数，hover(over, out)函数两个参数，一个表示onmouseover，另外一个表示onmouseout函数，参数可以传递function类型对象。 2、js的函数实现的时候，可以通过$(".simpleTableUI tr")获取所有的tr对象，然后再用$(this).each函数来循环，根据下标来对2取模，然后调用hover函数也可实现。 3、通常我们的表格第一行表示标题栏，所以这一行有可能不需要在隔行换色的行列中，还有一种情况，假设我的第一个行标题有单元和纵向合并，此时我们的class=“simpleTableU...
文章分类：前端技术 jQuery
写了一款简单的jquery.combobox插件
jQuery这个框架使用好多年了，有许许多多的插件支持，今天想说一下它的插件开发，在2010-2011年左右吧，看了博客园的jQuery专题的一些文章，才开始对它的插件开发有了一毛钱的理解，地址为：https://kb.cnblogs.com/zt/jquery/。到今天为止也写过一些小插件（代码量很少、功能实现很简单），然而更多的是去使用别人写的插件，然而有的插件的api使用起来真的很方便，停留在我的认知里也就是两种，一种是存在于$级别的调用；另外一种则是基于$("xxx")选择器的调用，实现参考下列另种方式（也是它的文档中提供的实例）： 基于$的实现 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery...
文章分类：前端技术 jQuery
运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：