Ionic控件之——按钮(Button)
2015-12-14 11:58
309 查看
Ionic提供丰富的按钮特性,足以满足大部分的按钮实现需求。
一、HTML实现一个简单按钮:
监听按钮的点击事件:
通常一个按钮被用户点击后,一定会触发一个功能,例如提交表单、确认选择、弹出提示等等,因此对按钮点击的监听,以及触发点击后要处理的事件逻辑是在Ionic开发中最常见的开发需求。
在html中为ng-click添加一个事件:
JS中实现点击事件:
在上述界面相绑定的JS文件中,实现对应的点击逻辑,我们先实现一个点击后弹出提示框的简单逻辑:
特别要注意的是,JS中$scope作用域下的点击事件函数名必须和html中定义的ng-click中的函数名一致。
点击事件参数:
通常界面中有多个按钮时,可以按照上述方法,定义不同的按钮,并绑定不同名字的事件函数,达到各自实现各自逻辑的目的。但是如果在一个大量的数据列表中,每一个单元选项都有一个按钮时,我们不可能去定义无数个不同的事件。此时就需要通过传递参数来通知一个按钮事件,并进行判断来自哪一个按钮。
现在Html中定义三个按钮,并在ng-click事件中的括号里,补充不同的参数。
JS中实现带参数的事件监听:
二、按钮的样式:
撑满显示:
经过运行,你可能会发现上述的按钮大小和按钮文字的数量有关,如果需要显示一个撑满横向屏幕的按钮,可以在class中,增加button-full这个样式
运行后可以发现按钮以横向撑满方式显示在屏幕上了
按钮的颜色:
是时候给按钮配上一个好看的颜色了,Ionic为基础控件
一、HTML实现一个简单按钮:
<buttonclass="button"> 我是按钮 </button>
监听按钮的点击事件:
通常一个按钮被用户点击后,一定会触发一个功能,例如提交表单、确认选择、弹出提示等等,因此对按钮点击的监听,以及触发点击后要处理的事件逻辑是在Ionic开发中最常见的开发需求。
在html中为ng-click添加一个事件:
<buttonclass="button"ng-click="onClickBtn()"> 我是按钮 </button>
JS中实现点击事件:
在上述界面相绑定的JS文件中,实现对应的点击逻辑,我们先实现一个点击后弹出提示框的简单逻辑:
$scope.onClickBtn=function(){ alert("HelloWorld"); };
特别要注意的是,JS中$scope作用域下的点击事件函数名必须和html中定义的ng-click中的函数名一致。
点击事件参数:
通常界面中有多个按钮时,可以按照上述方法,定义不同的按钮,并绑定不同名字的事件函数,达到各自实现各自逻辑的目的。但是如果在一个大量的数据列表中,每一个单元选项都有一个按钮时,我们不可能去定义无数个不同的事件。此时就需要通过传递参数来通知一个按钮事件,并进行判断来自哪一个按钮。
现在Html中定义三个按钮,并在ng-click事件中的括号里,补充不同的参数。
<buttonclass="button"ng-click="onClickBtn(1)"> 我是按钮 </button>
<buttonclass="button"ng-click="onClickBtn(2)"> 我是按钮 </button>
<buttonclass="button"ng-click="onClickBtn(3)"> 我是按钮 </button>
JS中实现带参数的事件监听:
$scope.onClickBtn=function(number){
alert("I'mNo."+number); };
二、按钮的样式:
撑满显示:
经过运行,你可能会发现上述的按钮大小和按钮文字的数量有关,如果需要显示一个撑满横向屏幕的按钮,可以在class中,增加button-full这个样式
<buttonclass="button
button-full
"> 我是撑满按钮 </button>
运行后可以发现按钮以横向撑满方式显示在屏幕上了
按钮的颜色:
是时候给按钮配上一个好看的颜色了,Ionic为基础控件
相关文章推荐
- iis7+php5.6配置404错误页面的问题
- KVM,QEMU核心分析
- Laravel 5.1 事件、事件监听的简单应用
- Android Studio 工程依赖问题
- 基础排序
- 美团Android资源混淆保护实践 - 美团技术团队
- action sheet
- 你的情商很高,只是你没发现而已
- 10021---JavaScript--HTML DOM (文档对象模型)简介
- 线程下载图片的问题
- IOS开发 扫描二维码
- Netcat 命令--网络工具中的瑞士军刀
- Linux系统实现多网段DHCP服务器配置
- C/C++小知识总结之四
- Android中自定义ContentProvider及用法
- RouterOS的DHCP中继代理配置
- 带有指示器的progressbar
- 点击空白处让输入法隐藏的比较好用的方法
- 使用 pm2-web 监控 pm2 服务运行状态
- 利用virt-manager远程linux虚拟机