首页
复制
前进
后退
刷新
首页
编程开发
python
JavaScript
JAVA
测试工具
操作系统
MacOS
Windows
linux
主题美化
hexo
typecho
开发工具
Idea
eclipse
学习笔记
NAS
Docker
友情链接
留言板
关于本站
用户登录
用户名
密码
登录
关键词搜索
搜索
标签搜索
MacOS
SweetAlert
JavaScript
hexo
C语言
IDE
Eclipse
centos
linux
python
idea
jrebel
next
live2d
Navicat
alfred
docker
gogs
git
pymysql
热门文章
1
Python自动化生成Java的Mapper和Model注解类
1.4k 阅读
2
搭建一个私人的ChatGPT
742 阅读
3
分享自建的Jrebel License Server激活Jrebel
728 阅读
4
【软件推荐】微信小助手 for Mac
696 阅读
5
SweetAlert弹窗插件中文API（一）：快速入门
437 阅读
6
利用Gogs搭建自己的git远程服务器
412 阅读
7
Eclipse Che安装使用教程（一）：安装Eclipse Che
395 阅读
8
Eclipse Che安装使用教程（二）：多用户的后台控制
365 阅读
9
SweetAlert弹窗插件中文API（二）：文档
342 阅读
偷得浮生半日闲
首页
分类
编程开发
python
JavaScript
JAVA
测试工具
操作系统
MacOS
Windows
linux
主题美化
hexo
typecho
开发工具
Idea
eclipse
学习笔记
NAS
Docker
页面
友情链接
留言板
关于本站
用户登录
登录
“JavaScript” 共(2)篇
SweetAlert弹窗插件中文API（二）：文档
说明官方网址：https://sweetalert.js.org/docs/插件版本：2.0.1文档汉化：Joey Yan汉化说明：本人英语能力有限，如有不正确的地方欢迎在下方评论留言，或直接在线与我联系。配置概览你可以使用这些参数，通过一个对象传入到sweetAlert中：参数类型概述textstring弹窗的内容titlestring弹窗的标题iconstring弹窗的图标buttonstring boolean ButtonOptions修改弹窗默认按钮的样式buttonsboolean string[] ButtonOptions[] ButtonList自定义弹窗的按钮contentNode string用户自定义内容classNamestring为弹窗添加一个自定义CLASScloseOnClickOutsideboolean是否可通过遮罩关闭弹窗closeOnEscboolean是否可通过esc键关闭弹窗dangerModeboolean将弹窗样式变为关键提示样式timernumber设置弹窗自动关闭时间详细描述text类型string默认值""（空字符串）详细说明弹窗的文本文字。它既可以作为配置的参数添加（如下例所示），也可以作为第一个也是唯一的参数传递（例如：swal("Hello world!")），如果你有多个字符串参数则传递给第二个参数（例如：swal("A title", "Hello world!")）。演示swal({ text: "Hello world!", });title类型string默认值""（空字符串）详细说明弹窗的标题文字。它既可以作为配置的参数添加（如下例所示），也可以作为swal函数的第一个参数（当swal函数有多个参数时）进行传递（例如：swal("这是标题！","这是一些文字")）。演示swal({ title: "这是一个标题！", });icon类型string默认值""（空字符串）详细说明弹窗显示的图标。 SweetAlert预定义了4个可以使用的内置图标："warning""error""success""info"它既可以作为配置的参数添加（如下例所示），也可以作为swal函数的第三个参数进行传递（例如：swal("Title", "Text", "success")）。演示swal({ icon: "success", });button类型string boolean ButtonOptions默认值{ text: "OK", value: true, visible: true, className: "", closeModal: true, }详细说明默认显示确认按钮。您可以通过将button设置为string来更改其显示的文本，也可以通过传递ButtonOptions对象来调整更多设置。将其设置为false会隐藏按钮。演示swal({ button: "Coolio", });swal({ button: { text: "Hey ho!", }, });swal("Hello world!", { button: false, });buttons类型boolean string[] ButtonOptions[] ButtonList默认值{ cancel: { text: "Cancel", value: null, visible: false, className: "", closeModal: true, }, confirm: { text: "OK", value: true, visible: true, className: "", closeModal: true } }详细说明指定按钮的确切数量及每个按钮的配置。 如果使用字符串数组，则可以将元素设置为字符串（仅设置显示的文本），ButtonOptions对象可与字符串组合使用。 您还可以将其中一个元素设置为true，以便只获取按钮的默认选项。如果您需要的不只默认的取消和确认按钮，则需要指定一个ButtonList对象，其中键（按钮的名称）的值为ButtonOptions。您还可以指定false来隐藏所有按钮（与button参数的效果相同）。演示swal({ buttons: ["Stop", "Do it!"], });swal({ buttons: [true, "Do it!"], });swal("Hello world!", { buttons: false, });swal({ buttons: { cancel: true, confirm: true, }, });swal({ buttons: { cancel: true, confirm: "Confirm", roll: { text: "Do a barrell roll!", value: "roll", }, }, });content类型Node string默认值null详细说明用户自定义内容，可以但不限于修改文本与图标演示swal({ content: "input", });swal({ content: { element: "input", attributes: { placeholder: "Type your password", type: "password", }, }, });var slider = document.createElement("input"); slider.type = "range"; swal({ content: slider, });className类型string默认值""（空字符串）详细说明将自定义CLASS添加到SweetAlert元素中。 方便使用CSS样式改变外观。演示 .red-bg{ background-color: rgba(255,0,0,0.28); }//Javascript代码 swal("Hello world!", { className: "red-bg", });closeOnClickOutside类型boolean默认值true详细说明通过设置该参数来决定用户是否能够通过点击弹窗外部来关闭弹窗。演示swal({ closeOnClickOutside: false, });closeOnEsc类型boolean默认值true详细说明通过设置该参数来决定用户是否能够通过按ESC键来关闭弹窗。演示swal({ closeOnEsc: false, });dangerMode类型boolean默认值false详细说明如果设置为true，则确认按钮的颜色会变为红色，而默认焦点则会设置在取消按钮上。 当需要确认关键操作（例如删除项目）时，这很方便。演示swal("Are you sure?", { dangerMode: true, buttons: true, });timer类型number默认值null详细说明在一定时间后（单位为毫秒）关闭弹窗。 当button参数被设置为false时，这个参数很有用。演示swal("This modal will disappear soon!", { buttons: false, timer: 3000, });方法名称描述示例close关闭当前打开的SweetAlert弹窗，效果与手动按下取消按钮一样。swal.close()getState获取当前SweetAlert弹窗的状态。swal.getState()setActionValue修改当前弹窗按钮的文本。您可以只传一个字符串（默认情况下它会更改确认按钮的文本）或一个对象。swal.setActionValue({ confirm: 'Text from input' })stopLoading删除弹窗中所有按钮的加载状态，可将其与button参数中的closeModal:false结合使用。swal.stopLoading()=page=美化主题通过编辑指定CLASS的CSS样式，可以自定义SweetAlert弹窗不同部位的样式swal-overlay说明修改弹窗的遮罩样式示例.swal-overlay { background-color: rgba(43, 165, 137, 0.45); }swal-modal说明修改弹窗主界面的样式示例.swal-modal { background-color: rgba(63,255,106,0.69); border: 3px solid white; }swal-title说明修改弹窗标题栏的样式示例.swal-modal { background-color: rgba(63,255,106,0.69); border: 3px solid white; }swal-text说明修改弹窗文本栏的样式示例.swal-text { background-color: #FEFAE3; padding: 17px; border: 1px solid #F0E1A1; display: block; margin: 22px; text-align: center; color: #61534e; }swal-footer说明修改弹窗底部栏（按钮区域）的样式示例.swal-footer { background-color: rgb(245, 248, 250); margin-top: 32px; border-top: 1px solid #E9EEF1; overflow: hidden; }swal-button说明修改弹窗中所有按钮的样式，弹窗按钮除了都有swal-button类外，不同类型的按钮还有一个额外的类，格式为swal-button-[type]。例如，确认按钮的额外的类是swal-button-confirm，当仅需要自定义某个按钮的样式时，就可以用这个额外类去修改。示例 .swal-button { padding: 7px 19px; border-radius: 2px; background-color: #4962B3; font-size: 12px; border: 1px solid #3e549a; text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }
2018年09月13日
丨
342阅读
丨
0评论
JavaScript
SweetAlert弹窗插件中文API（一）：快速入门
说明官方网址：https://sweetalert.js.org/guides/插件版本：2.0.1文档汉化：Joey Yan汉化说明：本人英语能力有限，如有不正确的地方欢迎在下方评论留言，或直接在线与我联系。安装NPM/Yarn官网推荐的安装方法，使用命令行工具npm或Yarn来安装SweetAlertnpm install sweetalert --save然后，只需使用以下代码即可将其导入到您的应用程序：import swal from 'sweetalert';CDN您还可以在unpkg和jsDelivr网站上上找到SweetAlert的CDN服务，直接引用并使用全局变量swal。<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>开始使用显示一个基本弹窗将文件导入应用程序后，可以调用swal函数（请确保在DOM加载后再调用它！）来生成一个弹窗，参数为弹窗显示的内容，首先让我们从Hello world!开始swal("Hello world!");如果传递两个参数，那么第一个参数将是弹窗的标题，第二个参数是弹窗显示的文本。swal('这是一个标题！', '...这是弹窗显示的文本！');添加第三个参数，您就可以在弹窗中添加一个动态图标！一共有4个预定义好的参数："warning"，"error"， "success"和 "info"。分别表示“警告”、“错误”、“成功”和“信息”。swal('干得漂亮！', '你点击了这个按钮！','success');选项配置除了如上一步中快速生成一个弹窗外，也可以使用一个JSON对象作为唯一参数重写弹窗参数的方式来生成一个弹窗，如上一个示例中，如果使用参数重写方法，则代码为：swal({ title: "干得漂亮！", text: "你点击了这个按钮！", icon: "success", });使用这种方式生成弹窗，我们可以指定更多的选项来自定义弹窗。例如，我们可以将弹窗的确认按钮的文本改为"没错！"：swal({ title: "干得漂亮！", text: "你点击了这个按钮！", icon: "success", button: "没错！", });你也可以将基本写法与选项配置结合着使用，这样做可以为您节省一些写代码的时间：swal("干得漂亮！", "你点击了这个按钮！", "success", { button: "没错！", });获取交互状态SweetAlert使用promises对象来跟踪用户如何与弹窗交互。如果用户单击确认按钮，则promise将返回true。如果弹窗被关闭（通过单击它外部），则promise将返回null。swal("请单击按钮或弹窗的外部来关闭弹窗。") .then((value) => { swal(`返回的值为: ${value}`); });如果您想在执行关键操作之前警告用户，获取交互状态就可以派上用场。通过设置更多选项，我们还可以让弹窗变得更完善。通过将icon参数设置为预定义的"warning"，以显示一个漂亮的警告图标。通过将buttons（复数）参数设置为true，SweetAlert除了显示默认的确认按钮之外，还将显示一个取消按钮。通过将dangerMode参数设置为true，焦点将会自动设置在取消按钮而不是确认按钮上，并且确认按钮将会从默认的蓝色变为红色，以强调这是一个关键的操作。swal({ title: "操作确认", text: "删除后，您将无法恢复此虚拟文件！", icon: "warning", buttons: true, dangerMode: true, }) .then((willDelete) => { if (willDelete) { swal("噗！您的虚拟文件已被删除！", { icon: "success", }); } else { swal("你的虚拟文件是安全的！"); } });=page=高级用法自定义按钮在基础用法中，我们已经学到了如何将确认按钮的文本设置为没错！。如果还想显示自定义的取消按钮，我们可以将buttons参数的值设置为字符串数组，数组中第一个值是取消按钮的文本，第二个值是确认按钮的文本：swal("你确定要这么做吗？", { buttons: ["哦不！", "没错！"], });如果您只想修改其中一个按钮的默认文本，那么不需要修改的那个按钮你可以赋值为true而不是字符串：swal("你确定要这么做吗？", { buttons: ["哦不！", true], });那么如果您需要的不仅仅是取消和确认按钮呢？别担心，SweetAlert依旧能够满意你的要求！通过为按钮指定参数，您可以根据需要设置一个按钮，并指定它们在单击时返回的值！在下面的示例中，我们设置了3个按钮：cancel参数，默认情况下返回值为null并将其文本设置为"快跑!"。catch参数，它将生成一个自定义按钮，文本内容为"扔神奇宝贝！"，返回值为"catch"。defeat参数。我们将其设定为true，让SweetAlert为按钮设置一些默认配置。在这种情况下，它会将文本内容设置为"Defeat"（大写）,返回值设置为"defeat"。如果我们将取消按钮设置为true，它仍将默认返回null。swal("前方出现了一只野生的宠物小精灵，你想要怎么做？", { buttons: { cancel: "逃跑！", catch: { text: "扔神奇宝贝球！", value: "catch", }, defeat: true, }, }) .then((value) => { switch (value) { case "defeat": swal("宠物小精灵被你打败了，你获得500经验值！"); break; case "catch": swal("恭喜", "你抓到这只宠物小精灵了！", "success"); break; default: swal("你安全了！"); } });[scode color="lblue"]您可以在文档中查看所有的可用按钮选项。[/scode]AJAX请求由于SweetAlert是基于promise对象的，所以SweetAlert可以使用基于promise的AJAX请求函数。下面是一个使用fetch在iTunes API上搜索艺术家的示例。请注意，我们使用了"input"控件，以便在用户单击确认按钮时显示输入的字段内容并获取它的值：swal({ text: '请输入想要搜索的电影名称，如：“Fast & Furious”', content: "input", button: { text: "搜索！", closeModal: false, }, }) .then(name => { if (!name) throw null; return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`); }) .then(results => { return results.json(); }) .then(json => { const movie = json.results[0]; if (!movie) { return swal("未找到相关的内容！"); } const name = movie.trackName; const imageURL = movie.artworkUrl100; swal({ title: "最佳匹配：", text: name, icon: imageURL, }); }) .catch(err => { if (err) { swal("失败", "AJAX请求失败!", "error"); } else { swal.stopLoading(); swal.close(); } });使用DOM节点作为弹窗内容有时候，你可能会遇到这样一个场景：使用SweetAlert提供的开箱即用功能非常便利，但是有一些自定义的用户界面可能不仅仅需要样式按钮和文本。为此，SweetAlert准备了content参数。在上一个示例中，我们看到了如何将content参数设置为"input"以在我们的弹窗中生成一个<input />元素，当点击确认按钮时，其默认的返回值trye将被替换为<input />元素所输入的内容。"input"是为方便起见而存在的预定义选项，您可以将content参数的值设置为任何的DOM节点！让我们来看看，如何重新创建以下弹窗的功能......swal("请在下面的文本框中随意输入一些内容：", { content: "input", }) .then((value) => { swal(`您输入的内容为：${value}`); });...使用自定义DOM节点！我们将在这里使用React UI库，他可以帮助我们了解如何创建更复杂的SweetAlert，您也可以使用任何其他你熟悉或所需的库，只要您可以从中提取DOM节点！import React, { Component } from 'react'; import ReactDOM from 'react-dom'; const DEFAULT_INPUT_TEXT = ""; class MyInput extends Component { constructor(props) { super(props); this.state = { text: DEFAULT_INPUT_TEXT, }; } changeText(e) { let text = e.target.value; this.setState({ text, }); swal.setActionValue(text); } render() { return ( <input value={this.state.text} onChange={this.changeText.bind(this)} /> ) } } // We want to retrieve MyInput as a pure DOM node: let wrapper = document.createElement('div'); ReactDOM.render(<MyInput />, wrapper); let el = wrapper.firstChild; swal({ text: "Write something here:", content: el, buttons: { confirm: { value: DEFAULT_INPUT_TEXT, }, }, }) .then((value) => { swal(`You typed: ${value}`); });初一开始看起来或许会觉得很复杂，但实际上非常简单。我们所做的只是创建一个<input />标签作为React组件。然后，我们提取其DOM节点并将其做为swal函数中content参数的值，以将其呈现为无样式元素。其唯一的区别在于SweetAlert的代码是swal.setActionValue()和最后的swal()调用。其余的都只是基本的React和JavaScript。使用这种技术，我们可以创建具有更多交互式UI的模态，例如来自Facebook的这种模式。=page=较1.X版本的升级SweetAlert 2.0引入了一些重大的变化，以使库更易于使用并且更加的灵活。最重要的变化是promises不再推荐使用回调函数，并且您不再需要导入任何外部CSS文件（因为样式现在全部捆绑在了.js文件中）。以下是一些其他已被弃用的方法及其替代方法：当使用单个字符串参数（例如：swal("Hello world!")）时，在2.0版本中该参数设置的是弹窗的文本，而在1.0中，该参数设置的是其标题。type和imageUrl两个参数在2.0版本中已替换为单个icon参数。如果您使用的是基础弹窗（swal("Hi", "Hello world", "warning")），则无需进行任何更改。customClass参数在2.0版本中更名为className。弃用imageSize参数，在2.0版本中，您需要在CSS中指定相应的尺寸限制。如果您有特殊用例，则可以为组件提供自定义的CLASS。弃用showCancelButton和showConfirmButton参数，在2.0版本中，您可以通过设置buttons: true来表示显示默认配置的按钮，或buttons: false表示隐藏所有按钮。默认情况下，仅显示确认按钮。弃用confirmButtonText和cancelButtonText参数。在2.0版本中，您可以设置buttons: "foo"将确认按钮上的文本设置为foot，或buttons: ["foo", "bar"]将取消按钮上的文本设置为foo，将确认按钮上的文本设置为bar。弃用confirmButtonColor参数。在2.0版本中，您应该通过CSS指定所有样式的更改。作为预设的简写，您可以设置dangerMode:true以将确认按钮变为红色。或者，您可以在buttons参数中为每一个按钮指定一个CLASS。弃用closeOnConfirm和closeOnCancel。在2.0版本中，您可以在buttons参数中为每个按钮设置closeModal参数。弃用showLoaderOnConfirm参数。在2.0版本中，当按钮的closeModal参数设置为false时，您的按钮将自动显示loding动画。弃用animation参数。在2.0版本中，所有样式更改都可以通过CSS和自定义弹窗CLASS来实现。type: "input", inputType, inputValue 和 inputPlaceholder参数在2.0版本中都已被content对象替代。您可以通过指定content: "input"以获取默认选项，也可以使用content对象进一步自定义内容。在2.0中不再使用HTML。而是使用content对象。为消除歧义，更清晰描述参数的功能，allowEscapeKey参数在2.0版本中更名为closeOnEsc。为消除歧义，更清晰描述参数的功能，allowClickOutside参数在2.0版本中更名为closeOnClickOutside。
2018年09月12日
丨
437阅读
丨
0评论
JavaScript
