随笔分类 - 插件使用
1
摘要：fullcalendar 是一个很优秀的日历插件。qTip2 是一个强大的提示工具。在讲下面的功能之前，需要对fullcalendar 和 qTip2 有些了解，可直接点击下面贴出的2个地址： fullcalendar qTip2 我现在需要实现的功能就是鼠标放到事件上去，展示事件详情，我们可以借助
阅读全文
摘要：项目中需要做个打卡的模块。里面有个模块需要返回当前这个星期从星期日到星期六的日期，如下图： 我是通过 moment.js 的 moment().day() 实现这个效果的，它的说明如下图： 关于这个插件，更多其它方法可以看它的官网。 解决方案的js核心代码如下： html代码截图如下：
阅读全文
摘要：wxParse是一个微信小程序富文本解析组件。现在小程序里面自带了一个<rich-text>组件也能解析富文本，但是表现不尽人意。所以我还是采用的wxParse来解析富文本的。 wxParse git地址：https://github.com/icindy/wxParse。可以先稍作了解。下面具体讲
阅读全文
摘要：在Bootstarp 中我们可以使用 popover 插件做一些内容的展示， 代码如下： 这样子写的话，如果父级有overflow:hidden属性，你会发现超出容器的部分会显示不出。 如何解决呢？ 我们只要在上面代码中添加一个属性：data-container="body" 即可。效果如下图： 官
阅读全文
摘要：使用百度Ueditor插入图片的时候，如果图片大于你的编辑框宽度，下面会出现滚动条，如下图： 我们如何设置它的最大宽度为100%呢？ 找到ueditor\ueditor.config.js，修改它的initialStyle,添加img{max-width:100%}就可以了，修改结果如下图：
阅读全文
摘要：bootstrap-slider例子地址：https://seiyria.com/bootstrap-slider/ bootstrap-slider github地址：https://github.com/seiyria/bootstrap-slider 这个插件的使用方法并不难，我们可以在它的例
阅读全文
摘要：最近在整个移动端富文本编辑器。写完后，在安卓端表现良好，在苹果端测试让我直吐血。开始在网上找了一圈，也没发现自己中意的那款。 今天无意中发现了FroalaEditor，经过在移动端测试一番，表现的好的不要不要的。只是如果你需要用在商业项目中，需要购买它的版权。 所以你可以把它单纯的作为自己的一个学习
阅读全文
摘要：我们经常能够看到在图片轮播中，穿插着视频的播放，如下图为淘宝的一个产品轮播图，放个视频能够让顾客对产品有个更全面的认识。 我们可以用swiper实现这个功能。用法就跟放图片一样，只是这里把图片换成视频就可以了。 只是如果放的是视频的话，就有一个问题，就是我们怎么在滑动结束的时候，自动停止播放上一个视
阅读全文
摘要：之前说过 DataTables 表格固定栏使用方法 。分析下它的代码，如下图 它实现固定左侧的原理就是把需要固定的数据复制一份，覆盖在全部数据的上面，用绝对定位固定在左边。 这样子有个问题就是，表格的伪类如果单纯用css是实现不了的。因为它实际上是2个部分。如果我们要实现这个效果，只能通过js代码来
阅读全文
摘要：项目中需要做一个相册功能。选择的是fancybox，大概记录一下使用方法： 1.引用fancybox所需要的文件，你可以下载至本地或者引用CDN。 fancybox最新版本下载地址：http://fancyapps.com/fancybox/3/ CDN引用地址： 2.编写相册所需的HMTL代码：
阅读全文
摘要：daterangepicker 是一个时间段选择插件。官网地址：http://www.daterangepicker.com/ 项目中需要实现如下图的效果： 1.引入该插件所需要的JS 和 CSS ,该项目是以bootstrap为基础开发的，所以同时也要引用bootstrap相关的文件。 文件目录结
阅读全文
摘要：1. 关于打印，浏览器有自带的打印方法，但是有个问题就是它只能打印整个页面。如果需要打印局部会比较麻烦。具体实现方法可以看下面代码： 在HTML 页面中，我们需要在打印的区域加个开始与结束的标识符。如下图所示： 2. 用 printThis插件 实现局部打印。 使用方法如下： 1.引用该 JS，具体
阅读全文
摘要：Framework 7 里面的日历插件默认的2种模式： 1.文本框 2.直接展示 如下图： 更多例子点这里 而我的需求如下图： 点击小图标再弹出日历，选择某个日期，隐藏日历弹层。 实现步骤： 1.写小图标的HTML: 2.写浮动的HTML: 这里设置 z-index:13500 是为了让它显示在后面
阅读全文
摘要：有时候数据过多，为了用户体验，需要将重要的栏目固定不动，如下图所示： 从上图我们可以看出，表格滚动的时候，左边5栏是不动的。现在说一下实现方法： 插件地址： https://datatables.net/ 使用方法： 更多左右2边固定例子可访问：https://datatables.net/exte
阅读全文
摘要：Quill 是一个轻量级的富文本编辑器。最近公司项目中需要用到这个东东。使用方法可以直接查看它的官网地址或者Github地址： Github地址：quilljs 官网地址：quill官网 主要说一下用的时候遇到的问题： 先来个效果图： 遇到的主要问题： 获取不到输入框的焦点，颜色选择器、字体大小下拉
阅读全文
摘要：之前写过一篇关于 html2canvas如何在元素隐藏的情况下生成截图 的文章，后面发现还有个坑在等着我，就是如果合成图片太大，超出了浏览器的可视区域，那么超出部分是无法截图的。在网上找到了以下方法，亲测有效~ 源码： 如下图： 修改为（红色为改动部分）： 如下图： 调用： 方法已介绍完毕~特别感谢
阅读全文
摘要：html2canvas官网地址：http://html2canvas.hertzen.com/ github地址：https://github.com/niklasvh/html2canvas/ 从官网可以看出它的使用方法很容易： 项目中的需求是需要将2张图片（1背景图+2生成的二维码）和1段文字（
阅读全文
摘要：今天在使用swiper的时候，元素默认是显示的时候没毛病，但是默认是隐藏的状态，再显示的时候发现滑动的时候宽度计算有误，如下图所示： 正确的显示如下： 隐藏的元素再次显示如下： 宽度计算有误 解决方案： 只需加上后面两行即可。 参数具体含义可看官网说明：http://www.swiper.com.c
阅读全文
摘要：近日，在做项目中，需要做到滚动条滑到某个位置时，才能显示动画，网上查询到有个wow.js可以达到要求，现在把使用方法做如下总结： wow.js演示地址 wow.js的github地址 使用方法真是超简单~~ 需要配合Animated.css使用 方法如下： 1.引用wow.js或者wow.min.j
阅读全文
摘要：本文根据retinajs的官网翻译，如果有翻译错的地方，还请朋友指正。谢谢。 现在有4种方式： 1.自动交换“img”标签的"src"路径。 2.在内联样式中自动交换背景图像的网址。 3.手动指定一个高分辨率的图像不同位置。 4.自动创建CSS背景图像媒体查询。 通常，在你的页面上引用一个图像，看起
阅读全文
1
