Skip to content

Instantly share code, notes, and snippets.

@sgsheg

sgsheg/dabblet.css

Created April 25, 2014 02:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sgsheg/11276033 to your computer and use it in GitHub Desktop.
Save sgsheg/11276033 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.grebtn {
margin-left: 10px;
margin-top: 10px;
display: inline-block;
padding: 0.25em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight: inherit;
border-color: #208000 #1F7F00;
background-color: #289600;
box-shadow: inset 0 0 1px rgba(255, 255, 255, .6), 0 1px #8DBF62;
color: #fff;
text-shadow: 0 -1px #137900;
}
.ani_dot {
font-family: simsun;
}
:root .ani_dot {
display: inline-block;
width: 1.5em;
vertical-align: bottom;
overflow: hidden;
}
@-webkit-keyframes dot {
0% {
width: 0;
margin-right: 1.5em;
}
33% {
width: .5em;
margin-right: 1em;
}
66% {
width: 1em;
margin-right: .5em;
}
100% {
width: 1.5em;
margin-right: 0;
}
}
.ani_dot {
-webkit-animation: dot 3s infinite step-start;
}
@keyframes dot {
0% {
width: 0;
margin-right: 1.5em;
}
33% {
width: .5em;
margin-right: 1em;
}
66% {
width: 1em;
margin-right: .5em;
}
100% {
width: 1.5em;
margin-right: 0;
}
}
.ani_dot {
animation: dot 3s infinite step-start;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="demo">
<a href="javascript:;" id="submit" class="grebtn">提交订单</a>
</div>
Raw
dabblet.js
// alert('Hello world!');
$(function () {
// submit
$('#submit').on('click', function (e) {
if (!this.ajaxing) {
this.ajaxing = true;
this.innerHTML = '提交表单中<span class="ani_dot">...</span>';
setTimeout(function () {
this.ajaxing = false;
this.innerHTML = "提交超时";
}.bind(this), 1000);
}
}
})
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment