`

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>

 

效果图：

 

 

 

  • 大小: 8.4 KB
分享到：
| AmazeUI 警告框
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    AmazeUI 按钮

    AmazeUI 按钮是基于前端框架 AmazeUI 的一个重要组件，主要为网页提供交互式的操作元素。AmazeUI 是一个由中国团队开发的、专为移动设备优化的开源前端框架，它支持响应式设计，能很好地适应不同屏幕尺寸的设备，如...

    AmazeUI 按钮交互的实现示例

    AmazeUI 是一款轻量级、模块化的前端框架，它为开发者提供了丰富的组件，包括按钮交互等，使得网页设计和开发更加便捷高效。在本文中，我们将深入探讨如何使用AmazeUI来实现按钮的交互效果。 首先，让我们看看HTML...

    amazeUI的使用

    - 在交互设计上，AmazeUI的组件提供了丰富的交互效果，如轮播图、滑块、折叠面板等，可以提升用户界面的互动性。 - 在移动应用开发中，AmazeUI的轻量级和移动端优化特性，使得它成为构建移动Web应用的理想选择。 ...

    基于AmazeUI的漂亮后台模板

    3. 按钮：AmazeUI提供多种样式的按钮，包括大小、颜色、形状等，满足不同的操作需求。 4. 图标：AmazeUI内置了一套图标库，包含大量矢量图标，可适应不同尺寸和颜色需求。 五、压缩包内容 "admin"这个文件可能是...

    AmazeUI 关闭按钮

    在AmazeUI中，关闭按钮通常表现为一个小小的“×”图标，常出现在弹出框、对话框或者可关闭的面板上。其设计目的是提供一种简洁、直观的交互方式，让用户能够快速地终止当前任务或返回到上一级界面。AmazeUI提供了...

    AmazeUI 弹出窗

    AmazeUI弹出窗是基于JavaScript和CSS3构建的一个轻量级、响应式的前端框架组件，主要用于实现网页上的对话框、提示框等交互效果。它提供了丰富的定制选项，可以适应不同场景下的需求，同时保持良好的用户体验。在...

    AmazeUI 下拉选框

    在AmazeUI中，“下拉选框”是用于创建交互式选择菜单的重要组件，它提供了一种友好的方式来展示多项可选项，并让用户能够方便地从中进行选择。这个组件在网页设计中十分常见，尤其在表单输入和数据过滤等场景中。 1...

    Amaze UI 模板Web 组件示例

    Amaze UI的登录组件可能包括输入框、按钮、记住密码、第三方登录等常见功能，设计上注重用户体验，如清晰的提示信息、友好的交互反馈等。 4. **前端框架**：Amaze UI 作为前端框架，包含了一系列CSS样式、...

    前端框架amazeui

    除了核心的HTML和CSS，AmazeUI也引入了JavaScript插件，扩展了组件的功能，如拖拽、滑动等交互效果。这些插件基于jQuery，对于熟悉jQuery的开发者来说，学习和使用起来非常方便。 总结来说，AmazeUI是一个强大的...

    AmazeUI模板

    AmazeUI的模板设计简洁而实用，通常包含了一系列预设的页面布局、导航栏、侧边栏、表单、按钮、图标等元素，这些模板可以直接应用于项目中，大大节省了开发时间和成本。"AmazeUI模板简介有效，可以直接拿来使用"这句...

    AmazeUI后台前端框架

    在组件方面，AmazeUI提供了丰富的UI控件，如导航栏、按钮、表单、网格系统、模态框、轮播图等。这些组件遵循一致的设计风格，易于集成到项目中，同时也支持自定义，以满足特定的设计需求。此外，AmazeUI还支持触屏...

    Amaze UI仿电脑版微信聊天界面HTML代码.zip

    在`&lt;head&gt;`部分，可以看到引入了Amaze UI的CSS和JavaScript库，这些库提供了所需的样式和交互功能。例如，`&lt;link&gt;`标签引用了Amaze UI的CSS文件，用于定义布局、字体、颜色等视觉元素；而`&lt;script&gt;`标签则加载了...

    AmazeUI 按钮组

    除了基本样式，AmazeUI按钮还支持多种颜色和大小的设定，比如`am-btn-primary`（主色调）、`am-btn-success`（成功状态）、`am-btn-warning`（警告状态）和`am-btn-danger`（危险操作）。同时，通过`am-btn-lg`、`am...

    基于amazeui商城销售管理后台模板html源码

    4. **模块化组件**: AmazeUI提供了一系列可复用的组件，如按钮、表单、网格、导航、下拉菜单等，这些组件遵循移动优先的原则，简化了开发流程，提高了代码复用性和可维护性。 5. **Bootstrap启发**: 虽然AmazeUI...

    AmazeUI-2.3.0

    3. `widget.html`和`widget.basic.html`："Widget"指的是可复用的组件，这些文件可能是AmazeUI提供的小部件示例，如按钮、表单元素、下拉菜单等，`basic.html`可能是基础样式或功能的展示。 4. `admin-form.html`：...

    AmazeUI 模态窗口

    总结来说，AmazeUI的模态窗口功能强大且易于使用，通过HTML、CSS和JavaScript的组合，开发者可以快速构建具有交互性的网页功能，提高用户体验。在项目中，合理运用模态窗口能够使页面交互更加直观和高效，是前端开发...

    简单实用的php+amazeui头像上传功能

    在头像上传场景中，AmazeUI可能提供了如按钮、表单、图片预览等元素，使用户能够在前端完成选择和预览头像的操作。 1. **前端部分**： - **文件输入控件**：HTML5的`&lt;input type="file"&gt;`元素用于让用户选择本地的...

    AmazeUI CSS动画

    AmazeUI CSS动画是前端开发中的一个重要组成部分，它为网页元素提供了丰富的动态效果，使得用户交互体验更加生动和吸引人。AmazeUI是中国的一款开源前端框架，它集成了多种CSS3动画，适用于移动优先的响应式设计。在...

    基于amazeui框架头像上传代码.zip

    AmazeUI可能会提供定制的样式和交互，使文件选择按钮与整体设计保持一致。 3. **图片预览**：在用户选择图片后，为了提供更好的用户体验，AmazeUI可能有图片预览功能，让用户在上传前看到所选图片的效果。 4. **...

Magicbox
Global site tag (gtag.js) - Google Analytics