按钮loading状态自定义选项(功能)

可以在元素上添加 data-am-loading 来设置选项:

  • spinner 加载动画图标,适用于支持 CSS3 动画、非 input 元素,写图标名称即可;
  • loadingText 加载时显示的文字, 默认为 loading
  • resetText 重置以后的显示的文字,默认为原来的内容
    <button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加载中...', resetText: '加载过了'}">按钮 - button 元素</button>
    
    <input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按钮 - input 元素" data-am-loading="{loadingText: '努力加载中...'}" />
    
    $('.btn-loading-example').click(function () {
    var $btn = $(this)
    $btn.button('loading');
    setTimeout(function(){
    $btn.button('reset');
    }, 5000);
    });

    拿来用即可,效果即现。

按钮交互loading ---- 转圈圈 加载的更多相关文章

  1. jquery mobile 的loading提示“正在加载...”在不同版本中的不同实现方式

    在jquery mobile开发中,在页面的切换.或者ajax获取数据时由于网速慢等其他原因,会有一个加载的时间,如果能在这段时间给一个“正在加载...”的提示,用户体验会更好.下面来简单的介绍一下在 ...

  2. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  3. Entity Framework加载相关实体——延迟加载Lazy Loading、贪婪加载Eager Loading、显示加载Explicit Loading

    Entity Framework提供了三种加载相关实体的方法:Lazy Loading,Eager Loading和Explicit Loading.首先我们先来看一下MSDN对三种加载实体方法的定义 ...

  4. 在页面加载前先出现加载loading,页面加载完成之后再显示页面

    在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...

  5. 【iOS和HTML 5交互】iOS中加载html5调用html方法和修改html5内容

    近期项目开发中用到了这方面的技术了,那我们一起来看看. 1.利用webView控件加载本地html5或者网络上html5 2.设置控制器为webView的代理,遵守协议 3.实现代理方法webView ...

  6. cocos2dx loading界面 预加载资源 与 资源释放

    预加载图片: 1.CCTextureCache::sharedTextureCache()->addImage("icon.png"); 2.CCTextureCache:: ...

  7. 旋转加载loading和点点加载loadingdemo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【WPF学习笔记】之如何点击“新建”按钮,在面板中加载一条条的“用户控件”的信息:动画系列之(四)

    ...... 承接上一系列动画三. 在主界面后台代码设置嵌套第二个用户控件. using System; using System.Collections.Generic; using System. ...

  9. CSS3 Loading进度条加载动画特效

    在线演示 本地下载

随机推荐

  1. 08 redis中hash结构及命令详解

    Hash 哈希数据类型相关命令 hset key field value 作用: 把key中 filed域的值设为value 注:如果没有field域,直接添加,如果有,则覆盖原field域的值 hm ...

  2. 【文献阅读】Augmenting Supervised Neural Networks with Unsupervised Objectives-ICML-2016

    一.Abstract 从近期对unsupervised learning 的研究得到启发,在large-scale setting 上,本文把unsupervised learning 与superv ...

  3. python使用模板手记

    1.首先是$符号 在webpy中,模板html里面可以写python代码,但要用$开始.但如果网页代码本来就有$符号(javascript或者正则表达式),我们需要对其进行转意.用$$代替$ 给jqu ...

  4. Windows操作系统远程Linux服务器传输文件方法(以EasyDSS云平台、EasyNVR上传部署为例)

    本文转自博客:https://blog.csdn.net/black_3717/article/details/79769406 问题背景: 之前给客户部署我们一款EasyDSS云平台(配合EasyN ...

  5. Chernoff-Hoeffding inequality -- Chernoff bounds, and some applications

    https://www.cs.utah.edu/~jeffp/teaching/cs5955/L3-Chern-Hoeff.pdf [大数据-通过随机过程降维 ] When dealing with ...

  6. centos7 执行一个数据库脚本创建项目中的数据库

    [root@localhost ~]# su postgres 切换用户 bash-4.2$ psql could not change directory to "/root": ...

  7. Java for LeetCode 125 Valid Palindrome

    Given a string, determine if it is a palindrome, considering only alphanumeric characters and ignori ...

  8. PAT 天梯赛 L3-008. 喊山 【BFS】

    题目链接 https://www.patest.cn/contests/gplt/L3-008 思路 因为 每个山头 最多有两个 能听到它的 临近山头 那么 我们就可以 给每个 山头 都 分配 最多两 ...

  9. Android Weekly Notes Issue #276

    September 24th, 2017 Android Weekly Issue #276 本期内容包括LifeCycle与Architecture的相关文章,以及新的JSON解析库Moshi的介绍 ...

  10. HDU 4539 郑厂长系列故事——排兵布阵 —— 状压DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4539 郑厂长系列故事——排兵布阵 Time Limit: 10000/5000 MS (Java/Ot ...