将加载指示器合并到操作按钮中 - jQuery loadButton.js

将加载指示器合并到操作按钮中 - jQuery loadButton.js

版本:

浏览量:221

最后更新:2021-09-12

应用标签:MAC 软件Jquery插件

推荐指数:

详细信息

另一个 jQuery 插件,用于在动作按钮内创建自定义加载微调器,指示调用动作的当前状态。也称为拉达按钮。

根据 GNU 通用公共许可证 v3.0 获得许可。

如何使用它:

1. 为动画加载微调器添加最新的 Font Awesome。

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

2. 在网页上创建一个动作按钮。

<button id="example">
  Submit
</button>

3.jquery.loadButton.js在 jQuery 之后包含 JavaScript 文件

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
        crossorigin="anonymous">
</script>
<script src="jquery.loadButton.js"></script>

4. 在点击提交按钮内显示加载微调器。

$("#example").on('click', function(){
  $(this).loadButton('on');
});

5. 隐藏加载微调器。

$("#example").loadButton('off');

6. 自定义加载微调器。

$("#example").on('click', function(){
  $(this).loadButton('on',{
    faClass: 'fas',
    faIcon: 'fa-cog',
    doSpin: true
  });
});

7.自定义加载文本。

$("#example").on('click', function(){
  $(this).loadButton('on',{
    loadingText: 'Loading...',
  });
});

8. 自定义加载处理时动作按钮的背景/前景色。

$("#example").on('click', function(){
  $(this).loadButton('on',{
    loadingBackground: 'darkred',
    loadingForeground: 'white'
  });
});

发表评论

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