行早 发自 凹非寺 量子位 报道 | 公众号 QbitAI 万万没想到，如此普通的复选框，竟也能玩出这种高度！...例如点一下复选框，屏幕就像被投入石子的水面泛出波纹： 设定好初始状态，就可以开始展示《生命游戏》的演化过程； 控制上下左右，还能还原经典游戏《贪吃蛇》； 这就是一位做前端开发的小哥Bryan，...近期在自己的网站上发布的有关checkbox （复选框）的新玩法。...它可以将任何内容呈现为HTML复选框。 还有更厉害的玩法 讲真，刚才展示的复选框效果，只能说是“开胃菜”。 不仅仅是简单的动画，日常拍下的照片，记录的生活vlog，一样可以成为“复选框”的素材。...小哥本人也是老二次元了，《Bad Apple》也是信手拈来： 随后，自嘲“the CheckBox guy”的小哥赋予了复选框更多的可能，他又拓展了Checkboxland API，用来加载任何视频并生成复选框版本
本文简介 点赞 + 关注 + 收藏 = 学会了 框选是 fabric.js 默认提供的一种操作，fabric.js 提供了几个属性可以设置选框样式。...fabric.js 默认的选框样式如下图所示。 本文主要介绍一下 fabric.js 提供的这几个 api （全是以 selection 开头的）。...禁用选框 fabric.js 默认是可以进行框选操作的，如果需要禁用选框，可以将 selection 设置为 false 。...选框边框颜色 选框分为“边框颜色”和“填充颜色”。 fabric.js 选框的默认颜色是 rgba(255, 255, 255, 0.3) ，是有一定透明度的。...选框颜色 fabric.js 选框的默认颜色是 rgba(100, 100, 255, 0.3)，是一个有透明度的蓝紫色。 如需修改选框颜色，可以设置 selectionColor 。
jquery-file-upload 上传文件组件 zTree 文件树形视图控件 表单验证 jquery-validation jQuery-Validation-Engine 表单元素美化 uniform 提供对下拉框，单，复选框...兼容 Firefox, Chrome, IE6+ 选取颜色 Spectrum 编辑器 ace 代码编辑器，可以用来做demo演示 ckeditor ueditor 百度做的 tinymce 对html...做ppt相当不错 nodePPT 国人做的，做ppt也相当不错。有些方面比 reveal做的还好。顶！...我的改进版见这里 TheaterJS 模拟两个人在屏幕上对话 midnight.js 文字颜色随着背景变，屌炸了 color-animation jquery的颜色渐变动画插件。...用户体验增强类 Intro.js 用来介绍网站的功能很不错。也可以做新手引导。 blockUI Lolding组件。 simple-hint 提示信息。用css做的。兼容性IE 9+。
解决的思路: 1.在按下其他按钮前,先还原原来的背景色 2.然后再设置我们当前按下的按钮的背景颜色 所以我们再写一个循环,遍历所有的元素,将他们的背景色都还原: 想要背景颜色不变就让backgroundcolor...隔行变色案例(重点) 分析: 用到新的鼠标事件 鼠标经过: onmouseover 鼠标离开: onmouseout 核心思路: 鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的背景颜色....接下来是一个非常常见的案例, 下面的框框是多选框,如果把商品全部选中,那么全选框会打上勾,如果取消掉其中一个,全选框的勾勾会消失 我们要分成两大块来做: 经历千辛万苦我终于做出来了!...一开始跟着老师做的,但是电脑抽风了,明明写的代码是对的就是不执行......class,必须这么写: box.className = 'navs' 移除属性 element.removeAttribute('属性') 切换tab栏案例(重要) 我们先来看看结构: JS
我通过清除背景、亮化边框和文本来实现变灰显示方法。虽然一个禁用的控件无法接收焦点，但我们可以悬停在该控件上，以便我们想要撤消这些样式。 ? 不确定的状态 复选框有第三种状态(开关控件没有)。...你可以在JavaScript中这样做 :getElementById(idRef).indeterminate='true'; 你能发现的大多数示例都没有考虑到这一点。...在本例中，只需将拇指指甲形状移动到中间并选择一个中性的背景颜色即可。因为我们已经为禁用的复选框处理了颜色，所以我们不需要为禁用的不确定情况做任何特殊的事情。 ?...Windows高对比度模式 Windows为用户提供了一种方法，可以剥离web页面的所有颜色，并用用户定义的系统颜色子集替换它们。你不能定义颜色，但是你可以通过关键字来指定应该在何处应用哪种系统颜色。...回顾 本文包含的内容: 只使用带有CSS的复选框来增强它们; 支持禁用控件; 支持混合状态的复选框; 按文本样式缩放，符合WCAG 1.4.12:文本间距(A); 颜色达到至少3:1对比度，符合WCAG
案例分析 ① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout ② 核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色 ③ 注意： 第一行...（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行 // 1....点击上面全选复选框，下面所有的复选框都选中（全选） 2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选） 3. 如果下面复选框全部选中，上面全选按钮就自动选中 4....如果下面复选框有一个没有选中，上面全选按钮就不选中 5. 所有复选框一开始默认都没选中状态 ?...案例分析 ① 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可 ② 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击
如果选择了要求的类型匹配 复选框，则可以通过在 特征值分配 屏幕上选择来执行变式匹配。...如果在变式匹配标签页中选择了许可类型配置复选框，则当系统发现含匹配值分配的物料变式时，该变式的物料编号将显示在 特征值分配 屏幕中。对于该业务情景，请选择许可类型配置复选框。...从策略上讲，如果选择 部分配置 复选框，假设分配的特征值与物料变式的特征值是部分匹配，系统将查找并显示所有符合的物料；如果选择 完全配置复选框，系统将仅查找完全与所有特征值匹配的物料。...在此业务情景中，选择完全配置复选框。输入可直接确认或保存 4. 在 创建标准订单：特征值分配 屏幕上的 特征值分配区域，从特征值范围中选择一个值。...在 库存/需求清单能过不同的颜色行显示异常信息。 ? 7. 选择 返回 至SAP 轻松访问屏幕。 您已经检查到延迟的销售订单了。
表格隔行变色效果 案例分析 用到鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout 核心思路：鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉背景颜色 注意：第一行（thead里面的行...）不需要变换颜色，因为我们获取的是tbody里面的行 //1.注册元素 var trs = document.querySelector('tbody').querySelectorAll...function() { this.className = ''; } } 表单全选取消全选 案例分析 全选和取消全选：让下面所有复选框的...下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。...下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
checkbox是html里面的一种复选框，操作这个东西的时候说实话是很麻烦的，因为是靠我们判断他的状态是不是被选中来操作的，今天要说的怎么将一部分checkbox选中以后，没有被选的变灰色，按照我们自己的要求来操作复选框...首先我们画出几个复选框： vue...label> PHP 通过DOM获取到复选框的元素.../js/jquery-1.10.2.min.js" type="text/javascript"> 这里的icheck.js是一个美化checkbox的插件，后期我会简单的介绍一下这个插件具体怎么用。
file=/src/main.js:53-383 安装 # yarn yarn add @xuanmo/v-form # npm npm install @xuanmo/v-form -S 使用 配置...vue.config.js配置组件编译(注：如果组件引入采取的后编译需要配置这一项) module.exports = { transpileDependencies: [ '@xuanmo...label-width label宽度 string 20% label-position label对齐方式，可选：left/right string left label-color label文字颜色...vant/touch-emulator"; // 如果没有安装vant-ui可以采取这种方式引入组件 import VForm from "@xuanmo/v-form/dist/v-form.umd.js...}, selectMultiple: { value: '4,2', rules: { label: '多列选择器
在 《Fabric.js 自由绘制矩形》 里讲到的思路，放在圆形里不太适用。 这次要做到的效果如下图所示。...-- 引入fabric.js --> ...：半透明的蓝色 canvas.selectionBorderColor = 'rgba(255, 255, 255, 0.3)' // 选框边框颜色：半透明灰色 canvas.skipTargetFind...：透明 canvas.selectionBorderColor = 'transparent' // 选框边框颜色：透明度很低的黑色（看上去是灰色） canvas.skipTargetFind...canvas.remove(currentCircle) } else { if (currentCircle) { // 创建圆形（其实是把圆形边框的颜色改成
判断是否选中：is_selected()，有时单选框、复选框会有默认选中的情况，那么有必要在操作单选框或者复选框的时候，先判断选项框是否为选中状态。...示例代码如下： action=ActionChains(driver) # 鼠标通过tab要先移到富文本框中(自己需要提前数好需要按几下tab，才能介入，多写几个tab，也无妨，因为只有进入富文本，tab...也可以说，我曾动摇过，因为做公号迁移后，导致我文章阅读量及转载的严重下滑，这真的让我很难受。...回想当初做公号的初心，一是为了交友，找到一些志同道合的技术朋友一起学习，二是，写出来当做学习笔记，或者可以说是复习笔记。...但更多的可能是期待能得到更多正向反馈，因为能让我们自己一直持续做某一件事情的原因，多半是来自他人的认可，然后并尽量把这件事情做到更好。
看看Bootstrap在GitHub上的star非常的多，这一数字甚至超过了最流行的深度学习框架TensorFlow. ?...字体设计器 http://www.bootcss.com/p/font-awesome/ 调色板 http://www.bootcss.com/p/websafecolors/ 设计了很多的颜色和色调的分布...是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库 http://www.bootcss.com/p/chart.js/ 目前在看的是Echarts和这一款，都还不错。...增强复选框和单选按钮 http://www.bootcss.com/p/icheck/ 这个是几乎大家都会推荐的icheck组件，效果还不错。...复选框 http://davidstutz.de/bootstrap-multiselect/ 复选框的选项超出了想象，组合非常多，可以选择性使用。
这里要明确一个概念，每个按钮代表的是一个变量组，而不是一个变量，一个用户可以拥有多套变量组，每组内可包含多个变量。用户在之后的使用时，可以对具体的项目，设置生效的变量组。...其中前端我们就设计成，用户通过具体项目进入全局变量设置页面的时候，带着项目所生效的变量组id，然后在所有变量组上通过可选框等体现出来。...注意，其中的id和value都是变的，借助i.id让每个变量组都不同。而其中的name是固定的，所有都用的一个。...所以我们后续的js代码中可以用getElementsByName 方法来一次性拿到所有框。...如果存在，则拼接成这个变量组多选框的id并把其变为选中状态。 我们来测试下： 用例1:当前项目属于旧项目，更改的表结构产生的新字段 是否会报错： 结果没有报错，通过。
Tbody里面的行数(rows.length) JS的遍历(for循环) 获取奇数行和偶数行(对遍历中角标对2取余) 设置背景颜色(.style.backgroundColor) js代码 <script...rows.length; //alert(len); //3.对tbody里面的行进行遍历 for(var i=0;i<len;i++){ if(i%2==0){ //4.对偶数行设置背景颜色...tblEle.tBodies[0].rows[i].style.backgroundColor="pink"; }else{ //5.对奇数行设置背景颜色 tblEle.tBodies...onchange:当用户改变内容的时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick)，事件绑定到编号前面的复选框里面 获取编号前面的复选框的状态..."checkAll()" id="checkAll"/> 下面所有的复选框： JS部分代码
最近有工友问我前端怎么给图片做标注。使用 Fabric.js 或者 Konva.js 等库确实可以实现，但多少觉得有点大炮打蚊的感觉，好奇有没有专门做图片标注的工具呢？...-- 引入js --> <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.7.10/dist/annotorious.min.<em>js</em>...Annotorious 的用法很简单，只需<em>做</em>以下2步： 在html部分插入图片 初始化 Annotorious，并绑定图片元素（元素的ID或者元素本身） CDN 和 NPM 在初始化时的用法稍微有点不同...svg.a9s-annotationlayer .a9s-annotation.editable:hover .a9s-inner { fill:transparent; } /* 手柄<em>颜色</em>...，遮罩层<em>颜色</em> */ svg.a9s-annotationlayer .a9s-selection-mask { fill:rgba(0, 0, 0, 0.6); } /* 编辑器
html+css+js 静态的： ? html代表房子里的东西。 css代表装修风格。 动态的： js 根据用户输入的数据，做的动态处理是js实现的。...type:表示按钮，单选框，复选框，文件上传等。...body里面有非常多的子级。 body里面的script是js脚本，不代表页面的元素。 div里面放的才是页面的元素。 每个元素都有两个东西，一个是属性，一个是文本内容。...用js做的最多的就是查找元素，然后对元素进行一些操作，我们的操作并不是去改变字体的颜色，最多是将某些属性去掉。比如去掉它的只读属性，方便我往里面输入东西。 为什么通过点击，页面就会发生变化呢？...但是没有做鼠标离开的处理，所以变成红色就没有然后了。一次性改变没有恢复它。 ? 温馨提示，不知道对应事件的名字就百度！！！ 定义了另外一个，当鼠标离开后，字体颜色就变成了绿色。 ?
. - 入门案例 - js和html的整合 - 方式1:内联式 "通过标签实现,在标签体中编写js代码即可" - 方式2:外联式...和html整合: 方式1:内联式 通过script标签实现,直接在标签体中编写js代码即可 方式2:外联式(首先要编写外部的js文件,后缀名以*.js结尾) 通过script标签的src..."; }else{ trObjArr[i].style.backgroundColor = "颜色"; } } 案例3-复选框全选和全不选 需求分析...: 当点击头部的复选框的时候,要使其他复选框的状态和头部的保持一致....2.编写函数 a.获取头部复选框状态 对象.checked; b.获取其他的复选框对象 c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性 案例4
ui库会对主要的单选框，多选框，级联选择器，滑块，日期/时间选择器，进度条，分页，弹框，通知，导航菜单，步骤条等截图比较 一、前台UI组件库 1.Element 优点：中文文档，ui种类比较全，ui...2.iView 优点：和element的UI很相似，有一些多的补充，可以相互替换 缺点：仍然没有什么特色 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?...8.At-ui 一款全新的平面UI套件，专门用于桌面应用程序 优点：颜色比较素雅，UI比较秀气 ? ? ? ? ? ? ? ? ? ? ? 9.Vue-js-modal ? ?...9.Vue-tetris 使用Vue，Vuex，Immutable做俄罗斯方块 [Github star：1152]。...14.ESLint-plugin-vue 官方ESLint的Vue.js插件 [Github star：864]。
用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项，请避免使用单个复选框并使用material-toggle。...disabled bool 复选框是否不应响应事件，并且具有暗示不允许交互的样式。 indeterminate bool 复选框的替代状态，而不是用户可设置状态。...label String 复选框的标签，或者使用内容。 readOnly bool 是否可以通过用户交互更改复选框。 themeColor String 选中时复选框的颜色和纹波。...document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js.../adsbygoogle.js"; element.async = true; document.body.appendChild(element);
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
