js插件---Amaze UI dialog如何使用
2024-09-02 03:02:15
js插件---Amaze UI dialog如何使用
一、总结
一句话总结:别人给你列出来的参考手册照着用先
1、在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)?
github上面啊,非常详细了
2、dialog中如何动态控制弹出框?
方法一:这里可以用将方法赋值给变量的形式,然后再将这个变量show()出来
25 var $actions = AMUI.dialog.actions({
26 title: '标题啊',
27 items: [
28 {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'},
29 {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'},
30 {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'}
31 ],
32 onSelected: function(index, target) {
33 console.log(index);
34 $actions.close();
35 }
36 });
37
38 $actions.show();
方法二:直接封装在某个方法体类,比如onclick
14 <script>
15 $('.js-alert').on('click', function() {
16 AMUI.dialog.alert({
17 title: 'Alert 窗口',
18 content: 'Hello world.',
19 onConfirm: function() {
20 console.log('close');
21 }
22 });
23 });
24 </script>
二、最简单样例
1、截图
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/amazeui.min.css"/>
<script src="../js/jquery.min.js"></script>
<script src="../js/amazeui.min.js"></script>
<script src="dialog-master/dist/amazeui.dialog.min.js"></script>
</head>
<body>
<buttong class="am-btn am-btn-primary js-alert">点击显示 Alert</buttong> <script>
$('.js-alert').on('click', function() {
AMUI.dialog.alert({
title: 'Alert 窗口',
content: 'Hello world.',
onConfirm: function() {
console.log('close');
}
});
});
</script> </body>
</html>
三、github上面使用手册
Amaze UI Modal 插件 HTML 模板封装。
使用说明:
- 获取 Amaze UI dialog
- 直接下载
- 使用 NPM:
npm install amazeui-dialog
- 在 Amaze UI 样式之后引入 dialog 样式(
dist
目录下的 CSS):
Amaze UI dialog 依赖 Amaze UI 样式。
<link rel="stylesheet" href="path/to/amazeui.min.css"/>
- 引入 dialog 插件(
dist
目录下的 JS):
<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.min.js"></script>
<script src="path/to/amazeui.dialog.min.js"></script>
- 调用 dialog:
AMUI.dialog.alert({
title: '错误提示',
content: '你的家还好吧',
onConfirm: function() {
console.log('close');
}
}); AMUI.dialog.confirm({
title: '错误提示',
content: '正文内容',
onConfirm: function() {
console.log('onConfirm');
},
onCancel: function() {
console.log('onCancel')
}
}); var $loading = AMUI.dialog.loading();
setTimeout(function() {
$loading.modal('close');
}, 3000); var $actions = AMUI.dialog.actions({
title: '标题啊',
items: [
{content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'},
{content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'},
{content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'}
],
onSelected: function(index, target) {
console.log(index);
$actions.close();
}
}); $actions.show(); AMUI.dialog.popup({title: '标题', content: '正文'});
四、amaze ui官方使用dialog说明
使用说明:
获取 Amaze UI dialog
- 直接下载
- 使用 NPM:
npm install amazeui-dialog
在 Amaze UI 样式之后引入 dialog 样式(
dist
目录下的 CSS):Amaze UI dialog 依赖 Amaze UI 样式。
<link rel="stylesheet" href="path/to/amazeui.min.css"/>
引入 dialog 插件(
dist
目录下的 JS):<script src="path/to/jquery.min.js"></script> <script src="path/to/amazeui.min.js"></script> <script src="path/to/amazeui.dialog.min.js"></script>
调用 dialog:
AMUI.dialog.alert({ title: '错误提示', content: '你的家还好吧', onConfirm: function() { console.log('close'); } }); AMUI.dialog.confirm({ title: '错误提示', content: '正文内容', onConfirm: function() { console.log('onConfirm'); }, onCancel: function() { console.log('onCancel') } }); var $loading = AMUI.dialog.loading(); setTimeout(function() { $loading.modal('close'); }, 3000); var $actions = AMUI.dialog.actions({ title: '标题啊', items: [ {content: '<a href="#"><span class="am-icon-wechat"></span> 分享到微信</a>'}, {content: '<a href="#"><i class="am-icon-mobile"></i> 短信分享</a>'}, {content: '<a href="#"><i class="am-icon-twitter"></i> 分享到 XX 萎跛</a>'} ], onSelected: function(index, target) { console.log(index); $actions.close(); } }); $actions.show(); AMUI.dialog.popup({title: '标题', content: '正文'});
最新文章
- 第六章 jQuery和ajax应用
- MVC &ndash; 7.Razor 语法
- three.js入门2
- 关于NSRunLoop和NSTimer的深入理解
- Visual Studio创建跨平台移动应用_03.AppBuilder Extension
- php笔试题1
- java.util.concurrent-------TimeUnit
- Eclipse代码自动提示设置
- Android开发(30)--AutoCompleteTextView和MultiAutoCompleteTextView自动提示输入内容
- hdu1166树状数组
- [javascript] postmessage
- Oracle改动字段类型和长度
- magento 2 method config
- Python——字典操作
- Centos7安装Docker CE
- Docker笔记——Docker安装及制作镜像
- webpack简笔(1)
- head命令用法总结
- docker入门 什么是docker? 为什么使用docker?
- EDK II之USB设备驱动程序的加载与运行
热门文章
- BZOJ 3209 数位DP
- zookeeper图形界面工具zooinspector
- SharePoint 2010 开发人员学习指南
- error C4996: &#39;fopen&#39;: This function or variable may be unsafe. Consider using fopen_s instead解决方案
- PostgreSQL 批量生成数据
- vue.js技巧小计
- win7 ssd评分降为5.9的诡异问题解决方法
- Ehcache学习总结(1)--Ehcache入门介绍
- HDU 1520 Anniversary party(DFS或树形DP)
- UINavigationBar的系统渲染方式