前端各种小案例,欢迎体验使用
A human being,who loves football and music.
bootstrap-switch实现的滑块开关。
- Include the dependencies: jQuery, Bootstrap and Bootstrap Switch CSS + Javascript:
<link href="bootstrap.css" rel="stylesheet"> <link href="bootstrap-switch.css" rel="stylesheet"> <script src="jquery.js"></script> <script src="bootstrap-switch.js"></script>- add your checkbox:
<input type="checkbox" name="my-checkbox" checked>- Initialize Bootstrap Switch on it:
$("[name='my-checkbox']").bootstrapSwitch();更多使用方法请转到:官方
bootstrap-select实现的demo。
如果动态加载的话,需要手动调用$('#select').selectpicker('refresh');
更多使用方法请转到:官方例子
In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
数据可视化模板,主要利用ECharts实现,另外还可以通过第三方服务来快速实现,如阿里云DataV、腾讯云图、百度Sugar等。本模块包含22个案例。
jquery.searchableSelect实现的下拉搜索组件,修复了change事件:
selectItem: function(item){ if(this.hasCurrentSelectedItem()) this.currentSelectedItem.removeClass('selected'); this.currentSelectedItem = item; item.addClass('selected'); this.hoverItem(item); this.holder.text(item.text()); var value = item.data('value'); this.holder.data('value', value); this.element.val(value); this.element.trigger('change'); if(this.options.afterSelectItem){ this.options.afterSelectItem.apply(this); } } 在源代码的基础上添加了绑定事件,触发change事件
this.element.trigger('change'); 动态绑定,手动刷新
$('#select').selectpicker('refresh')
success: function (result) { var data = eval(result); for (let i = 0; i < data.length ; i++) { var system = $('#system'); $("#select").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>"); } $('#select').selectpicker('refresh'); }漂亮优雅的Bootstrap侧边栏导航
动态表格合并案例
JQueryPrint,web页面打印
nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。
官网地址:http://www.areaaperta.com/nicescroll/
GitHub地址:https://github.com/inuyaksa/jquery.nicescroll
A general-purpose, web standards-based platform for parsing and rendering PDFs.
GitHub地址:https://github.com/mozilla/pdf.js
PDF.js默认情况下不可以打开本地PDF文件(发布后可以打开服务器文件)
PDF.js不可以跨域浏览PDF,特别注意
使用方法可以在viewer.html后面跟上要打开的文件路径或者PDF文件请求地址即可。
尽量使用静态页面,可以执行js,但是不能动态生成dom树
后端接入案例,使用SpringBoot和thymeleaf,欢迎关注,
Released under the MIT License.