使用 jQuery 生成多状态 UI 按钮 - magicButtons

使用 jQuery 生成多状态 UI 按钮 - magicButtons

版本:

浏览量:305

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

magicButtons 是一个简单的 jQuery 插件,用于在网页上创建多状态 UI 按钮,允许您在单击时更改按钮状态。

这个插件的主要目标是在按钮内创建一个内联加载指示器,用于 AJAX 内容加载或表单提交。

更多功能:

  • 3 种按钮样式:空、材料设计、轮廓。

  • 自定义状态文本和图标。

  • 圆形按钮边框。

  • 波纹点击动画。

  • 3 种尺寸:小号、中号和大号。

也可以看看:

  • 用于 Bootstrap 3 的带有内置加载指示器的按钮

  • 内置加载指示器按钮

  • 带有内置加载指示器的表单提交按钮 - Ladda

  • 轻量级 jQuery 加载按钮插件

  • 使用 jQuery 和 Materialize 实现多状态按钮

如何使用它:

1. 在 html 中加载必要的 jQuery JavaScript 库和 jQuery magicButtons 插件文件。

<link rel="stylesheet" href="assets/css/main.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="assets/js/magicBtn.js"></script>

2. 默认情况下,插件使用 Font Awesome 5 作为状态图标。

<link rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
      integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
      crossorigin="anonymous">

3. 调用函数生成按钮并指定要使用的按钮样式。

<div id="examples">
  <button id="btn1" class="magicBtn">Button 1</button>
  <button id="btn2" class="magicBtn">Button 2</button>
  <button id="btn3" class="magicBtn">Button 3</button>
  ...
</div>
$.magicBtn('#examples',{
 
  // or 'outline'
  buttonType: 'material' // default: ''
   
});

4. 将带有自定义加载文本和指示器图标的加载状态应用于单击按钮时。

var clickBtn1 = 'true';
$('#btn1').click(function (e) {
  if(clickBtn1 == 'true') {
    $(this).startLoading({
      loadindText: 'Loading...',
      loadingIcon: true,
    });
    clickBtn1 = 'false';
  } else {
    click = 'true';
  }
});

5. 将按钮设置为初始状态。

$('#btn1').removeLoading({
  //Initial text
  text: 'Your Text Here'
});

6. 将禁用状态应用于按钮。

$('#btn1').disabled();

 

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。