checkbox样式

原文: WPF 自定义CheckBox样式 一、Checkbox基本样式 下面的样式包含了CheckBox三种状态的显示，这里CheckBox的三种状态是使用图片代替的。当然你也可以使用字体图标或者Path绘制。 先看效果： 代码如下： <Style x:Key="chkBase" TargetType="CheckBox"> <Setter Property="IsChecked" Value="False"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="#999"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="CheckBox"> <DockPanel Background="{TemplateBinding Background}" ToolTip="{TemplateBinding Content}" LastChildFill="False" Width="{TemplateBinding Width}"> <Image Margin="2 0 0 0" DockPanel.Dock="Left" x:Name="_img"

一、Checkbox基本样式 下面的样式包含了CheckBox三种状态的显示，这里CheckBox的三种状态是使用图片代替的。当然你也可以使用字体图标或者Path绘制。 先看效果： 代码如下： <Style x:Key="chkBase" TargetType="CheckBox"> <Setter Property="IsChecked" Value="False"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Foreground" Value="#999"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="CheckBox"> <DockPanel Background="{TemplateBinding Background}" ToolTip="{TemplateBinding Content}" LastChildFill="False" Width="{TemplateBinding Width}"> <Image Margin="2 0 0 0" DockPanel.Dock="Left" x:Name="_img" Stretch="None" Source="

真正开发过小程序的开发者会发现，小程序里面的单选框和多选框封封装的实在不够友好，一般与UI都会有比较大的出入，所以下面来探讨一下单选框和多选框的封装。 效果 比如我们要做一个这种样式的单选框和多选框组件，我们改怎么去处理呢？ 代码 wxml <!-- 判断某个元素是不是指定数组内 --> <wxs module="checkbox"> var checkStatus = function (arr, item) { return arr.indexOf(item) >= 0 }; module.exports.checkStatus = checkStatus; </wxs> <view hidden='{{isHidden}}'> <!-- 单选组件 --> <radio-group class="radio-group" bindchange="radioChange" wx:if="{{selectType == 'radio'}}"> <label class='{{radioIndex == item.index ? focusRadioClass : initRadioClass}}' wx:for="{{radioData}}" wx:key="{{index}}" id="{{item.index}}"> <view class='item-index'>

css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能够让我们的html结构更清晰合理，也能在一定程度上减少js对dom的操作！ 定义 伪类 包含两种： 状态伪类 和 结构性伪类 。 状态伪类 是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括： :link 应用于未被访问过的链接； :hover 应用于鼠标悬停到的元素； :active 应用于被激活的元素； :visited 应用于被访问过的链接，与:link互斥。 :focus 应用于拥有键盘输入焦点的元素。 结构性伪类 是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括： :first-child 选择某个元素的第一个子元素； :last-child 选择某个元素的最后一个子元素； :nth-child() 选择某个元素的一个或多个特定的子元素； :nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算； :nth-of

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> <style> .base-checkbox { font-size: 24px; color: #ffffff; position: relative; cursor: pointer; font-weight: normal; overflow: hidden; padding-left: 34px; } .base-checkbox input[type="checkbox"] { width: 22px; height: 22px; width: 1px; height: 1px; position: absolute; left: -22px; top: 0; } .base-checkbox::before { content: " "; display: inline-block; width: 22px; height: 22px; border: 1px solid #ed9429; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; cursor: pointer; } .base-checkbox.checked:before { background-color: #ed9429; } </style> <label

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 中文汉化版，官方只有英文的。同时根据中国国情修改了部分验证规则。 这个插件支持大部分的浏览器，但由于有使用到了css3的阴影和圆角样式，所以在IE浏览器下无法看到圆角和阴影效果（万恶的IE）。 官方下载地址： http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ 普通验证的例子： http://www.position-relative.net/creation/formValidator/ ajax验证的例子： http://www.position-relative.net/creation/formValidator/demoSubmit.html 一：简单说明下使用教程： 引入jquery和插件js、css <link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.js" type="text/javascript"></script> <script

1 /* 未选中的 背景样式 */ 2 checkbox .wx-checkbox-input{ 3 border-radius: 50%;/* 圆角 */ 4 width: 46rpx; /* 背景的宽 */ 5 height: 46rpx; /* 背景的高 */ 6 } 7 /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */ 8 checkbox .wx-checkbox-input.wx-checkbox-input-checked{ 9 border: 1rpx solid #FF783B; 10 background: #FF783B; 11 } 12 /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */ 13 checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ 14 border-radius: 50%;/* 圆角 */ 15 width: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */ 16 height: 40rpx;/* 选中后对勾大小，不要超过背景的尺寸 */ 17 line-height: 40rpx; 18 text-align: center; 19 font-size:30rpx; /* 对勾大小 30rpx */ 20

jQuery初识 jQuery是什么？ jQuery是一个兼容多浏览器的JavaScript库。 jQuery能极大地简化JavaScript编程，它的宗旨就是："Write less,do more." jQuery包含以下内容： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX 下载链接： jQuery官网 jQuery对象 jQuery对象 就是通过jQuery包装DOM对象后产生的对象， jQuery对象 是jQuery独有的。 如果一个对象是 jQuery对象 ，那么它就可以使用 jQuery 里的方法：例如$(“#i1”).html()。 $(“#i1”).html()的意思是：获取id值为i1的元素的HTML代码，其中html()是jQuery里的方法。 相当于JavaScript中的document.getElementById("i1").innerHTML; 虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery也不能使用jQuery里的方法。 jQuery与JavaScript在申明变量的区别： 1 var $variable = jQuery对象 2 var variable = DOM对象 3

练习题： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color:

目录 一、图书管理系统页面搭建 二、jQuery练习题 一、图书管理系统页面搭建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <!--导航条开始--> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display -