イオンスタイルチェックボックス-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

イオンスタイルチェックボックス

黄舟

Feb 16, 2017 pm 02:02 PM

1. 背景の例

イオンチェックボックスはチェックボックスを使用しています

2. ソースコードの例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>ionic之样式复选框</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
	</head>
	<body ng-app="calmApp" ng-controller="calmController">
		<p class="content has-header">
			<ul class="list">
				<li class="item item-checkbox">
					<label class="checkbox">
						<input type="checkbox" />
					</label>
					一月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-assertive">
						<input type="checkbox" />
					</label>
					二月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-balanced">
						<input type="checkbox" />
					</label>
					三月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-calm">
						<input type="checkbox" />
					</label>
					四月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-dark">
						<input type="checkbox" />
					</label>
					五月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-energized">
						<input type="checkbox" />
					</label>
					六月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-light">
						<input type="checkbox" />
					</label>
					七月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-platform">
						<input type="checkbox" />
					</label>
					八月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-positive">
						<input type="checkbox" />
					</label>
					九月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-royal">
						<input type="checkbox" />
					</label>
					十月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-square">
						<input type="checkbox" />
					</label>
					十一月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-stable">
						<input type="checkbox" />
					</label>
					十二月
				</li>
				<li class="item item-checkbox">
					<label class="checkbox checkbox-stable">
						<input type="checkbox" />
					</label>
					十二月
				</li>
			</ul>
		</p>
	</body>
</html>

3. 結果の例

イオンスタイルチェックボックス

上記はイオンスタイルチェックボックスの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

使用Python和Ionic构建混合移动应用程序Jun 17, 2023 pm 12:20 PM

移动应用程序是当今数字化生态系统中非常必需的一部分。与传统的原生应用程序不同，混合应用程序是基于Web技术开发的，并利用框架来呈现其用户界面，因此可以同时运行于多个平台和设备上。本文将介绍如何使用Python和Ionic开发混合移动应用程序。Python是一种高级编程语言，主要用于数据分析、Web开发、人工智能和大数据处理等领域。Ionic是一个流行的移动应

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、