曹智铭的网站

  • 主页
  • 关于我
  • 三年之约Marty
  • 我的云盘
  • 联系我
  • 友情链接
  • 登录/注册
曹智铭的网站
越自律,越自由!
  1. 首页
  2. 网站
  3. 正文

谁不想让自己的网站装载上Sweetalert呢?

2021年8月25日 337点热度 4人点赞 0条评论

【这篇文章迁移自我的原Hexo博客】
说真的,谁不厌倦JavaScript自带的默认弹窗?谁不想让自己的网站装载上Sweetalert呢?

对于默认弹窗的厌烦

 

在互联网上混迹多年的你,可能会看到一些这样的弹窗:

那个啥,这个效果是我用本地JavaScript代码搞出来的,可不是人家白宫官网自带的。我的网站还没有著名到让美国政府都知晓的程度。

不知道是不是写了太多这种弹窗,总感觉……好难看啊!!

  • 标题为“XXX网站显示”
  • 没有标题上方图标
  • 这个弹窗虽小,但是一旦弹出,只能按那个按钮才能继续,其它地方都点不了
  • 功能太少了

总之,我极其讨厌默认的这个弹窗!!!

开始Sweetalert

批判不仅要对事物提出自己的看法,有敢于提出自己的观点的勇气,也要有一定的建设性,而不能一味地否定。
整理自《义务教育教科书 道法 七年级下册(2016)》

好吧好吧,我不能只是批判默认弹窗,还得提出更好的,对吧?就如标题中所说,本次的主角是——Sweetalert。

那个东西就是Sweetalert(这不是废话吗)。针对那个功能,代码如下:

<script type="text/javascript" src="https://cdn.staticfile.org/sweetalert/1.1.2/sweetalert.min.js"></script> //先安装Sweetalert到该页面
<script type="text/javascript">
swal("我是Sweetalert","没错,就是我","success");
</script> //主程序

值得注意的是,这两行代码的顺序不可互换。因为要先安装才能使用。

当然,如果你喜欢用npm,也可以<code>npm install sweetalert --save`然后`import swal from 'sweetalert';。如果这句话你没看懂,直接跳过并使用前一种方式就可以了。

Sweetalert进阶

首先,这个图标,有多个预设:"warning", "error", "success" 和"info"。

<script type="text/javascript">
swal("比较欣慰的Sweetalert","这还差不多。","info");
</script>

你以为就这?别急,这才刚刚开始。先把按钮调整一下。

<script type="text/javascript">
swal("很高兴认识你!", {
  button: "你好"
});
</script>


好吧,基本的大致就这些。有关更多,请参见其官方文档。

一些超炫的东西

来几个炫酷的,基于Sweetalert的效果,来结束本文吧!

首先,去Apple iTunes搜电影:

<script type="text/javascript">swal({
  text: '搜索电影名称:',
  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("在iTunes上找不到相关电影!");
  }
  const name = movie.trackName;
  const imageURL = movie.artworkUrl100;
  swal({
    title: "首选搜索结果:",
    text: name,
    icon: imageURL,
  });
})
.catch(err => {
  if (err) {
    swal("哎呀!", "向iTunes发送的请求失败了!", "error");
  } else {
    swal.stopLoading();
    swal.close();
  }
});</script>


swal("说点什么吧?", {
  content: "input",
})
.then((value) => {
  swal(`你输入了:${value}`);
});


好吧,天知道我这篇文章写了多长时间,天知道这篇文章又会加载多长时间:这么多代码……好吧,本文就此了结吧。

标签: Sweetalert 网站
最后更新:2022年1月13日

曹智铭

嘿,很高兴认识你!我就读于人大附中翠微学校,热爱英语、编程等,是本站的管理员。

点赞
< 上一篇
下一篇 >

文章评论

您需要 登录 之后才可以评论

Copyright © 2020~2023 曹智铭的网站,保留所有权利。

Theme Kratos Made By Seaton Jiang

京ICP备2021015079号-2