以下是 点击展示特别炫酷的菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery+CSS3饼状菜单效果</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/piemenu.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class='content'>
<div class='demo-container'>
<div class='input-form'>
<h2>Pie Menu (like Path menu ) using jquery and CSS3 <br /><br />点击右侧加号查看菜单效果
</h2>
</div>
<div class='demo'>
<p id='info'>Updated..</p>
<div id='outer_container' class="outer_container" >
<a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
<ul class="menu_option">
<li><a href="#" target="_blank"><span>Item</span></a></li>
<li><a href="#" target="_blank"><span>Item</span></a></li>
<li><a href="#" target="_blank"><span>Item</span></a></li>
<li><a href="#" target="_blank"><span>Item</span></a></li>
<li><a href="#" target="_blank"><span>Item</span></a></li>
</ul>
</div>
</div>
<div class='clearfix'></div>
</div>
</div></div>
<!-- 代码 结束 -->
<script>
function PieMenuInit(){
$('#outer_container').PieMenu({
'starting_angel':0, //起始角度
'angel_difference' : 90, //散开角度
'radius':100, //圆形弧度
});
}
$(function() {
PieMenuInit();
});
</script>
</body>
</html>JS代码(jquery-ui-1.8.20.custom.min.js):
/*! jQuery UI - v1.8.20 - 2012-04-30* https://github.com/jquery/jquery-ui* Includes:jquery.ui.core.js* Copyright (c) 2012 AUTHORS.txt;
Licensed MIT,GPL */
(function(a,b){
function c(b,c){
var e=b.nodeName.toLowerCase();
if("area"===e){
var f=b.parentNode,g=f.name,h;
return!b.href||!g||f.nodeName.toLowerCase()!=="map"?!1:(h=a("img[usemap=#"+g+"]")[0],!!h&&d(h))}
return(/input|select|textarea|button|object/.test(e)?!b.disabled:"a"==e?b.href||c:c)&&d(b)}
function d(b){
return!a(b).parents().andSelf().filter(function(){
return a.curCSS(this,"visibility")==="hidden"||a.expr.filters.hidden(this)}
).length}
a.ui=a.ui||{
}
;
if(a.ui.version)return;
a.extend(a.ui,{
version:"1.8.20",keyCode:{
ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}
}
),a.fn.extend({
propAttr:a.fn.prop||a.fn.attr,_focus:a.fn.focus,focus:function(b,c){
return typeof b=="number"?this.each(function(){
var d=this;
setTimeout(function(){
a(d).focus(),c&&c.call(d)}
,b)}
):this._focus.apply(this,arguments)}
,scrollParent:function(){
var b;
return a.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?b=this.parents().filter(function(){
return/(relative|absolute|fixed)/.test(a.curCSS(this,"position",1))&&/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}
).eq(0):b=this.parents().filter(function(){
return/(auto|scroll)/.test(a.curCSS(this,"overflow",1)+a.curCSS(this,"overflow-y",1)+a.curCSS(this,"overflow-x",1))}
).eq(0),/fixed/.test(this.css("position"))||!b.length?a(document):b}
,zIndex:function(c){
if(c!==b)return this.css("zIndex",c);
if(this.length){
var d=a(this[0]),e,f;
while(d.length&&d[0]!==document){
e=d.css("position");
if(e==="absolute"||e==="relative"||e==="fixed"){
f=parseInt(d.css("zIndex"),10);
if(!isNaN(f)&&f!==0)return f}
d=d.parent()}
}
return 0}
,disableSelection:function(){
return this.bind((a.support.selectstart?"selectstart":"mousedown")+".ui-disableSelection",function(a){
a.preventDefault()}
)}
,enableSelection:function(){
return this.unbind(".ui-disableSelection")}
}
),a.each(["Width","Height"],function(c,d){
function h(b,c,d,f){
return a.each(e,function(){
c-=parseFloat(a.curCSS(b,"padding"+this,!0))||0,d&&(c-=parseFloat(a.curCSS(b,"border"+this+"Width",!0))||0),f&&(c-=parseFloat(a.curCSS(b,"margin"+this,!0))||0)}
),c}
var e=d==="Width"?["Left","Right"]:["Top","Bottom"],f=d.toLowerCase(),g={
innerWidth:a.fn.innerWidth,innerHeight:a.fn.innerHeight,outerWidth:a.fn.outerWidth,outerHeight:a.fn.outerHeight}
;
a.fn["inner"+d]=function(c){
return c===b?g["inner"+d].call(this):this.each(function(){
a(this).css(f,h(this,c)+"px")}
)}
,a.fn["outer"+d]=function(b,c){
return typeof b!="number"?g["outer"+d].call(this,b):this.each(function(){
a(this).css(f,h(this,b,!0,c)+"px")}
)}
}
),a.extend(a.expr[":"],{
data:function(b,c,d){
return!!a.data(b,d[3])}
,focusable:function(b){
return c(b,!isNaN(a.attr(b,"tabindex")))}
,tabbable:function(b){
var d=a.attr(b,"tabindex"),e=isNaN(d);
return(e||d>=0)&&c(b,!e)}
}
),a(function(){
var b=document.body,c=b.appendChild(c=document.createElement("div"));
c.offsetHeight,a.extend(c.style,{
minHeight:"100px",height:"auto",padding:0,borderWidth:0}
),a.support.minHeight=c.offsetHeight===100,a.support.selectstart="onselectstart"in c,b.removeChild(c).style.display="none"}
),a.extend(a.ui,{
plugin:{
add:function(b,c,d){
var e=a.ui[b].prototype;
for(var f in d)e.plugins[f]=e.plugins[f]||[],e.plugins[f].push([c,d[f]])}
,call:function(a,b,c){
var d=a.plugins[b];
if(!d||!a.element[0].parentNode)return;
for(var e=0;
e<d.length;
e++)a.options[d[e][0]]&&d[e][1].apply(a.element,c)}
}
,contains:function(a,b){
return document.compareDocumentPosition?a.compareDocumentPosition(b)&16:a!==b&&a.contains(b)}
,hasScroll:function(b,c){
if(a(b).css("overflow")==="hidden")return!1;
var d=c&&c==="left"?"scrollLeft":"scrollTop",e=!1;
return b[d]>0?!0:(b[d]=1,e=b[d]>0,b[d]=0,e)}
,isOverAxis:function(a,b,c){
return a>b&&a<b+c}
,isOver:function(b,c,d,e,f,g){
return a.ui.isOverAxis(b,d,f)&&a.ui.isOverAxis(c,e,g)}
}
)}
)(jQuery);
;
/*! jQuery UI - v1.8.20 - 2012-04-30* https://github.com/jquery/jquery-ui* Includes:jquery.ui.widget.js* Copyright (c) 2012 AUTHORS.txt;
Licensed MIT,GPL */
(function(a,b){
if(a.cleanData){
var c=a.cleanData;
a.cleanData=function(b){
for(var d=0,e;
(e=b[d])!=null;
d++)try{
a(e).triggerHandler("remove")}
catch(f){
}
c(b)}
}
else{
var d=a.fn.remove;
a.fn.remove=function(b,c){
return this.each(function(){
return c||(!b||a.filter(b,[this]).length)&&a("*",this).add([this]).each(function(){
try{
a(this).triggerHandler("remove")}
catch(b){
}
}
),d.call(a(this),b,c)}
)}
}
a.widget=function(b,c,d){
var e=b.split(".")[0],f;
b=b.split(".")[1],f=e+"-"+b,d||(d=c,c=a.Widget),a.expr[":"][f]=function(c){
return!!a.data(c,b)}
,a[e]=a[e]||{
}
,a[e][b]=function(a,b){
arguments.length&&this._createWidget(a,b)}
;
var g=new c;
g.options=a.extend(!0,{
}
,g.options),a[e][b].prototype=a.extend(!0,g,{
namespace:e,widgetName:b,widgetEventPrefix:a[e][b].prototype.widgetEventPrefix||b,widgetBaseClass:f}
,d),a.widget.bridge(b,a[e][b])}
,a.widget.bridge=function(c,d){
a.fn[c]=function(e){
var f=typeof e=="string",g=Array.prototype.slice.call(arguments,1),h=this;
return e=!f&&g.length?a.extend.apply(null,[!0,e].concat(g)):e,f&&e.charAt(0)==="_"?h:(f?this.each(function(){
var d=a.data(this,c),f=d&&a.isFunction(d[e])?d[e].apply(d,g):d;
if(f!==d&&f!==b)return h=f,!1}
):this.each(function(){
var b=a.data(this,c);
b?b.option(e||{
}
)._init():a.data(this,c,new d(e,this))}
),h)}
}
,a.Widget=function(a,b){
arguments.length&&this._createWidget(a,b)}
,a.Widget.prototype={
widgetName:"widget",widgetEventPrefix:"",options:{
disabled:!1}
,_createWidget:function(b,c){
a.data(c,this.widgetName,this),this.element=a(c),this.options=a.extend(!0,{
}
,this.options,this._getCreateOptions(),b);
var d=this;
this.element.bind("remove."+this.widgetName,function(){
d.destroy()}
),this._create(),this._trigger("create"),this._init()}
,_getCreateOptions:function(){
return a.metadata&&a.metadata.get(this.element[0])[this.widgetName]}
,_create:function(){
}
,_init:function(){
}
,destroy:function(){
this.element.unbind("."+this.widgetName).removeData(this.widgetName),this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+"-disabled "+"ui-state-disabled")}
,widget:function(){
return this.element}
,option:function(c,d){
var e=c;
if(arguments.length===0)return a.extend({
}
,this.options);
if(typeof c=="string"){
if(d===b)return this.options[c];
e={
}
,e[c]=d}
return this._setOptions(e),this}
,_setOptions:function(b){
var c=this;
return a.each(b,function(a,b){
c._setOption(a,b)}
),this}
,_setOption:function(a,b){
return this.options[a]=b,a==="disabled"&&this.widget()[b?"addClass":"removeClass"](this.widgetBaseClass+"-disabled"+" "+"ui-state-disabled").attr("aria-disabled",b),this}
,enable:function(){
return this._setOption("disabled",!1)}
,disable:function(){
return this._setOption("disabled",!0)}
,_trigger:function(b,c,d){
var e,f,g=this.options[b];
d=d||{
}
,c=a.Event(c),c.type=(b===this.widgetEventPrefix?b:this.widgetEventPrefix+b).toLowerCase(),c.target=this.element[0],f=c.originalEvent;
if(f)for(e in f)e in c||(c[e]=f[e]);
return this.element.trigger(c,d),!(a.isFunction(g)&&g.call(this.element[0],c,d)===!1||c.isDefaultPrevented())}
}
}
)(jQuery);
;
/*! jQuery UI - v1.8.20 - 2012-04-30* https://github.com/jquery/jquery-ui* Includes:jquery.ui.mouse.js* Copyright (c) 2012 AUTHORS.txt;
Licensed MIT,GPL */
(function(a,b){
var c=!1;
a(document).mouseup(function(a){
c=!1}
),a.widget("ui.mouse",{
options:{
cancel:":input,option",distance:1,delay:0}
,_mouseInit:function(){
var b=this;
this.element.bind("mousedown."+this.widgetName,function(a){
return b._mouseDown(a)}
).bind("click."+this.widgetName,function(c){
if(!0===a.data(c.target,b.widgetName+".preventClickEvent"))return a.removeData(c.target,b.widgetName+".preventClickEvent"),c.stopImmediatePropagation(),!1}
),this.started=!1}
,_mouseDestroy:function(){
this.element.unbind("."+this.widgetName),a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate)}
,_mouseDown:function(b){
if(c)return;
this._mouseStarted&&this._mouseUp(b),this._mouseDownEvent=b;
var d=this,e=b.which==1,f=typeof this.options.cancel=="string"&&b.target.nodeName?a(b.target).closest(this.options.cancel).length:!1;
if(!e||f||!this._mouseCapture(b))return!0;
this.mouseDelayMet=!this.options.delay,this.mouseDelayMet||(this._mouseDelayTimer=setTimeout(function(){
d.mouseDelayMet=!0}
,this.options.delay));
if(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)){
this._mouseStarted=this._mouseStart(b)!==!1;
if(!this._mouseStarted)return b.preventDefault(),!0}
return!0===a.data(b.target,this.widgetName+".preventClickEvent")&&a.removeData(b.target,this.widgetName+".preventClickEvent"),this._mouseMoveDelegate=function(a){
return d._mouseMove(a)}
,this._mouseUpDelegate=function(a){
return d._mouseUp(a)}
,a(document).bind("mousemove."+this.widgetName,this._mouseMoveDelegate).bind("mouseup."+this.widgetName,this._mouseUpDelegate),b.preventDefault(),c=!0,!0}
,_mouseMove:function(b){
return!a.browser.msie||document.documentMode>=9||!!b.button?this._mouseStarted?(this._mouseDrag(b),b.preventDefault()):(this._mouseDistanceMet(b)&&this._mouseDelayMet(b)&&(this._mouseStarted=this._mouseStart(this._mouseDownEvent,b)!==!1,this._mouseStarted?this._mouseDrag(b):this._mouseUp(b)),!this._mouseStarted):this._mouseUp(b)}
,_mouseUp:function(b){
return a(document).unbind("mousemove."+this.widgetName,this._mouseMoveDelegate).unbind("mouseup."+this.widgetName,this._mouseUpDelegate),this._mouseStarted&&(this._mouseStarted=!1,b.target==this._mouseDownEvent.target&&a.data(b.target,this.widgetName+".preventClickEvent",!0),this._mouseStop(b)),!1}
,_mouseDistanceMet:function(a){
return Math.max(Math.abs(this._mouseDownEvent.pageX-a.pageX),Math.abs(this._mouseDownEvent.pageY-a.pageY))>=this.options.distance}
,_mouseDelayMet:function(a){
return this.mouseDelayMet}
,_mouseStart:function(a){
}
,_mouseDrag:function(a){
}
,_mouseStop:function(a){
}
,_mouseCapture:function(a){
return!0}
}
)}
)(jQuery);
;
/*! jQuery UI - v1.8.20 - 2012-04-30* https://github.com/jquery/jquery-ui* Includes:jquery.ui.position.js* Copyright (c) 2012 AUTHORS.txt;
Licensed MIT,GPL */
(function(a,b){
a.ui=a.ui||{
}
;
var c=/left|center|right/,d=/top|center|bottom/,e="center",f={
}
,g=a.fn.position,h=a.fn.offset;
a.fn.position=function(b){
if(!b||!b.of)return g.apply(this,arguments);
b=a.extend({
}
,b);
var h=a(b.of),i=h[0],j=(b.collision||"flip").split(" "),k=b.offset?b.offset.split(" "):[0,0],l,m,n;
return i.nodeType===9?(l=h.width(),m=h.height(),n={
top:0,left:0}
):i.setTimeout?(l=h.width(),m=h.height(),n={
top:h.scrollTop(),left:h.scrollLeft()}
):i.preventDefault?(b.at="left top",l=m=0,n={
top:b.of.pageY,left:b.of.pageX}
):(l=h.outerWidth(),m=h.outerHeight(),n=h.offset()),a.each(["my","at"],function(){
var a=(b[this]||"").split(" ");
a.length===1&&(a=c.test(a[0])?a.concat([e]):d.test(a[0])?[e].concat(a):[e,e]),a[0]=c.test(a[0])?a[0]:e,a[1]=d.test(a[1])?a[1]:e,b[this]=a}
),j.length===1&&(j[1]=j[0]),k[0]=parseInt(k[0],10)||0,k.length===1&&(k[1]=k[0]),k[1]=parseInt(k[1],10)||0,b.at[0]==="right"?n.left+=l:b.at[0]===e&&(n.left+=l/2),b.at[1]==="bottom"?n.top+=m:b.at[1]===e&&(n.top+=m/2),n.left+=k[0],n.top+=k[1],this.each(function(){
var c=a(this),d=c.outerWidth(),g=c.outerHeight(),h=parseInt(a.curCSS(this,"marginLeft",!0))||0,i=parseInt(a.curCSS(this,"marginTop",!0))||0,o=d+h+(parseInt(a.curCSS(this,"marginRight",!0))||0),p=g+i+(parseInt(a.curCSS(this,"marginBottom",!0))||0),q=a.extend({
}
,n),r;
b.my[0]==="right"?q.left-=d:b.my[0]===e&&(q.left-=d/2),b.my[1]==="bottom"?q.top-=g:b.my[1]===e&&(q.top-=g/2),f.fractions||(q.left=Math.round(q.left),q.top=Math.round(q.top)),r={
left:q.left-h,top:q.top-i}
,a.each(["left","top"],function(c,e){
a.ui.position[j[c]]&&a.ui.position[j[c]][e](q,{
targetWidth:l,targetHeight:m,elemWidth:d,elemHeight:g,collisionPosition:r,collisionWidth:o,collisionHeight:p,offset:k,my:b.my,at:b.at}
)}
),a.fn.bgiframe&&c.bgiframe(),c.offset(a.extend(q,{
using:b.using}
))}
)}
,a.ui.position={
fit:{
left:function(b,c){
var d=a(window),e=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft();
b.left=e>0?b.left-e:Math.max(b.left-c.collisionPosition.left,b.left)}
,top:function(b,c){
var d=a(window),e=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop();
b.top=e>0?b.top-e:Math.max(b.top-c.collisionPosition.top,b.top)}
}
,flip:{
left:function(b,c){
if(c.at[0]===e)return;
var d=a(window),f=c.collisionPosition.left+c.collisionWidth-d.width()-d.scrollLeft(),g=c.my[0]==="left"?-c.elemWidth:c.my[0]==="right"?c.elemWidth:0,h=c.at[0]==="left"?c.targetWidth:-c.targetWidth,i=-2*c.offset[0];
b.left+=c.collisionPosition.left<0?g+h+i:f>0?g+h+i:0}
,top:function(b,c){
if(c.at[1]===e)return;
var d=a(window),f=c.collisionPosition.top+c.collisionHeight-d.height()-d.scrollTop(),g=c.my[1]==="top"?-c.elemHeight:c.my[1]==="bottom"?c.elemHeight:0,h=c.at[1]==="top"?c.targetHeight:-c.targetHeight,i=-2*c.offset[1];
b.top+=c.collisionPosition.top<0?g+h+i:f>0?g+h+i:0}
}
}
,a.offset.setOffset||(a.offset.setOffset=function(b,c){
/static/.test(a.curCSS(b,"position"))&&(b.style.position="relative");
var d=a(b),e=d.offset(),f=parseInt(a.curCSS(b,"top",!0),10)||0,g=parseInt(a.curCSS(b,"left",!0),10)||0,h={
top:c.top-e.top+f,left:c.left-e.left+g}
;
"using"in c?c.using.call(b,h):d.css(h)}
,a.fn.offset=function(b){
var c=this[0];
return!c||!c.ownerDocument?null:b?this.each(function(){
a.offset.setOffset(this,b)}
):h.call(this)}
),function(){
var b=document.getElementsByTagName("body")[0],c=document.createElement("div"),d,e,g,h,i;
d=document.createElement(b?"div":"body"),g={
visibility:"hidden",width:0,height:0,border:0,margin:0,background:"none"}
,b&&a.extend(g,{
position:"absolute",left:"-1000px",top:"-1000px"}
);
for(var j in g)d.style[j]=g[j];
d.appendChild(c),e=b||document.documentElement,e.insertBefore(d,e.firstChild),c.style.cssText="position:absolute;
left:10.7432222px;
top:10.432325px;
height:30px;
width:201px;
",h=a(c).offset(function(a,b){
return b}
).offset(),d.innerHTML="",e.removeChild(d),i=h.top+h.left+(b?2e3:0),f.fractions=i>21&&i<22}
()}
)(jQuery);
;
/*! jQuery UI - v1.8.20 - 2012-04-30* https://github.com/jquery/jquery-ui* Includes:jquery.ui.draggable.js* Copyright (c) 2012 AUTHORS.txt;
Licensed MIT,GPL */
(function(a,b){
a.widget("ui.draggable",a.ui.mouse,{
widgetEventPrefix:"drag",options:{
addClasses:!0,appendTo:"parent",axis:!1,connectToSortable:!1,containment:!1,cursor:"auto",cursorAt:!1,grid:!1,handle:!1,helper:"original",iframeFix:!1,opacity:!1,refreshPositions:!1,revert:!1,revertDuration:500,scope:"default",scroll:!0,scrollSensitivity:20,scrollSpeed:20,snap:!1,snapMode:"both",snapTolerance:20,stack:!1,zIndex:!1}
,_create:function(){
this.options.helper=="original"&&!/^(?:r|a|f)/.test(this.element.css("position"))&&(this.element[0].style.position="relative"),this.options.addClasses&&this.element.addClass("ui-draggable"),this.options.disabled&&this.element.addClass("ui-draggable-disabled"),this._mouseInit()}
,destroy:function(){
if(!this.element.data("draggable"))return;
return this.element.removeData("draggable").unbind(".draggable").removeClass("ui-draggable ui-draggable-dragging ui-draggable-disabled"),this._mouseDestroy(),this}
,_mouseCapture:function(b){
var c=this.options;
return this.helper||c.disabled||a(b.target).is(".ui-resizable-handle")?!1:(this.handle=this._getHandle(b),this.handle?(c.iframeFix&&a(c.iframeFix===!0?"iframe":c.iframeFix).each(function(){
a('<div class="ui-draggable-iframeFix" style="background:#fff;
"></div>').css({
width:this.offsetWidth+"px",height:this.offsetHeight+"px",position:"absolute",opacity:"0.001",zIndex:1e3}
).css(a(this).offset()).appendTo("body")}
),!0):!1)}
,_mouseStart:function(b){
var c=this.options;
return this.helper=this._createHelper(b),this._cacheHelperProportions(),a.ui.ddmanager&&(a.ui.ddmanager.current=this),this._cacheMargins(),this.cssPosition=this.helper.css("position"),this.scrollParent=this.helper.scrollParent(),this.offset=this.positionAbs=this.element.offset(),this.offset={
top:this.offset.top-this.margins.top,left:this.offset.left-this.margins.left}
,a.extend(this.offset,{
click:{
left:b.pageX-this.offset.left,top:b.pageY-this.offset.top}
,parent:this._getParentOffset(),relative:this._getRelativeOffset()}
),this.originalPosition=this.position=this._generatePosition(b),this.originalPageX=b.pageX,this.originalPageY=b.pageY,c.cursorAt&&this._adjustOffsetFromHelper(c.cursorAt),c.containment&&this._setContainment(),this._trigger("start",b)===!1?(this._clear(),!1):(this._cacheHelperProportions(),a.ui.ddmanager&&!c.dropBehaviour&&a.ui.ddmanager.prepareOffsets(this,b),this.helper.addClass("ui-draggable-dragging"),this._mouseDrag(b,!0),a.ui.ddmanager&&a.ui.ddmanager.dragStart(this,b),!0)}
,_mouseDrag:function(b,c){
this.position=this._generatePosition(b),this.positionAbs=this._convertPositionTo("absolute");
if(!c){
var d=this._uiHash();
if(this._trigger("drag",b,d)===!1)return this._mouseUp({
}
),!1;
this.position=d.position}
if(!this.options.axis||this.options.axis!="y")this.helper[0].style.left=this.position.left+"px";
if(!this.options.axis||this.options.axis!="x")this.helper[0].style.top=this.position.top+"px";
return a.ui.ddmanager&&a.ui.ddmanager.drag(this,b),!1}
,_mouseStop:function(b){
var c=!1;
a.ui.ddmanager&&!this.options.dropBehaviour&&(c=a.ui.ddmanager.drop(this,b)),this.dropped&&(c=this.dropped,this.dropped=!1);
var d=this.element[0],e=!1;
while(d&&(d=d.parentNode))d==document&&(e=!0);
if(!e&&this.options.helper==="original")return!1;
if(this.options.revert=="invalid"&&!c||this.options.revert=="valid"&&c||this.options.revert===!0||a.isFunction(this.options.revert)&&this.options.revert.call(this.element,c)){
var f=this;
a(this.helper).animate(this.originalPosition,parseInt(this.options.revertDuration,10),function(){
f._trigger("stop",b)!==!1&&f._clear()}
)}
else this._trigger("stop",b)!==!1&&this._clear();
return!1}
,_mouseUp:function(b){
return this.options.iframeFix===!0&&a("div.ui-draggable-iframeFix").each(function(){
this.parentNode.removeChild(this)}
),a.ui.ddmanager&&a.ui.ddmanager.dragStop(this,b),a.ui.mouse.prototype._mouseUp.call(this,b)}
,cancel:function(){
return this.helper.is(".ui-draggable-dragging")?this._mouseUp({
}
):this._clear(),this}
,_getHandle:function(b){
var c=!this.options.handle||!a(this.options.handle,this.element).length?!0:!1;
return a(this.options.handle,this.element).find("*").andSelf().each(function(){
this==b.target&&(c=!0)}
),c}
,_createHelper:function(b){
var c=this.options,d=a.isFunction(c.helper)?a(c.helper.apply(this.element[0],[b])):c.helper=="clone"?this.element.clone().removeAttr("id"):this.element;
return d.parents("body").length||d.appendTo(c.appendTo=="parent"?this.element[0].parentNode:c.appendTo),d[0]!=this.element[0]&&!/(fixed|absolute)/.test(d.css("position"))&&d.css("position","absolute"),d}
,_adjustOffsetFromHelper:function(b){
typeof b=="string"&&(b=b.split(" ")),a.isArray(b)&&(b={
left:+b[0],top:+b[1]||0}
),"left"in b&&(this.offset.click.left=b.left+this.margins.left),"right"in b&&(this.offset.click.left=this.helperProportions.width-b.right+this.margins.left),"top"in b&&(this.offset.click.top=b.top+this.margins.top),"bottom"in b&&(this.offset.click.top=this.helperProportions.height-b.bottom+this.margins.top)}
,_getParentOffset:function(){
this.offsetParent=this.helper.offsetParent();
var b=this.offsetParent.offset();
this.cssPosition=="absolute"&&this.scrollParent[0]!=document&&a.ui.contains(this.scrollParent[0],this.offsetParent[0])&&(b.left+=this.scrollParent.scrollLeft(),b.top+=this.scrollParent.scrollTop());
if(this.offsetParent[0]==document.body||this.offsetParent[0].tagName&&this.offsetParent[0].tagName.toLowerCase()=="html"&&a.browser.msie)b={
top:0,left:0}
;
return{
top:b.top+(parseInt(this.offsetParent.css("borderTopWidth"),10)||0),left:b.left+(parseInt(this.offsetParent.css("borderLeftWidth"),10)||0)}
}
,_getRelativeOffset:function(){
if(this.cssPosition=="relative"){
var a=this.element.position();
return{
top:a.top-(parseInt(this.helper.css("top"),10)||0)+this.scrollParent.scrollTop(),left:a.left-(parseInt(this.helper.css("left"),10)||0)+this.scrollParent.scrollLeft()}
}
return{
top:0,left:0}
}
,_cacheMargins:function(){
this.margins={
left:parseInt(this.element.css("marginLeft"),10)||0,top:parseInt(this.element.css("marginTop"),10)||0,right:parseInt(this.element.css("marginRight"),10)||0,bottom:parseInt(this.element.css("marginBottom"),10)||0}
}
,_cacheHelperProportions:function(){
this.helperProportions={
width:this.helper.outerWidth(),height:this.helper.outerHeight()}
}
,_setContainment:function(){
var b=this.options;
b.containment=="parent"&&(b.containment=this.helper[0].parentNode);
if(b.containment=="document"||b.containment=="window")this.containment=[b.containment=="document"?0:a(window).scrollLeft()-this.offset.relative.left-this.offset.parent.left,b.containment=="document"?0:a(window).scrollTop()-this.offset.relative.top-this.offset.parent.top,(b.containment=="document"?0:a(window).scrollLeft())+a(b.containment=="document"?document:window).width()-this.helperProportions.width-this.margins.left,(b.containment=="document"?0:a(window).scrollTop())+(a(b.containment=="document"?document:window).height()||document.body.parentNode.scrollHeight)-this.helperProportions.height-this.margins.top];
if(!/^(document|window|parent)$/.test(b.containment)&&b.containment.constructor!=Array){
var c=a(b.containment),d=c[0];
if(!d)return;
var e=c.offset(),f=a(d).css("overflow")!="hidden";
this.containment=[(parseInt(a(d).css("borderLeftWidth"),10)||0)+(parseInt(a(d).css("paddingLeft"),10)||0),(parseInt(a(d).css("borderTopWidth"),10)||0)+(parseInt(a(d).css("paddingTop"),10)||0),(f?Math.max(d.scrollWidth,d.offsetWidth):d.offsetWidth)-(parseInt(a(d).css("borderLeftWidth"),10)||0)-(parseInt(a(d).css("paddingRight"),10)||0)-this.helperProportions.width-this.margins.left-this.margins.right,(f?Math.max(d.scrollHeight,d.offsetHeight):d.offsetHeight)-(parseInt(a(d).css("borderTopWidth"),10)||0)-(parseInt(a(d).css("paddingBottom"),10)||0)-this.helperProportions.height-this.margins.top-this.margins.bottom],this.relative_container=c}
else b.containment.constructor==Array&&(this.containment=b.containment)}
,_convertPositionTo:function(b,c){
c||(c=this.position);
var d=b=="absolute"?1:-1,e=this.options,f=this.cssPosition=="absolute"&&(this.scrollParent[0]==document||!a.ui.contains(this.scrollParent[0],this.offsetParent[0]))?this.offsetParent:this.scrollParent,g=/(html|body)/i.test(f[0].tagName);
return{
top:c.top+this.offset.relative.top*d+this.offset.parent.top*d-(a.browser.safari&&a.browser.version<526&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollTop():g?0:f.scrollTop())*d),left:c.left+this.offset.relative.left*d+this.offset.parent.left*d-(a.browser.safari&&a.browser.version<526&&this.cssPosition=="fixed"?0:(this.cssPosition=="fixed"?-this.scrollParent.scrollLeft():g?0:f.scrollLeft())*d)}
}
,_generatePosition:function(b){
var c=this.options,d=this.cssPosition=="absolute"&&(this.scrollParent[0]==document||!a.ui.contains(this.scrollParent[0],this.offsetParent[0]))?this.offsetParent:this.scrollParent,e=/(html|body)/i.test(d[0].tagName),f=b.pageX,g=b.pageY;
if(this.originalPosition){
var h;
if(this.containment){
if(this.relative_container){
var i=this.relative_container.offset();
h=[this.containment[0]+i.left,this.containment[1]+i.top,this.containment[2]+i.left,this.containment[3]+i.top]}
else h=this.containment;
b.pageX-this.offset.click.left<h[0]&&(f=h[0]+this.offset.click.left),b.pageY-this.offset.click.top<h[1]&&(g=h[1]+this.offset.click.top),b.pageX-this.offset.click.left>h[2]&&(f=h[2]+this.offset.click.left),b.pageY-this.offset.click.top>h[3]&&(g=h[3]+this.offset.click.top)}
if(c.grid){
var j=c.grid[1]?this.originalPageY+Math.round((g-this.originalPageY)/c.grid[1])*c.grid[1]:this.originalPageY;
g=h?j-this.offset.click.top<h[1]||j-this.offset.click.top>h[3]?j-this.offset.click.top<h[1]?j+c.grid[1]:j-c.grid[1]:j:j;
var k=c.grid[0]?this.originalPageX+Math.round((f-this.originalPageX)/c.grid[0])*c.grid[0]:this.originalPageX;
f=h?k-this.offset.click.left<h[0]||k-this.offset.click.left>h[2]?k-this.offset.click.left<h[0]?k+c.grid[0]:k-c.grid[0]:k:k}
}
return{
top:g-this.offset.click.top-this.offset.relative.top-this.offset.parent.top+(a.browser.safari&&a.browser.version<526&&this.cssPosition=="fixed"?0:this.cssPosition=="fixed"?-this.scrollParent.scrollTop():e?0:d.scrollTop()),left:f-this.offset.click.left-this.offset.relative.left-this.offset.parent.left+(a.browser.safari&&a.browser.version<526&&this.cssPosition=="fixed"?0:this.cssPosition=="fixed"?-this.scrollParent.scrollLeft():e?0:d.scrollLeft())}
}
,_clear:function(){
this.helper.removeClass("ui-draggable-dragging"),this.helper[0]!=this.element[0]&&!this.cancelHelperRemoval&&this.helper.remove(),this.helper=null,this.cancelHelperRemoval=!1}
,_trigger:function(b,c,d){
return d=d||this._uiHash(),a.ui.plugin.call(this,b,[c,d]),b=="drag"&&(this.positionAbs=this._convertPositionTo("absolute")),a.Widget.prototype._trigger.call(this,b,c,d)}
,plugins:{
}
,_uiHash:function(a){
return{
helper:this.helper,position:this.position,originalPosition:this.originalPosition,offset:this.positionAbs}
}
}
),a.extend(a.ui.draggable,{
version:"1.8.20"}
),a.ui.plugin.add("draggable","connectToSortable",{
start:function(b,c){
var d=a(this).data("draggable"),e=d.options,f=a.extend({
}
,c,{
item:d.element}
);
d.sortables=[],a(e.connectToSortable).each(function(){
var c=a.data(this,"sortable");
c&&!c.options.disabled&&(d.sortables.push({
instance:c,shouldRevert:c.options.revert}
),c.refreshPositions(),c._trigger("activate",b,f))}
)}
,stop:function(b,c){
var d=a(this).data("draggable"),e=a.extend({
}
,c,{
item:d.element}
);
a.each(d.sortables,function(){
this.instance.isOver?(this.instance.isOver=0,d.cancelHelperRemoval=!0,this.instance.cancelHelperRemoval=!1,this.shouldRevert&&(this.instance.options.revert=!0),this.instance._mouseStop(b),this.instance.options.helper=this.instance.options._helper,d.options.helper=="original"&&this.instance.currentItem.css({
top:"auto",left:"auto"}
)):(this.instance.cancelHelperRemoval=!1,this.instance._trigger("deactivate",b,e))}
)}
,drag:function(b,c){
var d=a(this).data("draggable"),e=this,f=function(b){
var c=this.offset.click.top,d=this.offset.click.left,e=this.positionAbs.top,f=this.positionAbs.left,g=b.height,h=b.width,i=b.top,j=b.left;
return a.ui.isOver(e+c,f+d,i,j,g,h)}
;
a.each(d.sortables,function(f){
this.instance.positionAbs=d.positionAbs,this.instance.helperProportions=d.helperProportions,this.instance.offset.click=d.offset.click,this.instance._intersectsWith(this.instance.containerCache)?(this.instance.isOver||(this.instance.isOver=1,this.instance.currentItem=a(e).clone().removeAttr("id").appendTo(this.instance.element).data("sortable-item",!0),this.instance.options._helper=this.instance.options.helper,this.instance.options.helper=function(){
return c.helper[0]}
,b.target=this.instance.currentItem[0],this.instance._mouseCapture(b,!0),this.instance._mouseStart(b,!0,!0),this.instance.offset.click.top=d.offset.click.top,this.instance.offset.click.left=d.offset.click.left,this.instance.offset.parent.left-=d.offset.parent.left-this.instance.offset.parent.left,this.instance.offset.parent.top-=d.offset.parent.top-this.instance.offset.parent.top,d._trigger("toSortable",b),d.dropped=this.instance.element,d.currentItem=d.element,this.instance.fromOutside=d),this.instance.currentItem&&this.instance._mouseDrag(b)):this.instance.isOver&&(this.instance.isOver=0,this.instance.cancelHelperRemoval=!0,this.instance.options.revert=!1,this.instance._trigger("out",b,this.instance._uiHash(this.instance)),this.instance._mouseStop(b,!0),this.instance.options.helper=this.instance.options._helper,this.instance.currentItem.remove(),this.instance.placeholder&&this.instance.placeholder.remove(),d._trigger("fromSortable",b),d.dropped=!1)}
)}
}
),a.ui.plugin.add("draggable","cursor",{
start:function(b,c){
var d=a("body"),e=a(this).data("draggable").options;
d.css("cursor")&&(e._cursor=d.css("cursor")),d.css("cursor",e.cursor)}
,stop:function(b,c){
var d=a(this).data("draggable").options;
d._cursor&&a("body").css("cursor",d._cursor)}
}
),a.ui.plugin.add("draggable","opacity",{
start:function(b,c){
var d=a(c.helper),e=a(this).data("draggable").options;
d.css("opacity")&&(e._opacity=d.css("opacity")),d.css("opacity",e.opacity)}
,stop:function(b,c){
var d=a(this).data("draggable").options;
d._opacity&&a(c.helper).css("opacity",d._opacity)}
}
),a.ui.plugin.add("draggable","scroll",{
start:function(b,c){
var d=a(this).data("draggable");
d.scrollParent[0]!=document&&d.scrollParent[0].tagName!="HTML"&&(d.overflowOffset=d.scrollParent.offset())}
,drag:function(b,c){
var d=a(this).data("draggable"),e=d.options,f=!1;
if(d.scrollParent[0]!=document&&d.scrollParent[0].tagName!="HTML"){
if(!e.axis||e.axis!="x")d.overflowOffset.top+d.scrollParent[0].offsetHeight-b.pageY<e.scrollSensitivity?d.scrollParent[0].scrollTop=f=d.scrollParent[0].scrollTop+e.scrollSpeed:b.pageY-d.overflowOffset.top<e.scrollSensitivity&&(d.scrollParent[0].scrollTop=f=d.scrollParent[0].scrollTop-e.scrollSpeed);
if(!e.axis||e.axis!="y")d.overflowOffset.left+d.scrollParent[0].offsetWidth-b.pageX<e.scrollSensitivity?d.scrollParent[0].scrollLeft=f=d.scrollParent[0].scrollLeft+e.scrollSpeed:b.pageX-d.overflowOffset.left<e.scrollSensitivity&&(d.scrollParent[0].scrollLeft=f=d.scrollParent[0].scrollLeft-e.scrollSpeed)}
else{
if(!e.axis||e.axis!="x")b.pageY-a(document).scrollTop()<e.scrollSensitivity?f=a(document).scrollTop(a(document).scrollTop()-e.scrollSpeed):a(window).height()-(b.pageY-a(document).scrollTop())<e.scrollSensitivity&&(f=a(document).scrollTop(a(document).scrollTop()+e.scrollSpeed));
if(!e.axis||e.axis!="y")b.pageX-a(document).scrollLeft()<e.scrollSensitivity?f=a(document).scrollLeft(a(document).scrollLeft()-e.scrollSpeed):a(window).width()-(b.pageX-a(document).scrollLeft())<e.scrollSensitivity&&(f=a(document).scrollLeft(a(document).scrollLeft()+e.scrollSpeed))}
f!==!1&&a.ui.ddmanager&&!e.dropBehaviour&&a.ui.ddmanager.prepareOffsets(d,b)}
}
),a.ui.plugin.add("draggable","snap",{
start:function(b,c){
var d=a(this).data("draggable"),e=d.options;
d.snapElements=[],a(e.snap.constructor!=String?e.snap.items||":data(draggable)":e.snap).each(function(){
var b=a(this),c=b.offset();
this!=d.element[0]&&d.snapElements.push({
item:this,width:b.outerWidth(),height:b.outerHeight(),top:c.top,left:c.left}
)}
)}
,drag:function(b,c){
var d=a(this).data("draggable"),e=d.options,f=e.snapTolerance,g=c.offset.left,h=g+d.helperProportions.width,i=c.offset.top,j=i+d.helperProportions.height;
for(var k=d.snapElements.length-1;
k>=0;
k--){
var l=d.snapElements[k].left,m=l+d.snapElements[k].width,n=d.snapElements[k].top,o=n+d.snapElements[k].height;
if(!(l-f<g&&g<m+f&&n-f<i&&i<o+f||l-f<g&&g<m+f&&n-f<j&&j<o+f||l-f<h&&h<m+f&&n-f<i&&i<o+f||l-f<h&&h<m+f&&n-f<j&&j<o+f)){
d.snapElements[k].snapping&&d.options.snap.release&&d.options.snap.release.call(d.element,b,a.extend(d._uiHash(),{
snapItem:d.snapElements[k].item}
)),d.snapElements[k].snapping=!1;
continue}
if(e.snapMode!="inner"){
var p=Math.abs(n-j)<=f,q=Math.abs(o-i)<=f,r=Math.abs(l-h)<=f,s=Math.abs(m-g)<=f;
p&&(c.position.top=d._convertPositionTo("relative",{
top:n-d.helperProportions.height,left:0}
).top-d.margins.top),q&&(c.position.top=d._convertPositionTo("relative",{
top:o,left:0}
).top-d.margins.top),r&&(c.position.left=d._convertPositionTo("relative",{
top:0,left:l-d.helperProportions.width}
).left-d.margins.left),s&&(c.position.left=d._convertPositionTo("relative",{
top:0,left:m}
).left-d.margins.left)}
var t=p||q||r||s;
if(e.snapMode!="outer"){
var p=Math.abs(n-i)<=f,q=Math.abs(o-j)<=f,r=Math.abs(l-g)<=f,s=Math.abs(m-h)<=f;
p&&(c.position.top=d._convertPositionTo("relative",{
top:n,left:0}
).top-d.margins.top),q&&(c.position.top=d._convertPositionTo("relative",{
top:o-d.helperProportions.height,left:0}
).top-d.margins.top),r&&(c.position.left=d._convertPositionTo("relative",{
top:0,left:l}
).left-d.margins.left),s&&(c.position.left=d._convertPositionTo("relative",{
top:0,left:m-d.helperProportions.width}
).left-d.margins.left)}
!d.snapElements[k].snapping&&(p||q||r||s||t)&&d.options.snap.snap&&d.options.snap.snap.call(d.element,b,a.extend(d._uiHash(),{
snapItem:d.snapElements[k].item}
)),d.snapElements[k].snapping=p||q||r||s||t}
}
}
),a.ui.plugin.add("draggable","stack",{
start:function(b,c){
var d=a(this).data("draggable").options,e=a.makeArray(a(d.stack)).sort(function(b,c){
return(parseInt(a(b).css("zIndex"),10)||0)-(parseInt(a(c).css("zIndex"),10)||0)}
);
if(!e.length)return;
var f=parseInt(e[0].style.zIndex)||0;
a(e).each(function(a){
this.style.zIndex=f+a}
),this[0].style.zIndex=f+e.length}
}
),a.ui.plugin.add("draggable","zIndex",{
start:function(b,c){
var d=a(c.helper),e=a(this).data("draggable").options;
d.css("zIndex")&&(e._zIndex=d.css("zIndex")),d.css("zIndex",e.zIndex)}
,stop:function(b,c){
var d=a(this).data("draggable").options;
d._zIndex&&a(c.helper).css("zIndex",d._zIndex)}
}
)}
)(jQuery);
;
CSS代码(main.css):
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
a:hover,a:active{outline:0}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}
button,input{*overflow:visible;line-height:normal}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;content:""}
.clearfix:after{clear:both}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
form{margin:0 0 18px}
fieldset{padding:0;margin:0;border:0}
legend{display:block;width:100%;padding:0;margin-bottom:27px;font-size:19.5px;line-height:36px;color:#333;border:0;border-bottom:1px solid #eee}
legend small{font-size:13.5px;color:#999}
label,input,button,select,textarea{font-size:13px;font-weight:400;line-height:18px}
input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
label{display:block;margin-bottom:5px;color:#333}
input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555;background-color:#fff;border:1px solid #ccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.uneditable-textarea{width:auto;height:auto}
label input,label textarea,label select{display:block}
input[type="image"],input[type="checkbox"],input[type="radio"]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;background-color:transparent;border:0 \9;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
input[type="image"]{border:0}
input[type="file"]{width:auto;padding:initial;line-height:initial;background-color:#fff;background-color:initial;border:initial;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
input[type="button"],input[type="reset"],input[type="submit"]{width:auto;height:auto}
select,input[type="file"]{height:28px;*margin-top:4px;line-height:28px}
input[type="file"]{line-height:18px \9}
select{width:220px;background-color:#fff}
select[multiple],select[size]{height:auto}
input[type="image"]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
textarea{height:auto}
input[type="hidden"]{display:none}
.radio,.checkbox{min-height:18px;padding-left:18px}
.radio input[type="radio"],.checkbox input[type="checkbox"]{float:left;margin-left:-18px}
.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:5px}
.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px}
input,textarea{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border linear .2s,box-shadow linear .2s;-moz-transition:border linear .2s,box-shadow linear .2s;-ms-transition:border linear .2s,box-shadow linear .2s;-o-transition:border linear .2s,box-shadow linear .2s;transition:border linear .2s,box-shadow linear .2s}
input:focus,textarea:focus{border-color:rgba(82,168,236,.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6)}
input[type="file"]:focus,input[type="radio"]:focus,input[type="checkbox"]:focus,select:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.input-mini{width:60px}
.input-small{width:90px}
.input-medium{width:150px}
.input-large{width:210px}
.input-xlarge{width:270px}
.input-xxlarge{width:530px}
input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{cursor:not-allowed;background-color:#eee;border-color:#ddd}
input[type="radio"][disabled],input[type="checkbox"][disabled],input[type="radio"][readonly],input[type="checkbox"][readonly]{background-color:transparent}
.control-group.warning>label,.control-group.warning .help-block,.control-group.warning .help-inline{color:#c09853}
.control-group.warning input,.control-group.warning select,.control-group.warning textarea{color:#c09853;border-color:#c09853}
.control-group.warning input:focus,.control-group.warning select:focus,.control-group.warning textarea:focus{border-color:#a47e3c;-webkit-box-shadow:0 0 6px #dbc59e;-moz-box-shadow:0 0 6px #dbc59e;box-shadow:0 0 6px #dbc59e}
.control-group.warning .input-prepend .add-on,.control-group.warning .input-append .add-on{color:#c09853;background-color:#fcf8e3;border-color:#c09853}
.control-group.error>label,.control-group.error .help-block,.control-group.error .help-inline{color:#b94a48}
.control-group.error input,.control-group.error select,.control-group.error textarea{color:#b94a48;border-color:#b94a48}
.control-group.error input:focus,.control-group.error select:focus,.control-group.error textarea:focus{border-color:#953b39;-webkit-box-shadow:0 0 6px #d59392;-moz-box-shadow:0 0 6px #d59392;box-shadow:0 0 6px #d59392}
.control-group.error .input-prepend .add-on,.control-group.error .input-append .add-on{color:#b94a48;background-color:#f2dede;border-color:#b94a48}
.control-group.success>label,.control-group.success .help-block,.control-group.success .help-inline{color:#468847}
.control-group.success input,.control-group.success select,.control-group.success textarea{color:#468847;border-color:#468847}
.control-group.success input:focus,.control-group.success select:focus,.control-group.success textarea:focus{border-color:#356635;-webkit-box-shadow:0 0 6px #7aba7b;-moz-box-shadow:0 0 6px #7aba7b;box-shadow:0 0 6px #7aba7b}
.control-group.success .input-prepend .add-on,.control-group.success .input-append .add-on{color:#468847;background-color:#dff0d8;border-color:#468847}
input:focus:required:invalid,textarea:focus:required:invalid,select:focus:required:invalid{color:#b94a48;border-color:#ee5f5b}
input:focus:required:invalid:focus,textarea:focus:required:invalid:focus,select:focus:required:invalid:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7}
.form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;*zoom:1}
.form-actions:before,.form-actions:after{display:table;content:""}
.form-actions:after{clear:both}
.uneditable-input{overflow:hidden;white-space:nowrap;cursor:not-allowed;background-color:#fff;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.025);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.025);box-shadow:inset 0 1px 2px rgba(0,0,0,.025)}
:-moz-placeholder{color:#999}
::-webkit-input-placeholder{color:#999}
.help-block,.help-inline{color:#555}
.help-block{display:block;margin-bottom:9px}
.help-inline{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;padding-left:5px}
.input-prepend,.input-append{margin-bottom:5px}
.input-prepend input,.input-append input,.input-prepend select,.input-append select,.input-prepend .uneditable-input,.input-append .uneditable-input{position:relative;margin-bottom:0;*margin-left:0;vertical-align:middle;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}
.input-prepend input:focus,.input-append input:focus,.input-prepend select:focus,.input-append select:focus,.input-prepend .uneditable-input:focus,.input-append .uneditable-input:focus{z-index:2}
.input-prepend .uneditable-input,.input-append .uneditable-input{border-left-color:#ccc}
.input-prepend .add-on,.input-append .add-on{display:inline-block;width:auto;height:18px;min-width:16px;padding:4px 5px;font-weight:400;line-height:18px;text-align:center;text-shadow:0 1px 0 #fff;vertical-align:middle;background-color:#eee;border:1px solid #ccc;font-size:12px}
.input-prepend .add-on,.input-append .add-on,.input-prepend .btn,.input-append .btn{margin-left:-6px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.input-prepend .active,.input-append .active{background-color:#a9dba9;border-color:#46a546}
.input-prepend .add-on,.input-prepend .btn{margin-right:-1px}
.input-prepend .add-on:first-child,.input-prepend .btn:first-child{-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}
.input-append input,.input-append select,.input-append .uneditable-input{-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}
.input-append .uneditable-input{border-right-color:#ccc;border-left-color:#eee}
.input-append .add-on:last-child,.input-append .btn:last-child{-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}
.input-prepend.input-append input,.input-prepend.input-append select,.input-prepend.input-append .uneditable-input{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.input-prepend.input-append .add-on:first-child,.input-prepend.input-append .btn:first-child{margin-right:-1px;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}
.input-prepend.input-append .add-on:last-child,.input-prepend.input-append .btn:last-child{margin-left:-1px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0}
.search-query{padding-right:14px;padding-right:4px \9;padding-left:14px;padding-left:4px \9;margin-bottom:0;-webkit-border-radius:14px;-moz-border-radius:14px;border-radius:14px}
.form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .help-inline,.form-inline .help-inline,.form-horizontal .help-inline,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input,.form-search .input-prepend,.form-inline .input-prepend,.form-horizontal .input-prepend,.form-search .input-append,.form-inline .input-append,.form-horizontal .input-append{display:inline-block;*display:inline;*zoom:1;margin-bottom:0}
.form-search .hide,.form-inline .hide,.form-horizontal .hide{display:none}
.form-search label,.form-inline label{display:inline-block}
.form-search .input-append,.form-inline .input-append,.form-search .input-prepend,.form-inline .input-prepend{margin-bottom:0}
.form-search .radio,.form-search .checkbox,.form-inline .radio,.form-inline .checkbox{padding-left:0;margin-bottom:0;vertical-align:middle}
.form-search .radio input[type="radio"],.form-search .checkbox input[type="checkbox"],.form-inline .radio input[type="radio"],.form-inline .checkbox input[type="checkbox"]{float:left;margin-right:3px;margin-left:0}
.control-group{margin-bottom:9px}
legend+.control-group{margin-top:18px;-webkit-margin-top-collapse:separate}
.form-horizontal .control-group{margin-bottom:18px;*zoom:1}
.form-horizontal .control-group:before,.form-horizontal .control-group:after{display:table;content:""}
.form-horizontal .control-group:after{clear:both}
.form-horizontal .control-label{float:left;width:140px;padding-top:5px;text-align:right}
.form-horizontal .controls{*display:inline-block;*padding-left:20px;margin-left:160px;*margin-left:0}
.form-horizontal .controls:first-child{*padding-left:160px}
.form-horizontal .help-block{margin-top:9px;margin-bottom:0}
.form-horizontal .form-actions{padding-left:160px}
.btn{display:inline-block;*display:inline;*zoom:1;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;*line-height:20px;color:#333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.75);vertical-align:middle;cursor:pointer;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-ms-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fff),to( #e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(top,#fff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#e6e6e6;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);border:1px solid #ccc;*border:0;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;*margin-left:.3em;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)}
.btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled]{background-color:#e6e6e6;*background-color:#d9d9d9}
.btn:active,.btn.active{background-color:#ccc \9}
.btn:first-child{*margin-left:0}
.btn:hover{color:#333;text-decoration:none;background-color:#e6e6e6;*background-color:#d9d9d9;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-ms-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}
.btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
.btn.active,.btn:active{background-color:#e6e6e6;background-color:#d9d9d9 \9;background-image:none;outline:0;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)}
.btn.disabled,.btn[disabled]{cursor:default;background-color:#e6e6e6;background-image:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}
.btn-large{padding:9px 14px;font-size:15px;line-height:normal;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}
.btn-large [class^="icon-"]{margin-top:1px}
.btn-small{padding:5px 9px;font-size:11px;line-height:16px}
.btn-small [class^="icon-"]{margin-top:-1px}
.btn-mini{padding:2px 6px;font-size:11px;line-height:14px}
.btn-primary,.btn-primary:hover,.btn-warning,.btn-warning:hover,.btn-danger,.btn-danger:hover,.btn-success,.btn-success:hover,.btn-info,.btn-info:hover,.btn-inverse,.btn-inverse:hover{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.25)}
.btn-primary.active,.btn-warning.active,.btn-danger.active,.btn-success.active,.btn-info.active,.btn-inverse.active{color:rgba(255,255,255,.75)}
.btn{border-color:#ccc;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25)}
.btn-primary{background-color:#0074cc;background-image:-moz-linear-gradient(top,#08c,#05c);background-image:-ms-linear-gradient(top,#08c,#05c);background-image:-webkit-gradient(linear,0 0,0 100%,from( #08c),to( #05c));background-image:-webkit-linear-gradient(top,#08c,#05c);background-image:-o-linear-gradient(top,#08c,#05c);background-image:linear-gradient(top,#08c,#05c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);border-color:#05c #0055cc #003580;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#05c;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled]{background-color:#05c;*background-color:#004ab3}
.btn-primary:active,.btn-primary.active{background-color:#004099 \9}
.btn-warning{background-color:#faa732;background-image:-moz-linear-gradient(top,#fbb450,#f89406);background-image:-ms-linear-gradient(top,#fbb450,#f89406);background-image:-webkit-gradient(linear,0 0,0 100%,from( #fbb450),to( #f89406));background-image:-webkit-linear-gradient(top,#fbb450,#f89406);background-image:-o-linear-gradient(top,#fbb450,#f89406);background-image:linear-gradient(top,#fbb450,#f89406);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbb450',endColorstr='#f89406',GradientType=0);border-color:#f89406 #f89406 #ad6704;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#f89406;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-warning:hover,.btn-warning:active,.btn-warning.active,.btn-warning.disabled,.btn-warning[disabled]{background-color:#f89406;*background-color:#df8505}
.btn-warning:active,.btn-warning.active{background-color:#c67605 \9}
.btn-danger{background-color:#da4f49;background-image:-moz-linear-gradient(top,#ee5f5b,#bd362f);background-image:-ms-linear-gradient(top,#ee5f5b,#bd362f);background-image:-webkit-gradient(linear,0 0,0 100%,from( #ee5f5b),to( #bd362f));background-image:-webkit-linear-gradient(top,#ee5f5b,#bd362f);background-image:-o-linear-gradient(top,#ee5f5b,#bd362f);background-image:linear-gradient(top,#ee5f5b,#bd362f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b',endColorstr='#bd362f',GradientType=0);border-color:#bd362f #bd362f #802420;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#bd362f;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-danger:hover,.btn-danger:active,.btn-danger.active,.btn-danger.disabled,.btn-danger[disabled]{background-color:#bd362f;*background-color:#a9302a}
.btn-danger:active,.btn-danger.active{background-color:#942a25 \9}
.btn-success{background-color:#5bb75b;background-image:-moz-linear-gradient(top,#62c462,#51a351);background-image:-ms-linear-gradient(top,#62c462,#51a351);background-image:-webkit-gradient(linear,0 0,0 100%,from( #62c462),to( #51a351));background-image:-webkit-linear-gradient(top,#62c462,#51a351);background-image:-o-linear-gradient(top,#62c462,#51a351);background-image:linear-gradient(top,#62c462,#51a351);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462',endColorstr='#51a351',GradientType=0);border-color:#51a351 #51a351 #387038;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#51a351;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-success:hover,.btn-success:active,.btn-success.active,.btn-success.disabled,.btn-success[disabled]{background-color:#51a351;*background-color:#499249}
.btn-success:active,.btn-success.active{background-color:#408140 \9}
.btn-info{background-color:#49afcd;background-image:-moz-linear-gradient(top,#5bc0de,#2f96b4);background-image:-ms-linear-gradient(top,#5bc0de,#2f96b4);background-image:-webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));background-image:-webkit-linear-gradient(top,#5bc0de,#2f96b4);background-image:-o-linear-gradient(top,#5bc0de,#2f96b4);background-image:linear-gradient(top,#5bc0de,#2f96b4);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de',endColorstr='#2f96b4',GradientType=0);border-color:#2f96b4 #2f96b4 #1f6377;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#2f96b4;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-info:hover,.btn-info:active,.btn-info.active,.btn-info.disabled,.btn-info[disabled]{background-color:#2f96b4;*background-color:#2a85a0}
.btn-info:active,.btn-info.active{background-color:#24748c \9}
.btn-inverse{background-color:#414141;background-image:-moz-linear-gradient(top,#555,#222);background-image:-ms-linear-gradient(top,#555,#222);background-image:-webkit-gradient(linear,0 0,0 100%,from( #555),to( #222));background-image:-webkit-linear-gradient(top,#555,#222);background-image:-o-linear-gradient(top,#555,#222);background-image:linear-gradient(top,#555,#222);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#222222',GradientType=0);border-color:#222 #222222 #000;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*background-color:#222;filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}
.btn-inverse:hover,.btn-inverse:active,.btn-inverse.active,.btn-inverse.disabled,.btn-inverse[disabled]{background-color:#222;*background-color:#151515}
.btn-inverse:active,.btn-inverse.active{background-color:#080808 \9}
button.btn,input[type="submit"].btn{*padding-top:2px;*padding-bottom:2px}
button.btn::-moz-focus-inner,input[type="submit"].btn::-moz-focus-inner{padding:0;border:0}
button.btn.btn-large,input[type="submit"].btn.btn-large{*padding-top:7px;*padding-bottom:7px}
button.btn.btn-small,input[type="submit"].btn.btn-small{*padding-top:3px;*padding-bottom:3px}
button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-bottom:1px}
[class^="icon-"],[class*=" icon-"]{display:inline-block;width:14px;height:14px;*margin-right:.3em;line-height:14px;vertical-align:text-top;background-image:url("../img/glyphicons-halflings.png");background-position:14px 14px;background-repeat:no-repeat}
[class^="icon-"]:last-child,[class*=" icon-"]:last-child{*margin-left:0}
.icon-white{background-image:url("../img/glyphicons-halflings-white.png")}
.icon-glass{background-position:0 0}
.icon-music{background-position:-24px 0}
.icon-search{background-position:-48px 0}
.icon-envelope{background-position:-72px 0}
.icon-heart{background-position:-96px 0}
.icon-star{background-position:-120px 0}
.icon-star-empty{background-position:-144px 0}
.icon-user{background-position:-168px 0}
.icon-film{background-position:-192px 0}
.icon-th-large{background-position:-216px 0}
.icon-th{background-position:-240px 0}
.icon-th-list{background-position:-264px 0}
.icon-ok{background-position:-288px 0}
.icon-remove{background-position:-312px 0}
.icon-zoom-in{background-position:-336px 0}
.icon-zoom-out{background-position:-360px 0}
.icon-off{background-position:-384px 0}
.icon-signal{background-position:-408px 0}
.icon-cog{background-position:-432px 0}
.icon-trash{background-position:-456px 0}
.icon-home{background-position:0 -24px}
.icon-file{background-position:-24px -24px}
.icon-time{background-position:-48px -24px}
.icon-road{background-position:-72px -24px}
.icon-download-alt{background-position:-96px -24px}
.icon-download{background-position:-120px -24px}
.icon-upload{background-position:-144px -24px}
.icon-inbox{background-position:-168px -24px}
.icon-play-circle{background-position:-192px -24px}
.icon-repeat{background-position:-216px -24px}
.icon-refresh{background-position:-240px -24px}
.icon-list-alt{background-position:-264px -24px}
.icon-lock{background-position:-287px -24px}
.icon-flag{background-position:-312px -24px}
.icon-headphones{background-position:-336px -24px}
.icon-volume-off{background-position:-360px -24px}
.icon-volume-down{background-position:-384px -24px}
.icon-volume-up{background-position:-408px -24px}
.icon-qrcode{background-position:-432px -24px}
.icon-barcode{background-position:-456px -24px}
.icon-tag{background-position:0 -48px}
.icon-tags{background-position:-25px -48px}
.icon-book{background-position:-48px -48px}
.icon-bookmark{background-position:-72px -48px}
.icon-print{background-position:-96px -48px}
.icon-camera{background-position:-120px -48px}
.icon-font{background-position:-144px -48px}
.icon-bold{background-position:-167px -48px}
.icon-italic{background-position:-192px -48px}
.icon-text-height{background-position:-216px -48px}
.icon-text-width{background-position:-240px -48px}
.icon-align-left{background-position:-264px -48px}
.icon-align-center{background-position:-288px -48px}
.icon-align-right{background-position:-312px -48px}
.icon-align-justify{background-position:-336px -48px}
.icon-list{background-position:-360px -48px}
.icon-indent-left{background-position:-384px -48px}
.icon-indent-right{background-position:-408px -48px}
.icon-facetime-video{background-position:-432px -48px}
.icon-picture{background-position:-456px -48px}
.icon-pencil{background-position:0 -72px}
.icon-map-marker{background-position:-24px -72px}
.icon-adjust{background-position:-48px -72px}
.icon-tint{background-position:-72px -72px}
.icon-edit{background-position:-96px -72px}
.icon-share{background-position:-120px -72px}
.icon-check{background-position:-144px -72px}
.icon-move{background-position:-168px -72px}
.icon-step-backward{background-position:-192px -72px}
.icon-fast-backward{background-position:-216px -72px}
.icon-backward{background-position:-240px -72px}
.icon-play{background-position:-264px -72px}
.icon-pause{background-position:-288px -72px}
.icon-stop{background-position:-312px -72px}
.icon-forward{background-position:-336px -72px}
.icon-fast-forward{background-position:-360px -72px}
.icon-step-forward{background-position:-384px -72px}
.icon-eject{background-position:-408px -72px}
.icon-chevron-left{background-position:-432px -72px}
.icon-chevron-right{background-position:-456px -72px}
.icon-plus-sign{background-position:0 -96px}
.icon-minus-sign{background-position:-24px -96px}
.icon-remove-sign{background-position:-48px -96px}
.icon-ok-sign{background-position:-72px -96px}
.icon-question-sign{background-position:-96px -96px}
.icon-info-sign{background-position:-120px -96px}
.icon-screenshot{background-position:-144px -96px}
.icon-remove-circle{background-position:-168px -96px}
.icon-ok-circle{background-position:-192px -96px}
.icon-ban-circle{background-position:-216px -96px}
.icon-arrow-left{background-position:-240px -96px}
.icon-arrow-right{background-position:-264px -96px}
.icon-arrow-up{background-position:-289px -96px}
.icon-arrow-down{background-position:-312px -96px}
.icon-share-alt{background-position:-336px -96px}
.icon-resize-full{background-position:-360px -96px}
.icon-resize-small{background-position:-384px -96px}
.icon-plus{background-position:-408px -96px}
.icon-minus{background-position:-433px -96px}
.icon-asterisk{background-position:-456px -96px}
.icon-exclamation-sign{background-position:0 -120px}
.icon-gift{background-position:-24px -120px}
.icon-leaf{background-position:-48px -120px}
.icon-fire{background-position:-72px -120px}
.icon-eye-open{background-position:-96px -120px}
.icon-eye-close{background-position:-120px -120px}
.icon-warning-sign{background-position:-144px -120px}
.icon-plane{background-position:-168px -120px}
.icon-calendar{background-position:-192px -120px}
.icon-random{background-position:-216px -120px}
.icon-comment{background-position:-240px -120px}
.icon-magnet{background-position:-264px -120px}
.icon-chevron-up{background-position:-288px -120px}
.icon-chevron-down{background-position:-313px -119px}
.icon-retweet{background-position:-336px -120px}
.icon-shopping-cart{background-position:-360px -120px}
.icon-folder-close{background-position:-384px -120px}
.icon-folder-open{background-position:-408px -120px}
.icon-resize-vertical{background-position:-432px -119px}
.icon-resize-horizontal{background-position:-456px -118px}
.icon-hdd{background-position:0 -144px}
.icon-bullhorn{background-position:-24px -144px}
.icon-bell{background-position:-48px -144px}
.icon-certificate{background-position:-72px -144px}
.icon-thumbs-up{background-position:-96px -144px}
.icon-thumbs-down{background-position:-120px -144px}
.icon-hand-right{background-position:-144px -144px}
.icon-hand-left{background-position:-168px -144px}
.icon-hand-up{background-position:-192px -144px}
.icon-hand-down{background-position:-216px -144px}
.icon-circle-arrow-right{background-position:-240px -144px}
.icon-circle-arrow-left{background-position:-264px -144px}
.icon-circle-arrow-up{background-position:-288px -144px}
.icon-circle-arrow-down{background-position:-312px -144px}
.icon-globe{background-position:-336px -144px}
.icon-wrench{background-position:-360px -144px}
.icon-tasks{background-position:-384px -144px}
.icon-filter{background-position:-408px -144px}
.icon-briefcase{background-position:-432px -144px}
.icon-fullscreen{background-position:-456px -144px}
:root{background:#EBEBEB;font-family:Helvetica,'Hiragino Sans GB',Arial,sans-serif;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased}
body{width:980px;margin:0 auto;background:none repeat scroll 0 0 #FCFCFC}
.content{width:980px;margin:0 auto}
.content h2{color:#CC662C;margin:0 0 45px;padding:20px;text-align:center;text-shadow:0 0 1px #E1E1E1}
.content h5{font-size:14px;color:#666;margin-left:10px}
.outer_container{height:200px;position:relative}
.demo-container{padding:10px;background-color:#fff;box-shadow:0 0 1px #000;width:97%;margin:0 auto}
.demo-container .input-form{float:left;width:37%;padding:10px}
.demo-container .demo{float:right;background-color:#efefef;padding:10px;width:58%;overflow:hidden;box-shadow:0 0 1px #000 inset;border:1px solid #f1f1f1;position:relative}
.demo-container .drag{font-size:11px;color:#888;float:right;margin-top:5px}
.demo-container #info{top:0;text-align:center;position:absolute;width:96%;padding:0;margin:5px;font-size:12px;display:none;text-shadow:0 0 1px #fff;color:#737265}
CSS代码(piemenu.css):
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
a:hover,a:active{outline:0}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{max-width:100%;vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}
button,input,select,textarea{margin:0;font-size:100%;vertical-align:middle}
button,input{*overflow:visible;line-height:normal}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}
input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
.clearfix{*zoom:1}
.clearfix:before,.clearfix:after{display:table;content:""}
.clearfix:after{clear:both}
.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}
.input-block-level{display:block;width:100%;min-height:28px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
.menu_button{position:absolute;bottom:0;left:0;border-radius:50%;height:36px;width:36px;border:4px solid #fff;box-shadow:rgba(0,0,0,.3) 0 3px 8px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.3) 0 0 0 1px,inset rgba(255,255,255,.3) 0 1px 0 1px;text-indent:-99999px;overflow:hidden;background-color:#e34f3f;background-image:-moz-linear-gradient(top,#f76f54,#c61f1f);background-image:-ms-linear-gradient(top,#f76f54,#c61f1f);background-image:-webkit-gradient(linear,0 0,0 100%,from( #f76f54),to( #c61f1f));background-image:-webkit-linear-gradient(top,#f76f54,#c61f1f);background-image:-o-linear-gradient(top,#f76f54,#c61f1f);background-image:linear-gradient(top,#f76f54,#c61f1f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f76f54',endColorstr='#c61f1f',GradientType=0);z-index:9999;outline:0}
.menu_button span{display:block;height:36px;width:36px;background:url(../images/cross.svg) no-repeat center center;-webkit-transition:.4s ease;-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;transition:.4s ease}
.menu_option{bottom:18px;left:5px;position:absolute}
.menu_option li{position:absolute;display:block;top:0;left:0;-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;transition:.3s}
.menu_option li a{position:relative;display:block;border-radius:50%;width:26px;height:26px;border:3px solid #fff;box-shadow:rgba(0,0,0,.4) 0 0 5px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.5) 0 0 2px 0;text-indent:-99999px;overflow:hidden;background:#444}
.menu_option li a span{background-attachment:scroll;background-clip:border-box;background-color:transparent;background-image:url("../images/usr.png");background-origin:padding-box;background-position:center center;background-repeat:no-repeat;background-size:16px 16px;display:block;width:26px;height:26px;-webkit-transition:.4s ease;-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;transition:.4s ease}
.btn-rotate span{-webkit-transform:rotate(-135deg);-moz-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg)}
.active .menu_option li a{-webkit-animation:expand .6s ease 1 backwards;-moz-animation:expand .6s ease 1 backwards;-ms-animation:expand .6s ease 1 backwards;-o-animation:expand .6s ease 1 backwards;animation:expand .6s ease 1 backwards}
@-webkit-keyframes expand{0%{top:0}
50%{top:-10px}
70%{top:10px}
100%{top:0}
}
@-moz-keyframes expand{0%{top:0}
50%{top:-10px}
70%{top:10px}
100%{top:0}
}
分享到QQ
分享到微博
微信扫一扫
