挑选了10款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的。这些优秀的 jQuery 插件能为你的网站提供各种各样强大的功能和效果。
1.Dynatable
Dynatable 这款 jQuery 插件能很好的改善标准 HTML 列表的可用性。一旦初始化,插件就会通过列表的行和列转换成 JSON 对象数组,时刻准备操作。它可以提供强大的排序,过滤,分页或者是搜索 API,同时可以用简单的方式处理所有操作,可以被用于其他架构的 HTML 元素。
2. Least.js
Least.js 用于创建随机响应式的 HTML5 和 CSS3 图像库,包括 Lazyload。它非常容易安装和使用,而且最终效果都是非常华美和漂亮。
3 AudioPlayer.js
AudioPlayer.js 是可以在任何 web 页面快速放置 HTML5 驱动的 jQuery 音频播放器插件。这款插件的界面非常别致(不使用任何图片),有个响应式的布局,支持触摸。它有着主要的控制功能(播放,暂停,音量和播放时间);大小只有 4 kb。
4. Echo.js
Echo 是个独立的 JavaScript 延迟加载图像工具。Echo 使用 HTML5 data-* 属性,速度非常的快。Echo 可以在 IE8+ 的浏览器运行, 它是非常简单的图像延迟加载工具,大小最小为 1KB ,是个 library agnostic(没有 jQuery/Zepto/other)
Lazy-loading 只会在元素将要被查看时才会请求从服务器中加载图像,通过简单的修改图像 src 属性就可以自动运行。同时这也是异步操作的一个优势所在。
5. Slippery
Slippry 是个 jQuery 图像库插件,拥有很多现代化时尚元素。首先,它使用 HTML5 & CSS3 标记,在响应式布局(可选)上运行的非常好。它可以变成 Sass 或者是 CSS 样式,有多种转换选择,其中包括 Ken Burns 效果。
滑块可以设置为自动滑动,显示标题,后退-前进+导航控制。它提供重大事件函数的回调,多个示例和一个详细文档。
6. AudioPlayer.js
AudioPlayer.js 是可以在任何 web 页面快速放置 HTML5 驱动的 jQuery 音频播放器插件。这款插件的界面非常别致(不使用任何图片),有个响应式的布局,支持触摸。它有着主要的控制功能(播放,暂停,音量和播放时间);大小只有 4 kb。
7. HTML5 Sortable
HTML5 Sortable 是个创建可排序列表和网格的 jQuery 插件,使用本地 HTML5 拖拽 API。它有类似 jQuery UI 的 API + 行为。这是个轻量级插件(压缩后小于 1kb),支持 “连接列表(在不同列表转移条目)”,最厉害的是兼容所有主流浏览器。
8. Droparea
Droparea 是个 HTML5 拖拽文件上传 jQuery 插件,服务端包含一个 PHP 脚本。简单的拖拽图片文件进去指定的区域,图片就会自动的上传到你的服务器。在上传的同时,用户可以看到上传的进度。目前测试结果支持 Google Chrome 和 Mozilla Firefox。
9 jQuery.HTML5Form
jQuery.Html5form 是个 jQuery 插件,添加没有 HTML5 表格验证功能到非兼容的浏览器中,不要求任何自定义函数或者代码。用户只要用 HTML5 语法创建表格,它就会自动执行。同时,这个插件还提供额外的一些功能,比如错误信息提示等错误处理方案,用户可以自行选择自己需要的。
10. Cuepoint JS
Cuepoint JS 是一个为 HTML5 视频增加提示点和字幕的插件,几秒就显示一组字幕。它提供一个设置时间的事件,可以用来附加任何元素跳到多媒体第二个提示点。
上面的内容有某有帮到你呢,欢迎在底部留言点评提意见。
preadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能、跨平台、与 Excel 高度兼容"的产品特性,可为用户提供高度类似 Excel 的功能,满足 Web Excel组件开发、 表格文档协同编辑、 数据填报、 类Excel报表设计等业务场景需求,极大的降低企业的研发成本和项目交付风险。
日前,SpreadJS 正式发布V14.0版本。从该版本开始,SpreadJS加入了数据透视表插件,进一步降低企业数据分析的门槛,提升系统数据处理的能力。
此外,SpreadJS 还在 V14.0中发布了在线表格编辑器(控件版),作为 SpreadJS 的增强扩展插件,新的编辑器提供了更易嵌入、秒级加载、灵活定制的能力。在线表格编辑器(控件版)可与SpreadJS 集成,助力开发者在主流前端 JS 框架中,实现高性能的模板设计、在线编辑、填报和数据绑定等功能。
以下为SpreadJS V14.0 的新特性介绍:
作为一款功能布局与 Excel 高度类似的纯前端表格控件,SpreadJS不但兼容了450 种以上的 Excel 公式、32 种图表和 18 种迷你图,还在此版本中正式加入了数据透视表插件。
(SpreadJS的数据透视表插件)
如上图所示,V14.0中新发布的数据透视表插件已具备了 Excel 透视表的绝大部分功能,包括透视面板、透视表字段、筛选器、值字段设置、数据排序、分类汇总等。
通过50万行数据测试,SpreadJS 的数据透视表仍表现出极高的数据处理性能,所有操作在527毫秒内即可执行完毕。
在线表格编辑器作为 SpreadJS 的增强扩展插件,可轻松嵌入各类前端页面,内置开放的 API 和类 Excel 的 UI 设计元素,助力开发者在 Angular、Vue、React 等前端 JS 框架中,实现高性能的模板设计、在线编辑/填报和数据绑定等功能,并为最终用户带来高度类似 Excel 的使用体验。
在线表格编辑器(控件版)以 Dom 作为容器,通过前端组件的形式发布,可以在本地下载试用,无任何功能限制。
在线表格编辑器(控件版)具备如下优势:
(组件化的设计架构,应用方式更灵活)
(不依赖任何第三方类库)
(体积不到 4 MB,秒级即可完成加载)
(用声明式语法代替 HTML 源代码,定制更容易)
SpreadJS在当前版本中支持了迭代计算,即可通过一个递推公式反复校正设定的初始近似值,直至达到预定精度要求为止,具体实现如下所示:
(SpreadJS的迭代计算功能)
(迭代计算的实例演示)
除了迭代计算,SpreadJS 还在当前版本中加入了XMatch & XLookup,以及LET函数
(SpreadJS 的 XMatch & XLookup函数)
(SpreadJS 的 LET函数)
在当前版本中,SpreadJS 不仅可直接在浏览器中完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印及预览操作,还加入了渐进加载、HTML 导出等更多新功能。
(SpreadJS 的 HTML 导出功能)
SpreadJS已支持单元格渐进填充效果,可实现多列选择、行列头支持公式函数以及迷你图等功能。
(SpreadJS 的渐进填充效果)
(SpreadJS 的行列头支持公式及迷你图)
SpreadJS在当前版本中新增了漏斗图类型,并支持图表模板填充、GapWidth & Overlap 调整、环形图的 holeSize 属性调整,以及图表轴交叉等新功能。
(SpreadJS 的漏斗图)
(SpreadJS 的图表模板填充效果)
(SpreadJS 的图表轴交叉功能)
(SpreadJS 的GapWidth & Overlap 调整效果)
(SpreadJS 的holeSize 属性调整效果)
以上就是纯前端表格控件SpreadJS V14.0的主要功能介绍,如需了解更多新版本信息,欢迎访问SpreadJS 的产品官网或点击下方“了解更多”。
003 年被称为中国协同办公的元年。因为"非典"的影响,各企事业单位要求在家办公,这直接催生了视频会议和互联网的发展,造就了互联网的黄金十年。
但当年的危机结束之后,协同办公 Saas 类软件产品并未迎来长远的发展,一方面是互联网技术的「不匹配」,另一方面就是当时国内 Saas 行业服务标准的缺失和相对过高的技术准入门槛。
此次"黑天鹅"事件的发生,让在线协同的办公市场再一次迎来发展的重要契机。尤其是表格类在线文档,因为企业对数据和流程的信息化需求日益提高,也让如微软 Office Online、Google 文档、石墨文档、腾讯文档等具备表格数据处理的协同办公平台迎来了一次集中爆发。
但在危机过后,目前用来"应急"的平台还能否满足企业的办公需求?全面复工复产后的「表格文档协同」,又需要具备哪些能力?
微软的 Office 套件作为「离线文档」的绝对霸主,为了抢占在线协同办公市场,很早就推出了自己的 Office Online 版本,但因为某些因素导致国内用户无法直接使用,再加上将产品转到线上后,并未针对在线「在线协同」进行功能上的迭代与调整,市场同类产品的蓬勃发展让微软的统治地位遭到了重大的挑战。
那么,市场对协同办公产品的核心需求到底是什么?我们对市面上的产品做了一个优劣势对比:
从表格中我们可以看到,在线文档系统和离线文档最大的异同,就是系统的集成能力和二次扩展性。
因为每个企业面对的场景不同,对于在线文档的需求也会存在差异。本次危机过后,企业和用户对文档协同工具的需求也从「好用」变成了「适用」,如何满足不同场景下的用户需求,是市场对 Saas 企业和系统供应商们提出的挑战。
说回这个表格,为什么在这份排名中,我们仍然将微软排在第一?原因就是微软办公套件这些年来的近乎垄断的市场份额以及庞大的人群基础,以 Excel 为例,它已经让大众培养出了一套近乎固定的使用习惯,这也让微软 Office Online 先天就更适合于用户对表格文档的体验。
结果不言而喻,在最受用户认可的在线文档(如石墨文档、腾讯文档等)当中,都具备了高度类似 Excel 的操作模式和功能。
因此,市场需要的是一款既能打破微软的技术壁垒,又能满足不同场景下的用户需求、具备市场竞争力的在线文档协同办公产品。
而这,其实并不难。
葡萄城开发的纯前端表格控件 SpreadJS ,就是一款在界面和功能上都与 Excel 高度类似的开发工具,可帮助 Saas 平台或企业自身在不依赖任何 Excel 组件的情况下,实现"用不到 100 行代码,将 Excel 的功能和使用体验完美嵌入到在线文档系统中。"
作为一家沉淀了三十年的企业,葡萄城以"赋能开发者"为使命,通过一系列开发工具、技术和服务,帮助开发者降本增效,助推企业信息化发展。凭借对 Excel 类工具的理解,致力于通过表格控件 SpreadJS 将 Excel 的能力和使用体验赋能于各类系统中,帮助企业做到从本地到线上数据迁移的快速转化。
SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 "高性能、跨平台、与 Excel 高度兼容"的产品特性,受到 Saas 企业和系统供应商们的推崇。
除了市面上流行的通用协同办公产品,SpreadJS 也可以为企业提供定制化的培训与咨询服务。
很多企业为了数据的安全性与私密性、内部权限管理的可控操作,都在尝试开发基于内部 OA 平台的表格协同工具。对一家企业来说,独立开发一款表格文档产品既耗时又费力,其次在内部推广也是一个很大的问题。因此,接入第三方平台工具无疑是最佳的解决方案。
为解决不同行业和企业的需求,SpreadJS 整合了表格文档协同产品最常应用的三大场景,并提出了不同的针对性解决方案。
应用场景一:线上协同
「表格文档协同」与传统表格工具最重要的区别,就是线上协同能力。既然是线上协同,就需要解决多人协作容易出现的问题,比如用户交互体验差、数据传输效率低导致的乱序和冲突问题。
在设计之初,SpreadJS 便考虑到了多人协作的可能性,其基于纯前端的体系架构可以很容易的嵌入系统开发,并以原生的方式嵌入各类应用,提高产品的使用性能。强大、高效的计算引擎也可为复杂公式增加算力,并最大化减少资源占用。
目前市面上的很多表格文档协同产品,都是基于 SpreadJS 进行的二次开发。
澳大利亚最大的协同办公产品 Confluence,目前在全球拥有 6 万多家企业用户。而 SpreadJS 作为 Confluence 系统的顶级商业组件提供商,为其提供了更加易用的电子表格应用体验与多人协作的能力。
国内的雷鸟 365 云端 office,虽然相对较为小众,但一直以高效、便捷受到用户的好评。这背后其实也是基于 SpreadJS 进行的二次开发。
应用场景二:数据填报
关于数据填报可以给大家分享一个小故事。华为使用的的内部表格文档协作工具,最开始的产品雏形是一名负责采购的员工研发出来的。
华为有一项业务是全球(基站)的规划勘察设计。该业务的特点就是数据量繁重且数据格式差异性很高,并且一份表格数据通常需要在多个业务部门之间进行协作沟通。为了解决这一问题,华为内部的一名员工自学了 SpreadJS 控件并搭建了一个表格文档协作平台。从最开始的部门内小范围使用,逐渐被其他部门纷纷借鉴使用,最终也让该产品得以进一步在华为内部扩散并与 SpreadJS 达成了官方层面的合作。
借助 SpreadJS 在线 Excel 的特性,华为将原先利用 Excel 文档作为填报入口的设计方案统一升级为数据填报平台,不仅解决了企业内部填报模板不统一、用料数据不一致、文件难以管理等问题,还保留了 Excel 的数据处理和分析能力,并将数据报告传输至后台,进行有效的管理和存储。
数据填报最大的难题就是表单设计布局的复杂和不一致性,而这正是 SpreadJS 的强项之一,可以将那些难以管理和效率低下的填报流程,变得高效且简单。
应用场景三:Excel 类报表设计
Excel 在企业运用当中的一个很重要的功能,就是报表设计。而 SpreadJS 除复刻了 Excel 强大的模板设计功能和交互体验外,还通过大量 API 额外增加了数据绑定、在线导入导出 Excel 的能力。
SpreadJS 既可以像网格一样使用,绑定整个工作表到数据源,也可以绑定独立的单元格以呈现用户所需要的样式。这在很多表格协同产品中是被忽略或者放弃的一项功能,但运用得当可以对表格的细节处理作出极大的提升。
为了满足不同行业与企业对数据报表的特殊需求,SpreadJS 还内置了很多可视化组件和形状支持,为前端界面添加更多细节展现和可视化效果。
比如电商交易平台就可以通过集成 SpreadJS 控件,打造一个方便的报表数据查看、编辑、导出在线 Excel 报表的 SaaS 平台。实现从本地到线上、从线上到线下数据迁移的便捷转化。
根据官网显示,目前 SpreadJS 组件已经服务过生产制造业、能源电力行业、金融财税、政府机构、大数据以及互联网行业等多个领域,包含广东发改委、大庆油田、招商银行、远光软件、华为、天弘基金、苏宁易购、中控集团、海信等都是其用户。
Excel 之所以能拥有如今的地位,一方面是其培养出的强用户习惯,另一方面就是具备强大的数据处理和分析能力。合理的调用 Excel 相关的公式函数,能让数据处理事半功倍,降低数据的增添删改操作难度,并且避免因人为计算出现的数据误差。
但前文我们也说到了,微软自身推出的 Excel Online 在协同办公产品中,之所以在「表格文档协同」领域并非最佳选择,原因是其系统集成能力和二次扩展能力略显不足,单纯的模仿是行不通的。而这些有待提高的部分,正是 SpreadJS 最大的产品优势之一。
首先,SpreadJS 的 Excel 兼容度和完善的数据可视化能力在业界是领先的。
SpreadJS 控件中表格的操作行为、逻辑与 Excel 是高度类似的,相同的外观、工具栏、对话框、右键菜单设置让用户没有使用门槛和学习成本,几乎兼容了 Excel 的所有功能。
而在数据可视化方面,SpreadJS 支持 53 项单元格格式、18 种条件格式、3 种数据高亮,43 种内置单元格样式、60 种表格样式,可于 Web 系统中轻松嵌入类 Excel 模块,实现如 Excel 般的数据分析和交互。
此外,为了进一步提高数据可视化能力,SpreadJS 还内置了 32 种常见的图表模型、182 种形状、18 种迷你图(Excel 2016 仅有 3 种)以及 7 种数据验证方式和 3 种高亮样式。除了这些内置功能,借助 SpreadJS 的 API,用户也可轻松实现自定义。
第二个比较亮眼也比较重要的核心功能就是 SpreadJS 的处理性能。
越来越多的企业为了提高内部信息化协同和企业数据管理水平,都开始尝试「工作流」的模式。而对于一个可能需要数据实时更新的协同表格文档来说,工具的处理性能是避免出现数据乱序和冲突的前提保障。
根据官网显示,SpreadJS 使用了比 DOM 更为先进的 HTML5 Canvas 绘制交互界面,提供了流程的交互体验;通过稀疏数组(Sparse Arrey)优化数据模型的保存和访问性能,配合内置自研的高效计算引擎,在不影响访问和使用性能的前提下,可以最大化的节省存储空间。
作为一款纯前端、跨平台的组件,SpreadJS 还兼容了几乎所有的主流前端开发框架 ,如 Angular、Vue、React、Breeze、Knockout 等,符合 UMD 规范,可根据场景按需加载。符合 HTML5 标准,SpreadJS 支持目前市面上所有的主流浏览器,在线即可完成 Excel、CSV、JSON 等文件的导入导出、PDF 导出、打印以及预览,并且无需任何后台代码或者第三方组件的支持。
根据企业实际的需要,SpreadJS 开放了数量庞大的 API,即可满足企业的定制化需求,还能帮助开发人员减轻重复编码和测试的工作。
在线协同办公可能并不像大家所说的,是一个风口,而是一个需要精耕细作才能创造出价值的行业。
眼下的在线协同办公领域,不论是成本方面的优势,从增量进入存量市场的竞争,还是劳动力成本的激增,再加上本次"黑天鹅"事件的不确定影响,这些外部的合力都使得中国企业的发展逐渐由粗放式发展进入精细化运营,从追求增长到追求效率演进。
而因为本次危机,也加快推进了企业的数字化转型,在线协同办公作为企业数字化的具象体现形式之一,绝对不会只是当前时期的一时风口,反而有极大的可能随着数字化的发展,引发出企业对新一轮商业模式的探索。
但对任何企业或组织而言,借助数字化转型提高效率都是一个长期的目标,这意味着协同办公工具承载的长期价值,也对协同办公产品提出了相对应的要求与挑战。
葡萄城从 1988 年进入中国市场,到 1993 年推出支持微软 Visual Basic 的控件产品,再到与微软展开持续深入的合作,应时而变推出前端开发工具和快速开发平台,打造出最完美复刻 Excel 的功能和使用体验并高度匹配在线办公场景需求的 SpreadJS 控件。
这其中的过程与经历,恐怕只有他们自己才知道。
但只有用数十年的时间打磨一款产品,才能感受到 Excel 公式对于用户提升效率的价值,从而不计成本的将 460+ 公式全部复刻到线上;才能体会到图表、图形对于数据可视化效果的提升,从而为用户提供更为丰富的使用样式、满足定制化的需求;只有追求极致的数据体验,才会将数据绑定做到单元格级别,提升表格的细节处理能力。
这些,是葡萄城通过 30 年服务客户之后对行业的理解,是精耕细作的体现,也正慢慢的展现出其中蕴藏的价值。
吹尽淘沙始到金。
不可否认,这一次协同办公的需求爆发,是被危机驱动。但在危机过后,哪家公司对协同办公的理解更透彻、对产品细节的追求更为极致,才能真正享受到工作模式转型背后所带来的的市场红利。
SpreadJS 是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 “高性能、跨平台、与 Excel 高度兼容”的产品特性,备受以华为、招商银行、苏宁易购、天弘基金等为代表的企业用户青睐。在带来亲切的 Excel 使用体验的同时,满足 Web Excel 组件开发、表格文档协同编辑、数据填报、Excel 类报表设计等业务场景,极大降低了企业研发成本和项目交付风险。
SpreadJS 在线表格编辑器是使用 SpreadJS 开发的源代码程序,提供开放的 API 和高度类似 Excel 的操作模式,可助您快速验证 Excel 导入导出、数据可视化、公式引用、数据绑定等产品核心功能,并顺利完成数据填报模块的开发与维护,体验“如何用不到 100 行代码,在前端实现 Excel 的全部功能”。
了解SpreadJS更多信息,欢迎访问SpreadJS官网
赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发控件、低代码开发平台、商业智能报表解决方案于一身的开发工具提供商。葡萄城的开发工具产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。
*请认真填写需求信息,我们会在24小时内与您取得联系。