framework JavaScript 工具库 underscore.js Way.js – 双向数据绑定库 Keys.js – 应用快捷键 3....formvalidator.js Fort.js – 表单填写进度提示 10.2 相关 Chosen Select2 bootstrap-select 10.3 单选框/复选框相关...intro-to-d3 – a D3.js tutorial 12. 日期格式化 Moment.js Smart Time Ago – 显示相对时间 13....– 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件 13.19 滚动条 jScrollPane...文档/表格 handsontable – 在线可编辑excel表格 jQuery Bootgrid – 用于ajax生成动态表格 DataTables – Table plug-in for jQuery
，按钮等表单元素的美化 select2 多选下拉框 DropKick 下拉框，单，多选。...但貌似只能在弹出层中显示，而没有下拉这种方式显示。 zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。...iscroll 在移动设备上用不错 表格组件 datatables 表格可交互（对内容进行排序，删除等） backgrid 各种功能，带分页，可编辑表格内容。很棒。...html5media 简单的h5player，轻量级 jplayer 功能强太，可换肤 展示 Impress.js 各种旋转，和奇特的体验 fullPage 全屏显示。...transit 对元素进行css的变换 视觉差插件 scrollorama 比较简单 superscrollorama 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。
蛮符合我们的要求的 但是里面只有一行内容，我们需要在里面放一个类似表格的输入框，所以继续找到如下表格 ? 表格形式 通过组合之后就符合我们的要求了。 大概展示的效果如下： ?...里面使用style="width: 30%; border-radius:5px;"来调整输入框的大小为30%，输入框是圆角的。之前的直角太硬了，看上去很不舒服。...，当box-header with-border的时候会自动显示，这个当然是通过测试发现的，测试方法可以看如下动图，分别是点击小图标后的显示与隐藏导致的class变化 感兴趣可以通过查看监听点击操作查看...JS干了什么事情 ?...请求头部 请求头部部分增加了+和-的操作，可以按照需要进行新增键值对，不过JS部分代码还没写，所以这两个只是个简单的图标而已 ?
在上篇《基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用》介绍了数据的分页处理，使用了Bootstrap Paginator插件，另外对树形列表，采用了...1、Select2控件介绍 这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:https://select2.github.io/，具体的使用案例，可以参考地址...但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。 ? 3）树形列表的下拉列表 有时候，我们的一些数据可能有层次关系的，如所属机构、上层列表等等。 ? ?...2、Select2控件的实际使用代码分析 1）基础界面代码及操作 使用select2控件，一般是在常规的select控件上，设置一下即可（设置它的class为select2）。...4）select2控件的赋值处理 上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments...jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 二 什么是jQuery对象？ ...-- // 点击增加以及事件都能使用...*111); $('ul').append($ele); }); --> 5 动画效果 5.1：显示隐藏... start 5.5 插件
jQuery 是一个兼容多浏览器的 Javascript 库，核心理念是 write less，do more（写得更少，做得更多） 2、jQuery 版本介绍 jQuery1.x：经典版本，兼容 IE6...4、jQuery文件介绍 jQuery1.x.js：jQuery 源文件；学习 jQuery 或者 debug 的时候使用。...jQuery1.x.min.js：jQuery 压缩之后的文件；正常项目中使用 二、jQuery引入和初体验 1、拷贝 jQuery 文件到项目中 把 jQuery-1.11 文件夹拷贝到项目的 webapp...">script> // 使用原生JS /* window.onload = function () {...}else { // 当隐藏, 改成显示 div.innerHTML = temp; } }
一、介绍 从项目名称就可以知道，这是一款 Bootstrap 的表格插件。...该库还有很多好玩的功能等着大家去发现，正所谓师父领进门修行靠个人～ 3.2 拆解讲解 下面对关键点进行阐述，为了更方便使用的小伙伴清楚插件的用法。 3.2.1 初始化部分 选择需要初始化表格。...此按钮将所选行的内容复制到剪贴板 copyWithHidden: true, //设置 true 为使用隐藏列进行复制 copyDelimiter: ', ', //复制时，...，可以使用 HelloGitHub 推荐的这款插件。...你会发现网页制作表格还可以如此快捷，期待小伙伴挖掘出更加有意思的功能哦。 注：上面 js 部分并没有采用函数形式，建议在使用熟悉之后还是采用函数形式，这样也方便复用及让代码看起来更加规范。
关键字：Java 基于SSM框架的权限管理系统 基于 Spring Cloud Hoxton 、Spring Boot 2.2、 OAuth2 的RBAC权限管理系统 基于数据驱动视图的理念封装 element-ui...，即使没有 vue 的使用经验也能快速上手 提供对常见容器化支持 Docker、Kubernetes、Rancher2 支持 提供 lambda 、stream api 、webflux 的生产实践 技术方案...框架：Mybatis 缓存框架：Ehcache 安全框架：Shiro 模板框架：thymeleaf（支持freemarker、jsp等其他自定义视图） 主页框架：adminLTE(Bootstrap) JS...框架：vue.js 表格插件：bootstrap-table(扩展分页跳转) 树形表格：tree-grid(基于bootstrap扩展) 树形插件：ztree 弹窗组件：layer 日期组件：laydate...下拉选择组件：select2 开关组件：switchery 富文本组件：wangEditor 表单校验：validator 后端校验：fluent-validator 接口管理：swagger-ui
1.使用JS完成表单校验 分析思路 1.确定使用事件onsubmit事件 2.书写函数 3.对输入项进行非空判断 为表单绑定一个事件 <form action="#" method...display:none 隐藏;display:block 显示 3.获取元素对象document.getElementById Html部分代码： <img src="...../清除<em>隐藏</em>图片的定时操作 clearInterval(time); } 4.<em>JS</em>中事件 5.<em>使用</em><em>JS</em>完成<em>表格</em>的一个隔行换色 技术分析 新标签的学习 <...onchange:当用户改变内容的时候<em>使用</em>这个事件(二级联动) 7.<em>使用</em><em>JS</em>完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick)，事件绑定到编号前面的<em>复选框</em>里面 获取编号前面的<em>复选框</em>的状态...checkOnes[i].checked=false; } } } 8.<em>使用</em><em>JS</em>完成省市二级联动 技术分析 事件(onchange) <em>使用</em>一个二维数组来存储省份和城市
用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。...一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上 最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用...比如：清除功能allowClear: true 最新版本请使用标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select） 二.placeholder...theme: “classic” Select2控件介绍 这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:https://select2.github.io...4）select2控件的赋值处理 上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。
在各种Web开发过程中，对话框和提示框的处理是很常见的一种界面处理技术，用得好，可以给用户很好的页面体验，Bootstrap开发也一样，我们往往在页面新增、编辑、查看详细等界面使用弹出对话框层的方式进行显示数据...Bootbox.js是一个小的JavaScript库，它帮助您在使用bootstrap框架的时候快速的创建一个对话框，也可以帮您创建，管理或删除任何所需的DOM元素或js事件处理程序。...bootbox.js使用三方法设计模仿他们的本地JavaScript一些方法。...那么这里我们就来介绍下jNotify插件和toastr插件了。 1）jNotify提示框的使用 jNotify提示框，一款优秀的jQuery结果提示框插件。...插件地址是：http://codeseven.github.io/toastr/ 它可以分别创建如下几种效果：警告、危险、成功、提示的对话框信息，效果如下所示。 ? 它的使用JS代码如下所示。
28日为系统升级日，分享更多好用等模版与插件； 文档丰富：为了让用户更快速的使用这套系统进行开发，铭飞团队持续更新开发相关文档，如标签文档、使用文档、视频教程等； 面向对象 企 业：帮助创立初期的公司或团队快速搭建产品的技术平台...zh-CN jQuery 函式库 http://jquery.com/ Bootstrap 前端框架 http://getbootstrap.com/ Bootstrap-table Bootstrap数据表格...https://github.com/fians/Waves/ zTree 树插件 http://www.treejs.cn/v3/ Select2 选择框插件 https://github.com/...select2/select2 Vue MVVM框架 https://cn.vuejs.org/ AmazeUI 移动端UI http://amazeui.org/ Plupload 上传控件 http...freemarker 模板引擎 http://freemarker.foofun.cn/toc.html validator 验证库 https://github.com/chriso/validator.js
关键字：Java 基于SSM框架的权限管理系统，支持操作权限，后端采用Spring、SpringMVC、Mybatis、Shiro，前端采用adminLTE、vue.js、bootstrap-table...框架：Mybatis 缓存框架：Ehcache 安全框架：Shiro 模板框架：thymeleaf（支持freemarker、jsp等其他自定义视图） 主页框架：adminLTE(Bootstrap) JS...框架：vue.js 表格插件：bootstrap-table(扩展分页跳转) 树形表格：tree-grid(基于bootstrap扩展) 树形插件：ztree 弹窗组件：layer 日期组件：laydate...下拉选择组件：select2 开关组件：switchery 富文本组件：wangEditor 表单校验：validator 后端校验：fluent-validator 接口管理：swagger-ui...项目结构 dp-security：父级（聚合）模块 dp-common：公共通用模块 dp-shiro：权限模块（操作权限） dp-orm：数据持久模块 dp-quartz：定时任务模块 dp-web：
表格行标记 表格行标记以开头，一组标记表示表格的一行。 标记要嵌套在标记中使用，该标记也具有align,background等属性。...例如，标记的name属性值为Map，该URI为#Map alt 用于指定当图片无法显示时显示的文字，只有当type属性为image时才有效 name 用于指定输入字段的名称 value 用于指定输入字段默认的数据值...当type属性为button、reset和submit时，指定的是按钮上的显示文字；当type属性为checkbox和radio时，指定的是数据项选定时的值 type属性是标记中非常重要的内容，决定输入数据的类型...checkbox 复选框 image 图像域 例：创建一个index.html的文件，在该文件的标记中添加一个表单，并且在该表单中应用标记中添加文本框、密码域、单选选项、复选框、文本域、隐藏域、提交按钮...cols 用于指定多行文本框显示的列数（宽度） rows 用于指定多行文本框显示的行数（高度） disabled 用于指定当前多行文本框不可使用（变为灰色） readonly 用于指定多行文本框为只读
1、使用插件，首先要引入别人的插件了，你可以选择离线（无网络）或者在线引用的（如果有网络）。.../plugins/select2/js/select2.js"> 2、先将弹出框做出来，你可以模拟数据或者从后台将数据查询出来，进行操作。 1 <!...弹出框里面的数据，我是从后台查询出来的，放到select选择框里面的，你可以根据自己的需求来做哦。 ? 3、初始化select2。...更多其他的功能可以根据自己的需求进行开发河使用。...4、模拟的使用select2插件进行下拉框来进行自动补全。
开发时使用的idea工具，大家按照如下步骤进行操作就可以了。...模块化开发封装常用开发组件 一个轻量级的Java快速开发框架 友好的代码结构及注释 前后端开发封装 支持通过velocity模板生成部分代码 基于角色的权限管理 基于Maven模块化开发 封装常用开发组件 使用方法...如何启动通过git下载源码创建数据库，数据库编码为UTF-8IDEA、Eclipse导入项目启动类启动项目项目访问路径：http://localhost:8080/账号密码：admin/admin...通过git下载源码 创建数据库，数据库编码为UTF-8 IDEA、Eclipse导入项目 启动类启动项目 项目访问路径：http://localhost:8080/ 账号密码：admin/admin 创建工程...框架：vue.js 表格插件：bootstrap-table 树形表格：tree-grid 树形插件：ztree 弹窗组件：layer 日期组件：laydate 下拉选择组件：select2 开关组件：
一、使用 JS 完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样 会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台...); 3.步骤分析 第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值) 第二步：确定事件(onload)并为其绑定一个函数 第三步：书写这个函数(设置一个显示图片的定时操作...(该对象开发中不怎么常用) ** Screen 对象** Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用) 五 、使用 JS 完成注册页面表单校验 JS的事件 ?...JS完成表格的一个隔行换色 1.需求分析 我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息，显示效果如下： 2.技术分析 新标签的学习 </th...onchange:当用户改变内容的时候使用这个事件(二级联动) 七、使用JS完成全选和选不选操作 1.需求分析 我们希望在后台系统实现一个批量删除的操作(全选所有的复选框) 2.技术分析 确定事件(鼠标单击事件
JQuery 高级 一、动画 1、三种默认方式显示和隐藏元素 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) toggle([speed,...，3秒后，自动显示广告 广告显示5秒后，自动消失 （2）分析 使用定时器来完成。...setTimeout（执行一次定时器） 分析发现JQuery的显示和隐藏动画效果其实就是控制display属性值 使用 show/hide方法来完成广告的显示 （3）代码实现 <!...1、$.fn.extend(object) 增强通过Jquery获取的对象的功能，属于对象级别的插件，例如：$("#id") 我们用一个案例来展示一下插件的使用。如下案例所示： //使用jQuery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框 //1.定义jQuery的对象插件
需要引用个插件 在页面上首先定义一个表 至于样式那些随自己喜欢设置。 在全局变量中先声明这张表和表格的变量。...Elem表格ID，url请求数据的链接，cols表头，page就是数据多的时候进行一个分页，data加载本地数据。 表头里的内容怎么理解呢？...有个复选框上面没有，{ type: “checkbox”, fixed: “left” }，checkbox(复选按钮),left(将按钮固定在左边) { type: “numbers”, title...Hide隐藏的意思，因为这个是主键ID，在表格的增删查改的时候需要用到，一般主键ID都是设置为隐藏，这个不需要显示给用户看的。...有很多人在表格的增删查改遇到什么ID找不到，可能就是这个主键ID可能没设置，因为一般的人看到想要实现后的表格上根本就不需要这个ID，就没把这个主键ID放在这里，不需要可以将它隐藏，但一定要在表头这里放入主键
參数 属性名 类型 描写叙述 type string JS插件类型定义假设有多个以逗号隔开 1.3....JS插件类型 插件名 描写叙述 Jquery 引入版本号jquery-1.8.3 Easyui 引入版本号jquery.easyui.1.3.1及自己定义扩展JS DatePicker 引入版本号My97DatePicker4.8...Beta2 Jqueryui 引入版本号jquery-ui-1.9.2 prohibit 经常使用浏览器操作JS函数如禁用右键菜单，禁用回退。...或者说主键字段 否 null width num 表格宽度 否 auto height num 表格高度 否 auto checkbox boolean 是否显示复选框 否 false fit boolean...boolean 是否显示分页文本内容 否 true style string 插件类型有easyui和datatable2种 否 easyui pageSize num 每页显示的记录数 否 10
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
