ionic（18）
AngularJS（57）
JavaScript（222）
1、实例背景& & &ionic复选框用的是checkbox，checkbox有各种各样的样式2、实例源码&!DOCTYPE html&
&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&
&body ng-app=&calmApp& ng-controller=&calmController&&
&div class=&content has-header&&
&ul class=&list&&
&li class=&item item-checkbox&&
&label class=&checkbox&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-assertive&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-balanced&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-calm&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-dark&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-energized&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-light&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-platform&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-positive&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-royal&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-square&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-stable&&
&input type=&checkbox& /&
&li class=&item item-checkbox&&
&label class=&checkbox checkbox-stable&&
&input type=&checkbox& /&
3、实例结果
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：2902762次
积分：48715
积分：48715
排名：第51名
原创：1812篇
转载：76篇
评论：869条
文章：47篇
阅读：44565
文章：10篇
阅读：24573
文章：13篇
阅读：22967
文章：14篇
阅读：61652
(16)(31)(37)(9)(16)(29)(25)(28)(33)(35)(30)(17)(11)(21)(28)(31)(33)(43)(35)(35)(26)(29)(27)(55)(75)(19)(58)(41)(11)(35)(13)(37)(120)(68)(106)(66)(100)(83)(76)(78)(34)(56)(29)(53)(46)(15)11:54 提问
ionic 复选框按钮问题
在一个页面有一个多选按钮，选中多个以后 ，跳转到另一个页面，做相应处理后，在跳回
有多选按钮的页面，怎么让选中的选项还存在。
按赞数排序dingzhaoqiang 的BLOG
用户名：dingzhaoqiang
文章数：87
访问量：9844
注册日期：
阅读量：5863
阅读量：12276
阅读量：400953
阅读量：1090847
51CTO推荐博文
5．&ionic&界面组件 表单输入1.输入组件容器 : .item-input在 ionic 中，各种输入组件被定义成不同的 HTML 模板，以便将描述标签和输入元素 打包在一起。在这个模板的根元素上，需要声明.item-input 样式：&any class="item-input"&...&/any&不同的输入元素有不同的模板定义。比如，文本输入通常包含一个描述标签：&div class="item-input"&&label class="input-label"&用户名&/label&&input placeholder="请输入你的用户账号" type="text"&&/div&ionic 预定义了文本输入、开关、复选按钮、单选按钮、选择框、滑动条等常用 输入组件的样式：2. 文本输入 : input[type="text"]文本输入通常包含一个文本 input 元素和一个描述型标签：在 ionic 中，使用以下 HTML 模板建立一个带有文本标签的输入框：&any class="item-input"&&span class="input-label"&...&/span&&input placeholder="..." type="text"&&/any&对于多个输入组件，可以将它们放到一个列表中，让表单更加整齐：&any class="list"&&any class="item item-input"&...&/any&&any class="item item-input"&...&/any&...&/any&3. 文本输入：使用占位符做标签有时可以将描述标签省略，这样可以获得一种简洁的效果：这是&input&元素原生的功能，设置其&placeholder&属性 即可实现：&label class="item item-input"&&i class="icon ion-ios-unlocked-outline positive"&&/i&&input type="password" placeholder="请输入您的密码"&&/label&4. 文本输入：堆叠式标签堆叠式标签意味着将描述性标签占据单独的一行：使用.item-stacked-label 样式声明堆叠式标签：&label class="item item-input item-stacked-label"&&span class="input-label"&Email&/span&&input type="text" placeholder=""&&/label&5.开关 : .toggle input[type="checkbox"]开关通常用来设置两种状态 - 开启和关闭：正如上图中所见，开关的可视部件包括两部分：滑轨（ .track）和手柄（ .handle）。 ionic使用如下 HTML 模板创建开关组件：&any class="toggle"&&input type="checkbox"&&any class="track"&&any class="handle"&&/any&&/any&&/any&开关也有配色方案样式： .toggle-{color}，用来改变滑轨的背景色。6.复选按钮复选框通常用来在一组列表中选中部分成员：和开关一样，复选按钮也是基于 HTML 的&checkbox input&实现的。使用如下的 HTML 模板声明复选按钮：&any class="item-input"&&any class="checkbox"&&input type="checkbox"&&/any&&/any&你也许已经猜到，复选按钮的配色方案样式为： .checkbox-{color}。7.单选按钮 : .item-radio input[type="radio"]单选按钮用来从一组选择中作出仅仅一个选择：正如上图所见，单选按钮的可视部件包括两部分：选中图标（ .radio-icon） 和描述内容（ .item-content），你可以在.item-content&随便添加 内容。单选按钮基于 HTML 的&radio input&元素实现。使用如下的 HTML 模板 声明单选按钮：&any class="item-radio"&&input name="{group-name}" type="radio"&&any class="item-content"&...&/any&&any class="radio-icon ion-checkmark"&&/any&&/any&单选按钮通常不单独使用，将他们放入一个列表中：&any class="list"&&any class="item item-radio"&...&/any&&any class="item item-radio"&...&/any&...&/any&需要注意的是， group-name 决定了单选按钮的分组，所以对于互斥的选择项，必须 将它们的 group-name 设置为相同的名称。8.滑动条 : .range input[type="range"]range 是 HTML5 新引入的元素，常用来进行连续值的调节：从上图可以看到，滑动条的可视部件包括三部分：左右图标和中间的滑动条。 图标是可选的，当不用图标时，滑动条将占据整个宽度。在 ionic 中，使用如下 HTML 模板声明滑动条：&any class="range"&&any class="icon {left-icon-name}"&&/any&&input name="{range-name}" type="range"&&any class="icon {right-icon-name}"&&/any&&/any&使用.range-{color}样式声明滑动条的配色方案，这主要影响滑轨的颜色。9.选择框 : .item-select select在每个平台上，选择框的表现形式都不一样，例如，在 PC 上，是一个传统的下拉框，在 Android是一个单选弹出窗，而 iOS 上是一个覆盖半个窗体的定制滚动器：通常总是将选择框与文字一起放入列表条目中，使用如下 HTML 模板创建选择框条目：&label class="item-input item-select"&&any class="input-label"&&/any&&select&&option&...&/option&&option&...&/option&...&/select&&/label&6．&界面组件选项卡1. 选项卡 : .tabs选项卡是一个可以包含多个按钮或链接的容器，通常用于提供一致的导航体验。 ionic 中使用.tabs 样式声明选项卡，使用.tab-item 样式声明选项卡 成员&any class="tabs"&&any class="tab-item"&...&/any&&any class="tab-item"&...&/any&...&/any&选项卡默认地位于屏幕底部。一旦元素应用了.tabs&样式，就可以继续 选用三类预定义样式来进一步声明元素及其内容的外观：1. 同级样式 - 同级样式与.tabs&应用在同一元素上，声明选项卡的位置、配色等。2. 下级样式 - 下级样式只能应用在.tabs&的子元素上，声明子元素的大小等特征。3. 上级样式 - 上级样式应用于.tabs&的父元素中，声明选项卡的平台特征。2.tab-item : 使用图标选项卡的选项默认的只包含文字，使用图标会使其更加生动：比如 微博（ weibo）和微信（ wechat）：要在某个选项元素中插入图标，需要注意两点：1. 使用&i&标签在.tab-item 中插入图标2. 在.tabs&容器上使用.tabs-icon-{position}声明图标位置。有三种方式定义图标位置：&.tabs-icon-top - 将图标置于文字之上&.tabs-icon-left - 将图标置于文字左侧&.tabs-icon-only - 只使用图标，不显示文字3. .tab-item : 使用徽章微信（ wechat）的选项卡中第三项包含了一个红色的信息元素，被称为徽章：要在.tab-item 内包含徽章，需要注意两点：使用.badge 样式插入徽章元素在.tab-item 同级声明.has-badge 样式&any class="tabs"&&any class="tab-item has-badge"&&any class="badge"&...&/any&&/any&...&/any&4. .tabs : 顶部选项卡默认情况下，选项卡位于屏幕底部， 可以使用.tabs-top 样式将选项卡置于顶部。顶部选项卡应用也很广泛：5. .tab-striped .tabs: 条带风格选项卡条带风格的选项卡起源于 Android 平台，它使用一个细长的条带表示选项的选中状态：在 ionic 中，使用.tabs-striped 样式声明条带风格选项卡：&any class="tabs-striped"&&any class="tabs"&&any class="tab-item"&...&/any&&any class="tab-item"&...&/any&...&/any&&/any&7．&定制布局 栅格系统1. 栅格系统ionic 的栅格系统采用了 CSS3 的弹性盒（ Flexible Box）模型，这使得它与大多数 栅格系统都有所区别。Flex 布局主要思想是让容器有能力改变其子元素的宽度、高度甚至先后顺序， 从而以最佳方式填充可用空间。 CSS3 引入 Flex 容器的主要目的是为了适应所 有类型的显示设备和屏幕大小：在 ionic 中使用栅格系统主要使用两个类：&.row - 在容器元素上使用.row 类，表示将其设置为弹性容器，即 Flexible Box。&.col - 在子元素上使用.col 类，其扩展系数和收缩系数都被设置为 1。这意味着 所有的子元素将平分容器的宽度。2. .col : 默认的定宽列在 ionic 的栅格中，每一行的各列默认是等宽的，这使得实现一个图片 浏览界面非常简单。下图是 instagram app 的截图：3. .col-{width-percent} : 指定列宽当然，我们也可以显式地指定某些列的宽度。 ionic 提供了一些预置的 CSS 类， 供我们快速指定列宽：.col-10 - 占据容器 10%宽度.col-90 - 占据容器 90%宽度如果你有特殊的需求，比如，非要指定 78%的宽度，可以这样：.col-78{-webkit-box-flex: 0;-webkit-flex: 0 0 78%;-moz-box-flex: 0;-moz-flex: 0 0 %78;-ms-flex: 0 0 78%;flex: 0 0 78%;}4. .col-{width-percent} : 指定列宽windows phone 的 metro 风格在信息展示方面有很大的优势，虽然携程的 APP 没有突出这一点:-( ：通过定制栅格的列宽，我们可以简单地实现类似的界面。5. .col-offset-{width-percent} : 指定列偏移列可以从默认位置偏移， ionic 预置了一些 CSS 类供我们快速设置列偏移：.col-offset-10 - 偏移默认位置 10%容器宽度.col-offset-90 - 偏移默认位置 90%容器宽度这实际上是通过设置子元素的 margin-left 样式实现的，所以如果你需要让它 偏移正常位置 78%，可以这样：.col-offset-78{margin-left:78%;}6. .col-{align} : 列纵向对齐如果一行中各元素的高度不一样，那么比较矮的那些元素将自动被拉伸以适应 整行的高度。有时你不想这样，希望那些元素保持自身的高度。 ionic 提供了一些预置的 CSS 类用来指定这些元素纵向的对齐方式：.col-top - 让元素纵向顶对齐.col-center - 让元素居中对齐.col-bottom - 让元素向底对齐这是通过设置元素的 CSS3 样式 align-self 来实现的。交流QQ群：&QQ群2：QQ群3：本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)更多数码资讯，请关注南窗数码
“框架控件”相关经验