amazeui学习笔记--js插件(UI增强2)--按钮交互Button
amazeui学习笔记--js插件(UI增强2)--按钮交互Button
一、总结
1、按钮loading状态:
<button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button>
<input type="button" class="am-btn am-btn-primary btn-loading-example" value="Submit - Input" /> $('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
}, 5000);
});
2、按钮loading状态自定义选项(功能):
可以在元素上添加 data-am-loading
来设置选项:
spinner
加载动画图标,适用于支持 CSS3 动画、非input
元素,写图标名称即可;loadingText
加载时显示的文字, 默认为loading
;resetText
重置以后的显示的文字,默认为原来的内容。
<button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">按钮 - button 元素</button> <input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按钮 - input 元素" data-am-loading="{loadingText: '努力加载中...'}" /> $('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
}, 5000);
});
3、单按钮状态切换:
<button id="doc-single-toggle" type="button" class="am-btn am-btn-primary" data-am-button>切换状态</button> <p>按钮状态:<span id="doc-single-toggle-status" class="am-text-danger">未激活</span></p> <script>
$(function() {
var $toggleButton = $('#doc-single-toggle');
$toggleButton.on('click', function() {
setButtonStatus();
}); function setButtonStatus() {
var status = $toggleButton.hasClass('am-active') ? '未激活' : '激活';
$('#doc-single-toggle-status').text(status);
}
})
</script>
4、默认选中状态: <label>
上添加 am-active
类名 <input>
上添加 checked
属性。
5、单选框:
<div class="am-btn-group doc-js-btn-1" data-am-button>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 1" id="option1"> 选项 1
</label>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 2" id="option2"> 选项 2
</label>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 3" id="option3"> 选项 3
</label>
<label class="am-btn am-btn-primary am-disabled">
<input type="radio" name="options" value="选项 4" id="option4"> 选项 4
</label>
</div>
<script>
// 获取选中的值
$(function() {
var $radios = $('[name="options"]');
$radios.on('change',function() {
console.log('单选框当前选中的是:', $radios.filter(':checked').val());
});
});
</script>
6、复选框:
<div class="am-btn-group" data-am-button>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="苹果"> 苹果
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="橘子"> 橘子
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉
</label>
</div>
<script>
$(function() {
var $cb = $('[name="doc-js-btn"]');
$cb.on('change', function() {
var checked = [];
$cb.filter(':checked').each(function() {
checked.push(this.value);
}); console.log('复选框选中的是:', checked.join(' | '));
});
});
</script>
二、按钮交互Button
Button JS 交互
Button 及 Button group 与 JS 交互。
按钮 loading 状态
默认文字
默认的文字为 loading...
。
<button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button>
<input type="button" class="am-btn am-btn-primary btn-loading-example" value="Submit - Input" />
$('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
}, 5000);
});
自定义选项
可以在元素上添加 data-am-loading
来设置选项:
spinner
加载动画图标,适用于支持 CSS3 动画、非input
元素,写图标名称即可;loadingText
加载时显示的文字, 默认为loading
;resetText
重置以后的显示的文字,默认为原来的内容。
<button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">按钮 - button 元素</button>
<input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按钮 - input 元素" data-am-loading="{loadingText: '努力加载中...'}" />
$('.btn-loading-example').click(function () {
var $btn = $(this)
$btn.button('loading');
setTimeout(function(){
$btn.button('reset');
}, 5000);
});
单按钮状态切换
按钮状态:未激活
<button id="doc-single-toggle" type="button" class="am-btn am-btn-primary" data-am-button>切换状态</button>
<p>按钮状态:<span id="doc-single-toggle-status" class="am-text-danger">未激活</span></p>
<script>
$(function() {
var $toggleButton = $('#doc-single-toggle');
$toggleButton.on('click', function() {
setButtonStatus();
});
function setButtonStatus() {
var status = $toggleButton.hasClass('am-active') ? '未激活' : '激活';
$('#doc-single-toggle-status').text(status);
}
})
</script>
复选框
注意:由于 FastClick 的原因,触屏设备上使用时需要在 input
上添加 .needsclick
,否则无法获取复选框的值。
<div class="am-btn-group" data-am-button>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="苹果"> 苹果
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="橘子"> 橘子
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉
</label>
</div>
<script>
$(function() {
var $cb = $('[name="doc-js-btn"]');
$cb.on('change', function() {
var checked = [];
$cb.filter(':checked').each(function() {
checked.push(this.value);
});
console.log('复选框选中的是:', checked.join(' | '));
});
});
</script>
单选框
<div class="am-btn-group doc-js-btn-1" data-am-button>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 1" id="option1"> 选项 1
</label>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 2" id="option2"> 选项 2
</label>
<label class="am-btn am-btn-primary">
<input type="radio" name="options" value="选项 3" id="option3"> 选项 3
</label>
<label class="am-btn am-btn-primary am-disabled">
<input type="radio" name="options" value="选项 4" id="option4"> 选项 4
</label>
</div>
<script>
// 获取选中的值
$(function() {
var $radios = $('[name="options"]');
$radios.on('change',function() {
console.log('单选框当前选中的是:', $radios.filter(':checked').val());
});
});
</script>
设置默认选中状态
设置默认选中状态涉及两处:
<label>
上添加am-active
类名(2.7.0+
无需添加此类名);<input>
上添加checked
属性。
<div class="am-btn-group" data-am-button>
<!--默认选中状态设置-->
<label class="am-btn am-btn-primary am-active">
<input type="checkbox" class="needsclick" name="doc-js-btn" value="苹果" checked> 苹果
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" class="needsclick" name="doc-js-btn" value="橘子"> 橘子
</label>
<label class="am-btn am-btn-primary">
<input type="checkbox" class="needsclick" name="doc-js-btn" value="香蕉"> 香蕉
</label>
</div>
Issue 列表
amazeui学习笔记--js插件(UI增强2)--按钮交互Button的更多相关文章
- amazeui学习笔记--js插件(UI增强)--警告框Alert
amazeui学习笔记--js插件(UI增强)--警告框Alert 一.总结 1.警告框基本样式:用am-alert声明div容器, <div class="am-alert" ...
- amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown
amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...
- amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse
amazeui学习笔记--js插件(UI增强3)--折叠面板Collapse 一.总结 注意点: 1.data-am-collapse:这个东西就是展开折叠事件 2.am-collapse(包括其下属 ...
- amazeui学习笔记二(进阶开发1)--项目结构structure
amazeui学习笔记二(进阶开发1)--项目结构structure 一.总结 1.项目结构:是说的amazeui在github上面的项目结构,二次开发amazeui用 二.项目结构structure ...
- amazeui学习笔记三(你来我往1)--常见问题FAQs
amazeui学习笔记三(你来我往1)--常见问题FAQs 一.总结 1.DOM事件失败:记得加上初始化代码,例如 图片轮播 $('#my-slider').flexslider(); 2.jquer ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- amazeui学习笔记一(开始使用3)--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
- amazeui学习笔记一(开始使用2)--布局示例layouts
amazeui学习笔记一(开始使用2)--布局示例layouts 一.总结 1.样例分析(不要忘记,优先分析这个布局示例):有教你页面怎么布局的,实例中可以分析一波 2.响应式:对应meta标签中的v ...
随机推荐
- IOS开发人员经常使用的10个Xcode插件
IOS开发人员经常使用的10个Xcode插件 申请达人,去除赞助商链接 一个合适的插件意味着它能够适应不同的开发环境,Sublime Text 和TextMate就是非常好的样例.你知道Xcode也支 ...
- matlab 时频分析(短时傅里叶变换、STFT)
短时傅里叶变换,short-time fourier transformation,有时也叫加窗傅里叶变换,时间窗口使得信号只在某一小区间内有效,这就避免了传统的傅里叶变换在时频局部表达能力上的不足, ...
- 利用日志文件恢复MYSQL数据库
利用日志文件恢复MYSQL数据库 650) this.width=650;" onclick='window.open("http://blog.51cto.com/viewpic ...
- Gym 100952 C. Palindrome Again !!
http://codeforces.com/gym/100952/problem/C C. Palindrome Again !! time limit per test 1 second memor ...
- [log4j]Slf4j的包冲突
Caused by: java.lang.NoClassDefFoundError: Could not initialize class org.apache.log4j.Log4jLoggerFa ...
- C/C++(基础编码-补码详解)
两个数的交换 1.引入第三者. 2.求和运算,求差.(这样会产生内存溢出) 3.异或运算 a = a^b; b = a^b; a = a^b; 8b(bit位) = 1B(Byte=字节)//最小单位 ...
- 微信小程序从零开始开发步骤(二)创建小程序页面
上一章注册完小程序,添加新建的项目,大致的准备开发已经完成,本章要分享的是 要创建一个简单的页面了,创建小程序页面的具体几个步骤: 1. 在pages 中添加一个目录 选中page,右击鼠标,从硬盘打 ...
- [REASONML] Using Javascript npm package from REASON
For example, we want to use moment.js inside our ReasonML code. What we can do is create a module fi ...
- codecombat之边远地区的森林12-22关及地牢39关代码分享
codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- Kali Linux下安装VMware Tools
引言 Kali Linux是基于Debian的Linux发行版, 设计用于数字取证和渗透測试.安装Kali Linux非常easy,可是安装VMware Tools的过程就有点麻烦了,由于在安装中途会 ...