Bootstrap和ladda.js

最新推荐文章于 2021-08-05 20:33:24 发布
最新推荐文章于 2021-08-05 20:33:24 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： Bootstrap 框架 
<!doctype html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <title>
            Ladda for Bootstrap 3 UI
        </title>
        <meta name="description" content="Bootstrap 3 loading state for buttons">
        <meta name="author" content="Maks Surguy">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"
        />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/ladda-themeless.min.css">
    </head>
    
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h1>
                        Ladda UI for Bootstrap 3
                    </h1>
                    <p>
                        A UI concept by
                        <a href="http://twitter.com/hakimel" target="_blank">
                            @hakimel
                        </a>
                        which merges loading indicators into the action that invoked them. Primarily
                        intended for use with forms where it gives users immediate feedback upon
                        submit rather than leaving them wondering while the browser does its thing.
                        This project is used by @hakimel
                        <a href="http://slid.es">
                            slid.es
                        </a>
                        and by @msurguy on the new upcoming
                        <a href="http://bootsnipp.com" target="_blank">
                            Bootsnipp
                        </a>
                        .
                    </p>
                    <h2>
                        Demo
                        <small>
                            Click the buttons to see the effect
                        </small>
                    </h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-primary ladda-button" data-style="expand-left">
                            <span class="ladda-label">
                                expand-left
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-right">
                            <span class="ladda-label">
                                expand-right
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-up">
                            <span class="ladda-label">
                                expand-up
                            </span>
                        </button>
                        <button class="btn btn-primary ladda-button" data-style="expand-down">
                            <span class="ladda-label">
                                expand-down
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-info ladda-button" data-style="zoom-in">
                            <span class="ladda-label">
                                zoom-in
                            </span>
                        </button>
                        <button class="btn btn-info ladda-button" data-style="zoom-out">
                            <span class="ladda-label">
                                zoom-out
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        <button class="btn btn-warning ladda-button" data-style="slide-left">
                            <span class="ladda-label">
                                slide-left
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-right">
                            <span class="ladda-label">
                                slide-right
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-up">
                            <span class="ladda-label">
                                slide-up
                            </span>
                        </button>
                        <button class="btn btn-warning ladda-button" data-style="slide-down">
                            <span class="ladda-label">
                                slide-down
                            </span>
                        </button>
                    </p>
                    <p>
                        <button class="btn btn-warning ladda-button" data-style="contract">
                            <span class="ladda-label">
                                contract
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center progress-demo">
                    <p>
                        Built-in progress bar
                    </p>
                    <p>
                        <button class="btn btn-danger ladda-button" data-style="expand-right">
                            <span class="ladda-label">
                                expand-right
                            </span>
                        </button>
                        <button class="btn btn-danger ladda-button" data-style="expand-left">
                            <span class="ladda-label">
                                expand-left
                            </span>
                        </button>
                        <button class="btn btn-danger ladda-button" data-style="contract">
                            <span class="ladda-label">
                                contract
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3 text-center">
                    <p>
                        Sizes
                    </p>
                    <p>
                        <button class="btn btn-primary btn-xs ladda-button" data-style="expand-right"
                        data-size="xs">
                            <span class="ladda-label">
                                extra small
                            </span>
                        </button>
                        <button class="btn btn-primary btn-sm ladda-button" data-style="expand-right"
                        data-size="s">
                            <span class="ladda-label">
                                small
                            </span>
                        </button>
                        <button class="btn btn-primary btn-lg ladda-button" data-style="expand-right"
                        data-size="l">
                            <span class="ladda-label">
                                large
                            </span>
                        </button>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <h2>
                        Usage:
                    </h2>
                    <hr>
                    <p>
                        Include the CSS and Javascript for Spin.js and Ladda effect:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;link rel="stylesheet" href="dist/ladda-themeless.min.css"&gt; &lt;script
                            src="dist/spin.min.js"&gt;&lt;/script&gt; &lt;script src="dist/ladda.min.js"&gt;&lt;/script&gt;
                        </code>
                    </pre>
                    <p>
                        Then to produce a button with the Ladda effect:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;button class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span
                            class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/button&gt;
                        </code>
                    </pre>
                    <p>
                        Or using &quot;a&quot; tag:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;a href="#" class="btn btn-primary ladda-button" data-style="expand-left"&gt;&lt;span
                            class="ladda-label"&gt;expand-left&lt;/span&gt;&lt;/a&gt;
                        </code>
                    </pre>
                    <p>
                        You can choose the style of the effect by setting the
                        <code>
                            data-style
                        </code>
                        attribute:
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-style="expand-left" data-style="expand-left" data-style="expand-right"
                            data-style="expand-up" data-style="zoom-in" data-style="zoom-out" data-style="slide-left"
                            data-style="slide-right" data-style="slide-up" data-style="slide-down"
                            data-style="contract"
                        </code>
                    </pre>
                    <p>
                        You can choose the size of the spinner by setting the
                        <code>
                            data-size
                        </code>
                        attribute:
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-size="xs" data-size="s" data-size="l"
                        </code>
                    </pre>
                    <p>
                        You can choose the color of the spinner by setting the
                        <code>
                            data-spinner-color
                        </code>
                        attribute (HEX code):
                    </p>
                    <pre>
                        <code class="language-markup">
                            data-spinner-color="#FF0000"
                        </code>
                    </pre>
                    <h2>
                        Control the UI state with Javascript:
                    </h2>
                    <p>
                        To activate the effect you can bind Ladda to all buttons that submit a
                        form
                    </p>
                    <pre>
                        <code class="language-javascript">
                            Ladda.bind( 'input[type=submit]' );
                        </code>
                    </pre>
                    <p>
                        When using AJAX forms, you can use the following syntax:
                    </p>
                    <pre>
                        <code class="language-markup">
                            &lt;a href="#" id="form-submit" class="btn btn-primary btn-lg ladda-button"
                            data-style="expand-right" data-size="l"&gt;&lt;span class="ladda-label"&gt;Submit
                            form&lt;/span&gt;&lt;/a&gt;
                        </code>
                    </pre>
                    <pre>
                        <code class="language-javascript">
                            $(function() { $('#form-submit').click(function(e){ e.preventDefault();
                            var l = Ladda.create(this); l.start(); $.post("your-url", { data : data
                            }, function(response){ console.log(response); }, "json") .always(function()
                            { l.stop(); }); return false; }); });
                        </code>
                    </pre>
                    <p>
                        Other methods available through Javascript
                    </p>
                    <pre>
                        <code class="language-javascript">
                            l.stop(); l.toggle(); l.isLoading(); l.setProgress( 0-1 );
                        </code>
                    </pre>
                    <p>
                        Love this? Tweet it!
                        <a href="http://twitter.com/share" class="twitter-share-button" data-text="Ladda Bootstrap - Buttons with built-in loading indicators for Bootstrap"
                        data-url="https://github.com/msurguy/ladda-bootstrap" data-count="small"
                        data-related="bootsnipp">
                        </a>
                    </p>
                    <p style="margin-bottom:100px;">
                        Original Ladda UI concept by
                        <a href="http://hakim.se">
                            Hakim El Hattab
                        </a>
                        /
                        <a href="http://twitter.com/hakimel">
                            @hakimel
                        </a>
                        , examples adapted to work with Bootstrap 3 by
                        <a href="http://twitter.com/msurguy" target="_blank">
                            @msurguy
                        </a>
                    </p>
                </div>
            </div>
        </div>
        <script src="js/spin.min.js">
        </script>
        <script src="js/ladda.min.js">
        </script>
        <script>
            // Bind normal buttons
            Ladda.bind('div:not(.progress-demo) button', {
                timeout: 2000
            });

            // Bind progress buttons and simulate loading progress
            Ladda.bind('.progress-demo button', {
                callback: function(instance) {
                    var progress = 0;
                    var interval = setInterval(function() {
                        progress = Math.min(progress + Math.random() * 0.1, 1);
                        instance.setProgress(progress);

                        if (progress === 1) {
                            instance.stop();
                            clearInterval(interval);
                        }
                    },
                    200);
                }
            });

            // You can control loading explicitly using the JavaScript API
            // as outlined below:
            // var l = Ladda.create( document.querySelector( 'button' ) );
            // l.start();
            // l.stop();
            // l.toggle();
            // l.isLoading();
            // l.setProgress( 0-1 );
            
        </script>
    </body>

</html>

ladda-themeless.min.css

/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2013 Hakim El Hattab, http://hakim.se
 */.ladda-button {
	position: relative
}

.ladda-button .ladda-spinner {
	position: absolute;
	z-index: 2;
	display: inline-block;
	width: 32px;
	height: 32px;
	top: 50%;
	margin-top: -16px;
	opacity: 0;
	pointer-events: none
}

.ladda-button .ladda-label {
	position: relative;
	z-index: 3
}

.ladda-button .ladda-progress {
	position: absolute;
	width: 0;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.2);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: .1s linear all!important;
	-moz-transition: .1s linear all!important;
	-ms-transition: .1s linear all!important;
	-o-transition: .1s linear all!important;
	transition: .1s linear all!important
}

.ladda-button[data-loading] .ladda-progress {
	opacity: 1;
	visibility: visible
}

.ladda-button,.ladda-button .ladda-label,.ladda-button .ladda-spinner {
	-webkit-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-moz-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-ms-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	-o-transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important;
	transition: .3s cubic-bezier(0.175,.885,.32,1.275) all!important
}

.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-label,.ladda-button[data-style=zoom-out] .ladda-spinner {
	-webkit-transition: .3s ease all!important;
	-moz-transition: .3s ease all!important;
	-ms-transition: .3s ease all!important;
	-o-transition: .3s ease all!important;
	transition: .3s ease all!important
}

.ladda-button[data-style=expand-right] .ladda-spinner {
	right: 14px
}

.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size=xs] .ladda-spinner {
	right: 4px
}

.ladda-button[data-style=expand-right][data-loading] {
	padding-right: 56px
}

.ladda-button[data-style=expand-right][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size=xs] {
	padding-right: 40px
}

.ladda-button[data-style=expand-left] .ladda-spinner {
	left: 14px
}

.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size=xs] .ladda-spinner {
	left: 4px
}

.ladda-button[data-style=expand-left][data-loading] {
	padding-left: 56px
}

.ladda-button[data-style=expand-left][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size=xs] {
	padding-left: 40px
}

.ladda-button[data-style=expand-up] {
	overflow: hidden
}

.ladda-button[data-style=expand-up] .ladda-spinner {
	top: -32px;
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=expand-up][data-loading] {
	padding-top: 54px
}

.ladda-button[data-style=expand-up][data-loading] .ladda-spinner {
	opacity: 1;
	top: 14px;
	margin-top: 0
}

.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size=xs] {
	padding-top: 32px
}

.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size=xs] .ladda-spinner {
	top: 4px
}

.ladda-button[data-style=expand-down] {
	overflow: hidden
}

.ladda-button[data-style=expand-down] .ladda-spinner {
	top: 62px;
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size=xs] .ladda-spinner {
	top: 40px
}

.ladda-button[data-style=expand-down][data-loading] {
	padding-bottom: 54px
}

.ladda-button[data-style=expand-down][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size=xs] {
	padding-bottom: 32px
}

.ladda-button[data-style=slide-left] {
	overflow: hidden
}

.ladda-button[data-style=slide-left] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-left] .ladda-spinner {
	left: 100%;
	margin-left: -16px
}

.ladda-button[data-style=slide-left][data-loading] .ladda-label {
	opacity: 0;
	left: -100%
}

.ladda-button[data-style=slide-left][data-loading] .ladda-spinner {
	opacity: 1;
	left: 50%
}

.ladda-button[data-style=slide-right] {
	overflow: hidden
}

.ladda-button[data-style=slide-right] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-right] .ladda-spinner {
	right: 100%;
	margin-left: -16px
}

.ladda-button[data-style=slide-right][data-loading] .ladda-label {
	opacity: 0;
	left: 100%
}

.ladda-button[data-style=slide-right][data-loading] .ladda-spinner {
	opacity: 1;
	left: 50%
}

.ladda-button[data-style=slide-up] {
	overflow: hidden
}

.ladda-button[data-style=slide-up] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-up] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	margin-top: 1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-label {
	opacity: 0;
	top: -1em
}

.ladda-button[data-style=slide-up][data-loading] .ladda-spinner {
	opacity: 1;
	margin-top: -16px
}

.ladda-button[data-style=slide-down] {
	overflow: hidden
}

.ladda-button[data-style=slide-down] .ladda-label {
	position: relative
}

.ladda-button[data-style=slide-down] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	margin-top: -2em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-label {
	opacity: 0;
	top: 1em
}

.ladda-button[data-style=slide-down][data-loading] .ladda-spinner {
	opacity: 1;
	margin-top: -16px
}

.ladda-button[data-style=zoom-out] {
	overflow: hidden
}

.ladda-button[data-style=zoom-out] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	-webkit-transform: scale(2.5);
	-moz-transform: scale(2.5);
	-ms-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5)
}

.ladda-button[data-style=zoom-out] .ladda-label {
	position: relative;
	display: inline-block
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-label {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5)
}

.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}

.ladda-button[data-style=zoom-in] {
	overflow: hidden
}

.ladda-button[data-style=zoom-in] .ladda-spinner {
	left: 50%;
	margin-left: -16px;
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-o-transform: scale(0.2);
	transform: scale(0.2)
}

.ladda-button[data-style=zoom-in] .ladda-label {
	position: relative;
	display: inline-block
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-label {
	opacity: 0;
	-webkit-transform: scale(2.2);
	-moz-transform: scale(2.2);
	-ms-transform: scale(2.2);
	-o-transform: scale(2.2);
	transform: scale(2.2)
}

.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
	opacity: 1;
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none
}

.ladda-button[data-style=contract] {
	overflow: hidden;
	width: 100px
}

.ladda-button[data-style=contract] .ladda-spinner {
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=contract][data-loading] {
	border-radius: 50%;
	width: 52px
}

.ladda-button[data-style=contract][data-loading] .ladda-label {
	opacity: 0
}

.ladda-button[data-style=contract][data-loading] .ladda-spinner {
	opacity: 1
}

.ladda-button[data-style=contract-overlay] {
	overflow: hidden;
	width: 100px;
	box-shadow: 0 0 0 3000px rgba(0,0,0,0)
}

.ladda-button[data-style=contract-overlay] .ladda-spinner {
	left: 50%;
	margin-left: -16px
}

.ladda-button[data-style=contract-overlay][data-loading] {
	border-radius: 50%;
	width: 52px;
	box-shadow: 0 0 0 3000px rgba(0,0,0,.8)
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-label {
	opacity: 0
}

.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner {
	opacity: 1
}

如图：

在这里插入图片描述

.NET跨平台
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap.min.js静态文件
02-23
用于渲染前端静态页面
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
最新发布
11-12
通过`bootstrap.min.css`和`bootstrap.bundle.min.js`，开发者可以享受到Bootstrap的样式和JavaScript组件，而`about.css`则为自定义样式提供了空间。在实际使用时，确保正确引用这些文件，并根据项目需求调整或扩展...
ladda.js源码
极客神殿
12-31 520
ES6语法 /*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2018 Hakim El Hattab, http://hakim.se */ import {Spinner} from 'spin.js'; // All currently instantiated instance...
使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验
05-01 958
目录(?)[+] 在线演示 在线演示 大家在开发基于web的网站或者web应用中，常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果，类似的UI设计也非常多，比如，当点击一个按钮后，在它的旁边显示一个 “加载中” 文字，或者是添加一个“旋转GIF”动画效果图。 在今天这个教程中，我们将介绍来一个Ladda UI概念设计，帮助你设计不同的基于按钮的
带loading指示器的js按钮动画特效
qq_27717857的博客
11-09 1891
本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/jQuery/Buttons-Icons/201503101494.html 简要教程 Ladda是一款内置Loading指示器和进度条的提交js按钮特效插件。该js按钮特效用于制作提交按钮，在点击按钮后，按钮上会出现无限循环的Loading指示器和加载进度条效果
ladda_使用LADDA在按钮中创建内置加载效果
cune1359的博客
06-28 804
您可以将各种动画应用到网页中。 文本 ， 模态框 ， 过渡和进度指示器的 动画 。 对于进度指示器，通常以条形形式显示，您在条形上看到的进度指示已完成（或加载）了多少进度。 但是，如果您对按钮内的进度感兴趣 ，请尝试使用Ladda 。 Ladda是Hakim El Hattab制作的jQuery插件，可为您提供按钮内的加载效果 。 这是一个UI概念 ，可以有效地分隔行动与反馈之间的鸿沟。 ...
ladda ajax,Ladda for Bootstrap 3按钮加载进度插件
weixin_39601743的博客
08-05 209
插件描述：Ladda可以让你点击按钮时，在按钮中显示一个加载进度效果。使用方法添加bootstrap.css样式,spin.min.js和ladda.min.js到您的页面然后添加一个按钮并加入样式:expand-left或者使用“a”标签:expand-left你可以设置data-style属性来选择风格:data-style="expand-left"data-style="expand-le...
bootstrap.bundle.min.js
04-04
bootstrap.bundle.min.js,python django-bootstrap-4.6.2 版本的JS文件
bootstrap.min.js开发版
06-25
bootstrap-3的压缩版js,因下载gitHub很难进去下载，在这里分享下，不晓得为啥不能上传整个压缩包，只能单个上传,css资源看https://download.csdn.net/download/qq_38188228/85768313
bootstrap.min.js和bootstrap.min.css
04-13
"bootstrap.min.js"是Bootstrap的压缩版JavaScript库，它包含了一系列用于交互和动态效果的插件。这些插件包括导航条、模态框、下拉菜单、轮播图、表单验证等。"min"表示这是一个最小化版本，即通过删除不必要的空格...
Ladda for Bootstrap 3按钮加载插件
07-09
Ladda可以让你点击按钮时，在按钮中显示一个加载进度效果。浏览器要求ie8以上版本，演示地址：http://www.jq22.com/jquery-info502
前端项目-Ladda.zip
09-02
前端项目-Ladda,带内置加载指示器的按钮
ladda 按钮防重复提交样式
05-18
ladda 按钮防重复提交样式 点击按钮后按钮刷新加载 置为不可用状态，当后台处理完毕，结束加载样式 变为可用 个人感觉简单实用
JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
weixin_33918357的博客
07-12 206
前言：上篇 JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐 分享了几个项目中比较常用的组件，引起了许多园友的关注。这篇还是继续，因为博主觉得还有几个非常简单、实用的组件，实在不愿自己一人独享，没办法，谁让博主这么爱分享呢~~ 本文原创地址：http://www.cnblogs.com/landeanfen/p/5603790.html 七、多值输入组件manifest 关于...
第3.1.5章 WEB系统最佳实践 js控件之Ladda
warrah 南极狼
12-11 933
Ladda下载地址,Ladda Demo，ladda demo2主要做按钮的特效.按照下图红色方框里面的效果，一方面取代了早起进度条的方式，另一方面防止了按钮的重复提交 这里先看看jsp代码如何写，先定义ladda-button的样式, 效果data-style="expand-left",然后定义旋转进度的dom节点<span class="ladda-label">登录</span><bu
Ladda.js应用提交表单的时候显示loading加载中
极客神殿
02-07 1808
不同大小，位置，效果，进度条等 article class="examples" style="margin-top:0px;"> section class="button-demo"> h3>expand-lefth3> button class="ladda-button" data-color="green" da
优秀前端效果收集
jincenlong58的专栏
07-17 646
http://lab.hakim.se/ladda/ Ladda 是一组集成了加载提示的按钮，以弥合行动和反馈之间的时间间隔，提供更好的功能使用体验。主要用于在用户点击提交之后，向用户提供即时的反馈，让他们知道浏览器正在处用户提交的任务。
ladda ajax,使用Bootstrap3和Ladda UI实现的多种按钮“加载中”效果体验
weixin_31849853的博客
08-05 185
大家在开发基于web的网站或者web应用中，常常在AJAX调用的过程中需要提示用户并且展示相关的“加载中”效果，类似的UI设计也非常多，比如，当点击一个按钮后，在它的旁边显示一个 “加载中” 文字，或者是添加一个“旋转GIF”动画效果图。在今天这个教程中，我们将介绍来一个Ladda UI概念设计，帮助你设计不同的基于按钮的加载中效果，并且整合到Bootstrap3框架里，如下：它可以方便的帮助你通...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值