AmazeUI 按钮交互的实现示例


Posted in HTML / CSS onAugust 24, 2020

本文主要介绍了AmazeUI 按钮交互的实现示例,分享给大家,具体如下:

<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按钮交互</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
</head>
<body style="margin: 50px;">
<!--按钮 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" />
<script>
$('.btn-loading-example').click(function () {
 var $btn = $(this)
 $btn.button('loading');
 setTimeout(function(){
  $btn.button('reset');
 }, 5000);
});
</script>
<!--自定义选项-->
<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: '努力加载中...'}" />
<script>
$('.btn-loading-example').click(function () {
 var $btn = $(this)
 $btn.button('loading');
 setTimeout(function(){
  $btn.button('reset');
 }, 5000);
});
</script>
<!--单按钮状态切换-->
<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>
<!--复选框-->
<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>
</body>
</html>

效果图:

AmazeUI 按钮交互的实现示例

到此这篇关于AmazeUI 按钮交互的实现示例的文章就介绍到这了,更多相关AmazeUI 按钮交互内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 #HTML / CSS
Canvas波浪花环的示例代码
Aug 21 #HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 #HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 #HTML / CSS
amazeui 验证按钮扩展的实现
Aug 21 #HTML / CSS
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
yii分页组件用法实例分析
2015/12/28 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python3中exp()函数用法分析
2019/02/19 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python如何实现线程间通信
2020/07/30 Python
Python实现上下文管理器的方法
2020/08/07 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
罗马尼亚购物网站:Vivantis.ro
2019/07/20 全球购物
校本教研工作方案
2014/01/14 职场文书
2015年医药代表工作总结
2015/04/25 职场文书