随笔分类 - javascript
摘要：Alpine.js 是一个轻量级的前端框架，旨在为开发者提供一种简单而强大的方式来构建动态用户界面。它的设计理念是“少即是多”，通过极简的 API 和极小的体积，让开发者能够快速上手并构建出功能丰富的交互式网页。 技术特点 极简的 API：Alpine.js 的 API 设计非常简洁，开发
阅读全文
摘要：Select2.js 是一个基于 jQuery 的 选择框 控件，它允许开发者创建更加美观、易用的下拉选择框。 特性：支持搜索功能、支持分组显示、支持动态数据加载、支持多选操作、支持自定义样式 简单使用 <script src="../plugins/jquery/jquery-1.12.4.min
阅读全文
摘要：lunr.js也是一个可以提供搜索的组件，只是不支持中文搜索和模糊搜索。也提供了匹配度分数。 <script src="../plugins/lunr-js/lunr.js"></script> <script> //不支持中文检索和模糊检索 //英文支持检索，不区分大小写，整个单词匹配 const
阅读全文
摘要：前端检索组件除了flexsearch.js，还可以使用fuse.js。fuse.js支持中文检索，且较flexsearch.js提供了模糊检索、匹配度分数以及权重检索等。 简单使用 <script src="../plugins/fuse/fuse.min.js"></script> <script
阅读全文
摘要：说明文档往往有搜索框，可以根据关键字检索文档内容。我有时疑惑这种检索是后端DB检索还是其它的呢？ 拿bootstrap-table的说明文档看下：是由algolia提供的检索服务api 那简单的内容页面如果不想用检索服务，不用Elasticsearch、Apache Solr、Sphinx这些全文搜
阅读全文
摘要：jquery版本引起的bootstrap-table组件表格未能渲染 最近写一个带分页的页面，使用了bootstrap-table组件，表格数据怎么都渲染不出来，控制台打印出了下面的信息： 一时有点懵，确认js代码及bootstrap-table用法没有任何问题后，将数据放入以前可正确渲染的页面中，
阅读全文
摘要：要写一个媒体文件切片上传，上传到server后FTP传输到远端server。FTP上传很简单，切片上传找到了resumable.js这个组件库。 写demo记录下。 前端 <fieldset> <legend>video preview</legend> <div> <video id="video
阅读全文
摘要：某个页面有这样一个需求：一个固定宽度的div，若文字过长，则缩小字体填充。 看到同事采用的是用php的GD库的imagettfbbox函数来计算文字的宽度。 imagettfbbox(float $size,float $angle,string $font_filename,string $str
阅读全文
摘要：经常会用到sweetalert2这个弹出层组件，整理记录下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, ini
阅读全文
摘要：SortableJS是功能强大的JavaScript 拖拽库 <link rel="stylesheet" href="../plugins/bootstrap-5.1.3/css/bootstrap.min.css" /> <link rel="stylesheet" href="../plugi
阅读全文
摘要：偶然中看到了这个功能强大的表格组件，不仅支持分页、过滤、排序、树形表格等常见的功能，且支持分组显示、表格内编辑、统计计算、读本地文件、拖拽表格改变行列顺序、下载、excel剪切复制和基础编辑等多种功能。 常用配置项及表格实例化 查看代码 <link href="../plugins/tabulato
阅读全文
摘要：ReadableStream <script> // TextDecoder将字节转换为字符串,默认 utf-8 编码 let uint8Array = new Uint8Array([72, 101, 108, 108, 111]); console.log(new TextDecoder().d
阅读全文
摘要：找好用的前端验证组件过程中发现了parsley。大致看了下说明文档，支持required、url、email、长度、范围、正则验证，基本上够用了，而且支持中文，本身没有css方便配合其它css框架使用，样式也是很好定义。简直非常好用了。结合bootstrap写个demo记录下。 <!DOCTYPE
阅读全文
摘要：Promise是异步编程的一种解决方案，是一个对象，可以获取异步操作的消息，大大改善了异步编程的困难，避免了回调地狱，比传统的解决方案回调函数和事件更合理和更强大。 从语法上讲，Promise是一个对象，它可以获取异步操作的消息。提供了一个统一的API，各种异步操作都可以用同样的方法进行处理 Pro
阅读全文
摘要：pica 浏览器中的高质量图像大小调整 在浏览器中调整图像大小，无需像素化，速度相当快。自动选择最好的可用技术：webworkers、webassembly、createImageBitmap、纯JS。 简单使用 <script src="./plugins/pica.min.js"></scrip
阅读全文
摘要：偶然的机会看到一个生成书法字帖的工具网站，一时之间不知道田字格是怎么生成的，写个demo记录下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="./plugins/jquery/jquery-
阅读全文
摘要：clipping <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/": "./js/jsm/
阅读全文
摘要：BufferGeometry缓冲几何体 <canvas id="mainCanvas"></canvas> <script type="importmap"> { "imports": { "three": "./js/build/three.module.js", "three/addons/":
阅读全文
摘要：有这个一个需求：显示在系统中的图片需要隐藏其真实的文件名和路径，其真实文件名不能被下载保存下来。其它信息：图片存储在专用的图片服务器上。 试用了几种方法，记录下。 <body oncontextmenu="javascript:return false"> <img src="./images/1.
阅读全文
摘要：最近遇到了一个问题：使用firefox浏览切换2层iframe下的某个页面后iframe内容未更新，Chrome和Edge浏览器并无这个问题。在这个项目中，最外层的iframe用于隐藏url，里层的iframe用于给不同参数的url提供一个统一地址以便于权限路由等控制。 由于项目比较复杂，用简单的代
阅读全文