PhoneGap中文网

 找回密码
 立即注册
PhoneGap中文网 视频教程 ionic 教程 查看内容

ionic中 单选按钮 : .item-radio input[type="radio"]

2015-4-12 13:51| 发布者: admin| 查看: 14490| 评论: 1

摘要: 单选按钮 : .item-radio input单选按钮用来从一组选择中作出仅仅一个选择:正如上图所见,单选按钮的可视部件包括两部分:选中图标(.radio-icon) 和描述内容(.item-content),你可以在.item-content随便添加 内 ...

单选按钮 : .item-radio input[type="radio"]

单选按钮用来从一组选择中作出仅仅一个选择:

radio

正如上图所见,单选按钮的可视部件包括两部分:选中图标(.radio-icon) 和描述内容(.item-content),你可以在.item-content随便添加 内容。

单选按钮基于HTML的radio input元素实现。使用如下的HTML模板 声明单选按钮:

  1. <any class="item-radio">
  2. <input name="{group-name}" type="radio">
  3. <any class="item-content">...</any>
  4. <any class="radio-icon ion-checkmark"></any>
  5. </any>

单选按钮通常不单独使用,将他们放入一个列表中:

  1. <any class="list">
  2. <any class="item item-radio">...</any>
  3. <any class="item item-radio">...</any>
  4. ...
  5. </any>

需要注意的是,group-name决定了单选按钮的分组,所以对于互斥的选择项,必须 将它们的group-name设置为相同的名称。



<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
 <link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
 <div class="bar bar-header bar-assertive">
  <a class="button icon ion-ios-undo"></a>
  <h1 class="title">确认订单</h1>
 </div>
 <div class="scroll-content has-header padding">
  <div class="list">
   <div class="item item-divider"><b>请选择支付方式</b></div>
   <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">支付宝客户端支付</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
   <label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">支付宝网页支付</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
   <label class="item item-radio">
    <input type="radio" name="group" checked>
    <div class="item-content">一键支付(无需支付宝账户)</div>
    <i class="radio-icon ion-checkmark assertive"></i>
   </label>
  </div>
  <button class="button button-block button-assertive">立即购买</button>
 </div>
</body>
</html>



头晕

难过

扯淡

不解

搞笑

支持

超赞

欠扁

相关阅读

发表评论

最新评论

引用 unclejoker 2016-3-2 19:47
为什么我上述源码考过去也是,没有单选按钮的效果?css路径都是对的,我自己单独写的demo,单选按钮的效果也是出不来。。。

查看全部评论(1)

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-4-28 08:33 , Processed in 0.028694 second(s), 20 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部