`
niulanshan
  • 浏览: 565407 次
文章分类
社区版块
存档分类
最新评论

ionic之切换开关

 
阅读更多

1、实例背景

ionic切换开关toggle，设置样式用的是toggle-calm、toggle-light等


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<title>ionic之切换开关</title>
		<link rel="stylesheet" href="../css/ionic.css" />
		<script type="text/javascript" src="../js/angular/angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.js"></script>
		<script type="text/javascript" src="../js/ionic-angular.js" ></script>
		<script type="text/javascript" src="../js/ionic.bundle.js" ></script>
	</head>
	<body>
		<div class="content has-header">
			<ul class="list">
				<li class="item item-toggle">Java
					<label class="toggle toggle-assertive">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">VB
					<label class="toggle toggle-balanced">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">C#
					<label class="toggle toggle-calm">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">C
					<label class="toggle toggle-dark">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">C++
					<label class="toggle toggle-energized">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">JavaScript
					<label class="toggle toggle-light">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">HTML5
					<label class="toggle toggle-positive">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">CSS3
					<label class="toggle toggle-royal">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">Flex
					<label class="toggle toggle-small">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">Dojo
					<label class="toggle toggle-stable">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">AngularJS
					<label class="toggle ion-ios-toggle-outline">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">ionic
					<label class="toggle ion-toggle-filled">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
				<li class="item item-toggle">ionic
					<label class="toggle ion-toggle-filled">
						<input type="checkbox" checked="">
			            <div class="track">
			               <div class="handle"></div>
			            </div>
					</label>
				</li>
			</ul>
		</div>
	</body>
</html>

3、实现结果


分享到：
| ionic之单选框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ionic 切换开关操作

    ionic 切换开关操作 以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。 HTML 代码 开关切换 Settings {{ item.text }} Notifications Push Notifications ...

    ionic基础组件使用案例

    - `ion-toggle` 用于创建切换开关，方便用户开启或关闭某个功能。 6. **按钮组件**： - `ion-button` 创建可点击的按钮，支持不同样式和大小，可以包含文字或图标。 - `ion-icon` 用于插入各种SVG图标，丰富UI...

    ionic3&4log;日志封装及开发与上线模式切换

    为了方便，一种是直接对console.log进行控制设置一个开关，另外也可以将所有的日志封装成一个provider，这样不会暴露出自己的日志信息是哪个模块。 我这里整理的方案，已经实现日志的封装，在开发阶段同时也可以在...

    ToDo ionic

    6. **离子组件（Ionic Components）**：Ionic框架提供了一系列移动设备特有的UI组件，如按钮、列表、输入框、滑动开关等，使得应用具有原生感的用户体验。 7. **Cordova插件**：由于Todo Ionic是混合应用，可能会...

    Ionic-Component-Demo

    5. **导航和路由**：Ionic 提供了一套完善的导航系统，允许用户在应用的不同页面间轻松切换。这通常通过 `NavController` 实现，它与 Angular 的路由系统集成，确保页面之间的平滑过渡。 6. **表单控件**：在描述中...

    ionicDome:ionic 组件测试

    1. **导航(Navigation)**：Ionic的导航系统允许用户在不同的页面间自由切换，使用`&lt;ion-nav&gt;`和`&lt;ion-router-outlet&gt;`等元素实现。 2. **表单(Form Elements)**：包括输入框`&lt;ion-input&gt;`，滑块`&lt;ion-range&gt;`，开关...

    ionic-starter:ngCordova插件，Google地图，Ionic App中的Oauth实施

    至于侧栏切换，Ionic框架本身就提供了Sidenav组件，用于实现滑动侧边栏菜单，提供导航和应用设置。通过AngularJS的指令，我们可以轻松地控制侧栏的开关和内容。 翻译选项卡通常使用`ngx-translate`库实现，它支持多...

    ion-mdl:Tema para o Ionic（http

    3. **MDL JavaScript**：为了启用MDL的交互效果，需要引入其JavaScript库，使组件如按钮、切换开关等具备响应式功能。 总的来说，"ion-mdl" 提供了一个集成Material Design风格的解决方案，让开发者能够用Ionic构建...

    ionic-components-example：这是一个离子组分示例

    表单输入（Form Inputs）是用户与应用交互的关键部分，包括文本字段、开关、滑块等，它们通常与Angular的表单模块一起使用，实现数据验证和处理。滑动选项卡（Tabs）则允许用户在多个视图间切换，是多页面应用的常见...

    ionicSidemenuTabs

    - `Ionic` 的标签页布局允许用户在多个相关页面间快速切换。每个标签通常对应一个页面，这些页面可以共享相同的数据和服务。 - 使用 `&lt;ion-tabs&gt;` 元素创建标签页，并为每个页面添加 `&lt;ion-tab&gt;` 子元素。每个 `...

    iconic离线pdf文档

    - **头部/Header**：头部是应用中最常见的UI元素之一，通常用于显示应用名称或当前页面的标题。 - **二级导航栏/SubHeader**：子头部用于进一步细分页面内容，提供更详细的导航信息。 - **内容/Content**：这部分...

    FitBit-HomeAssistant:适用于Fitbit OS（Ionic和Versa）的家庭助手应用程序

    适用于Fitbit OS（Ionic和Versa）的家庭助手应用程序 请不要说这是一项正在进行的工作，需要大量工作。 欢迎您贡献自己的力量。 当前状态 当前，该应用程序从在伴侣（电话）应用程序（URL和密码）的设置中设置的HA...

    模仿苹果的控件.rar模仿苹果的控件.rar模仿苹果的控件.rar

    首先，苹果的iOS系统以其简洁、优雅和一致的设计语言闻名，这包括独特的控件样式，如滑块、按钮、开关、导航栏和标签页等。为了在其他平台上模仿这些控件，开发者需要理解和掌握苹果的设计指南，包括颜色、字体、...

Magicbox
Global site tag (gtag.js) - Google Analytics