仿京东电商网站通用导航
程序员文章站
2022-03-25 12:47:02
效果图 index.html index
效果图
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/ui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 导航nav -->
<div class="container clearfix mt-40">
<div class="wp navbar">
<div class="macth_xv_navlist">
<div class="macth_xv_menu">
<!-- 侧导航 -->
<div class="macth_xv_categorys">
<div class="macth_xv_cat_title">
<h2 class="macth_cat_name"><a href="###">全部商品分类<b class="macth_xv_icon_bai"></b></a></h2>
</div>
<div class="macth_xv_cat_catlist ">
<ul class="macth-dropdown-menu" data-bind="foreach:navdata">
<li class="macth_xvitem" data-bind="attr:{'data-submenu-id':$data.id}">
<h3>
<span><i><img src="images/homeicon.png"></i></span><span class="macth_xvh3_a"><a href="javascript:void(0)" data-bind="text:$data.title"></a></span><s></s>
</h3>
<div data-bind="attr:{'id':$data.id}" class="macth_popover">
<div class="macth_popover-content">
<ul class="macth_content_ul" data-bind="foreach:$data.content">
<li class="macth_nav_li">
<a class="macth_xvnav_li_alist" href="###" data-bind="text:$data.title"></a>
<ul class="macth_xvnav_li_ul" data-bind="foreach:$data.content">
<li><a href="###" data-bind="text:$data"></a></li>
</ul>
</li>
</ul>
</div>
<div class="macth_cat-right">
<a href="###" target="_blank"><img src="images/rightbanner.jpg" style="margin-top: 6px"></a>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 主导航 -->
<ul class="macth_xv_nav">
<li class="macth_liactive"><a href="###">首页</a></li>
<li><a href="###">职场测算</a></li>
<li><a href="###">工资评估</a></li>
<li><a href="###">薪资穿越</a></li>
<li><a href="###">职场生活</a></li>
<li><i class="macth_nav_new"></i><a href="###">我要招人</a></li>
<li><a href="###">诚招加盟</a></li>
</ul>
<!-- 收益相关 -->
<div class="macth_xv_login">
<div class="macth_xvlogin_list scroll-top">
<div class="scroll_title">今日收益榜</div>
<ul class="infolist">
<li>
<span>张**</span>
<span>简历被购买<strong>27次</strong></span>
<span>收入<strong>108元</strong></span>
</li>
<li>
<span>王**</span>
<span>简历被购买<strong>19次</strong></span>
<span>收入<strong>76元</strong></span>
</li>
<li>
<span>李**</span>
<span>简历被购买<strong>43次</strong></span>
<span>收入<strong>172元</strong></span>
</li>
<li>
<span>赵**</span>
<span>简历被购买<strong>31次</strong></span>
<span>收入<strong>124元</strong></span>
</li>
<li>
<span>何**</span>
<span>简历被购买<strong>29次</strong></span>
<span>收入<strong>116元</strong></span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery.aimmenu.js"></script>
<script src="js/knockout.js"></script>
<script src="js/data.js"></script>
<script src="js/script.js"></script>
</body>
</html>
ui.css
@charset "utf-8";
/*reset*/
* {
word-wrap:break-word
}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset {
margin:0;
padding:0
}
ul,ol,dl {
list-style-type:none
}
html,body {
*position:static
}
html {
font-family:sans-serif;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:normal
}
input,button,textarea,select,optgroup,option {
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit
}
input,button {
overflow:visible;
vertical-align:middle;
outline:none
}
body,th,td,button,input,select,textarea {
font-family:"microsoft yahei","hiragino sans gb","helvetica neue",helvetica,tahoma,arial,verdana,sans-serif,"wenquanyi micro hei","\5b8b\4f53";
font-size:12px;
color:#333;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased
}
body {
line-height:1.6;
background:#fff
}
h1,h2,h3,h4,h5,h6 {
font-size:100%
}
a,area {
outline:none;
blr:expression(this.onfocus=this.blur())
}
a {
text-decoration:none;
cursor:pointer
}
a:hover {
text-decoration:underline;
outline:none
}
a.ie6:hover {
zoom:1
}
a:focus {
outline:none
}
a:hover,a:active {
outline:none
}
:focus {
outline:none
}
sub,sup {
vertical-align:baseline
}
/*img*/
img {
border:0;
vertical-align:middle
}
a img,img {
-ms-interpolation-mode:bicubic
}
.img-responsive {
max-width:100%;
height:auto
}
/*ie下a:hover 背景闪烁*/
*html {
overflow:-moz-scrollbars-vertical;
zoom:expression(function(ele) {
ele.style.zoom = "1";
document.execcommand("backgroundimagecache",false,true)
}
(this))}/*html5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend {
display:block;
margin:0;
padding:0
}
time {
display:inline
}
audio,canvas,video {
display:inline-block;
*display:inline;
*zoom:1
}
audio:not([controls]) {
display:none
}
legend {
width:100%;
margin-bottom:20px;
font-size:21px;
line-height:40px;
border:0;
border-bottom:1px solid #e5e5e5
}
legend small {
font-size:15px;
color:#999
}
svg:not(:root) {
overflow:hidden
}
fieldset {
border-width:0;
padding:0.35em 0.625em 0.75em;
margin:0 2px;
border:1px solid #c0c0c0
}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {
height:auto
}
input[type="search"] {
-webkit-appearance:textfield;
/* 1 */-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
/* 2 */box-sizing:content-box
}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none
}
/*清楚浮动
name:style_clearfix
example:class="clearfix|cl"
explain:clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden
}
.cl,.clearfix {
zoom:1
}
/*2.3 布局(固定)
name:style_layout
explain:左右两栏|左中右三栏|上中下
last modify:guojunhui
*/
.container,.wp {
margin-left:auto;
margin-right:auto;
text-align:left
}
.wp {
width:1200px
}
/*3.1 排版*/
/*3.1.1 标题
example：
<h1>h1. 大标题<small>小标题</small></h1>
<h2>h2. 大标题<small>小标题</small></h2>
<h3>h3. 大标题<small>小标题</small></h3>
<h4>h4. 大标题<small>小标题</small></h4>
<h5>h5. 大标题<small>小标题</small></h5>
<h6>h6. 大标题<small>小标题</small></h6>
*/
h1,h2,h3,h4,h5,h6 {
font-weight:500;
line-height:1.1;
color:inherit
}
h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,h1 .small,h2 .small,h3 .small,h4 .small,h5 .small,h6 .small {
font-weight:normal;
line-height:1;
color:#999
}
h1,h2,h3 {
margin-top:20px;
margin-bottom:10px
}
h1 small,h2 small,h3 small,h1 .small,h2 .small,h3 .small {
font-size:65%
}
h4,h5,h6 {
margin-top:10px;
margin-bottom:10px
}
h4 small,h5 small,h6 small,h4 .small,h5 .small,h6 .small {
font-size:75%
}
h1 {
font-size:36px
}
h2 {
font-size:30px
}
h3 {
font-size:24px
}
h4 {
font-size:18px
}
h5 {
font-size:14px
}
h6 {
font-size:12px
}
/*3.1.2 强调
example:<p>这是段落，向下10像素间距</p>
<smail>小型文本，是父容器字体大小的85%</smail>
<strong>重要文本，加粗显示</strong>
<em>被强调的文本，斜体显示</em>
<u>带下划线的文本</u>
<cite>引用</cite>
<mark>突出显示文本</mark>
<del>带删除线的文本</del>
<pre>预格式化的文本</pre>
*/
p {
margin-bottom:10px
}
/*段落*/
small {
font-size:85%
}
/*小型文本*/
b,strong {
font-weight:bold
}
/*重要的文本，加粗*/
em {
font-style:italic
}
/*被强调的文本*/
i {
}/*斜体*/
u {
}/*加下划线*/
cite {
font-style:normal
}
/*引用*/
mark {
color:#000;
background:#ff0
}
/*突出显示文本*/
var {
}/*变量*/
kbd {
}/*键盘文本*/
code {
}/*计算机代码文本*/
dfn {
font-style:italic
}
/*一个定义项目*/
del {
font-family:simsun
}
/*删除线*/
code,kbd,pre,samp {
font-family:monospace,serif;
font-size:1em
}
pre {
white-space:pre-wrap
}
/*预格式化的文本*/
.uppercase {
text-transform:uppercase
}
/*文字大写*/
.lowercase {
text-transform:lowercase
}
/*文字小写*/
.capitalize {
text-transform:capitalize
}
/*首字母大写*/
.en {
font-family:arial!important
}
/*3.1.3 对齐
name:style_text-align
example:class="ftext-l/text-r/text-c"
explain:.text-水平对齐 （.text-l左对齐/.text-r右对齐/.text-c居中对齐）
.va-上下对齐 （.va-t 居上对齐 .va-m 居中对齐 .va-b 居下对齐）
*/
.text-l {
text-align:left
}
.text-r {
text-align:right
}
.text-c {
text-align:center
}
.va-t {
vertical-align:top!important
}
.va-m {
vertical-align:middle!important
}
.va-b {
vertical-align:bottom!important
}
/*3.1.4 定位
name:style_position
example:class="pos-r/pos-a/pos-f"
explain:.pos-r 相对定位/.pos-a 绝对定位/.pos-f 固定
*/
.pos-r {
position:relative
}
.pos-a {
position:absolute
}
.pos-f {
position:fixed
}
/*3.1.5 浮动
name:style_float
example:class="l/r"
explain:.l 左浮动/.r 右浮动
*/
.l {
float:left!important;
_display:inline
}
.r {
float:right!important;
_display:inline
}
[class*="span"].r,.row-fluid [class*="span"].r {
float:right
}
/*3.1.6 文字单行溢出省略号
name:style_text-overflow
example:class="text-overflow"
*/
.text-overflow {
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
/*3.1.7 线条
name:style_line
example:class="line"
*/
.line {
font-size:0px;
line-height:0px;
border-top:solid 1px #ddd;
float:none;
}
/*3.1.8 外边距
name:style_margin
example:class="mt-5/mt-10/..."
explain:.mt表示上边距/.mb表示下边距/.ml表示左边距/.mr表示右边距
*/
.mt-5 {
margin-top:5px
}
.mt-10 {
margin-top:10px
}
.mt-15 {
margin-top:15px
}
.mt-20 {
margin-top:20px
}
.mt-30 {
margin-top:30px
}
.mt-40 {
margin-top:40px
}
.mb-5 {
margin-bottom:5px
}
.mb-10 {
margin-bottom:10px
}
.mb-15 {
margin-bottom:15px
}
.mb-20 {
margin-bottom:20px
}
.mb-30 {
margin-bottom:30px
}
.mb-40 {
margin-bottom:40px
}
.ml-5 {
margin-left:5px
}
.ml-10 {
margin-left:10px
}
.ml-15 {
margin-left:15px
}
.ml-20 {
margin-left:20px
}
.mr-30mr-30 {
margin-left:30px
}
.ml-40 {
margin-left:40px
}
.mr-5 {
margin-right:5px
}
.mr-10 {
margin-right:10px
}
.mr-15 {
margin-right:15px
}
.mr-20 {
margin-right:20px
}
.mr-30 {
margin-right:30px
}
.mr-40 {
margin-right:40px
}
/*3.1.9 内填充
name:style_padding
example:class="pt-5/pt-10/……"
explain:.pt表示上填充/.pb表示下填充/.pl表示左填充/.pr表示右填充
*/
.pt-5 {
padding-top:5px
}
.pt-10 {
padding-top:10px
}
.pt-20 {
padding-top:20px
}
.pb-5 {
padding-bottom:5px
}
.pb-10 {
padding-bottom:10px
}
.pb-20 {
padding-bottom:20px
}
.pl-5 {
padding-left:5px
}
.pl-10 {
padding-left:10px
}
.pl-20 {
padding-left:20px
}
.pr-5 {
padding-right:5px
}
.pr-10 {
padding-right:10px
}
.pr-20 {
padding-right:20px
}
.pd-5 {
padding:5px
}
.pd-10 {
padding:10px
}
.pd-15 {
padding:15px
}
.pd-20 {
padding:20px
}
.pd-30 {
padding:30px
}
.pd-40 {
padding:40px
}
/*3.1.10 边框，css3圆角
name:style-border
example:class="bk_gray radius"
explain:.bk_gray 边框/bk_gray radius圆角边框
*/
.bk-gray {
border:solid 1px #ddd
}
.radius {
border-radius:4px
}
/*3.1.11 css3阴影
name:style_shadow
example:class="box_shadow"
explain:css3阴影，ie下显示1像素边框
*/
.box-shadow {
background-color:#fff;
border:solid 1px #ddd\9;
box-shadow:1px 1px 2px 2px #ddd;
behavior:url(ie-css3.htc)
}
.text-shadow {
text-shadow:1px 1px 2px 2px #ddd;
-webkit-text-shadow:1px 1px 2px 2px #ddd;
-moz-text-shadow:1px 1px 2px 2px #ddd;
behavior:url(ie-css3.htc)
}
/*3.1.12 行内分割竖线
name:style_pipe
example:<span class="pipe">|</span>
*/
.pipe {
margin:0 5px;
color:#ccc;
font-size:10px!important
}
/*3.1.13 文字尺寸
name:style_font-size
example:class="f12/f14/f16/f18/f20"
explain:12px字体/14px字体/16px字体/18px字体/20px字体
*/
.f-12 {
font-size:12px
}
.f-14 {
font-size:14px
}
.f-16 {
font-size:16px
}
.f-18 {
font-size:18px
}
.f-20 {
font-size:20px
}
.f-24 {
font-size:24px
}
.f-30 {
font-size:30px
}
/*3.1.14 文字行距
name:mod_line-height
example:class="l16/l18/l20/l22/l24/l26/l28/l30"
explain:16px行高、18px行高、20px行高、22px行高、24px行高、26px行高、30px行高
*/
.l16 {
line-height:16px
}
.l18 {
line-height:18px
}
.l20 {
line-height:20px
}
.l22 {
line-height:22px
}
.l24 {
line-height:24px
}
.l26 {
line-height:26px
}
.l28 {
line-height:28px
}
.l30 {
line-height:30px
}
/*3.1.15 文字颜色
name:style_color
example:class="c-red|c-green|c-blue|c-white|c-black|c-gray|c-999|c-orange"
explain:红色|绿色|蓝色|白色|黑色|灰色|浅灰色|橙色
*/
.c-red,.c-red a,a.c-red {
color:red
}
.c-red a:hover,a.c-red:hover {
}.c-green,.c-green a,a.c-green {
color:green
}
.c-red a:hover,a.c-red:hover {
}.c-blue,.c-blue a,a.c-blue {
color:blue
}
.c-blue a:hover,a.c-blue:hover {
}.c-white,.c-white a,a.c-white {
color:white
}
.c-white a:hover,a.c-white:hover {
}.c-black,.c-black a {
color:black
}
.c-black a:hover,a.c-black:hover {
}.c-gray,.c-gray a,a.c-gray {
color:gray
}
.c-gray a:hover,a.c-gray:hover {
}.c-666,.c-666 a,a.c-666 {
color:#666
}
.c-666 a:hover,a.c-666:hover {
}.c-999,.c-999 a,a.c-999 {
color:#999
}
.c-999 a:hover,a.c-999:hover {
}.c-orange,.c-orange a,a.c-orange {
color:orange
}
.c-orange a:hover,a.c-orange:hover {
}/*3.1.16 文字颜色强调
example:class="text-muted/text-primary/text-warning/text-error/text-danger/text-success/text-info"
explain:柔和/重要/警告/错误/危险/成功/信息
*/
.text-muted {
color:#999
}
a.text-muted:hover {
color:#808080
}
.text-primary {
color:#428bca
}
a.text-primary:hover {
color:#247dc9
}
.text-warning {
color:#f33
}
a.text-warning:hover {
color:#f03
}
.text-error {
color:#f33
}
a.text-error:hover {
color:#f03
}
.text-danger {
color:#c00
}
a.text-danger:hover {
color:#900
}
.text-success {
color:#0c0
}
a.text-success:hover {
color:#093
}
.text-info {
color:#1faef2
}
a.text-info:hover {
color:#06c
}
.text-price {
color:#f60
}
a.text-price:hover {
color:#f60
}
/*3.1.17 缩略语
example:<abbr title="user interface" class="initialism">ui</abbr>
explain:*/
abbr[title],abbr[data-original-title] {
cursor:help;
border-bottom:1px dotted #999
}
abbr.initialism {
font-size:90%;
text-transform:uppercase
}
/*3.1.18 地址
example:<address>北京市海淀区上地……</address>
explain:*/
address {
display:block;
margin-bottom:20px;
font-style:normal;
line-height:20px
}
/*3.1.19 引用
example:<blockquote>这是引用的内容</blockquote>
explain:*/
blockquote {
padding:0 0 0 15px;
margin:0 0 20px;
border-left:5px solid #eee
}
blockquote p {
margin-bottom:0;
font-size:17.5px;
font-weight:300;
line-height:1.25
}
blockquote small {
display:block;
line-height:20px;
color:#999
}
blockquote small:before {
content:'\2014 \00a0'
}
blockquote.text-r {
padding-right:15px;
padding-left:0;
border-right:5px solid #eee;
border-left:0
}
blockquote.text-r p,blockquote.text-r small {
text-align:right
}
blockquote.text-r small:before {
content:''
}
blockquote.text-r small:after {
content:'\00a0 \2014'
}
q:before,q:after,blockquote:before,blockquote:after {
content:""
}
q {
/*短的引用*/quotes:"\201c" "\201d" "\2018" "\2019"
}
/*3.1.20 上标，下标
example:<sup>2</sup> <sub>2<sub>
explain:上标/下标
*/
sub,sup {
position:relative;
font-size:75%;
line-height:0;
vertical-align:baseline
}
sup {
top:-0.5em
}
sub {
bottom:-0.25em
}
/*3.1.21 内容样式
name:style_content
example:<div class="content"><p>……</p></div>
explain:内容样式
*/
.content {
position:relative;
font-size:14px;
line-height:1.6;
overflow:hidden;
text-align:left
}
.content h3 {
margin-top:20px;
font-size:16px
}
.content p {
text-indent:2em;
margin-top:20px
}
.content img {
max-width:100%
}
.content ul {
text-indent:2em
}
/*3.1.22 列表
name:style_ulolli
example:<ul class="tlist"><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul>
<ol class="linenums"><li>有序列表</li><li>有序列表</li><li>有序列表</li></ol>
explain:*/
ul.unstyled,ol.unstyled {
margin-left:0;
list-style:none
}
ul.inline,ol.inline {
margin-left:0;
list-style:none
}
ul.inline>li,ol.inline>li {
display:inline-block;
*display:inline;
padding-right:5px;
padding-left:5px;
*zoom:1
}
ol.linenums {
list-style:decimal outside none;
margin:0 0 0 22px;
/* ie indents via margin-left */
}
.tlist li {
line-height:22px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
/*禁止换行*/
.dot-1 {
padding-left:10px;
background:url(../images/dot_1.gif) no-repeat 3px center
}
/*圆点*/
.box-1 {
padding-left:10px;
background:url(../images/box_1.gif) no-repeat 3px center
}
/*小方块*/
.jt-1 {
padding-left:18px;
background:url(../images/jt_1.gif) no-repeat 3px center
}
/*箭头1*/
.jt-2 {
padding-left:18px;
background:url(../images/jt_2.gif) no-repeat 3px center
}
/*箭头2*/
.jt-3 {
padding-left:18px;
background:url(../images/jt_3.gif) no-repeat 3px center
}
/*箭头3*/
/*排行榜*/
/*<ol class="top-list"><li class="top"><em>1</em><a href="#">排行榜列表</a><span class="date">12</span></li></ol>*/
.top-list li {
height:20px;
line-height:20px;
margin-bottom:15px;
overflow:hidden;
padding-left:30px;
position:relative;
text-overflow:ellipsis;
vertical-align:bottom;
white-space:nowrap
}
.top-list em {
background-color:#f8f8f8;
border:1px solid #ebebeb;
color:#333;
height:18px;
left:0;
line-height:18px;
position:absolute;
text-align:center;
top:0;
width:20px;
font-style:normal
}
.top-list .top em {
background-color:#390;
border:none;
color:#fff;
height:20px;
line-height:20px;
width:22px
}
.top-list .date {
color:#999;
font-size:12px;
position:absolute;
right:0;
top:0
}
.tlist .time {
font-size:12px;
font-family:arial;
color:#999
}
.listview {
}/*3.1.23 描述
name:style_dldtdd
example:<dl class="dl-horizontal cl"><dt>h-ui</dt><dd>基于bootstrap框架的改进扩展的前端框架</dd></dl>
explain:.dl-horizontal 水平描述，默认不加为垂直模式。
*/
dl {
margin-bottom:20px
}
dt,dd {
line-height:20px
}
dt {
font-weight:bold
}
dd {
margin-left:2em
}
.dl-horizontal.cl {
}.dl-horizontal dt {
float:left;
width:160px;
overflow:hidden;
clear:left;
text-align:right;
text-overflow:ellipsis;
white-space:nowrap
}
.dl-horizontal dd {
margin-left:180px
}
/*3.1.24 隐藏 显示
name:style_display
example:<div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
explain:.hide 隐藏 / .show 显示
*/
.hide {
display:none
}
[hidden] {
display:none
}
.hidden {
display:none!important;
visibility:hidden!important
}
.f-hide {
font:0/0 a;
color:transparent;
text-shadow:none;
background-color:transparent;
border:0
}
[class*="span"].hide,.row-fluid [class*="span"].hide {
display:none
}
.show {
display:block
}
.invisible {
visibility:hidden
}
/*3.2 代码
name:style_pre
example:<code></code>,<pre class="prettyprint linenums">转义过的代码</pre>
explain:code：行内代码，pre：基本代码块;
包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code,pre {
padding:0 3px 2px;
font-family:monaco,menlo,consolas,"courier new",monospace
}
pre {
display:block;
padding:9.5px;
margin-bottom:10px;
font-size:12px;
line-height:20px;
word-break:break-all;
word-wrap:break-word;
white-space:pre;
white-space:pre-wrap;
background-color:#f5f5f5;
border:1px solid #ccc;
border:1px solid rgba(0,0,0,0.15);
border-radius:4px;
color:#333
}
pre.prettyprint {
margin-bottom:20px
}
pre .doctype {
color:#999
}
/*文档声明*/
pre .title,pre .keyword,pre .body,pre .des {
color:#333
}
/*关键词*/
pre .pun {
color:#9aa
}
pre .tag {
color:#007
}
/*标签*/
pre .attr {
color:#088
}
/*属性*/
pre .value,pre .tag .value {
color:#d14
}
/*值*/
pre .comment {
color:#998;
font-style:italic
}
/*注释*/
.prettyprint {
padding:8px;
background-color:#f7f7f9;
border:1px solid #e1e1e8
}
.prettyprint.linenums {
box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0
}
.pre-scrollable {
max-height:340px;
overflow-y:scroll
}
/* specify class=linenums on a pre to get line numbering */
pre ol.linenums {
list-style:decimal outside none;
margin:0 0 0 33px;
/* ie indents via margin-left */
}
pre ol.linenums li {
padding-left:12px;
color:#bbb;
line-height:18px;
text-shadow:0 1px 0 #fff
}
/*3.3 表格
name:style_table
example:<table class="table table-bordered table-striped table-condensed"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
explain:表格，none无样式，仅仅有列和行/.table行与行之间以水平线相隔/.table-bordered表格外围均有外边框/.table-striped奇数行背景设为浅灰色/.table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table {
width:100%;
empty-cells:show;
background-color:transparent;
border-collapse:collapse;
border-spacing:0
}
table th {
text-align:left;
font-weight:normal
}
/*带水平线*/
.table th {
font-weight:bold
}
.table th,.table td {
padding:8px;
line-height:20px
}
.table td {
text-align:left
}
.table tbody tr.success > td {
background-color:#dff0d8
}
.table tbody tr.error > td {
background-color:#f2dede
}
.table tbody tr.warning > td {
background-color:#fcf8e3
}
.table tbody tr.info > td {
background-color:#d9edf7
}
.table tbody + tbody {
border-top:2px solid #ddd
}
.table .table {
background-color:#fff
}
/*带横向分割线*/
.table-border {
border-top:1px solid #ddd
}
.table-border th,.table-border td {
border-bottom:1px solid #ddd
}
/*th带背景*/
.table-bg thead th {
background-color:#f5fafe
}
/*带外边框*/
.table-bordered {
border:1px solid #ddd;
border-collapse:separate;
*border-collapse:collapse;
border-left:0
}
.table-bordered th,.table-bordered td {
border-left:1px solid #ddd
}
.table-border.table-bordered {
border-bottom:0
}
/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,.table-striped tbody > tr:nth-child(odd) > th {
background-color:#f9f9f9
}
/*竖直方向padding缩减一半*/
.table-condensed th,.table-condensed td {
padding:4px 5px
}
/*鼠标悬停样式*/
.table-hover tbody tr:hover td,.table-hover tbody tr:hover th {
background-color:#f5f5f5
}
/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,.table tbody tr.active>td,.table tbody tr.active>th,.table tbody tr .active {
background-color:#f5f5f5!important
}
/*成功或积极*/
.table tbody tr.success,.table tbody tr.success>td,.table tbody tr.success>th,.table tbody tr .success {
background-color:#dff0d8!important
}
/*警告或出错*/
.table tbody tr.warning,.table tbody tr.warning>td,.table tbody tr.warning>th,.table tbody tr .warning {
background-color:#fcf8e3!important
}
/*危险*/
.table tbody tr.danger,.table tbody tr.danger>td,.table tbody tr.danger>th,.table tbody tr .danger {
background-color:#f2dede!important
}
/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th,.table .text-c td {
text-align:center
}
/*整行居中*/
.table .text-r th,.table .text-r td {
text-align:right
}
/*整行居右*/
.table th.text-l,.table td.text-l {
text-align:left!important
}
/*单独列居左*/
.table th.text-c,.table td.text-c {
text-align:center!important
}
/*单独列居中*/
.table th.text-r,.table td.text-r {
text-align:right!important
}
/*单独列居右*/
/*让表格支持响应式*/
/*
<div class="table-responsive">
<table class="table">
...
</table>
</div>
*/
/*3.4 表单
name:style_form
example:explain:*/
select {
border:solid 1px #ddd;
padding:3px
}
.checkbox {
display:block;
float:left;
margin-top:4px;
*margin-top:0px
}
.checklabel {
display:block;
float:left;
padding-left:3px;
padding-right:10px
}
.huiform legend {
font-size:20px
}
/*表单名称*/
.formrow {
margin-top:20px
}
/*表单行*/
.formrow:before,.formrow:after {
content:" ";
display:table
}
.uk-form-row:after {
clear:both
}
/*解决表单行内部浮动bug*/
.form-label {
display:block;
color:#555
}
/*表单标题*/
.formcontrols {
position:relative
}
/*表单控制区*/
.placeholder {
position:absolute;
left:4px;
top:4px;
color:#c6c6c6;
cursor:text
}
/*表单默认值*/
/*表单统一字体*/
label,.placeholder,.input-text,.textarea {
font-size:14px
}
.huiform-horizontal .form-label {
float:left;
width:84px;
margin-top:10px;
cursor:text
}
.huiform-horizontal input,.huiform-horizontal textarea,.huiform-horizontal select {
display:inline-block;
*display:inline;
margin-bottom:0;
vertical-align:middle;
*zoom:1
}
.huiform-horizontal .formcontrols {
margin-left:94px
}
.formcontrols span {
vertical-align:middle
}
/*设置placeholder颜色*/::-webkit-input-placeholder {
color:#b3b3b3
}
/* webkit browsers */:-moz-placeholder {
color:#b3b3b3
}
/* mozilla firefox 4 to 18 */::-moz-placeholder {
color:#b3b3b3
}
/* mozilla firefox 19+ */:-ms-input-placeholder {
color:#b3b3b3
}
/* internet explorer 10+ */
.placeholder {
color:#adb0be;
position:absolute;
z-index:9
}
/*不兼容placeholder属性的浏览器，可使用<span class="placeholder">表单默认值</span>*/
/*默认表单状态*/
.input-text,.textarea {
border:solid 1px #ddd;
background-color:#fff;
padding:4px;
line-height:20px;
color:#555;
width:200px;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition:all 0.2s linear 0s;
-moz-transition:all 0.2s linear 0s;
-o-transition:all 0.2s linear 0s;
transition:all 0.2s linear 0s
}
.textarea {
height:100px
}
/*默认高度，自己可以设置*/
.input-text:hover,.textarea:hover {
border:solid 1px #b3b3b3
}
/*得到焦点后*/
.input-text.focus,textarea.focus {
border:solid 1px #33aaff \9;
border-color:rgba(82,168,236,0.8);
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6)
}
/*不可点击*/
.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus {
background-color:#ededed;
cursor:default;
border-color:#ddd;
-webkit-box-shadow:inset 0 2px 2px #e8e7e7;
-moz-box-shadow:inset 0 2px 2px #e8e7e7;
box-shadow:inset 0 2px 2px #e8e7e7
}
/*文件域 input-file*/
.btn-upload {
position:relative;
display:inline-block;
overflow:hidden;
vertical-align:middle;
cursor:pointer
}
.upload-url {
width:200px;
cursor:pointer
}
.input-file {
position:absolute;
right:0;
top:0;
cursor:pointer;
font-size:99em;
opacity:0;
filter:alpha(opacity=0)
}
.btn-upload .icon-add,.btn-upload .icon-minus {
cursor:pointer;
display:inline-block;
font-family:arial;
font-size:30px;
height:36px;
line-height:36px;
text-align:center;
vertical-align:middle;
width:36px
}
.btn-uploadpic {
display:block;
cursor:pointer;
width:60px;
height:60px;
background:#fff url(../images/icon-add.png) no-repeat 0 0;
text-indent:-99em
}
/*文本框尺寸*/
.input-big {
font-size:16px;
padding:10px 5px
}
/*大*/
.input-small {
font-size:12px;
padding:4px
}
/*小*/
.input-mini {
font-size:10px;
padding:3px
}
/*迷你*/
/*只读状态*/
.input-text.disabled,.textarea.disabled {
background-color:#e6e6e6;
cursor:default
}
/*表单错误*/
.validform_error {
background-color:#fbe2e2;
border-color:#c66161;
color:#c00
}
/*提示信息*/
.validform_wrong,.validform_right,.validform_warning {
display:inline-block;
height:20px;
font-size:12px;
vertical-align:middle;
padding-left:25px
}
/*错误提示*/
.validform_wrong {
background:url(../images/icon_error_s.png) no-repeat 0 center;
color:#ef392b
}
/*正确提示*/
.validform_right {
background:url(../images/icon_right_s.png) no-repeat 0 center
}
/*警告提示*/
.validform_warning {
background:url(../images/icon_warning_s.png) no-repeat 0 center;
color:#777
}
/*密码等级*/
.passwordstrength b {
font-weight:normal
}
.passwordstrength b,.passwordstrength span {
display:inline-block;
vertical-align:middle;
line-height:16px;
line-height:18px\9;
height:16px
}
.passwordstrength span {
width:57px;
text-align:center;
background-color:#d0d0d0;
border-right:1px solid #fff
}
.passwordstrength .last {
border-right:none
}
.passwordstrength .bgstrength {
color:#fff;
background-color:#fcc900
}
/*validform对话框*/
#validform_msg {
font-size:14px;
width:300px;
-webkit-box-shadow:2px 2px 3px #aaa;
-moz-box-shadow:2px 2px 3px #aaa;
background:#fff;
position:absolute;
top:0px;
right:50px;
z-index:99999;
display:none;
filter:progid:dximagetransform.microsoft.shadow(strength=3,direction=135,color='#999999');
box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}
#validform_msg .iframe {
position:absolute;
left:0px;
top:-1px;
z-index:-1;
}
#validform_msg .validform_title {
font-size:20px;
padding:10px;
text-align:left;
color:#fff;
position:relative;
background-color:#fcc900;
}
#validform_msg a.validform_close:link,#validform_msg a.validform_close:visited {
position:absolute;
right:8px;
top:6px;
color:#fff;
text-decoration:none;
font-family:verdana
}
#validform_msg a.validform_close:hover {
color:#fff;
}
#validform_msg .validform_info {
padding:10px;
border:1px solid #bbb;
border-top:none;
text-align:left;
}
/*数字表单*/
.numbercontrolbox {
display:inline-block;
overflow:hidden;
vertical-align:middle
}
.ncb-up,.ncb-down {
font-size:0px;
display:block;
height:10px;
background-color:#f4f4f4;
background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(230,230,230) 50%,rgb(255,255,255) 100%);
width:24px;
border:1px solid #d1d1d1;
cursor:pointer
}
.ncb-up {
margin-bottom:1px
}
.numbercontrolbox .ncb_ico {
display:block;
height:10px;
background-image:url(../img/icon-arrow.png);
background-repeat:no-repeat
}
.ncb-up .ncb_ico {
background-position:-22px center
}
.ncb-down .ncb_ico {
background-position:1px center
}
.ncb_btn_hover {
border:1px solid #9dc7e7;
background-color:#dff2fc;
background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(210,237,250) 50%,rgb(255,255,255) 100%)
}
.ncb_btn_selected {
border:1px solid #6198c2;
background-color:#aee1fb;
background:-moz-linear-gradient(top,rgb(255,255,255) 0%,rgb(174,225,251) 50%,rgb(255,255,255) 100%)
}
.input-text[type="number"] {
width:80px
}
/*单选按钮，复选框
example:<label class="radiobox" for="radio-demo-1"><span class="radio-icon"><input type="radio" id="radio-demo-1" value="1" name="radio-demo"></span> 单选按钮</label>
<label class="radiobox" for="radio-demo-2"><span class="radio-icon"><input type="radio" id="radio-demo-2" value="2" name="radio-demo"></span> 单选按钮</label>
*/
input[type="radio"],input[type="checkbox"] {
line-height:normal;
margin-top:-4px
}
.radiobox.inline,.checkbox.inline {
margin-bottom:0;
vertical-align:middle;
display:inline!important;
text-align:left
}
.radiobox {
display:inline-block;
cursor:pointer
}
.radio-icon {
display:inline-block;
vertical-align:middle;
width:16px;
height:16px;
cursor:pointer;
background:url(../images/icon_radio.png) no-repeat 0 0;
position:relative;
overflow:hidden
}
.radio-icon input {
position:absolute;
left:0px;
top:5px;
opacity:0;
filter:alpha(opacity=0)
}
.checked .radio-icon {
background-position:0 -16px
}
/*输入框组*/
.input-group {
border-collapse:separate;
display:table;
position:relative
}
.input-group[class*="col-"] {
float:none;
padding-left:0;
padding-right:0
}
.input-group-addon {
background-color:#eee;
border:1px solid #ccc;
font-size:14px;
font-weight:normal;
line-height:1;
padding:6px 12px;
text-align:center;
color:#555
}
.input-group-addon input[type="radio"],.input-group-addon input[type="checkbox"] {
margin-top:0
}
.input-group .input-text {
margin-bottom:0;
width:100%
}
/*select 下拉菜单*/
/*
<select name="demo" data-enabled="false">
<option value="1" selected>默认</option>
<option value="2">菜单二</option>
<option value="3">菜单三</option>
</select>
需要引用2个js文件
<script type="text/javascript" src="lib/squid.js"></script>
<script type="text/javascript" src="lib/jselect-1.0.js"></script>
页面调用方法
<script type="text/javascript">
squid.swing.jselect()
</script>
*/
.select-wrapper {
position:relative;
z-index:99;
border:1px solid #dedede;
height:26px;
line-height:26px;
padding:0 6px;
cursor:default;
width:110px;
background-color:#fff
}
.select-wrapper:hover {
border:1px solid silver
}
.select-default {
zoom:1;
display:block
}
.select-icon {
right:0;
top:50%;
margin-top:-13px;
background:url(../images/icon-arrow2.png) no-repeat 0 0;
height:26px;
width:26px;
position:absolute
}
.select-icon:hover {
background-position:0 -27px
}
.unselectable {
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-o-user-select:none;
user-select:none
}
.select-list {
position:absolute;
float:left;
left:0px;
top:100%;
min-width:120px;
max-height:320px;
_height:expression(this.scrollheight > 319 ? "320px":"auto");
margin:0;
padding:5px 0;
background-color:#fff;
background-clip:padding-box;
border:1px solid #d6d6d6;
border:1px solid rgba(0,0,0,0.15);
box-shadow:0 6px 12px rgba(0,0,0,0.175);
left:-1px;
overflow:auto;
border-radius:4px
}
.select-item {
margin:0;
padding:0
}
.select-option {
background:#fff;
line-height:1.428571429;
padding:4px 15px;
padding-right:30px;
white-space:nowrap;
text-align:left;
font-weight:normal
}
.select-item .selected {
background-color:#ea5944;
color:#fff
}
/*3.5 按钮
name:style_button
example:<button class="btn radius radius btn-primary" type="button">按钮</button>
explain:btn-primary：主要/btn-info：信息/btn-success：成功/btn-warning：警告/btn-danger：危险/btn-inverse：反向/btn-link：链接
*/
/*关闭*/
.close {
font-size:20px;
font-family:"helvetica neue",helvetica,arial,sans-serif;
line-height:20px;
color:#000;
text-shadow:0 1px 0 #fff;
opacity:0.2;
filter:alpha(opacity=20)
}
.close:hover,.close:focus {
color:#000;
text-decoration:none;
cursor:pointer;
opacity:0.4;
filter:alpha(opacity=40)
}
button.close {
padding:0;
cursor:pointer;
background:transparent;
border:0;
-webkit-appearance:none
}
.btn {
display:inline-block;
padding:3px 12px;
cursor:pointer;
font-size:14px;
text-align:center;
white-space:nowrap;
vertical-align:middle;
border:1px solid #ccc;
border-color:#e6e6e6 #e6e6e6 #b3b3b3 #bfbfbf;
*zoom:1;
/*css3阴影*/
box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none
}
a.btn:hover,.btn:focus,.btn:active,.btn.active,.btn.disabled,.btn[disabled] {
text-decoration:none
}
.btn:active,.btn.active {
background-color:#ccc \9
}
.btn:first-child {
*margin-left:0
}
.btn:hover,.btn:focus {
background-position:0 -15px;
-webkit-transition:background-position .1s linear;
-moz-transition:background-position .1s linear;
-o-transition:background-position .1s linear;
transition:background-position .1s linear
}
.btn.active,.btn:active {
background-image:none;
box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05)
}
/*默认*/
.btn-default {
background-color:#e6e6e6;
/*css3 线性渐变背景*/
background-image:-moz-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(to bottom,#fff,#e6e6e6);
background-repeat:repeat-x;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#fffff',endcolorstr='#ffe6e6e6',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,.open .dropdown-toggle.btn-default {
color:#333;
background-color:#e6e6e6
}
a.btn-default:hover {
color:#333
}
/*红色*/
.btn-red {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#f04848;
background-image:-moz-linear-gradient(top,#f04848,#f04848);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#f04848),to(#f04848));
background-image:-webkit-linear-gradient(top,#f04848,#f04848);
background-image:-o-linear-gradient(top,#f04848,#f04848);
background-image:linear-gradient(to bottom,#f04848,#f04848);
background-repeat:repeat-x;
border-color:#f04848 #f04848 #002a80;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#fff04848',endcolorstr='#fff04848',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-red:hover,.btn-red:focus,.btn-red.disabled,.btn-red[disabled] {
color:#fff;
background-color:#f04848;
*background-color:#003bb3
}
.btn-red:active,.btn-red.active {
color:#fff;
background-color:#039 \9
}
/*主要*/
.btn-primary {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#04c;
background-image:-moz-linear-gradient(top,#08c,#04c);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
background-image:-webkit-linear-gradient(top,#08c,#04c);
background-image:-o-linear-gradient(top,#08c,#04c);
background-image:linear-gradient(to bottom,#08c,#04c);
background-repeat:repeat-x;
border-color:#04c #04c #002a80;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ff0088cc',endcolorstr='#ff0044cc',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-primary:hover,.btn-primary:focus,.btn-primary.disabled,.btn-primary[disabled] {
color:#fff;
background-color:#04c;
*background-color:#003bb3
}
.btn-primary:active,.btn-primary.active {
color:#fff;
background-color:#039 \9
}
/*信息*/
.btn-info {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#2f96b4;
background-image:-moz-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(to bottom,#5bc0de,#2f96b4);
background-repeat:repeat-x;
border-color:#2f96b4 #2f96b4 #1f6377;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ff5bc0de',endcolorstr='#ff2f96b4',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-info:hover,.btn-info:focus,.btn-info.disabled,.btn-info[disabled] {
color:#fff;
background-color:#2f96b4;
*background-color:#2a85a0
}
.btn-info:active,.btn-info.active {
color:#fff;
background-color:#24748c \9
}
/*成功*/
.btn-success {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#51a351;
background-image:-moz-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(to bottom,#62c462,#51a351);
background-repeat:repeat-x;
border-color:#51a351 #51a351 #387038;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ff62c462',endcolorstr='#ff51a351',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-success:hover,.btn-success:focus,.btn-success.disabled,.btn-success[disabled] {
color:#fff;
background-color:#51a351;
*background-color:#499249
}
.btn-success:active,.btn-success.active {
color:#fff;
background-color:#408140 \9
}
/*警告*/
.btn-warning {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#f89406;
background-image:-moz-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(to bottom,#fbb450,#f89406);
background-repeat:repeat-x;
border-color:#f89406 #f89406 #ad6704;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#fffbb450',endcolorstr='#fff89406',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-warning:hover,.btn-warning:focus,.btn-warning.disabled,.btn-warning[disabled] {
color:#fff;
background-color:#f89406;
*background-color:#df8505
}
.btn-warning:active,.btn-warning.active {
color:#fff;
background-color:#c67605 \9
}
/*危险*/
.btn-danger {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#bd362f;
background-image:-moz-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(to bottom,#ee5f5b,#bd362f);
background-repeat:repeat-x;
border-color:#bd362f #bd362f #802420;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ffee5f5b',endcolorstr='#ffbd362f',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-danger:hover,.btn-danger:focus,.btn-danger.disabled,.btn-danger[disabled] {
color:#fff;
background-color:#bd362f;
*background-color:#a9302a
}
.btn-danger:active,.btn-danger.active {
color:#fff;
background-color:#942a25 \9
}
/*相反*/
.btn-inverse {
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
background-color:#222;
background-image:-moz-linear-gradient(top,#444,#222);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));
background-image:-webkit-linear-gradient(top,#444,#222);
background-image:-o-linear-gradient(top,#444,#222);
background-image:linear-gradient(to bottom,#444,#222);
background-repeat:repeat-x;
border-color:#222 #222 #000;
border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#ff444444',endcolorstr='#ff222222',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false)
}
.btn-inverse:hover,.btn-inverse:focus,.btn-inverse.disabled,.btn-inverse[disabled] {
color:#fff;
background-color:#222;
*background-color:#151515
}
.btn-inverse:active,.btn-inverse.active {
color:#fff;
background-color:#080808 \9
}
/*链接*/
.btn-link,.btn-link:active,.btn-link[disabled] {
background-color:transparent;
background-image:none;
box-shadow:none
}
.btn-link {
color:#08c;
cursor:pointer;
border-color:transparent;
border-radius:0
}
.btn-link:hover,.btn-link:focus {
color:#005580;
text-decoration:underline;
background-color:transparent
}
.btn-link[disabled]:hover,.btn-link[disabled]:focus {
color:#333;
text-decoration:none
}
/*其他颜色*/
/*玫红色#f82244
#ff3c53 #fd3148 #f1162f #d9172d
#f0253b #e71c32 #f1162f #d9172d
*/
/*橙色#ff6f3d*/
/*绿色#00b391
#009871
*/
/*块级按钮*/
.btn-block {
-moz-box-sizing:border-box;
display:block;
padding-left:0;
padding-right:0;
width:100%
}
/*按钮尺寸*/
.btn-large {
padding:10px 20px;
font-size:18px
}
.btn-big {
padding:5px 15px;
font-size:16px
}
.btn-small {
padding:2px 10px;
font-size:12px
}
.btn-mini {
padding:0 6px;
font-size:10px
}
/*禁用状态*/
.btn.disabled {
cursor:default;
background-image:none;
opacity:.65;
filter:alpha(opacity=65);
box-shadow:none
}
/*3.7 图标
h-ui采用font awesome 3.2.1的整套图标，因为是图标字体，所以可以像控制字体那样随心所欲改变这些图标的颜色、大小、阴影以及任何css能控制的属性
*/
/*.icon {
display:inline-block;
vertical-align:text-top;
width:16px;
height:16px;
background-position:center;
background-repeat:no-repeat
}
*/
/*3.8 效果
name:style_animation
example:<input class="btn hui-animation" val="淡入" type="button" data-tra="hui-fadein" />
*/
/* animation */
.hui-bounce,.hui-flip,.hui-flash,.hui-shake,.hui-swing,.hui-wobble,.hui-ring {
-webkit-animation:1s ease;
-moz-animation:1s ease;
-ms-animation:1s ease;
animation:1s ease
}
.hui-fadein,.hui-fadeint,.hui-fadeinr,.hui-fadeinb,.hui-fadeinl,.hui-bouncein,.hui-bounceint,.hui-bounceinr,.hui-bounceinb,.hui-bounceinl,.hui-rotatein,.hui-rotateinlt,.hui-rotateinlb,.hui-rotateinrt,.hui-rotateinrb,.hui-flipin,.hui-flipinx,.hui-flipiny {
-webkit-animation:1s ease-out backwards;
-moz-animation:1s ease-out backwards;
-ms-animation:1s ease-out backwards;
animation:1s ease-out backwards
}
.hui-fadeout,.hui-fadeoutt,.hui-fadeoutr,.hui-fadeoutb,.hui-fadeoutl,.hui-bounceout,.hui-bounceoutt,.hui-bounceoutr,.hui-bounceoutb,.hui-bounceoutl,.hui-rotateout,.hui-rotateoutlt,.hui-rotateoutlb,.hui-rotateoutrt,.hui-rotateoutrb,.hui-flipout,.hui-flipoutx,.hui-flipouty {
-webkit-animation:1s ease-in forwards;
-moz-animation:1s ease-in forwards;
-ms-animation:1s ease-in forwards;
animation:1s ease-in forwards
}
/* 淡入 */
.hui-fadein {
-webkit-animation-name:fadein;
-moz-animation-name:fadein;
-ms-animation-name:fadein;
animation-name:fadein
}
/* 淡入-从上 */
.hui-fadeint {
-webkit-animation-name:fadeint;
-moz-animation-name:fadeint;
-ms-animation-name:fadeint;
animation-name:fadeint
}
/* 淡入-从右 */
.hui-fadeinr {
-webkit-animation-name:fadeinr;
-moz-animation-name:fadeinr;
-ms-animation-name:fadeinr;
animation-name:fadeinr
}
/* 淡入-从下 */
.hui-fadeinb {
-webkit-animation-name:fadeinb;
-moz-animation-name:fadeinb;
-ms-animation-name:fadeinb;
animation-name:fadeinb
}
/* 淡入-从左 */
.hui-fadeinl {
-webkit-animation-name:fadeinl;
-moz-animation-name:fadeinl;
-ms-animation-name:fadeinl;
animation-name:fadeinl
}
/* 淡出 */
.hui-fadeout {
-webkit-animation-name:fadeout;
-moz-animation-name:fadeout;
-ms-animation-name:fadeout;
animation-name:fadeout
}
/* 淡出-向上 */
.hui-fadeoutt {
-webkit-animation-name:fadeoutt;
-moz-animation-name:fadeoutt;
-ms-animation-name:fadeoutt;
animation-name:fadeoutt
}
/* 淡出-向右 */
.hui-fadeoutr {
-webkit-animation-name:fadeoutr;
-moz-animation-name:fadeoutr;
-ms-animation-name:fadeoutr;
animation-name:fadeoutr
}
/* 淡出-向下 */
.hui-fadeoutb {
-webkit-animation-name:fadeoutb;
-moz-animation-name:fadeoutb;
-ms-animation-name:fadeoutb;
animation-name:fadeoutb
}
/* 淡出-向左 */
.hui-fadeoutl {
-webkit-animation-name:fadeoutl;
-moz-animation-name:fadeoutl;
-ms-animation-name:fadeoutl;
animation-name:fadeoutl
}
/* 弹跳 */
.hui-bounce {
-webkit-animation-name:bounce;
-moz-animation-name:bounce;
-ms-animation-name:bounce;
animation-name:bounce
}
/* 弹入 */
.hui-bouncein {
-webkit-animation-name:bouncein;
-moz-animation-name:bouncein;
-ms-animation-name:bouncein;
animation-name:bouncein
}
/* 弹入-从上 */
.hui-bounceint {
-webkit-animation-name:bounceint;
-moz-animation-name:bounceint;
-ms-animation-name:bounceint;
animation-name:bounceint
}
/* 弹入-从右 */
.hui-bounceinr {
-webkit-animation-name:bounceinr;
-moz-animation-name:bounceinr;
-ms-animation-name:bounceinr;
animation-name:bounceinr
}
/* 弹入-从下 */
.hui-bounceinb {
-webkit-animation-name:bounceinb;
-moz-animation-name:bounceinb;
-ms-animation-name:bounceinb;
animation-name:bounceinb
}
/* 弹入-从左 */
.hui-bounceinl {
-webkit-animation-name:bounceinl;
-moz-animation-name:bounceinl;
-ms-animation-name:bounceinl;
animation-name:bounceinl
}
/* 弹出 */
.hui-bounceout {
-webkit-animation-name:bounceout;
-moz-animation-name:bounceout;
-ms-animation-name:bounceout;
animation-name:bounceout
}
/* 弹出-向上 */
.hui-bounceoutt {
-webkit-animation-name:bounceoutt;
-moz-animation-name:bounceoutt;
-ms-animation-name:bounceoutt;
animation-name:bounceoutt
}
/* 弹出-向右 */
.hui-bounceoutr {
-webkit-animation-name:bounceoutr;
-moz-animation-name:bounceoutr;
-ms-animation-name:bounceoutr;
animation-name:bounceoutr
}
/* 弹出-向下 */
.hui-bounceoutb {
-webkit-animation-name:bounceoutb;
-moz-animation-name:bounceoutb;
-ms-animation-name:bounceoutb;
animation-name:bounceoutb
}
/* 弹出-向左 */
.hui-bounceoutl {
-webkit-animation-name:bounceoutl;
-moz-animation-name:bounceoutl;
-ms-animation-name:bounceoutl;
animation-name:bounceoutl
}
/* 转入 */
.hui-rotatein {
-webkit-animation-name:rotatein;
-moz-animation-name:rotatein;
-ms-animation-name:rotatein;
animation-name:rotatein
}
/* 转入-从左上 */
.hui-rotateinlt {
-webkit-animation-name:rotateinlt;
-moz-animation-name:rotateinlt;
-ms-animation-name:rotateinlt;
animation-name:rotateinlt
}
/* 转入-从左下 */
.hui-rotateinlb {
-webkit-animation-name:rotateinlb;
-moz-animation-name:rotateinlb;
-ms-animation-name:rotateinlb;
animation-name:rotateinlb
}
/* 转入-从右上 */
.hui-rotateinrt {
-webkit-animation-name:rotateinrt;
-moz-animation-name:rotateinrt;
-ms-animation-name:rotateinrt;
animation-name:rotateinrt
}
/* 转入-从右下*/
.hui-rotateinrb {
-webkit-animation-name:rotateinrb;
-moz-animation-name:rotateinrb;
-ms-animation-name:rotateinrb;
animation-name:rotateinrb
}
/* 转出 */
.hui-rotateout {
-webkit-animation-name:rotateout;
-moz-animation-name:rotateout;
-ms-animation-name:rotateout;
animation-name:rotateout
}
/* 转出-向左上 */
.hui-rotateoutlt {
-webkit-animation-name:rotateoutlt;
-moz-animation-name:rotateoutlt;
-ms-animation-name:rotateoutlt;
animation-name:rotateoutlt
}
/* 转出-向左下 */
.hui-rotateoutlb {
-webkit-animation-name:rotateoutlb;
-moz-animation-name:rotateoutlb;
-ms-animation-name:rotateoutlb;
animation-name:rotateoutlb
}
/* 转出-向右上 */
.hui-rotateoutrt {
-webkit-animation-name:rotateoutrt;
-moz-animation-name:rotateoutrt;
-ms-animation-name:rotateoutrt;
animation-name:rotateoutrt
}
/* 转出-向右下 */
.hui-rotateoutrb {
-webkit-animation-name:rotateoutrb;
-moz-animation-name:rotateoutrb;
-ms-animation-name:rotateoutrb;
animation-name:rotateoutrb
}
/* 翻转 */
.hui-flip {
-webkit-animation-name:flip;
-moz-animation-name:flip;
-ms-animation-name:flip;
animation-name:flip
}
/* 翻入-x轴 */
.hui-flipinx {
-webkit-animation-name:flipinx;
-moz-animation-name:flipinx;
-ms-animation-name:flipinx;
animation-name:flipinx
}
/* 翻入-y轴 */
.hui-flipin,.hui-flipiny {
-webkit-animation-name:flipiny;
-moz-animation-name:flipiny;
-ms-animation-name:flipiny;
animation-name:flipiny
}
/* 翻出-x轴 */
.hui-flipoutx {
-webkit-animation-name:flipoutx;
-moz-animation-name:flipoutx;
-ms-animation-name:flipoutx;
animation-name:flipoutx
}
/* 翻出-y轴 */
.hui-flipout,.hui-flipouty {
-webkit-animation-name:flipouty;
-moz-animation-name:flipouty;
-ms-animation-name:flipouty;
animation-name:flipouty
}
/* 闪烁 */
.hui-flash {
-webkit-animation-name:flash;
-moz-animation-name:flash;
-ms-animation-name:flash;
animation-name:flash
}
/* 震颤 */
.hui-shake {
-webkit-animation-name:shake;
-moz-animation-name:shake;
-ms-animation-name:shake;
animation-name:shake
}
/* 摇摆 */
.hui-swing {
-webkit-animation-name:swing;
-moz-animation-name:swing;
-ms-animation-name:swing;
animation-name:swing
}
/* 摇晃 */
.hui-wobble {
-webkit-animation-name:wobble;
-moz-animation-name:wobble;
-ms-animation-name:wobble;
animation-name:wobble
}
/* 震铃 */
.hui-ring {
-webkit-animation-name:ring;
-moz-animation-name:ring;
-ms-animation-name:ring;
animation-name:ring
}
/* define */
/* 淡入 */
@-webkit-keyframes fadein {
0% {
opacity:0
}
100% {
opacity:1
}
}@-moz-keyframes fadein {
0% {
opacity:0
}
100% {
opacity:1
}
}@-ms-keyframes fadein {
0% {
opacity:0
}
100% {
opacity:1
}
}@keyframes fadein {
0% {
opacity:0
}
100% {
opacity:1
}
}/* 淡入-从上 */
@-webkit-keyframes fadeint {
0% {
opacity:0;
-webkit-transform:translatey(-100px)
}
100% {
opacity:1;
-webkit-transform:translatey(0)
}
}@-moz-keyframes fadeint {
0% {
opacity:0;
-moz-transform:translatey(-100px)
}
100% {
opacity:1;
-moz-transform:translatey(0)
}
}@-ms-keyframes fadeint {
0% {
opacity:0;
-ms-transform:translatey(-100px)
}
100% {
opacity:1;
-ms-transform:translatey(0)
}
}@keyframes fadeint {
0% {
opacity:0;
transform:translatey(-100px)
}
100% {
opacity:1;
transform:translatey(0)
}
}/* 淡入-从右 */
@-webkit-keyframes fadeinr {
0% {
opacity:0;
-webkit-transform:translatex(100px)
}
100% {
opacity:1;
-webkit-transform:translatex(0)
}
}@-moz-keyframes fadeinr {
0% {
opacity:0;
-moz-transform:translatex(100px)
}
100% {
opacity:1;
-moz-transform:translatex(0)
}
}@-ms-keyframes fadeinr {
0% {
opacity:0;
-ms-transform:translatex(100px)
}
100% {
opacity:1;
-ms-transform:translatex(0)
}
}@keyframes fadeinr {
0% {
opacity:0;
transform:translatex(100px)
}
100% {
opacity:1;
transform:translatex(0)
}
}/* 淡入-从下 */
@-webkit-keyframes fadeinb {
0% {
opacity:0;
-webkit-transform:translatey(100px)
}
100% {
opacity:1;
-webkit-transform:translatey(0)
}
}@-moz-keyframes fadeinb {
0% {
opacity:0;
-moz-transform:translatey(100px)
}
100% {
opacity:1;
-moz-transform:translatey(0)
}
}@-ms-keyframes fadeinb {
0% {
opacity:0;
-ms-transform:translatey(100px)
}
100% {
opacity:1;
-ms-transform:translatey(0)
}
}@keyframes fadeinb {
0% {
opacity:0;
transform:translatey(100px)
}
100% {
opacity:1;
transform:translatey(0)
}
}/* 淡入-从左 */
@-webkit-keyframes fadeinl {
0% {
opacity:0;
-webkit-transform:translatex(-100px)
}
100% {
opacity:1;
-webkit-transform:translatex(0)
}
}@-moz-keyframes fadeinl {
0% {
opacity:0;
-moz-transform:translatex(-100px)
}
100% {
opacity:1;
-moz-transform:translatex(0)
}
}@-ms-keyframes fadeinl {
0% {
opacity:0;
-ms-transform:translatex(-100px)
}
100% {
opacity:1;
-ms-transform:translatex(0)
}
}@keyframes fadeinl {
0% {
opacity:0;
transform:translatex(-100px)
}
100% {
opacity:1;
transform:translatex(0)
}
}/* 淡出 */
@-webkit-keyframes fadeout {
0% {
opacity:1
}
100% {
opacity:0
}
}@-moz-keyframes fadeout {
0% {
opacity:1
}
100% {
opacity:0
}
}@-ms-keyframes fadeout {
0% {
opacity:1
}
100% {
opacity:0
}
}@keyframes fadeout {
0% {
opacity:1
}
100% {
opacity:0
}
}/* 淡出-向上 */
@-webkit-keyframes fadeoutt {
0% {
opacity:1;
-webkit-transform:translatey(0)
}
100% {
opacity:0;
-webkit-transform:translatey(-100px)
}
}@-moz-keyframes fadeoutt {
0% {
opacity:1;
-moz-transform:translatey(0)
}
100% {
opacity:0;
-moz-transform:translatey(-100px)
}
}@-ms-keyframes fadeoutt {
0% {
opacity:1;
-ms-transform:translatey(0)
}
100% {
opacity:0;
-ms-transform:translatey(-100px)
}
}@keyframes fadeoutt {
0% {
opacity:1;
transform:translatey(0)
}
100% {
opacity:0;
transform:translatey(-100px)
}
}/* 淡出-向右 */
@-webkit-keyframes fadeoutr {
0% {
opacity:1;
-webkit-transform:translatex(0)
}
100% {
opacity:0;
-webkit-transform:translatex(100px)
}
}@-moz-keyframes fadeoutr {
0% {
opacity:1;
-moz-transform:translatex(0)
}
100% {
opacity:0;
-moz-transform:translatex(100px)
}
}@-ms-keyframes fadeoutr {
0% {
opacity:1;
-ms-transform:translatex(0)
}
100% {
opacity:0;
-ms-transform:translatex(100px)
}
}@keyframes fadeoutr {
0% {
opacity:1;
transform:translatex(0)
}
100% {
opacity:0;
transform:translatex(100px)
}
}/* 淡出-向下 */
@-webkit-keyframes fadeoutb {
0% {
opacity:1;
-webkit-transform:translatey(0)
}
100% {
opacity:0;
-webkit-transform:translatey(100px)
}
}@-moz-keyframes fadeoutb {
0% {
opacity:1;
-moz-transform:translatey(0)
}
100% {
opacity:0;
-moz-transform:translatey(100px)
}
}@-ms-keyframes fadeoutb {
0% {
opacity:1;
-ms-transform:translatey(0)
}
100% {
opacity:0;
-ms-transform:translatey(100px)
}
}@keyframes fadeoutb {
0% {
opacity:1;
transform:translatey(0)
}
100% {
opacity:0;
transform:translatey(100px)
}
}/* 淡出-向左 */
@-webkit-keyframes fadeoutl {
0% {
opacity:1;
-webkit-transform:translatex(0)
}
100% {
opacity:0;
-webkit-transform:translatex(-100px)
}
}@-moz-keyframes fadeoutl {
0% {
opacity:1;
-moz-transform:translatex(0)
}
100% {
opacity:0;
-moz-transform:translatex(-100px)
}
}@-ms-keyframes fadeoutl {
0% {
opacity:1;
-ms-transform:translatex(0)
}
100% {
opacity:0;
-ms-transform:translatex(-100px)
}
}@keyframes fadeoutl {
0% {
opacity:1;
transform:translatex(0)
}
100% {
opacity:0;
transform:translatex(-100px)
}
}/* 弹跳 */
@-webkit-keyframes bounce {
0%,20%,50%,80%,100% {
-webkit-transform:translatey(0)
}
40% {
-webkit-transform:translatey(-30px)
}
60% {
-webkit-transform:translatey(-15px)
}
}@-moz-keyframes bounce {
0%,20%,50%,80%,100% {
-moz-transform:translatey(0)
}
40% {
-moz-transform:translatey(-30px)
}
60% {
-moz-transform:translatey(-15px)
}
}@-ms-keyframes bounce {
0%,20%,50%,80%,100% {
-ms-transform:translatey(0)
}
40% {
-ms-transform:translatey(-30px)
}
60% {
-ms-transform:translatey(-15px)
}
}@keyframes bounce {
0%,20%,50%,80%,100% {
transform:translatey(0)
}
40% {
transform:translatey(-30px)
}
60% {
transform:translatey(-15px)
}
}/* 弹入 */
@-webkit-keyframes bouncein {
0% {
opacity:0;
-webkit-transform:scale(0.3)
}
50% {
opacity:1;
-webkit-transform:scale(1.05)
}
70% {
-webkit-transform:scale(0.9)
}
100% {
-webkit-transform:scale(1)
}
}@-moz-keyframes bouncein {
0% {
opacity:0;
-moz-transform:scale(0.3)
}
50% {
opacity:1;
-moz-transform:scale(1.05)
}
70% {
-moz-transform:scale(0.9)
}
100% {
-moz-transform:scale(1)
}
}@-ms-keyframes bouncein {
0% {
opacity:0;
-ms-transform:scale(0.3)
}
50% {
opacity:1;
-ms-transform:scale(1.05)
}
70% {
-ms-transform:scale(0.9)
}
100% {
-ms-transform:scale(1)
}
}@keyframes bouncein {
0% {
opacity:0;
transform:scale(0.3)
}
50% {
opacity:1;
transform:scale(1.05)
}
70% {
transform:scale(0.9)
}
100% {
transform:scale(1)
}
}/* 弹入-从上 */
@-webkit-keyframes bounceint {
0% {
opacity:0;
-webkit-transform:translatey(-100px)
}
60% {
opacity:1;
-webkit-transform:translatey(30px)
}
80% {
-webkit-transform:translatey(-10px)
}
100% {
-webkit-transform:translatey(0)
}
}@-moz-keyframes bounceint {
0% {
opacity:0;
-moz-transform:translatey(-100px)
}
60% {
opacity:1;
-moz-transform:translatey(30px)
}
80% {
-moz-transform:translatey(-10px)
}
100% {
-moz-transform:translatey(0)
}
}@-ms-keyframes bounceint {
0% {
opacity:0;
-ms-transform:translatey(-100px)
}
60% {
opacity:1;
-ms-transform:translatey(30px)
}
80% {
-ms-transform:translatey(-10px)
}
100% {
-ms-transform:translatey(0)
}
}@keyframes bounceint {
0% {
opacity:0;
transform:translatey(-100px)
}
60% {
opacity:1;
transform:translatey(30px)
}
80% {
transform:translatey(-10px)
}
100% {
transform:translatey(0)
}
}/* 弹入-从右 */
@-webkit-keyframes bounceinr {
0% {
opacity:0;
-webkit-transform:translatex(100px)
}
60% {
opacity:1;
-webkit-transform:translatex(-30px)
}
80% {
-webkit-transform:translatex(10px)
}
100% {
-webkit-transform:translatex(0)
}
}@-moz-keyframes bounceinr {
0% {
opacity:0;
-moz-transform:translatex(100px)
}
60% {
opacity:1;
-moz-transform:translatex(-30px)
}
80% {
-moz-transform:translatex(10px)
}
100% {
-moz-transform:translatex(0)
}
}@-ms-keyframes bounceinr {
0% {
opacity:0;
-ms-transform:translatex(100px)
}
60% {
opacity:1;
-ms-transform:translatex(-30px)
}
80% {
-ms-transform:translatex(10px)
}
100% {
-ms-transform:translatex(0)
}
}@keyframes bounceinr {
0% {
opacity:0;
transform:translatex(100px)
}
60% {
opacity:1;
transform:translatex(-30px)
}
80% {
transform:translatex(10px)
}
100% {
transform:translatex(0)
}
}/* 弹入-从下 */
@-webkit-keyframes bounceinb {
0% {
opacity:0;
-webkit-transform:translatey(100px)
}
60% {
opacity:1;
-webkit-transform:translatey(-30px)
}
80% {
-webkit-transform:translatey(10px)
}
100% {
-webkit-transform:translatey(0)
}
}@-moz-keyframes bounceinb {
0% {
opacity:0;
-moz-transform:translatey(100px)
}
60% {
opacity:1;
-moz-transform:translatey(-30px)
}
80% {
-moz-transform:translatey(10px)
}
100% {
-moz-transform:translatey(0)
}
}@-ms-keyframes bounceinb {
0% {
opacity:0;
-ms-transform:translatey(100px)
}
60% {
opacity:1;
-ms-transform:translatey(-30px)
}
80% {
-ms-transform:translatey(10px)
}
100% {
-ms-transform:translatey(0)
}
}@keyframes bounceinb {
0% {
opacity:0;
transform:translatey(100px)
}
60% {
opacity:1;
transform:translatey(-30px)
}
80% {
transform:translatey(10px)
}
100% {
transform:translatey(0)
}
}/* 弹入-从左 */
@-webkit-keyframes bounceinl {
0% {
opacity:0;
-webkit-transform:translatex(-100px)
}
60% {
opacity:1;
-webkit-transform:translatex(30px)
}
80% {
-webkit-transform:translatex(-10px)
}
100% {
-webkit-transform:translatex(0)
}
}@-moz-keyframes bounceinl {
0% {
opacity:0;
-moz-transform:translatex(-100px)
}
60% {
opacity:1;
-moz-transform:translatex(30px)
}
80% {
-moz-transform:translatex(-10px)
}
100% {
-moz-transform:translatex(0)
}
}@-ms-keyframes bounceinl {
0% {
opacity:0;
-ms-transform:translatex(-100px)
}
60% {
opacity:1;
-ms-transform:translatex(30px)
}
80% {
-ms-transform:translatex(-10px)
}
100% {
-ms-transform:translatex(0)
}
}@keyframes bounceinl {
0% {
opacity:0;
transform:translatex(-100px)
}
60% {
opacity:1;
transform:translatex(30px)
}
80% {
transform:translatex(-10px)
}
100% {
transform:translatex(0)
}
}/* 弹出 */
@-webkit-keyframes bounceout {
0% {
-webkit-transform:scale(1)
}
25% {
-webkit-transform:scale(0.95)
}
50% {
opacity:1;
-webkit-transform:scale(1.1)
}
100% {
opacity:0;
-webkit-transform:scale(0.3)
}
}@-moz-keyframes bounceout {
0% {
-moz-transform:scale(1)
}
25% {
-moz-transform:scale(0.95)
}
50% {
opacity:1;
-moz-transform:scale(1.1)
}
100% {
opacity:0;
-moz-transform:scale(0.3)
}
}@-ms-keyframes bounceout {
0% {
-ms-transform:scale(1)
}
25% {
-ms-transform:scale(0.95)
}
50% {
opacity:1;
-ms-transform:scale(1.1)
}
100% {
opacity:0;
-ms-transform:scale(0.3)
}
}@keyframes bounceout {
0% {
transform:scale(1)
}
25% {
transform:scale(0.95)
}
50% {
opacity:1;
transform:scale(1.1)
}
100% {
opacity:0;
transform:scale(0.3)
}
}/* 弹出-向上*/
@-webkit-keyframes bounceoutt {
0% {
-webkit-transform:translatey(0)
}
20% {
opacity:1;
-webkit-transform:translatey(20px)
}
100% {
opacity:0;
-webkit-transform:translatey(-100px)
}
}@-moz-keyframes bounceoutt {
0% {
-moz-transform:translatey(0)
}
20% {
opacity:1;
-moz-transform:translatey(20px)
}
100% {
opacity:0;
-moz-transform:translatey(-100px)
}
}@-ms-keyframes bounceoutt {
0% {
-ms-transform:translatey(0)
}
20% {
opacity:1;
-ms-transform:translatey(20px)
}
100% {
opacity:0;
-ms-transform:translatey(-100px)
}
}@keyframes bounceoutt {
0% {
transform:translatey(0)
}
20% {
opacity:1;
transform:translatey(20px)
}
100% {
opacity:0;
transform:translatey(-100px)
}
}/* 弹出-向右*/
@-webkit-keyframes bounceoutr {
0% {
-webkit-transform:translatex(0)
}
20% {
opacity:1;
-webkit-transform:translatex(-20px)
}
100% {
opacity:0;
-webkit-transform:translatex(100px)
}
}@-moz-keyframes bounceoutr {
0% {
-moz-transform:translatex(0)
}
20% {
opacity:1;
-moz-transform:translatex(-20px)
}
100% {
opacity:0;
-moz-transform:translatex(100px)
}
}@-ms-keyframes bounceoutr {
0% {
-ms-transform:translatex(0)
}
20% {
opacity:1;
-ms-transform:translatex(-20px)
}
100% {
opacity:0;
-ms-transform:translatex(100px)
}
}@keyframes bounceoutr {
0% {
transform:translatex(0)
}
20% {
opacity:1;
transform:translatex(-20px)
}
100% {
opacity:0;
transform:translatex(100px)
}
}/* 弹出-向下 */
@-webkit-keyframes bounceoutb {
0% {
-webkit-transform:translatey(0)
}
20% {
opacity:1;
-webkit-transform:translatey(-20px)
}
100% {
opacity:0;
-webkit-transform:translatey(100px)
}
}@-moz-keyframes bounceoutb {
0% {
-moz-transform:translatey(0)
}
20% {
opacity:1;
-moz-transform:translatey(-20px)
}
100% {
opacity:0;
-moz-transform:translatey(100px)
}
}@-ms-keyframes bounceoutb {
0% {
-ms-transform:translatey(0)
}
20% {
opacity:1;
-ms-transform:translatey(-20px)
}
100% {
opacity:0;
-ms-transform:translatey(100px)
}
}@keyframes bounceoutb {
0% {
transform:translatey(0)
}
20% {
opacity:1;
transform:translatey(-20px)
}
100% {
opacity:0;
transform:translatey(100px)
}
}/* 弹出-向左 */
@-webkit-keyframes bounceoutl {
0% {
-webkit-transform:translatex(0)
}
20% {
opacity:1;
-webkit-transform:translatex(20px)
}
100% {
opacity:0;
-webkit-transform:translatex(-100px)
}
}@-moz-keyframes bounceoutl {
0% {
-moz-transform:translatex(0)
}
20% {
opacity:1;
-moz-transform:translatex(20px)
}
100% {
opacity:0;
-moz-transform:translatex(-100px)
}
}@-ms-keyframes bounceoutl {
0% {
-ms-transform:translatex(0)
}
20% {
opacity:1;
-ms-transform:translatex(20px)
}
100% {
opacity:0;
-ms-transform:translatex(-100px)
}
}@keyframes bounceoutl {
0% {
transform:translatex(0)
}
20% {
opacity:1;
transform:translatex(20px)
}
100% {
opacity:0;
transform:translatex(-200px)
}
}/* 转入 */
@-webkit-keyframes rotatein {
0% {
opacity:0;
-webkit-transform:rotate(-200deg)
}
100% {
opacity:1;
-webkit-transform:rotate(0)
}
}@-moz-keyframes rotatein {
0% {
opacity:0;
-moz-transform:rotate(-200deg)
}
100% {
opacity:1;
-moz-transform:rotate(0)
}
}@-ms-keyframes rotatein {
0% {
opacity:0;
-ms-transform:rotate(-200deg)
}
100% {
opacity:1;
-ms-transform:rotate(0)
}
}@keyframes rotatein {
0% {
opacity:0;
transform:rotate(-200deg)
}
100% {
opacity:1;
transform:rotate(0)
}
}/* 转入-从左上 */
@-webkit-keyframes rotateinlt {
0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1
}
}@-moz-keyframes rotateinlt {
0% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(-90deg);
opacity:0
}
100% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(0);
opacity:1
}
}@-ms-keyframes rotateinlt {
0% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(-90deg);
opacity:0
}
100% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(0);
opacity:1
}
}@keyframes rotateinlt {
0% {
transform-origin:left bottom;
transform:rotate(-90deg);
opacity:0
}
100% {
transform-origin:left bottom;
transform:rotate(0);
opacity:1
}
}/* 转入-从左下 */
@-webkit-keyframes rotateineftb {
0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(90deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1
}
}@-moz-keyframes rotateineftb {
0% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(90deg);
opacity:0
}
100% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(0);
opacity:1
}
}@-ms-keyframes rotateineftb {
0% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(90deg);
opacity:0
}
100% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(0);
opacity:1
}
}@keyframes rotateineftb {
0% {
transform-origin:left bottom;
transform:rotate(90deg);
opacity:0
}
100% {
transform-origin:left bottom;
transform:rotate(0);
opacity:1
}
}/* 转入-从右上 */
@-webkit-keyframes rotateinrt {
0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1
}
}@-moz-keyframes rotateinrt {
0% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(90deg);
opacity:0
}
100% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(0);
opacity:1
}
}@-ms-keyframes rotateinrt {
0% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(90deg);
opacity:0
}
100% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(0);
opacity:1
}
}@keyframes rotateinrt {
0% {
transform-origin:right bottom;
transform:rotate(90deg);
opacity:0
}
100% {
transform-origin:right bottom;
transform:rotate(0);
opacity:1
}
}/* 转入-从右下*/
@-webkit-keyframes rotateinrb {
0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1
}
}@-moz-keyframes rotateinrb {
0% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(-90deg);
opacity:0
}
100% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(0);
opacity:1
}
}@-ms-keyframes rotateinrb {
0% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(-90deg);
opacity:0
}
100% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(0);
opacity:1
}
}@keyframes rotateinrb {
0% {
transform-origin:right bottom;
transform:rotate(-90deg);
opacity:0
}
100% {
transform-origin:right bottom;
transform:rotate(0);
opacity:1
}
}/* 转出 */
@-webkit-keyframes rotateout {
0% {
-webkit-transform-origin:center center;
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform-origin:center center;
-webkit-transform:rotate(200deg);
opacity:0
}
}@-moz-keyframes rotateout {
0% {
-moz-transform-origin:center center;
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform-origin:center center;
-moz-transform:rotate(200deg);
opacity:0
}
}@-ms-keyframes rotateout {
0% {
-ms-transform-origin:center center;
-ms-transform:rotate(0);
opacity:1
}
100% {
-ms-transform-origin:center center;
-ms-transform:rotate(200deg);
opacity:0
}
}@keyframes rotateout {
0% {
transform-origin:center center;
transform:rotate(0);
opacity:1
}
100% {
transform-origin:center center;
transform:rotate(200deg);
opacity:0
}
}/* 转出-向左上 */
@-webkit-keyframes rotateoutlt {
0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(-90deg);
opacity:0
}
}@-moz-keyframes rotateoutlt {
0% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(-90deg);
opacity:0
}
}@-ms-keyframes rotateoutlt {
0% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(0);
opacity:1
}
100% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(-90deg);
opacity:0
}
}@keyframes rotateoutlt {
0% {
transform-origin:left bottom;
transform:rotate(0);
opacity:1
}
100% {
transform-origin:left bottom;
transform:rotate(-90deg);
opacity:0
}
}/* 转出-向左下 */
@-webkit-keyframes rotateoutlb {
0% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
-webkit-transform:rotate(90deg);
opacity:0
}
}@-moz-keyframes rotateoutlb {
0% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform-origin:left bottom;
-moz-transform:rotate(90deg);
opacity:0
}
}@-ms-keyframes rotateoutlb {
0% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(0);
opacity:1
}
100% {
-ms-transform-origin:left bottom;
-ms-transform:rotate(90deg);
opacity:0
}
}@keyframes rotateoutlb {
0% {
transform-origin:left bottom;
transform:rotate(0);
opacity:1
}
100% {
transform-origin:left bottom;
transform:rotate(90deg);
opacity:0
}
}/* 转出-向右上 */
@-webkit-keyframes rotateoutrt {
0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(90deg);
opacity:0
}
}@-moz-keyframes rotateoutrt {
0% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(90deg);
opacity:0
}
}@-ms-keyframes rotateoutrt {
0% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(0);
opacity:1
}
100% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(90deg);
opacity:0
}
}@keyframes rotateoutrt {
0% {
transform-origin:right bottom;
transform:rotate(0);
opacity:1
}
100% {
transform-origin:right bottom;
transform:rotate(90deg);
opacity:0
}
}/* 转出-向右下 */
@-webkit-keyframes rotateoutbr {
0% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(0);
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
-webkit-transform:rotate(-90deg);
opacity:0
}
}@-moz-keyframes rotateoutbr {
0% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(0);
opacity:1
}
100% {
-moz-transform-origin:right bottom;
-moz-transform:rotate(-90deg);
opacity:0
}
}@-ms-keyframes rotateoutbr {
0% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(0);
opacity:1
}
100% {
-ms-transform-origin:right bottom;
-ms-transform:rotate(-90deg);
opacity:0
}
}@keyframes rotateoutbr {
0% {
transform-origin:right bottom;
transform:rotate(0);
opacity:1
}
100% {
transform-origin:right bottom;
transform:rotate(-90deg);
opacity:0
}
}/* 翻转 */
@-webkit-keyframes flip {
0% {
-webkit-transform:perspective(400px) rotatey(0);
-webkit-animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translatez(150px) rotatey(170deg);
-webkit-animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-webkit-animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) rotatey(360deg) scale(0.95);
-webkit-animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px) scale(1);
-webkit-animation-timing-function:ease-in
}
}@-moz-keyframes flip {
0% {
-moz-transform:perspective(400px) rotatey(0);
-moz-animation-timing-function:ease-out
}
40% {
-moz-transform:perspective(400px) translatez(150px) rotatey(170deg);
-moz-animation-timing-function:ease-out
}
50% {
-moz-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-moz-animation-timing-function:ease-in
}
80% {
-moz-transform:perspective(400px) rotatey(360deg) scale(0.95);
-moz-animation-timing-function:ease-in
}
100% {
-moz-transform:perspective(400px) scale(1);
-moz-animation-timing-function:ease-in
}
}@-ms-keyframes flip {
0% {
-ms-transform:perspective(400px) rotatey(0);
-ms-animation-timing-function:ease-out
}
40% {
-ms-transform:perspective(400px) translatez(150px) rotatey(170deg);
-ms-animation-timing-function:ease-out
}
50% {
-ms-transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
-ms-animation-timing-function:ease-in
}
80% {
-ms-transform:perspective(400px) rotatey(360deg) scale(0.95);
-ms-animation-timing-function:ease-in
}
100% {
-ms-transform:perspective(400px) scale(1);
-ms-animation-timing-function:ease-in
}
}@keyframes flip {
0% {
transform:perspective(400px) rotatey(0);
animation-timing-function:ease-out
}
40% {
transform:perspective(400px) translatez(150px) rotatey(170deg);
animation-timing-function:ease-out
}
50% {
transform:perspective(400px) translatez(150px) rotatey(190deg) scale(1);
animation-timing-function:ease-in
}
80% {
transform:perspective(400px) rotatey(360deg) scale(0.95);
animation-timing-function:ease-in
}
100% {
transform:perspective(400px) scale(1);
animation-timing-function:ease-in
}
}/* 翻入-x轴 */
@-webkit-keyframes flipinx {
0% {
-webkit-transform:perspective(400px) rotatex(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotatex(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotatex(10deg)
}
100% {
-webkit-transform:perspective(400px) rotatex(0);
opacity:1
}
}@-moz-keyframes flipinx {
0% {
-moz-transform:perspective(400px) rotatex(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotatex(-10deg)
}
70% {
-moz-transform:perspective(400px) rotatex(10deg)
}
100% {
-moz-transform:perspective(400px) rotatex(0);
opacity:1
}
}@-ms-keyframes flipinx {
0% {
-ms-transform:perspective(400px) rotatex(90deg);
opacity:0
}
40% {
-ms-transform:perspective(400px) rotatex(-10deg)
}
70% {
-ms-transform:perspective(400px) rotatex(10deg)
}
100% {
-ms-transform:perspective(400px) rotatex(0);
opacity:1
}
}@keyframes flipinx {
0% {
transform:perspective(400px) rotatex(90deg);
opacity:0
}
40% {
transform:perspective(400px) rotatex(-10deg)
}
70% {
transform:perspective(400px) rotatex(10deg)
}
100% {
transform:perspective(400px) rotatex(0);
opacity:1
}
}/* 翻入-y轴 */
@-webkit-keyframes flipiny {
0% {
-webkit-transform:perspective(400px) rotatey(90deg);
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotatey(-10deg)
}
70% {
-webkit-transform:perspective(400px) rotatey(10deg)
}
100% {
-webkit-transform:perspective(400px) rotatey(0);
opacity:1
}
}@-moz-keyframes flipiny {
0% {
-moz-transform:perspective(400px) rotatey(90deg);
opacity:0
}
40% {
-moz-transform:perspective(400px) rotatey(-10deg)
}
70% {
-moz-transform:perspective(400px) rotatey(10deg)
}
100% {
-moz-transform:perspective(400px) rotatey(0);
opacity:1
}
}@-ms-keyframes flipiny {
0% {
-ms-transform:perspective(400px) rotatey(90deg);
opacity:0
}
40% {
-ms-transform:perspective(400px) rotatey(-10deg)
}
70% {
-ms-transform:perspective(400px) rotatey(10deg)
}
100% {
-ms-transform:perspective(400px) rotatey(0);
opacity:1
}
}@keyframes flipiny {
0% {
transform:perspective(400px) rotatey(90deg);
opacity:0
}
40% {
transform:perspective(400px) rotatey(-10deg)
}
70% {
transform:perspective(400px) rotatey(10deg)
}
100% {
transform:perspective(400px) rotatey(0);
opacity:1
}
}/* 翻出-x轴 */
@-webkit-keyframes flipoutx {
0% {
-webkit-transform:perspective(400px) rotatex(0);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotatex(90deg);
opacity:0
}
}@-moz-keyframes flipoutx {
0% {
-moz-transform:perspective(400px) rotatex(0);
opacity:1
}
100% {
-moz-transform:perspective(400px) rotatex(90deg);
opacity:0
}
}@-ms-keyframes flipoutx {
0% {
-ms-transform:perspective(400px) rotatex(0);
opacity:1
}
100% {
-ms-transform:perspective(400px) rotatex(90deg);
opacity:0
}
}@keyframes flipoutx {
0% {
transform:perspective(400px) rotatex(0);
opacity:1
}
100% {
transform:perspective(400px) rotatex(90deg);
opacity:0
}
}/* 翻出-y轴 */
@-webkit-keyframes flipouty {
0% {
-webkit-transform:perspective(400px) rotatey(0);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotatey(90deg);
opacity:0
}
}@-moz-keyframes flipouty {
0% {
-moz-transform:perspective(400px) rotatey(0);
opacity:1
}
100% {
-moz-transform:perspective(400px) rotatey(90deg);
opacity:0
}
}@-ms-keyframes flipouty {
0% {
-ms-transform:perspective(400px) rotatey(0);
opacity:1
}
100% {
-ms-transform:perspective(400px) rotatey(90deg);
opacity:0
}
}@keyframes flipouty {
0% {
transform:perspective(400px) rotatey(0);
opacity:1
}
100% {
transform:perspective(400px) rotatey(90deg);
opacity:0
}
}/* 闪烁 */
@-webkit-keyframes flash {
0%,50%,100% {
opacity:1
}
25%,75% {
opacity:0
}
}@-moz-keyframes flash {
0%,50%,100% {
opacity:1
}
25%,75% {
opacity:0
}
}@-ms-keyframes flash {
0%,50%,100% {
opacity:1
}
25%,75% {
opacity:0
}
}@keyframes flash {
0%,50%,100% {
opacity:1
}
25%,75% {
opacity:0
}
}/* 震颤 */
@-webkit-keyframes shake {
0%,100% {
-webkit-transform:translatex(0)
}
10%,30%,50%,70%,90% {
-webkit-transform:translatex(-10px)
}
20%,40%,60%,80% {
-webkit-transform:translatex(10px)
}
}@-moz-keyframes shake {
0%,100% {
-moz-transform:translatex(0)
}
10%,30%,50%,70%,90% {
-moz-transform:translatex(-10px)
}
20%,40%,60%,80% {
-moz-transform:translatex(10px)
}
}@-ms-keyframes shake {
0%,100% {
-ms-transform:translatex(0)
}
10%,30%,50%,70%,90% {
-ms-transform:translatex(-10px)
}
20%,40%,60%,80% {
-ms-transform:translatex(10px)
}
}@keyframes shake {
0%,100% {
transform:translatex(0)
}
10%,30%,50%,70%,90% {
transform:translatex(-10px)
}
20%,40%,60%,80% {
transform:translatex(10px)
}
}/* 摇摆 */
@-webkit-keyframes swing {
20% {
-webkit-transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg)
}
100% {
-webkit-transform:rotate(0)
}
}@-moz-keyframes swing {
20% {
-moz-transform:rotate(15deg)
}
40% {
-moz-transform:rotate(-10deg)
}
60% {
-moz-transform:rotate(5deg)
}
80% {
-moz-transform:rotate(-5deg)
}
100% {
-moz-transform:rotate(0)
}
}@-ms-keyframes swing {
20% {
-ms-transform:rotate(15deg)
}
40% {
-ms-transform:rotate(-10deg)
}
60% {
-ms-transform:rotate(5deg)
}
80% {
-ms-transform:rotate(-5deg)
}
100% {
-ms-transform:rotate(0)
}
}@keyframes swing {
20% {
transform:rotate(15deg)
}
40% {
transform:rotate(-10deg)
}
60% {
transform:rotate(5deg)
}
80% {
transform:rotate(-5deg)
}
100% {
transform:rotate(0)
}
}/* 摇晃 */
@-webkit-keyframes wobble {
0% {
-webkit-transform:translatex(0)
}
15% {
-webkit-transform:translatex(-100px) rotate(-5deg)
}
30% {
-webkit-transform:translatex(80px) rotate(3deg)
}
45% {
-webkit-transform:translatex(-65px) rotate(-3deg)
}
60% {
-webkit-transform:translatex(40px) rotate(2deg)
}
75% {
-webkit-transform:translatex(-20px) rotate(-1deg)
}
100% {
-webkit-transform:translatex(0)
}
}@-moz-keyframes wobble {
0% {
-moz-transform:translatex(0)
}
15% {
-moz-transform:translatex(-100px) rotate(-5deg)
}
30% {
-moz-transform:translatex(80px) rotate(3deg)
}
45% {
-moz-transform:translatex(-65px) rotate(-3deg)
}
60% {
-moz-transform:translatex(40px) rotate(2deg)
}
75% {
-moz-transform:translatex(-20px) rotate(-1deg)
}
100% {
-moz-transform:translatex(0)
}
}@-ms-keyframes wobble {
0% {
-ms-transform:translatex(0)
}
15% {
-ms-transform:translatex(-100px) rotate(-5deg)
}
30% {
-ms-transform:translatex(80px) rotate(3deg)
}
45% {
-ms-transform:translatex(-65px) rotate(-3deg)
}
60% {
-ms-transform:translatex(40px) rotate(2deg)
}
75% {
-ms-transform:translatex(-20px) rotate(-1deg)
}
100% {
-ms-transform:translatex(0)
}
}@keyframes wobble {
0% {
transform:translatex(0)
}
15% {
transform:translatex(-100px) rotate(-5deg)
}
30% {
transform:translatex(80px) rotate(3deg)
}
45% {
transform:translatex(-65px) rotate(-3deg)
}
60% {
transform:translatex(40px) rotate(2deg)
}
75% {
transform:translatex(-20px) rotate(-1deg)
}
100% {
transform:translatex(0)
}
}/* 震铃 */
@-webkit-keyframes ring {
0% {
-webkit-transform:scale(1)
}
10%,20% {
-webkit-transform:scale(0.9) rotate(-3deg)
}
30%,50%,70%,90% {
-webkit-transform:scale(1.1) rotate(3deg)
}
40%,60%,80% {
-webkit-transform:scale(1.1) rotate(-3deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}
}@-moz-keyframes ring {
0% {
-moz-transform:scale(1)
}
10%,20% {
-moz-transform:scale(0.9) rotate(-3deg)
}
30%,50%,70%,90% {
-moz-transform:scale(1.1) rotate(3deg)
}
40%,60%,80% {
-moz-transform:scale(1.1) rotate(-3deg)
}
100% {
-moz-transform:scale(1) rotate(0)
}
}@-ms-keyframes ring {
0% {
-ms-transform:scale(1)
}
10%,20% {
-ms-transform:scale(0.9) rotate(-3deg)
}
30%,50%,70%,90% {
-ms-transform:scale(1.1) rotate(3deg)
}
40%,60%,80% {
-ms-transform:scale(1.1) rotate(-3deg)
}
100% {
-ms-transform:scale(1) rotate(0)
}
}@keyframes ring {
0% {
transform:scale(1)
}
10%,20% {
transform:scale(0.9) rotate(-3deg)
}
30%,50%,70%,90% {
transform:scale(1.1) rotate(3deg)
}
40%,60%,80% {
transform:scale(1.1) rotate(-3deg)
}
100% {
transform:scale(1) rotate(0)
}
}/*4.1 按钮组
name:mod_btn-group
example:explain:*/
.btn-group {
}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-bottom-right-radius:0;
border-top-right-radius:0
}
.btn-group > .btn:first-child {
margin-left:0
}
.btn-group > .btn,.btn-group-stacked > .btn {
float:left;
position:relative
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius:0
}
.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group {
margin-left:-1px
}
.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) {
border-bottom-left-radius:0;
border-top-left-radius:0
}
/*4.2.1 导航条
name:mod_mainnav
example:<nav class="mainnav cl">
<ul class="cl">
<li class="current"><a href="/">首页</a></li>
<li><a href="#">核心</a></li>
<li><a href="#">扩展</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
explain:鼠标经过状态a:hover，当前选中状态li:current。
*/
.mainnav {
width:100%;
z-index:1;
background-color:#333
}
/*导航条背景*/
.mainnav li,.mainnav li a {
height:40px;
line-height:40px
}
/*导航条高度*/
.mainnav li {
float:left;
display:inline;
color:#fff;
font-size:14px;
font-weight:bold
}
/*设置字体*/
.mainnav li a {
display:inline-block;
padding:0 18px;
color:#fff
}
/*链接颜色*/
.mainnav li a:hover,.mainnav li.current a {
color:#fff;
text-decoration:none;
background-color:#000
}
/*交互颜色*/
/*4.2.2 面包屑导航
name:mod_breadcrumb
example:<nav class="breadcrumb"><a href="/" class="maincolor">首页</a><span class="c_gray en">>
</span><a href="#">组件</a><span class="c_gray en">>
</span><span class="c_gray">当前页面</span></nav>
*/
.breadcrumb {
background:url(../images/icon_home.gif) no-repeat 0 center;
padding-left:25px;
border-bottom:1px solid #e5e5e5;
line-height:39px;
height:39px
}
.breadcrumb span {
padding:0 5px
}
/*4.2.3 翻页导航
name:mod_pagenav
example:<div class="pagenav" id="pagenav"></div>
explain:需要调用pagenav.cn.js
*/
.pagenav {
float:none;
clear:both;
font-size:0px;
font-family:arial,helvetica,sans-serif;
padding:18px 0px;
text-align:center
}
.pagenav span,.pagenav a,.pagenav b {
font-size:14px;
margin-right:5px;
overflow:hidden;
padding:3px 8px
}
.pagenav a {
border:1px solid #ccdbe4;
cursor:pointer
}
.pagenav b {
color:#000
}
.pagenav .mor {
padding:3px;
font-weight:bold
}
/*4.2.4 顶部导航
name:mod_topnav
sample:<div class="topnav"><div class="cl"><div class="l">您好，欢迎来到hui！</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();
">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();
" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addfavorite();
">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="sethome(this);
" title="设为首页">设为首页</a></span></div></div></div>
*/
.topnav {
height:30px;
line-height:30px;
background:url(../images/bg_topnav.gif) repeat-x 0 0;
border-bottom:1px solid #ebebeb;
font-size:12px
}
.topbar {
background-color:#ececec;
border-bottom:1px solid #ddd
}
.topbar a {
margin-right:5px
}
.r_nav {
display:inline-block;
color:#999
}
/*4.2.5 向导
name:mod_steps
sample:<div class="four steps">
<span class="step">第一步</span>
<span class="active step">第二步</span>
<span class="disabled step">第三步</span>
<span class="disabled step">第四步</span>
</div>
*/
.steps,.step {
display:inline-block;
position:relative;
padding:1em 2em 1em 3em;
vertical-align:top;
background-color:#fff;
color:#888;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box
}
.step:after,.steps .step:after {
position:absolute;
z-index:2;
content:'';
top:0;
right:-1.45em;
border-bottom:1.5em solid transparent;
border-left:1.5em solid #fff;
border-top:1.5em solid transparent;
width:0;
height:0
}
.step,.steps .step,.steps .step:after {
-webkit-transition:opacity .1s ease,color .1s ease,-webkit-box-shadow .1s ease;
transition:opacity .1s ease,color .1s ease,box-shadow .1s ease
}
.steps {
cursor:pointer;
display:inline-block;
font-size:0;
box-shadow:0 0 0 1px rgba(0,0,0,.1);
line-height:1;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border-radius:.3125rem
}
.steps .step:first-child {
padding-left:1.35em;
border-radius:.3125em 0 0 .3125em
}
.steps .step:last-child {
border-radius:0 .3125em .3125em 0
}
.steps .step:only-child {
border-radius:.3125em
}
.steps .step:last-child {
margin-right:0
}
.steps .step:last-child:after {
display:none
}
.step:hover,.step.hover {
background-color:#f7f7f7;
color:rgba(0,0,0,.8)
}
.steps .step.hover:after,.steps .step:hover:after,.step:hover,.step.hover::after {
border-left-color:#f7f7f7
}
.steps .step.down,.steps .step:active,.step.down,.step:active {
background-color:#f0f0f0
}
.steps .step.down:after,.steps .step:active:after,.steps.down::after,.steps:active::after {
border-left-color:#f0f0f0
}
.steps .step.active,.active.step {
cursor:auto;
background-color:#428bca;
color:#fff;
font-weight:700
}
.steps .step.active:after,.active.steps:after {
border-left-color:#428bca
}
.steps .disabled.step,.disabled.step {
cursor:auto;
background-color:#fff;
color:#cbcbcb
}
.disabled.step:after {
border:0;
background-color:#fff;
top:.42em;
right:-1em;
width:2.15em;
height:2.15em;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
box-shadow:-1px -1px 0 0 rgba(0,0,0,.1) inset
}
.attached.steps {
margin:0;
border-radius:.3125em .3125em 0 0
}
.attached.steps .step:first-child {
border-radius:.3125em 0 0
}
.attached.steps .step:last-child {
border-radius:0 .3125em 0 0
}
.bottom.attached.steps {
margin-top:-1px;
border-radius:0 0 .3125em .3125em
}
.bottom.attached.steps .step:first-child {
border-radius:0 0 0 .3125em
}
.bottom.attached.steps .step:last-child {
border-radius:0 0 .3125em
}
/*向导数量*/
.one.steps,.two.steps,.three.steps,.four.steps,.five.steps,.six.steps,.seven.steps,.eight.steps {
display:block
}
.one.steps>.step {
width:100%
}
.two.steps>.step {
width:50%
}
.three.steps>.step {
width:33.333%
}
.four.steps>.step {
width:25%
}
.five.steps>.step {
width:20%
}
.six.steps>.step {
width:16.666%
}
.seven.steps>.step {
width:14.285%
}
.eight.steps>.step {
width:12.5%
}
/*向导尺寸*/
.small.step,.small.steps .step {
font-size:.8rem
}
/*小*/
.step,.steps .step {
font-size:1rem
}
/*默认*/
.large.step,.large.steps .step {
font-size:1.25rem
}
/*大*/
/*兼容写法
sample:<div class="steps-ie cl">
<a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
<a class="step-ie" href="#">第二步<em class="arrow"></em></a>
<a class="step-ie" href="#">第三步<em class="arrow"></em></a>
</div>
*/
.steps-ie,.step-ie,.step-ie .arrow {
height:44px;
line-height:44px
}
.steps-ie {
background-color:#eaf4fd;
border:solid 1px #afcfcc
}
.step-ie {
position:relative;
display:inline-block;
float:left;
cursor:pointer;
padding:0 20px 0 40px;
background:url(../images/step_bg.png) repeat-x 0 center
}
.step-ie .arrow {
position:absolute;
right:-21px;
top:0;
width:21px;
height:44px;
display:block;
cursor:pointer;
background:url(../images/step_arrow.png) no-repeat 0 center;
z-index:50
}
.step-ie.active {
background-image:url(../images/step_bg-active.png);
color:#fff;
z-index:100
}
.step-ie.active .arrow {
background-image:url(../images/step_arrow-active.png)
}
/*4.2.6 竖向导向tab导航
sample:<div class="verticaltab">
<a class="" href="#">导航一<em></em></a>
<a class="active" href="#">导航二<em></em></a>
<a href="#">导航三<em></em></a>
<a href="#">导航四<em></em></a>
</div>
*/
.verticaltab {
background:#fff url(../images/tab_bg.png) repeat-y 0 0;
width:38px
}
.verticaltab a {
position:relative;
display:block;
width:18px;
height:auto;
text-align:center;
position:relative;
padding:26px 10px 6px 10px;
background:url(../images/tabnav.png) no-repeat 0 0
}
.verticaltab a em {
position:absolute;
left:0;
bottom:-20px;
width:38px;
height:20px;
background:url(../images/tabnav_right.png) no-repeat 0 0;
z-index:50
}
.verticaltab a.active {
background-image:url(../images/tabnav-active.png);
color:#fff;
z-index:99
}
.verticaltab a.active em {
background-image:url(../images/tabnav_right-active.png)
}
/*4.2.6 横向导向tab导航
sample:<ul class="acrosstab">
<li>导航一<i></i><em></em></li>
<li class="active">导航二<i></i><em></em></li>
<li>导航三<i></i><em></em></li>
</ul>
*/
.acrosstab {
height:29px;
background:url(../images/acrosstab-bg.png) repeat-x 0 0;
padding-top:1px
}
.acrosstab li,.acrosstab li em {
background:url(../images/acrosstab.png) no-repeat 0 0
}
.acrosstab li {
position:relative;
float:left;
display:inline-block;
height:29px;
line-height:29px;
font-size:12px;
cursor:pointer;
padding:0 30px;
white-space:nowrap;
color:#282828;
background-position:0 0
}
.acrosstab li em {
position:absolute;
width:23px;
height:29px;
right:-20px;
top:0;
z-index:50;
background-position:right -30px
}
.acrosstab li:hover {
background-position:0 -60px
}
.acrosstab li:hover em {
background-position:right -90px
}
.acrosstab li.active {
background-position:0 -120px;
z-index:99
}
.acrosstab li.active em {
background-position:right -150px
}
.acrosstab li i {
position:absolute;
display:block;
width:13px;
height:13px;
top:50%;
margin-top:-6px;
right:5px;
font-size:0;
line-height:0;
cursor:pointer;
background:url(../images/acrosstab-close.png) no-repeat 0 0
}
.acrosstab li i:hover {
background-position:0 bottom
}
/*4.3 下拉菜单
name:mod_dropdown
example:<span class="dropdown"><a class="dropdown_a" href="#">下拉菜单</a><span class="dropdown-menu"><ul><li><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li></ul></span>span>
explain:*/
.dropdown {
display:inline-block
}
.dropdown_a {
display:inline-block
}
.dropdown-menu {
display:none;
transition:all 0.3s ease 0s;
}
dropdown:focus,.dropdown-menu:focus {
outline:0
}
.dropdown-menu li.arrow {
position:absolute;
display:block;
width:12px;
height:8px;
margin-top:-13px;
margin-left:45px;
line-height:0;
background:url(../images/icon-jt.png) no-repeat 0 0
}
/*鼠标经过*/
.dropdown.hover .dropdown_a,.dropdown.open .dropdown_a {
text-decoration:none
}
/*打开菜单*/
.dropdown.open {
position:relative;
z-index:99
}
.dropdown.open a:hover {
}.dropdown.open .dropdown-menu {
position:absolute;
z-index:100;
display:inline-block;
float:left;
left:0px;
top:100%;
min-width:120px;
margin:-1px 0 0;
padding:5px 0;
background-color:#fff;
background-clip:padding-box;
border:1px solid #d6d6d6;
border:1px solid rgba(0,0,0,0.15);
-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);
box-shadow:0 6px 12px rgba(0,0,0,0.175)
}
.dropdown.open .dropdown-menu.r {
right:0;
left:auto
}
.dropdown.open .dropdown-menu li {
float:none;
display:inline
}
.dropdown-menu li a {
color:#666
}
.dropdown.open .dropdown-menu li a {
display:block;
clear:both;
line-height:1.428571429;
padding:4px 15px;
padding-right:30px;
white-space:nowrap;
text-align:left;
font-weight:normal
}
.dropdown-menu li a:hover,.dropdown-menu li a:focus {
background-color:#ea5944;
color:#fff;
text-decoration:none
}
/*禁用菜单*/
.dropdown.open .dropdown-menu .disabled a,.dropdown.open .dropdown-menu .disabled a:hover,.dropdown.open .dropdown-menu .disabled a:focus {
color:#999;
text-decoration:none;
cursor:no-drop;
background-color:transparent
}
.dropdown.open .dropdown-menu li.divider {
display:block;
height:0px;
line-height:0px;
margin:9px 0;
overflow:hidden;
border-top:solid 1px #eee
}
/*4.4 幻灯片
name:module_slider
sample:<section class="slider cl has-dots">
<a href="javascript:void(0)" class="unslider-arrow prev"></a>
<a href="javascript:void(0)" class="unslider-arrow next"></a>
<ul class="tabcon">
<li><a href="#" target="_blank"><img name="" src="pic/1.png" width="300" height="150" alt=""></a></li>
<li><a href="#" target="_blank"><img name="" src="pic/2.png" width="300" height="150" alt=""></a></li>
<li><a href="#" target="_blank"><img name="" src="pic/3.png" width="300" height="150" alt=""></a></li>
</ul>
</section>
<script type="text/javascript" src="lib/unslider.min.js"></script>
<script type="text/javascript">
$(function() {
$('.slider').unslider( {
deplay:3000,fluid:true,dots:true
}
);
var unslider = $('.slider').unslider();
$('.unslider-arrow').click(function() {
var fn = this.classname.split(' ')[1];
unslider.data('unslider')[fn]()
}
)});
</script>
explain:默认dots为圆点，在slider后面追加numslider样式就变成带数字的方框，boxslider为不带数字长方条
*/
.slider {
position:relative;
text-align:center;
margin:0 auto
}
.slider .tabcon li {
float:left;
overflow:hidden
}
.dots {
position:absolute;
right:0px;
width:100%;
bottom:10px;
text-align:center
}
.dots span {
display:inline-block;
text-align:center;
width:8px;
height:8px;
font-size:0px;
line-height:0px;
margin-right:8px;
cursor:pointer;
background-color:#c2c2c2;
border-radius:8px
}
.dots span.active {
background-color:#222
}
.numslider .dots span {
width:20px;
height:20px;
line-height:20px;
font-size:13px;
margin-right:10px;
line-height:20px;
background-color:#fff;
font-family:arial;
font-weight:bold;
text-indent:inherit;
border-radius:0px
}
.numslider .dots span.active {
background-color:#222;
color:#fff
}
.boxslider .dots span {
width:40px;
height:10px;
border-radius:0px
}
.boxradius .dots span {
width:40px
}
.unslider-arrow {
display:block;
position:absolute;
top:50%;
margin-top:-25px;
height:50px;
width:50px;
z-index:3;
opacity:0.7;
filter:alpha(opacity=70);
background-color:#303030;
background-image:url(../images/unslider-arrow.png);
background-repeat:no-repeat
}
.unslider-arrow:hover {
opacity:1;
filter:alpha(opacity=100)
}
.prev {
left:0px;
background-position:0 0
}
.next {
right:0px;
background-position:right 0
}
/*4.5 选项卡
name:module_slider
sample:<div id="tab_demo" class="huitab">
<div class="tabbar cl"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
<div class="tabcon">内容一</div>
<div class="tabcon">内容二</div>
<div class="tabcon">内容三</div>
</div>
*/
.tabbar {
border-bottom:2px solid #222
}
.tabbar span {
background-color:#e8e8e8;
cursor:pointer;
display:inline-block;
float:left;
font-weight:bold;
height:30px;
line-height:30px;
padding:0 15px
}
.tabbar span.current {
background-color:#222;
color:#fff
}
.tabcon {
display:none
}
/*4.6 标签与标号
name:style_label
example:<span class="label label-success/label-warning/label-important/label-info/label-inverse">默认</span>
explain:.label 默认/.label-success 成功/.label-warning 错误/.lable-warning 危险/.label-important 重要/.label-info 信息/.label-inverse 相反
name:style_badge
example:<span class="badge badge-success/badge-warning/badge-important/badge-info/badge-inverse">1</span>
explain:.label 默认/.badge-success 成功/.badge-warning 错误/.badge-warning 危险/.badge-important 重要/.badge-info 信息/.badge-inverse 相反
*/
.label,.badge {
display:inline-block;
padding:2px 4px;
font-size:11.844px;
font-weight:bold;
line-height:14px;
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
white-space:nowrap;
vertical-align:baseline;
background-color:#999
}
.label {
border-radius:3px
}
.badge {
padding-right:9px;
padding-left:9px;
border-radius:9px
}
.label:empty,.badge:empty {
display:none
}
a.label:hover,a.label:focus,a.badge:hover,a.badge:focus {
color:#fff;
text-decoration:none;
cursor:pointer
}
/*成功*/
.label-success,.badge-success {
background-color:#0c0
}
.label-success[href],.badge-success[href] {
background-color:#0c0
}
/*错误*/
.label-warning,.badge-warning {
background-color:#f0ad4e
}
.label-warning[href],.badge-warning[href] {
background-color:#f0ad4e
}
/*危险*/
.label-danger,.badge-danger {
background-color:#d9534f
}
.label-danger[href],.badge-danger[href] {
background-color:#d9534f
}
/*重要*/
.label-important,.badge-important {
background-color:#b94a48
}
.label-important[href],.badge-important[href] {
background-color:#b94a48
}
/*金额*/
.label-price,.badge-price {
background-color:#f60
}
.label-price[href],.badge-price[href] {
background-color:#f60
}
/*信息*/
.label-info,.badge-info {
background-color:#1faef2
}
.label-info[href],.badge-info[href] {
background-color:#1faef2
}
/*相反*/
.label-inverse,.badge-inverse {
background-color:#1a1a1a
}
.label-inverse[href],.badge-inverse[href] {
background-color:#1a1a1a
}
/*尺寸*/
.btn .label,.btn .badge {
position:relative;
top:-1px
}
.btn-mini .label,.btn-mini .badge {
top:0
}
/*4.7 缩略图
name:style_img
example:explain:缩略图
*/
.imgbox {
}.img {
}.img-circle {
border-radius:50%
}
/*4.8 警告
name:mod_hui-alert
example:<div class="huialert huialert-success/huialert-danger/huialert-error/huialert-info/huialert-block"><i class="icon-remove"></i>警告内容<ul><li>……</li></ul></div>
explain:警告,使用警告框jquery插件
*/
.huialert {
position:relative;
padding:8px 35px 8px 14px;
margin-bottom:20px;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
background-color:#fcf8e3;
border:1px solid #fbeed5;
border-radius:4px
}
.huialert,.huialert h4 {
color:#c09853
}
.huialert h4 {
margin:0
}
.huialert .icon-remove {
position:absolute;
top:9px;
right:10px;
line-height:20px;
cursor:pointer;
color:#000;
opacity:0.2;
_color:#666
}
.huialert .icon-remove.hover {
color:#000;
opacity:0.8
}
.huialert-success {
color:#468847;
background-color:#dff0d8;
border-color:#d6e9c6
}
.huialert-success h4 {
color:#468847
}
.huialert-danger {
color:#b94a48;
background-color:#f2dede;
border-color:#eed3d7
}
.huialert-danger h4 {
color:#b94a48
}
.huialert-error {
color:#fff;
background-color:#f37b1d;
border-color:#e56c0c
}
.huialert-error h4 {
color:#fff
}
.huialert-info {
color:#31708f;
background-color:#d9edf7;
border-color:#bce8f1
}
.huialert-info h4 {
color:#31708f
}
.huialert-block {
padding-top:14px;
padding-bottom:14px
}
.huialert-block > p,.huialert-block > ul {
margin-bottom:0
}
.huialert-block p + p {
margin-top:5px
}
/*4.9 进度条 loading
name:mod_progress
example:<div class="progress"><div class="progress-bar"><span class="sr-only"></span></div></div>
explain:警告,使用警告框jquery插件
*/
.progress,.progress-bar,.sr-only {
height:10px;
font-size:0;
line-height:0
}
.progress {
overflow:hidden;
width:400px;
-khtml-border-radius:6px;
-ms-border-radius:6px;
-o-border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px
}
.progress-bar {
width:100%;
background-color:#efefef
}
.sr-only {
display:inline-block;
background-color:#58b957
}
/*4.10 对话框
name:mod_modal
example:*/
.loading {
height:50px;
background:url(../images/loading_072.gif) no-repeat center
}
.mask {
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:100%;
background:url(../images/backdrop.png) repeat 0 0;
-moz-transition:all 0.3s ease-in;
-webkit-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
transition:all 0.3s ease-in
}
* html .mask {
position:absolute;
left:expression(documentelement.scrollleft + documentelement.clientwidth - this.offsetwidth);
top:expression(documentelement.scrolltop + documentelement.clientheight - this.offsetheight)
}
/*huimodal*/
.modal-open {
overflow:hidden
}
/*当弹出层出现时，隐藏body右侧滚动条*/
.page-overflow {
margin-right:16px
}
/*隐藏body滚动条时，页面偏移*/
.modal-scrollable {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
overflow:auto
}
/*弹出层的最外层，全屏，用户响应点击和滚动*/
.modal-overflow .modal-scrollable {
overflow-y:scroll
}
/*弹窗超出屏幕高度时，弹出层替代body右侧滚动条，实现弹出层的整体滚动*/
.modal-backdrop {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
width:100%;
height:100%;
z-index:1040;
background-color:#000
}
/*默认遮罩层，全屏黑色*/
* html .modal-backdrop {
position:absolute;
left:expression(documentelement.scrollleft + documentelement.clientwidth - this.offsetwidth);
top:expression(documentelement.scrolltop + documentelement.clientheight - this.offsetheight)
}
/*解决ie下 遮罩层兼容性*/
.modal-backdrop.fade {
opacity:0;
filter:alpha(opacity=0)
}
/*遮罩层失去时，透明度为0*/
.modal-backdrop,.modal-backdrop.fade.in {
opacity:0.7;
filter:alpha(opacity=70)
}
/*遮罩层进入 0.7透明度*/
.modal.container {
width:980px
}
/*满页面宽度*/
.modal {
position:absolute;
top:50%;
left:50%;
width:500px;
margin-left:-250px;
z-index:1050;
overflow:visible;
background-color:#fff;
background-clip:padding-box;
box-shadow:0 3px 7px rgba(0,0,0,0.3);
-webkit-background-clip:padding-box;
-khtml-background-clip:padding-box;
-moz-background-clip:padding-box;
-ms-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
border-radius:6px;
border:1px solid rgba(0,0,0,0.3);
*border:1px solid #999
}
/*弹出层，绝对定位，默认【宽度500px，高度自适应，背景白色，6px圆角，带阴影】，自定义宽度可在data-width中设置参数*/
.fade {
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:opacity 0.2s linear;
-moz-transition:opacity 0.2s linear;
-o-transition:opacity 0.2s linear;
transition:opacity 0.2s linear
}
.fade.in {
opacity:1;
filter:alpha(opacity=100)
}
.modal.fade {
top:-100%
}
/*弹出层进入动画效果*/
.modal.fade.in {
top:50%
}
/*弹出层进入后居顶距离，配合margin-top负值，实现上下自动居中*/
.modal.modal-overflow.fade.in {
top:0px
}
/*如果弹出层高度大于窗口，弹出窗口距顶0像素*/
.loading-spinner {
position:absolute;
top:50%;
left:50%;
margin:-12px 0 0 -12px
}
/*ajax加载数据时loading*/
/*弹出层header区*/
.modal-header {
padding:9px 15px;
border-bottom:1px solid #eee;
position:relative
}
/*弹出层头部*/
.modal-header .close {
position:absolute;
right:10px;
top:10px
}
/*关闭按钮，请调用4.1.1 按钮 .close*/
.modal-header h3 {
margin:0
}
/*标题*/
.modal-body {
overflow-y:visible;
padding:15px
}
/*内容不限高度，内填充15px，不满意可自行修改*/
.modal-form {
margin-bottom:0
}
/*弹出层表单*/
/*弹出层footer区，放按钮*/
.modal-footer {
padding:14px 15px 15px;
margin-bottom:0;
text-align:right;
background-color:#f5f5f5;
border-top:1px solid #ddd;
*zoom:1;
border-radius:0 0 6px 6px;
box-shadow:inset 0 1px 0 #fff
}
.modal-footer:before,.modal-footer:after {
display:table;
content:""
}
.modal-footer:after {
clear:both
}
.modal-footer .btn + .btn {
margin-left:5px;
margin-bottom:0
}
.modal-footer .btn-group .btn + .btn {
margin-left:-1px
}
.modal-alert {
position:fixed;
width:300px;
margin-left:-150px;
margin-top:-30px;
z-index:9999
}
.modal-alert-info {
padding:30px;
text-align:center;
font-size:14px;
background-color:#fff
}
.mask_box {
background-image:none;
display:none;
z-index:99
}
.hover .mask_box {
position:absolute;
bottom:0px;
left:0px;
display:block;
background:url(../images/backdrop.png) repeat 0 0;
text-align:left
}
.easydialog_wrapper {
width:320px;
color:#444;
border:3px solid rgba(0,0,0,0);
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.4);
display:none
}
.easydialog_wrapper .easydialog_content {
border-radius:4px;
background:#fff;
border:1px solid #e5e5e5
}
.easydialog_wrapper .easydialog_title {
height:30px;
line-height:30px;
overflow:hidden;
color:#666;
padding:0 10px;
font-size:14px;
border-bottom:1px solid #e5e5e5;
background:#f7f7f7;
border-radius:4px 4px 0 0;
margin:0
}
.easydialog_wrapper .close_btn {
font-family:arial;
font-size:18px;
_font-size:12px;
font-weight:700;
color:#999;
text-decoration:none;
float:right
}
.easydialog_wrapper .close_btn:hover {
color:#333
}
.easydialog_wrapper .easydialog_text {
padding:25px 10px;
font-size:13px;
line-height:22px
}
.easydialog_wrapper .easydialog_footer {
padding:10px;
text-align:right;
*zoom:1
}
.easydialog_wrapper .easydialog_footer:after {
content:'';
display:block;
height:0;
overflow:hidden;
visibility:hidden;
clear:both
}
.easydialog_wrapper .btn_highlight,.easydialog_wrapper .btn_normal {
border:1px solid;
border-radius:2px;
cursor:pointer;
float:right;
font-size:12px;
padding:0 12px;
height:24px;
line-height:24px;
margin-bottom:10px
}
.easydialog_wrapper .btn_highlight {
background:#4787ed;
background:-webkit-gradient(linear,center bottom,center top,from(#4787ed),to(#4d90fe));
background:-moz-linear-gradient(90deg,#4787ed,#4d90fe);
border-color:#3079ed;
color:#fff
}
.easydialog_wrapper .btn_normal {
margin-left:10px;
border-color:#c3c3c3;
background:#ececec;
color:#333;
background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4));
background:-moz-linear-gradient(90deg,#ececec,#f4f4f4)
}
.modal-open .dropdown-menu {
z-index:2050
}
.modal-open .dropdown.open {
*z-index:2050
}
.modal-open .popover {
z-index:2060
}
.modal-open .tooltip {
z-index:2070
}
/*4.12 返回顶部
name:mod_totop
level:global
example:<a href="javascript:void(0)" class="totop" title=backtotoptxt alt=backtotoptxt></a>
explain:返回顶部
*/
.totop {
position:fixed;
display:block;
width:48px;
height:49px;
text-indent:-9999em;
overflow:hidden;
right:20px;
visibility:visible;
bottom:10px;
_position:absolute;
_top:expression(documentelement.scrolltop + documentelement.clientheight-this.offsetheight);
background:url(../images/totop.png) no-repeat 0 0
}
.totop:hover {
background-position:-48px 0
}
/*4.13 分享到
name:mod_share
example:<section class="share cl">
<!-- baidu button begin -->
<div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
<span class="bds_more">分享到：</span>
<a class="bds_tsina"></a>
<a class="bds_qzone"></a>
<a class="bds_tqq"></a>
<a class="bds_renren"></a>
<a class="bds_sqq"></a>
</div>
<script type="text/javascript" id="bdshare_js" data="type=tools&
uid=0" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
document.getelementbyid("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + math.ceil(new date()/3600000)
</script>
<!-- baidu button end -->
</section>
explain:分享到 直接调用百度分享，http://share.baidu.com/code
*/
/*4.15 案例
name:mod_bs-docs-example
example:<div class="bs-docs-example tooltip-demo">……</div>
*/
.bs-docs-example {
position:relative;
*position:static;
*padding-top:19px;
margin:15px 0;
padding:39px 19px 14px;
background-color:#fff;
border:1px solid #ddd;
border-radius:4px
}
.bs-docs-example:after {
content:"example";
position:absolute;
top:-1px;
left:-1px;
*position:static;
padding:3px 7px;
font-size:12px;
font-weight:bold;
background-color:#f5f5f5;
border:1px solid #ddd;
color:#9da0a4;
border-radius:4px 0 4px 0
}
/*4.16 滚动
name:mod_rolling
example:<div class="rollpicshow"><ul><li>……</li></ul></div>
*/
.marquee {
height:22px;
overflow:hidden;
line-height:22px
}
.rollpic .prev,.rollpic .next {
display:block;
height:38px;
width:38px;
cursor:pointer;
float:left;
background:url(../images/unslider-arrow2.png) no-repeat 0 0;
margin-top:70px
}
.rollpic .prev {
background-position:0 0;
margin-right:5px
}
.rollpic .prev:hover {
background-position:0 -38px
}
.rollpic .next {
background-position:0 -76px;
margin-left:5px
}
.rollpic .next:hover {
background-position:0 -114px
}
.rollpicshow {
float:left;
border:solid 1px #ddd
}
.rollpicshow li {
padding:10px
}
/*4.17 搜索条
name:mod_searchbar
sample:<div class="searchbar">
<form class="form-search" method="post" action="">
<input id="searchkeyword" name="searchkeyword" value="请输入搜索关键词" class="searchtxt">
<input id="searchbtn" name="searchbtn" type="submit" value="搜索" class="searchbtn" onclick="b_onclick()">
</form>
</div>
*/
.searchbar {
z-index:100;
width:460px;
height:33px;
background:url(../images/search.gif) no-repeat 0 -48px;
position:relative
}
.form-search {
margin-bottom:0px
}
.searchtxt {
float:left;
width:350px;
height:23px;
line-height:23px;
font-size:14px;
color:#9a9a9a;
margin-left:33px;
margin-top:5px;
border:none;
background-color:#fff
}
.searchtxt.focus {
color:#333
}
.searchbtn {
float:right;
display:block;
border:none;
width:73px;
height:33px;
cursor:pointer;
text-indent:-9999px;
background:url(../images/search.gif) no-repeat right -81px
}
.searchbtn:hover {
background-position:right -114px
}
/*搜索下拉提示*/
.ac_results {
position:absolute;
width:386px;
height:auto;
border:solid 1px #890800;
background-color:#fff;
top:32px;
left:0px;
display:none
}
.ac_results ul {
width:100%;
list-style-position:outside;
list-style:none;
padding:0;
margin:0
}
.ac_results li p {
float:left;
margin:0;
padding:0;
overflow:hidden
}
.ac_results li p tt {
color:#666
}
.ac_results li span {
margin:0;
padding:0;
display:inline;
float:right;
color:#f93;
width:90px;
text-align:right;
overflow:hidden
}
.ac_results ul li {
padding-left:5px;
padding-right:5px;
display:block;
height:22px;
line-height:22px;
cursor:pointer;
color:#000;
font:宋体;
font-size:12px
}
.ac_results ul li.hover {
background-color:#fef8ec;
color:#000
}
.ac_loading {
background:#fff url(../images/loading_s.gif) right center no-repeat
}
.ad {
text-align:center
}
/*4.18.1 对联广告
name:mod_ad_dual
sample:<div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">x关闭</a></div>
<div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">x关闭</a></div>
*/
.dual {
top:260px;
position:absolute;
width:102px;
overflow:hidden;
display:none;
z-index:100
}
.dual_l {
left:6px
}
.dual_r {
right:6px
}
.dual_con {
border:#ccc solid 1px;
width:100px;
height:300px;
overflow:hidden;
background-color:#0c9
}
.dual_close {
width:100%;
height:24px;
line-height:24px;
text-align:center;
display:block;
font-size:13px;
color:#555;
text-decoration:none
}
/*4.19 标签*/
/*4.19.1 标签输入效果
name:mod_hui-tags
sample:<div class="hui-tags">
<div class="hui-tags-editor cl"><i class="icon-tags"></i>
<span class="hui-tags-token">hui前端框架</span>
<span class="hui-tags-token">css3</span>
<span class="hui-tags-token">html5</span>
<div class="hui-tags-iptwrap"><input type="text" class="hui-tags-input" maxlength="20" value=""><lable class="hui-tags-lable">添加相关标签，用空格或回车分隔</lable></div>
</div>
<div class="hui-tags-list">
<div class="hui-notag">暂无常用标签</div>
<div class="hui-tags-has"><span>前端框架</span> <span>前端开发</span> <span>h-ui</span></div>
</div>
</div>
*/
.hui-tags {
border:solid 1px #dedede;
padding:0 10px
}
.hui-tags-editor {
position:relative;
padding:10px 0 10px 24px;
}
.hui-tags-editor .icon-tags {
position:absolute;
left:0;
top:14px
}
.hui-tags-token {
color:#aaa;
float:left;
font-size:12px;
height:20px;
line-height:20px;
margin-right:8px;
padding:0 1px;
white-space:nowrap;
cursor:pointer
}
.hui-tags-token:before {
content:"#"
}
.hui-tags-token:hover {
text-decoration:line-through
}
.hui-tags-iptwrap {
position:relative;
float:left;
}
.hui-tags-input {
position:relative;
height:20px;
min-width:60px;
border:0 none;
vertical-align:top;
line-height:20px;
color:#333;
z-index:2;
background:url(../images/empty.png) repeat scroll 0 0;
display:inline-block;
width:100%;
}
.hui-tags-lable {
position:absolute;
top:0;
left:2px;
width:240px;
height:20px;
line-height:20px;
font-size:14px;
overflow:hidden;
z-index:1;
color:#ccc
}
.hui-tags-list {
padding:0 0 10px 0;
display:none
}
.hui-notag {
font-size:12px;
}
.hui-tags-has span {
cursor:pointer;
font-size:12px;
white-space:nowrap;
margin-right:10px;
}
/*4.19.2 标签混排效果
name:mod_tags
sample:<div class="pd-10 tags"><a href="http://www.h-ui.net/">h-ui前端框架</a>……</div>
*/
.tags a {
height:26px;
line-height:26px;
padding-right:6px
}
.tags0 {
}.tags1 {
color:#c00;
font-size:24px
}
.tags2 {
color:#030;
font-size:16px
}
.tags3 {
color:#00f
}
.tags4 {
font-size:16px
}
.tags5 {
color:#c00;
font-size:20px
}
.tags6 {
color:#f06 font-size:20px
}
.tags7 {
color:#030;
font-weight:bold;
font-size:18px
}
.tags8 {
color:#f06;
font-weight:bold
}
.tags9 {
color:#c00;
font-weight:bold;
font-size:16px
}
.tags a:hover {
color:#f00;
text-decoration:underline
}
/*4.19.3 tag云标签*/
#tagyun {
position:relative
}
#tagyun a {
position:absolute;
top:0px;
left:0px;
font-weight:bold;
text-decoration:none;
padding:3px 6px
}
/*4.20 折叠
name:mod_huifold
sample:<ul id="" class="huifold">
<li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
……
</ul>
*/
.huifold .item {
position:relative
}
.huifold .item h4 {
margin:0;
font-weight:bold;
position:relative;
border-top:1px solid #fff;
font-size:15px;
line-height:22px;
padding:7px 10px;
background-color:#eee;
cursor:pointer;
padding-right:30px
}
.huifold .item h4 b {
position:absolute;
display:block;
cursor:pointer;
right:10px;
top:7px;
width:16px;
height:16px;
text-align:center;
color:#666
}
.huifold .item .info {
display:none;
padding:10px
}
/*4.21 遮罩条
name:mod_maskbar
*/
.maskbar {
position:absolute;
width:100%;
height:auto;
left:0;
bottom:-60px;
right:0;
background-color:#000;
z-index:2;
color:#fff!important;
opacity:0.6;
filter:alpha(opacity=60)
}
.maskwraper {
position:relative;
overflow:hidden
}
.maskwraper.hover .maskbar {
bottom:0px;
transition:bottom 200ms;
-moz-transition:bottom 200ms;
/* firefox 4 */
-webkit-transition:bottom 200ms;
/* safari 和 chrome */
-o-transition:bottom 200ms;
/* opera */
}
.maskbox {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
bottom:0;
right:0;
z-index:2;
background-color:#000;
color:#fff!important;
opacity:0;
filter:alpha(opacity=0)
}
.maskwraper.hover .maskbox {
opacity:0.2;
filter:alpha(opacity=20);
transition:opacity 500ms;
-moz-transition:opacity 500ms;
/* firefox 4 */
-webkit-transition:opacity 500ms;
/* safari 和 chrome */
-o-transition:opacity 500ms;
/* opera */
}
/*4.22 评论列表
name:mod_comment
sample:<ul class="commentlist">
<li class="item cl">
<a href="#"><img width="48" height="48" class="comment-avatar" alt="" src="static/h-ui/images/avatar-default-s.gif"></a>
<div class="comment-main">
<header class="comment-header">
<div class="comment-meta"><a class="comment-author" href="#">辉哥</a> 评论于 <time title="2014年8月31日 下午3:20" datetime="2014-08-31t03:54:20">2014-8-31 15:20</time></div>
</header>
<div class="comment-body"><p><a href="#">@某人</a> 你是猴子派来的救兵吗？</p></div></div>
</li>
</ul>
*/
.commentlist .item {
list-style:none outside none;
margin:1.6rem 0 0
}
.comment-avatar {
border:1px solid transparent;
border-radius:50%;
float:left;
height:48px;
width:48px
}
.comment-main {
position:relative;
margin-left:64px;
border:1px solid #dedede;
border-radius:2px
}
.comment-main:before,.comment-main:after {
position:absolute;
top:11px;
left:-16px;
right:100%;
width:0;
height:0;
display:block;
content:" ";
border-color:transparent;
border-style:solid solid outset;
pointer-events:none
}
.comment-main:before {
border-right-color:#dedede;
border-width:8px
}
.comment-main:after {
border-width:7px;
border-right-color:#f8f8f8;
margin-top:1px;
margin-left:2px
}
.comment-header {
padding:10px 15px;
background:#f8f8f8;
border-bottom:1px solid #eee
}
.comment-title {
margin:0 0 8px 0;
font-size:1.6rem;
line-height:1.2
}
.comment-meta {
font-size:13px;
color:#999;
line-height:1.2
}
.comment-meta a {
color:#999
}
.comment-author {
font-weight:700;
color:#999
}
.comment-body {
padding:15px;
overflow:hidden
}
.comment-body>:last-child {
margin-bottom:0
}
.comment-flip .comment-avatar {
float:right
}
.comment-flip .comment-main {
margin-left:0;
margin-right:64px
}
.comment-flip .comment-main:before {
border-left-color:#dedede;
border-right-color:transparent
}
.comment-flip .comment-main:before,.comment-flip .comment-main:after {
left:100%;
position:absolute;
right:-16px
}
.comment-flip .comment-main:after {
border-left-color:#f8f8f8;
border-right-color:transparent;
margin-left:auto;
margin-right:2px
}
/*5 页面
name:page
*/
/*5.1 博客列表页*/
.page-blog-list {
}/*5.2 博客详情页*/
.page-blog-show {
}/*5.3 关于我们页*/
.page-about-show {
}/*5.4 帮助列表页*/
.page-help-list {
}/*5.5 帮助详情页*/
.page-help-show {
}/*5.6 错误页-404*/
.page-404 {
}/*5.7 友情链接页*/
.page-flink {
}/*5.8 分页效果*/
/*
<div class="list_num">
<a href="#">上一页</a>
<a href="#">1</a>
<a class="list_on" href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
…
<a href="#">下一页</a>
共14页 到第
<input type="text" />
页
<a class="list_num_btn" href="#">确定</a>
</div>
*/
.list_num {
color:#333;
text-align:center;
margin:40px 0px;
}
.list_num a {
display:inline-block;
line-height:25px;
padding:0 10px;
color:#333;
border:1px solid #ccc;
background:#fff;
}
.list_num a.list_on {
color:#fff;
background:#cc3333;
}
.list_num input[type="text"] {
width:30px;
height:25px;
border:1px solid #ccc;
text-align:center;
}
.list_num a.list_num_btn {
width:50px;
height:25px;
background:url(../images/list_num_btn.gif) 0 0 repeat-x;
border:1px solid #ccc;
padding:0;
text-align:center;
}
/*验证*/
.formerror {
z-index:990
}
.formerror .formerrorcontent {
z-index:991
}
.formerror .formerrorarrow {
z-index:996
}
.ui-dialog .formerror {
z-index:5000
}
.ui-dialog .formerror .formerrorcontent {
z-index:5001
}
.ui-dialog .formerror .formerrorarrow {
z-index:5006
}
.inputcontainer {
position:relative;
float:left
}
.formerror {
position:absolute;
top:300px;
left:300px;
display:block;
cursor:pointer;
text-align:left
}
.formerror.inline {
position:relative;
top:0;
left:0;
display:inline-block
}
.ajaxsubmit {
padding:20px;
background:#55ea55;
border:1px solid #999;
display:none
}
.formerror .formerrorcontent {
width:100%;
background:#ee0101;
position:relative;
color:#fff;
min-width:120px;
font-size:11px;
border:2px solid #ddd;
box-shadow:0 0 6px #000;
-moz-box-shadow:0 0 6px #000;
-webkit-box-shadow:0 0 6px #000;
-o-box-shadow:0 0 6px #000;
padding:4px 10px 4px 10px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px
}
.formerror.inline .formerrorcontent {
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
border:0;
border-radius:0;
-moz-border-radius:0;
-webkit-border-radius:0;
-o-border-radius:0
}
.greenpopup .formerrorcontent {
background:#33be40
}
.blackpopup .formerrorcontent {
background:#393939;
color:#fff
}
.formerror .formerrorarrow {
width:15px;
margin:-2px 0 0 13px;
position:relative
}
body[dir='rtl'] .formerror .formerrorarrow,body.rtl .formerror .formerrorarrow {
margin:-2px 13px 0 0
}
.formerror .formerrorarrowbottom {
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none;
margin:0 0 0 12px;
top:2px
}
.formerror .formerrorarrow div {
border-left:2px solid #ddd;
border-right:2px solid #ddd;
box-shadow:0 2px 3px #444;
-moz-box-shadow:0 2px 3px #444;
-webkit-box-shadow:0 2px 3px #444;
-o-box-shadow:0 2px 3px #444;
font-size:0;
height:1px;
background:#ee0101;
margin:0 auto;
line-height:0;
font-size:0;
display:block
}
.formerror .formerrorarrowbottom div {
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
-o-box-shadow:none
}
.greenpopup .formerrorarrow div {
background:#33be40
}
.blackpopup .formerrorarrow div {
background:#393939;
color:#fff
}
.formerror .formerrorarrow .line10 {
width:15px;
border:0
}
.formerror .formerrorarrow .line9 {
width:13px;
border:0
}
.formerror .formerrorarrow .line8 {
width:11px
}
.formerror .formerrorarrow .line7 {
width:9px
}
.formerror .formerrorarrow .line6 {
width:7px
}
.formerror .formerrorarrow .line5 {
width:5px
}
.formerror .formerrorarrow .line4 {
width:3px
}
.formerror .formerrorarrow .line3 {
width:1px;
border-left:2px solid #ddd;
border-right:2px solid #ddd;
border-bottom:0 solid #ddd
}
.formerror .formerrorarrow .line2 {
width:3px;
border:0;
background:#ddd
}
.formerror .formerrorarrow .line1 {
width:1px;
border:0;
background:#ddd
}
style.css
.navbar{
height: 35px;
width: 100%;
background: #333;
}
.macth_xv_navlist {
width: 1200px;
margin: 0 auto;
}
.macth_xv_navlist:after {
content: "";
display: table;
clear: both;
}
.macth_xv_navlist .macth_xv_menu {
position: relative;
z-index: 10;
height: 35px;
padding-left: 240px;
margin-bottom: 10px;
background: #333;
}
.macth_xv_categorys {
position: absolute;
top: 0;
left: 0;
width: 240px;
height: 35px;
background: #cc3333;
}
.macth_xv_categorys:hover .macth_xv_cat_catlist {
display: block;
}
.macth_xv_categorys .macth_xv_cat_title {
position: relative;
zoom: 1;
color: #fff;
font-size: 14px;
line-height: 35px;
text-align: left;
}
.macth_xv_categorys .macth_xv_cat_title .macth_cat_name {
position: relative;
margin: 0;
padding: 0;
}
.macth_xv_categorys .macth_xv_cat_title .macth_cat_name a {
display: block;
height: 35px;
padding-left: 20px;
line-height: 35px;
color: #fff;
font-size: 14px;
text-decoration: none;
}
.macth_xv_categorys .macth_xv_cat_title .macth_cat_name a .macth_xv_icon_bai {
position: absolute;
background: url(../images/iconlist.png) no-repeat;
background-position: -32px 8px;
width: 12px;
height: 35px;
right: 85px;
}
.macth_xv_categorys .macth_xv_cat_catlist {
position: absolute;
top: 35px;
left: 0;
display: none;
width: 234px;
min-height: 460px;
padding: 3px 3px 3px 0;
background: #fafafa;
border: solid #cc3333;
border-width: 0 2px 2px;
overflow: visible;
}
.macth_xv_nav {
float: left;
}
.macth_xv_nav li {
float: left;
position: relative;
}
.macth_xv_nav li.macth_liactive a {
font-weight: 700;
background-color: #000;
}
.macth_xv_nav li i {
background: url(../images/iconlist.png) no-repeat;
}
.macth_xv_nav li i.macth_nav_new {
position: absolute;
top: -12px;
width: 30px;
height: 20px;
left: 50%;
z-index: 60;
background-position: -106px -33px;
margin-left: -7px;
}
.macth_xv_nav li a {
line-height: 35px;
width: 97px;
float: left;
text-align: center;
color: #fff;
font: 12px;
text-decoration: none;
}
.macth_xv_nav li a:hover {
background-color: #000;
}
.macth_xv_login {
position: absolute;
top: 0;
right: 0;
z-index: 6;
}
.macth_xv_login .macth_xvlogin_list {
float: left;
width: 280px;
height: 35px;
background: #eaeaea;
}
.macth_xvlogin_login {
float: left;
width: 80px;
height: 35px;
padding: 0 20px 0 26px;
position: relative;
}
.macth_xvlogin_login i {
position: absolute;
background: url(../images/iconlist.png) no-repeat;
}
.macth_xvlogin_login i.macth_icon_user {
top: 0;
left: 0;
width: 26px;
height: 35px;
background-position: -71px 3px;
}
.macth_xvlogin_login i.macth_icon_sj {
width: 10px;
height: 35px;
top: 0;
right: 10px;
background-position: -156px 7px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform .2s ease-in 0s;
-moz-transition: -webkit-transform .2s ease-in 0s;
-webkit-transition: -webkit-transform .2s ease-in 0s;
-o-transition: -webkit-transform .2s ease-in 0s;
}
.macth_xvlogin_login i.number_login {
width: 20px;
height: 15px;
font-style: normal;
line-height: 15px;
color: #fff;
text-align: center;
top: 50%;
left: 3px;
margin-top: -8px;
border-radius: 15px;
background: #cc3333;
}
.macth_xvlogin_login a {
float: left;
line-height: 35px;
color: #333;
font-size: 12px;
}
.macth_xvlogin_login a:hover {
text-decoration: none;
}
.macth_xvlogin_login .macth_login_list {
position: absolute;
display: none;
top: 32px;
left: 30px;
width: 183px;
height: auto;
background: #fff;
padding: 0px 6px 10px 6px;
border: 1px solid #ccc;
}
.macth_xvlogin_login .macth_login_list:before {
content: '';
height: 8px;
width: 12px;
background: url(images/icon_sanjiao.png) center no-repeat;
position: absolute;
top: -8px;
left: 75px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl {
float: left;
width: 100%;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item {
float: left;
width: 184px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item span {
float: left;
width: 100%;
color: #333;
line-height: 25px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item span.macth_login_news {
float: left;
width: 74px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item span.macth_login_error {
float: left;
display: none;
width: 172px;
color: #cc3333;
font-size: 12px;
line-height: 24px;
border: 1px solid #ff9999;
background: #ffcccc;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item .macth_login_int {
float: left;
width: 164px;
height: 17px;
padding: 4px 8px;
line-height: 17px;
outline: none;
border-radius: 3px;
border: 2px solid #ccc;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item .macth_error {
border: 2px solid #cc3333;
color: #cc3333;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item .yellow {
border: 2px solid #ffcc66;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item label {
float: left;
position: relative;
padding-left: 20px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item label i {
position: absolute;
background: url(../images/iconlist.png) no-repeat;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item label i.macth_checkui {
width: 15px;
height: 15px;
top: 5px;
left: 0;
cursor: pointer;
background-position: -4px -90px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item label i.macth_checkclick {
background-position: -4px -110px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item a.macth_login_forget {
float: right;
line-height: 18px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item a.macth_login_forget:hover {
text-decoration: underline;
color: #cc3333;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item a.macth_login_zhuce {
float: left;
line-height: 25px;
color: #cc3333;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item a.macth_login_zhuce:hover {
text-decoration: underline;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .macth_login_item .macth_login_load {
width: 100%;
height: 25px;
line-height: 25px;
color: #fff;
border: none;
background: #cc3333;
outline: none;
cursor: pointer;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .name_user {
float: left;
width: 100%;
background: #f4f4f4;
height: 23px;
line-height: 23px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .name_user a {
line-height: 23px;
font-size: 12px;
color: #333;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .name_user a.user_number {
float: left;
width: 130px;
height: 23px;
overflow: hidden;
margin-left: 5px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .name_user a.user_setting {
float: right;
margin-right: 5px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list {
float: left;
padding: 0px 10px;
margin-top: 5px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li {
float: left;
width: 100%;
line-height: 30px;
border-bottom: 1px solid #ddd;
position: relative;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li:last-child {
border-bottom: none;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li a {
font-size: 12px;
color: #333;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li a.textnum {
background: #e98a90;
position: absolute;
top: 50%;
right: 0px;
width: 25px;
height: 20px;
margin-top: -10px;
line-height: 20px;
text-align: center;
border-radius: 20px;
color: #fff;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li .run {
float: right;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li .run .run_revise {
color: #999;
margin-right: 5px;
}
.macth_xvlogin_login .macth_login_list .macth_login_fl .user_list li .run .run_import {
color: #999;
}
.macth_xvlogin_login.active .macth_icon_sj {
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.macth_xvlogin_history {
float: left;
width: 120px;
height: 35px;
position: relative;
}
.macth_xvlogin_history i {
position: absolute;
background: url(../images/iconlist.png) no-repeat;
}
.macth_xvlogin_history i.macth_icon_histpry {
top: 0;
left: 0;
width: 26px;
height: 35px;
background-position: -100px 3px;
}
.macth_xvlogin_history i.macth_icon_sj {
width: 10px;
height: 35px;
top: 0;
right: 10px;
background-position: -156px 7px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform .2s ease-in 0s;
-moz-transition: -webkit-transform .2s ease-in 0s;
-webkit-transition: -webkit-transform .2s ease-in 0s;
-o-transition: -webkit-transform .2s ease-in 0s;
}
.macth_xvlogin_history a {
float: left;
line-height: 35px;
color: #333;
font-size: 12px;
}
.macth_xvlogin_history a span{
color:#c33;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.macth_xvlogin_history a:hover {
text-decoration: none;
}
.macth_xvlogin_history .macth_history_list {
position: absolute;
display: none;
top: 32px;
left: -50px;
width: 197px;
min-height: 215px;
background: #fff;
padding: 0 6px 10px 6px;
border: 1px solid #ccc;
}
.macth_xvlogin_history .macth_history_list:before {
content: '';
height: 8px;
width: 12px;
background: url(images/icon_sanjiao.png) center no-repeat;
position: absolute;
top: -8px;
right: 69px;
}
.macth_xvlogin_history .macth_history_list .loginlist {
float: left;
width: 100%;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item {
float: left;
width: 187px;
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_time {
float: left;
color: #cc3333;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_name {
float: left;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_name a {
float: left;
width: 187px;
color: #333;
line-height: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_name a:hover {
color: #cc3333;
text-decoration: underline;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_content {
float: left;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_content a {
float: left;
width: 187px;
color: #333;
line-height: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.macth_xvlogin_history .macth_history_list .loginlist .macth_history_item .macth_his_content a:hover {
color: #cc3333;
text-decoration: underline;
}
.macth_xvlogin_history .macth_history_list .macth_history_item {
float: left;
width: 187px;
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_time {
float: left;
color: #cc3333;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_name {
float: left;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_name a {
float: left;
width: 187px;
color: #333;
line-height: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_name a:hover {
color: #cc3333;
text-decoration: underline;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_content {
float: left;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_content a {
float: left;
width: 187px;
color: #333;
line-height: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.macth_xvlogin_history .macth_history_list .macth_history_item .macth_his_content a:hover {
color: #cc3333;
text-decoration: underline;
}
.macth_xvlogin_history .macth_history_list .macth_his_more {
float: left;
width: 100%;
margin-top: 5px;
}
.macth_xvlogin_history .macth_history_list .macth_his_more a {
color: #cc3333;
width: 100%;
float: left;
line-height: 18px;
text-align: center;
}
.macth_xvlogin_history .macth_history_list .macth_his_more a:hover {
text-decoration: underline;
}
.macth_xvlogin_history.active .macth_icon_sj {
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.macth_xvlogin_apply {
float: left;
width: 30px;
height: 35px;
position: relative;
}
.macth_xvlogin_apply i {
position: absolute;
background: url(../images/iconlist.png) no-repeat;
}
.macth_xvlogin_apply i.macth_icon_home {
top: 0;
left: 0;
width: 26px;
height: 35px;
background-position: -126px 3px;
}
.macth_xvlogin_apply i.macth_icon_sj {
width: 10px;
height: 35px;
top: 0;
right: 10px;
background-position: -156px 7px;
transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transition: transform .2s ease-in 0s;
-moz-transition: -webkit-transform .2s ease-in 0s;
-webkit-transition: -webkit-transform .2s ease-in 0s;
-o-transition: -webkit-transform .2s ease-in 0s;
}
.macth_xvlogin_apply a {
float: left;
line-height: 35px;
color: #333;
font-size: 12px;
}
.macth_xvlogin_apply a:hover {
text-decoration: none;
}
.macth_xvlogin_apply .macth_apply_list {
position: absolute;
display: none;
top: 32px;
right: 0;
width: 197px;
height: auto;
background: #fff;
padding: 10px 6px;
border: 1px solid #ccc;
}
.macth_xvlogin_apply .macth_apply_list:before {
content: '';
height: 8px;
width: 12px;
background: url(images/icon_sanjiao.png) center no-repeat;
position: absolute;
top: -8px;
right: 7px;
}
.macth_xvlogin_apply.active .macth_icon_sj {
transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
.macth_apply_item {
float: left;
width: 187px;
padding: 10px 5px;
border-bottom: 1px solid #ccc;
}
.macth_apply_item:last-child {
border-bottom: none;
}
.macth_apply_item .macth_apply_suan {
float: left;
}
.macth_apply_item .macth_apply_suan a {
float: left;
width: 32px;
height: 32px;
background: url(../../css/compage/../images/iconlist.png) no-repeat;
}
.macth_apply_item .macth_apply_suan a.macth_suanming {
background-position: -5px -134px;
}
.macth_apply_item .macth_apply_suan a.macth_mapjob {
background-position: -50px -134px;
}
.macth_apply_item .macth_apply_suan a.macth_saveper {
background-position: -100px -134px;
}
.macth_apply_item .macth_apply_href {
float: left;
width: 142px;
margin-left: 10px;
}
.macth_apply_item .macth_apply_href .macth_href_text {
float: left;
width: 100%;
}
.macth_apply_item .macth_apply_href .macth_href_text a {
float: left;
line-height: 16px;
color: #cc3333;
}
.macth_apply_item .macth_apply_href .macth_href_text a:hover {
text-decoration: underline;
}
.macth_apply_item .macth_apply_href .macth_href_intro {
float: left;
width: 100%;
font-size: 12px;
color: #666;
line-height: 16px;
}
.macth-dropdown-menu .macth_itemhover h3 {
position: relative;
z-index: 13;
background: #fff;
border-color: #ddd;
border-width: 1px 0px;
border-style: solid;
}
.macth-dropdown-menu .macth_xvitem {
height: 30px;
border-top: 1px solid transparent;
}
.macth-dropdown-menu .macth_xvitem h3 {
height: 28px;
line-height: 28px;
font-size: 14px;
font-weight: normal;
width: 240px;
overflow: hidden;
margin: 0;
}
.macth-dropdown-menu .macth_xvitem h3 .macth_xvh3_a {
color: #666;
}
.macth-dropdown-menu .macth_xvitem h3 span {
padding: 0px 14px 0px 12px;
color: #c2c2c2;
font-family: "\5b8b\4f53";
}
.macth-dropdown-menu .macth_xvitem h3 span.macth_xvh3_a {
padding: 0;
}
.macth-dropdown-menu .macth_xvitem h3 span i {
font-size: 15px;
}
.macth-dropdown-menu .macth_xvitem h3 a {
color: #333;
text-decoration: none;
}
.macth-dropdown-menu .macth_xvitem h3 s {
float: right;
margin-top: 8px;
margin-right: 8px;
background: url(../images/iconlist.png) no-repeat;
width: 9px;
height: 13px;
background-position: -57px -6px;
}
.macth_popover {
display: none;
position: absolute;
background: #fff;
left: 240px;
width: 678px;
box-shadow: 0px 0px 10px #dddddd;
border: 1px solid #ddd;
top: 3px;
min-height: 472px;
z-index: 10;
}
.macth_popover .macth_popover-content {
float: left;
width: 428px;
padding: 0px 10px;
}
.macth_popover .macth_cat-right {
float: right;
width: 204px;
padding: 15px 10px 0px 10px;
}
.macth_xvright_title {
float: left;
width: 100%;
height: 28px;
}
.macth_xvright_com {
float: left;
width: 100%;
}
.macth_xvright_com .macth_xvcom_fl {
float: left;
margin-top: 10px;
}
.macth_xvright_com .macth_xvcom_fl .macth_xvcom_name {
float: left;
}
.macth_xvright_com .macth_xvcom_fl .macth_xvcom_name a {
float: left;
line-height: 20px;
color: #99ccff;
}
.macth_xvright_com .macth_xvcom_fl .macth_xvcom_cont {
float: left;
}
.macth_xvright_com .macth_xvcom_fl .macth_xvcom_cont a {
float: left;
color: #333;
line-height: 20px;
margin-right: 15px;
text-decoration: none;
}
.macth_xvright_com .macth_xvcom_fl .macth_xvcom_cont a:hover {
color: #cc3333;
text-decoration: underline;
}
.macth_xvad_list {
float: left;
margin-top: 20px;
}
.macth_xvad_list a {
float: left;
margin-bottom: 5px;
}
.macth_content_ul {
float: left;
}
.macth_content_ul li {
padding: 6px 0px;
overflow: hidden;
zoom: 1;
}
.macth_content_ul li.macth_nav_li {
border-top: 1px solid #eee;
padding: 12px 0px 14px 0px;
overflow: hidden;
zoom: 1;
}
.macth_content_ul li .macth_xvnav_li_alist {
float: left;
width: 75px;
font-size: 14px;
color: #cc3333;
line-height: 22px;
text-align: right;
}
.macth_content_ul li .macth_xvnav_li_ul {
list-style: none;
margin: 0;
padding-left: 0;
float: left;
width: 330px;
overflow: hidden;
margin-left: 10px;
}
.macth_content_ul li .macth_xvnav_li_ul li {
float: left;
height: 14px;
line-height: 14px;
padding: 0px 9px 0px 8px;
margin: 4px 0;
border-left: 1px solid #ccc;
}
.macth_content_ul li .macth_xvnav_li_ul li a {
color: #666;
text-decoration: none;
}
.macth_content_ul li .macth_xvnav_li_ul li a:hover {
color: #cc3333;
text-decoration: underline;
}
/**/
.scroll-top{
overflow: hidden;
}
.scroll_title{
float:left;
color:#333;
width:60px;
line-height: 35px;
height:35px;
font-size: 12px;
padding-left: 10px;
margin-right: 5px;
}
.scroll-top .infolist{
float:left;
width:205px;
}
.scroll-top .infolist li{
float:left;
width:205px;
height:35px;
line-height: 35px;
}
.infolist li span{
color:#666;
font-size: 12px;
margin-right: 10px;
}
.infolist li span strong{
font-weight: normal;
color:#cc3333;
}
.container .wp .macth_xv_categorys .macth_xv_cat_catlist{
display:block;
}
jquery.aimmenu.js
/**
* menu-aim is a jquery plugin for dropdown menus that can differentiate
* between a user trying hover over a dropdown item vs trying to navigate into
* a submenu's contents.
*
* menu-aim assumes that you have are using a menu with submenus that expand
* to the menu's right. it will fire events when the user's mouse enters a new
* dropdown item *and* when that item is being intentionally hovered over.
*
* __________________________
* | monkeys >| gorilla |
* | gorillas >| content |
* | chimps >| here |
* |___________|____________|
*
* in the above example, "gorillas" is selected and its submenu content is
* being shown on the right. imagine that the user's cursor is hovering over
* "gorillas." when they move their mouse into the "gorilla content" area, they
* may briefly hover over "chimps." this shouldn't close the "gorilla content"
* area.
*
* this problem is normally solved using timeouts and delays. menu-aim tries to
* solve this by detecting the direction of the user's mouse movement. this can
* make for quicker transitions when navigating up and down the menu. the
* experience is hopefully similar to amazon.com/'s "shop by department"
* dropdown.
*
* use like so:
*
* $("#menu").menuaim({
* activate: $.noop, // fired on row activation
* deactivate: $.noop // fired on row deactivation
* });
*
* ...to receive events when a menu's row has been purposefully (de)activated.
*
* the following options can be passed to menuaim. all functions execute with
* the relevant row's html element as the execution context ('this'):
*
* .menuaim({
* // function to call when a row is purposefully activated. use this
* // to show a submenu's content for the activated row.
* activate: function() {},
*
* // function to call when a row is deactivated.
* deactivate: function() {},
*
* // function to call when mouse enters a menu row. entering a row
* // does not mean the row has been activated, as the user may be
* // mousing over to a submenu.
* enter: function() {},
*
* // function to call when mouse exits a menu row.
* exit: function() {},
*
* // selector for identifying which elements in the menu are rows
* // that can trigger the above events. defaults to "> li".
* rowselector: "> li",
*
* // you may have some menu rows that aren't submenus and therefore
* // shouldn't ever need to "activate." if so, filter submenu rows w/
* // this selector. defaults to "*" (all elements).
* submenuselector: "*",
*
* // direction the submenu opens relative to the main menu. can be
* // left, right, above, or below. defaults to "right".
* submenudirection: "right"
* });
*
* https://github.com/kamens/jquery-menu-aim
*/
(function($) {
$.fn.menuaim = function(opts) {
// initialize menu-aim for all elements in jquery collection
this.each(function() {
init.call(this, opts);
});
return this;
};
function init(opts) {
var $menu = $(this),
activerow = null,
mouselocs = [],
lastdelayloc = null,
timeoutid = null,
options = $.extend({
rowselector: "> li",
submenuselector: "*",
submenudirection: "right",
tolerance: 75, // bigger = more forgivey when entering submenu
enter: $.noop,
exit: $.noop,
activate: $.noop,
deactivate: $.noop,
exitmenu: $.noop
}, opts);
var mouse_locs_tracked = 3, // number of past mouse locations to track
delay = 300; // ms delay when user appears to be entering submenu
/**
* keep track of the last few locations of the mouse.
*/
var mousemovedocument = function(e) {
mouselocs.push({x: e.pagex, y: e.pagey});
if (mouselocs.length > mouse_locs_tracked) {
mouselocs.shift();
}
};
/**
* cancel possible row activations when leaving the menu entirely
*/
var mouseleavemenu = function() {
if (timeoutid) {
cleartimeout(timeoutid);
}
// if exitmenu is supplied and returns true, deactivate the
// currently active row on menu exit.
if (options.exitmenu(this)) {
if (activerow) {
options.deactivate(activerow);
}
activerow = null;
}
};
/**
* trigger a possible row activation whenever entering a new row.
*/
var mouseenterrow = function() {
if (timeoutid) {
// cancel any previous activation delays
cleartimeout(timeoutid);
}
options.enter(this);
possiblyactivate(this);
},
mouseleaverow = function() {
options.exit(this);
};
/**
* activate a menu row.
*/
var activate = function(row) {
if (row == activerow) {
// return;//涓轰簡涓嶅奖鍝嶄娇鐢ㄦ殏鏃舵敞閲婃帀
}
if (activerow) {
options.deactivate(activerow);
}
options.activate(row);
activerow = row;
};
/**
* possibly activate a menu row. if mouse movement indicates that we
* shouldn't activate yet because user may be trying to enter
* a submenu's content, then delay and check again later.
*/
var possiblyactivate = function(row) {
var delay = activationdelay();
if (delay) {
timeoutid = settimeout(function() {
possiblyactivate(row);
}, delay);
} else {
activate(row);
}
};
/**
* return the amount of time that should be used as a delay before the
* currently hovered row is activated.
*
* returns 0 if the activation should happen immediately. otherwise,
* returns the number of milliseconds that should be delayed before
* checking again to see if the row should be activated.
*/
var activationdelay = function() {
if (!activerow || !$(activerow).is(options.submenuselector)) {
// if there is no other submenu row already active, then
// go ahead and activate immediately.
return 0;
}
var offset = $menu.offset(),
upperleft = {
x: offset.left,
y: offset.top - options.tolerance
},
upperright = {
x: offset.left + $menu.outerwidth(),
y: upperleft.y
},
lowerleft = {
x: offset.left,
y: offset.top + $menu.outerheight() + options.tolerance
},
lowerright = {
x: offset.left + $menu.outerwidth(),
y: lowerleft.y
},
loc = mouselocs[mouselocs.length - 1],
prevloc = mouselocs[0];
if (!loc) {
return 0;
}
if (!prevloc) {
prevloc = loc;
}
if (prevloc.x < offset.left || prevloc.x > lowerright.x ||
prevloc.y < offset.top || prevloc.y > lowerright.y) {
// if the previous mouse location was outside of the entire
// menu's bounds, immediately activate.
return 0;
}
if (lastdelayloc &&
loc.x == lastdelayloc.x && loc.y == lastdelayloc.y) {
// if the mouse hasn't moved since the last time we checked
// for activation status, immediately activate.
return 0;
}
// detect if the user is moving towards the currently activated
// submenu.
//
// if the mouse is heading relatively clearly towards
// the submenu's content, we should wait and give the user more
// time before activating a new row. if the mouse is heading
// elsewhere, we can immediately activate a new row.
//
// we detect this by calculating the slope formed between the
// current mouse location and the upper/lower right points of
// the menu. we do the same for the previous mouse location.
// if the current mouse location's slopes are
// increasing/decreasing appropriately compared to the
// previous's, we know the user is moving toward the submenu.
//
// note that since the y-axis increases as the cursor moves
// down the screen, we are looking for the slope between the
// cursor and the upper right corner to decrease over time, not
// increase (somewhat counterintuitively).
function slope(a, b) {
return (b.y - a.y) / (b.x - a.x);
};
var decreasingcorner = upperright,
increasingcorner = lowerright;
// our expectations for decreasing or increasing slope values
// depends on which direction the submenu opens relative to the
// main menu. by default, if the menu opens on the right, we
// expect the slope between the cursor and the upper right
// corner to decrease over time, as explained above. if the
// submenu opens in a different direction, we change our slope
// expectations.
if (options.submenudirection == "left") {
decreasingcorner = lowerleft;
increasingcorner = upperleft;
} else if (options.submenudirection == "below") {
decreasingcorner = lowerright;
increasingcorner = lowerleft;
} else if (options.submenudirection == "above") {
decreasingcorner = upperleft;
increasingcorner = upperright;
}
var decreasingslope = slope(loc, decreasingcorner),
increasingslope = slope(loc, increasingcorner),
prevdecreasingslope = slope(prevloc, decreasingcorner),
previncreasingslope = slope(prevloc, increasingcorner);
if (decreasingslope < prevdecreasingslope &&
increasingslope > previncreasingslope) {
// mouse is moving from previous location towards the
// currently activated submenu. delay before activating a
// new menu row, because user may be moving into submenu.
lastdelayloc = loc;
return delay;
}
lastdelayloc = null;
return 0;
};
/**
* hook up initial menu events
*/
$menu
.mouseleave(mouseleavemenu)
.find(options.rowselector)
.mouseenter(mouseenterrow)
.mouseleave(mouseleaverow);
$(document).mousemove(mousemovedocument);
};
})(jquery);
knockout.js
/*!
* knockout javascript library v3.2.0
* (c) steven sanderson - http://knockoutjs.com/
* license: mit (http://www.opensource.org/licenses/mit-license.php)
*/
(function() {(function(p){var s=this||(0,eval)("this"),v=s.document,l=s.navigator,w=s.jquery,d=s.json;(function(p){"function"===typeof require&&"object"===typeof exports&&"object"===typeof module?p(module.exports||exports,require):"function"===typeof define&&define.amd?define(["exports","require"],p):p(s.ko={})})(function(m,n){function h(a,d){return null===a||typeof a in r?a===d:!1}function s(a,d){var c;return function(){c||(c=settimeout(function(){c=p;a()},d))}}function t(a,d){var c;return function(){cleartimeout(c);
c=settimeout(a,d)}}function i(b,d,c,e){a.d[b]={init:function(b,h,k,f,m){var l,q;a.s(function(){var f=a.a.c(h()),k=!c!==!f,z=!q;if(z||d||k!==l)z&&a.y.la()&&(q=a.a.ia(a.f.childnodes(b),!0)),k?(z||a.f.t(b,a.a.ia(q)),a.ca(e?e(m,f):m,b)):a.f.ja(b),l=k},null,{o:b});return{controlsdescendantbindings:!0}}};a.h.ha[b]=!1;a.f.q[b]=!0}var a="undefined"!==typeof m?m:{};a.b=function(b,d){for(var c=b.split("."),e=a,g=0;g<c.length-1;g++)e=e[c[g]];e[c[c.length-1]]=d};a.a=function(a,d,c){a[d]=c};a.version="3.2.0";
a.b("version",a.version);a.a=function(){function b(a,b){for(var c in a)a.hasownproperty(c)&&b(c,a[c])}function d(a,b){if(b)for(var c in b)b.hasownproperty(c)&&(a[c]=b[c]);return a}function c(a,b){a.__proto__=b;return a}var e={__proto__:[]}instanceof array,g={},h={};g[l&&/firefox\/2/i.test(l.useragent)?"keyboardevent":"uievents"]=["keyup","keydown","keypress"];g.mouseevents="click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave".split(" ");b(g,function(a,b){if(b.length)for(var c=
0,d=b.length;c<d;c++)h[b[c]]=a});var k={propertychange:!0},f=v&&function(){for(var a=3,b=v.createelement("div"),c=b.getelementsbytagname("i");b.innerhtml="\x3c!--[if gt ie "+ ++a+"]><i></i><![endif]--\x3e",c[0];);return 4<a?a:p}();return{vb:["authenticity_token",/^__requestverificationtoken(_.*)?$/],u:function(a,b){for(var c=0,d=a.length;c<d;c++)b(a[c],c)},m:function(a,b){if("function"==typeof array.prototype.indexof)return array.prototype.indexof.call(a,b);for(var c=0,d=a.length;c<d;c++)if(a[c]===
b)return c;return-1},qb:function(a,b,c){for(var d=0,f=a.length;d<f;d++)if(b.call(c,a[d],d))return a[d];return null},ua:function(m,b){var c=a.a.m(m,b);0<c?m.splice(c,1):0===c&&m.shift()},rb:function(m){m=m||[];for(var b=[],c=0,d=m.length;c<d;c++)0>a.a.m(b,m[c])&&b.push(m[c]);return b},da:function(a,b){a=a||[];for(var c=[],d=0,f=a.length;d<f;d++)c.push(b(a[d],d));return c},ta:function(a,b){a=a||[];for(var c=[],d=0,f=a.length;d<f;d++)b(a[d],d)&&c.push(a[d]);return c},ga:function(a,b){if(b instanceof
array)a.push.apply(a,b);else for(var c=0,d=b.length;c<d;c++)a.push(b[c]);return a},ea:function(b,c,d){var f=a.a.m(a.a.xa(b),c);0>f?d&&b.push(c):d||b.splice(f,1)},xa:e,extend:d,za:c,aa:e?c:d,g:b,na:function(a,b){if(!a)return a;var c={},d;for(d in a)a.hasownproperty(d)&&(c[d]=b(a[d],d,a));return c},ka:function(b){for(;b.firstchild;)a.removenode(b.firstchild)},oc:function(b){b=a.a.s(b);for(var c=v.createelement("div"),d=0,f=b.length;d<f;d++)c.appendchild(a.r(b[d]));return c},ia:function(b,c){for(var d=
0,f=b.length,e=[];d<f;d++){var k=b[d].clonenode(!0);e.push(c?a.r(k):k)}return e},t:function(b,c){a.a.ka(b);if(c)for(var d=0,f=c.length;d<f;d++)b.appendchild(c[d])},lb:function(b,c){var d=b.nodetype?[b]:b;if(0<d.length){for(var f=d[0],e=f.parentnode,k=0,g=c.length;k<g;k++)e.insertbefore(c[k],f);k=0;for(g=d.length;k<g;k++)a.removenode(d[k])}},ka:function(a,b){if(a.length){for(b=8===b.nodetype&&b.parentnode||b;a.length&&a[0].parentnode!==b;)a.shift();if(1<a.length){var c=a[0],d=a[a.length-1];for(a.length=
0;c!==d;)if(a.push(c),c=c.nextsibling,!c)return;a.push(d)}}return a},nb:function(a,b){7>f?a.setattribute("selected",b):a.selected=b},cb:function(a){return null===a||a===p?"":a.trim?a.trim():a.tostring().replace(/^[\s\xa0]+|[\s\xa0]+$/g,"")},vc:function(a,b){a=a||"";return b.length>a.length?!1:a.substring(0,b.length)===b},cc:function(a,b){if(a===b)return!0;if(11===a.nodetype)return!1;if(b.contains)return b.contains(3===a.nodetype?a.parentnode:a);if(b.comparedocumentposition)return 16==(b.comparedocumentposition(a)&
16);for(;a&&a!=b;)a=a.parentnode;return!!a},ja:function(b){return a.a.cc(b,b.ownerdocument.documentelement)},ob:function(b){return!!a.a.qb(b,a.a.ja)},t:function(a){return a&&a.tagname&&a.tagname.tolowercase()},n:function(b,c,d){var e=f&&k[c];if(!e&&w)w(b).bind(c,d);else if(e||"function"!=typeof b.addeventlistener)if("undefined"!=typeof b.attachevent){var g=function(a){d.call(b,a)},h="on"+c;b.attachevent(h,g);a.a.w.da(b,function(){b.detachevent(h,g)})}else throw error("browser doesn't support addeventlistener or attachevent");
else b.addeventlistener(c,d,!1)},oa:function(b,c){if(!b||!b.nodetype)throw error("element must be a dom node when calling triggerevent");var d;"input"===a.a.t(b)&&b.type&&"click"==c.tolowercase()?(d=b.type,d="checkbox"==d||"radio"==d):d=!1;if(w&&!d)w(b).trigger(c);else if("function"==typeof v.createevent)if("function"==typeof b.dispatchevent)d=v.createevent(h[c]||"htmlevents"),d.initevent(c,!0,!0,s,0,0,0,0,0,!1,!1,!1,!1,0,b),b.dispatchevent(d);else throw error("the supplied element doesn't support dispatchevent");
else if(d&&b.click)b.click();else if("undefined"!=typeof b.fireevent)b.fireevent("on"+c);else throw error("browser doesn't support triggering events");},c:function(b){return a.c(b)?b():b},xa:function(b){return a.c(b)?b.v():b},ba:function(b,c,d){if(c){var f=/\s+/g,e=b.classname.match(f)||[];a.a.u(c.match(f),function(b){a.a.ea(e,b,d)});b.classname=e.join(" ")}},bb:function(b,c){var d=a.a.c(c);if(null===d||d===p)d="";var f=a.f.firstchild(b);!f||3!=f.nodetype||a.f.nextsibling(f)?a.f.t(b,[b.ownerdocument.createtextnode(d)]):
f.data=d;a.a.fc(b)},mb:function(a,b){a.name=b;if(7>=f)try{a.mergeattributes(v.createelement("<input name='"+a.name+"'/>"),!1)}catch(c){}},fc:function(a){9<=f&&(a=1==a.nodetype?a:a.parentnode,a.style&&(a.style.zoom=a.style.zoom))},dc:function(a){if(f){var b=a.style.width;a.style.width=0;a.style.width=b}},sc:function(b,c){b=a.a.c(b);c=a.a.c(c);for(var d=[],f=b;f<=c;f++)d.push(f);return d},s:function(a){for(var b=[],c=0,d=a.length;c<d;c++)b.push(a[c]);return b},yc:6===f,zc:7===f,l:f,xb:function(b,c){for(var d=
a.a.s(b.getelementsbytagname("input")).concat(a.a.s(b.getelementsbytagname("textarea"))),f="string"==typeof c?function(a){return a.name===c}:function(a){return c.test(a.name)},e=[],k=d.length-1;0<=k;k--)f(d[k])&&e.push(d[k]);return e},pc:function(b){return"string"==typeof b&&(b=a.a.cb(b))?d&&d.parse?d.parse(b):(new function("return "+b))():null},eb:function(b,c,d){if(!d||!d.stringify)throw error("cannot find json.stringify(). some browsers (e.g., ie < 8) don't support it natively, but you can overcome this by adding a script reference to json2.js, downloadable from http://www.json.org/json2.js");
return d.stringify(a.a.c(b),c,d)},qc:function(c,d,f){f=f||{};var e=f.params||{},k=f.includefields||this.vb,g=c;if("object"==typeof c&&"form"===a.a.t(c))for(var g=c.action,h=k.length-1;0<=h;h--)for(var r=a.a.xb(c,k[h]),e=r.length-1;0<=e;e--)e[r[e].name]=r[e].value;d=a.a.c(d);var y=v.createelement("form");y.style.display="none";y.action=g;y.method="post";for(var p in d)c=v.createelement("input"),c.type="hidden",c.name=p,c.value=a.a.eb(a.a.c(d[p])),y.appendchild(c);b(e,function(a,b){var c=v.createelement("input");
c.type="hidden";c.name=a;c.value=b;y.appendchild(c)});v.body.appendchild(y);f.submitter?f.submitter(y):y.submit();settimeout(function(){y.parentnode.removechild(y)},0)}}}();a.b("utils",a.a);a.b("utils.arrayforeach",a.a.u);a.b("utils.arrayfirst",a.a.qb);a.b("utils.arrayfilter",a.a.ta);a.b("utils.arraygetdistinctvalues",a.a.rb);a.b("utils.arrayindexof",a.a.m);a.b("utils.arraymap",a.a.da);a.b("utils.arraypushall",a.a.ga);a.b("utils.arrayremoveitem",a.a.ua);a.b("utils.extend",a.a.extend);a.b("utils.fieldsincludedwithjsonpost",
a.a.vb);a.b("utils.getformfields",a.a.xb);a.b("utils.peekobservable",a.a.xa);a.b("utils.postjson",a.a.qc);a.b("utils.parsejson",a.a.pc);a.b("utils.registereventhandler",a.a.n);a.b("utils.stringifyjson",a.a.eb);a.b("utils.range",a.a.sc);a.b("utils.toggledomnodecssclass",a.a.ba);a.b("utils.triggerevent",a.a.oa);a.b("utils.unwrapobservable",a.a.c);a.b("utils.objectforeach",a.a.g);a.b("utils.addorremoveitem",a.a.ea);a.b("unwrap",a.a.c);function.prototype.bind||(function.prototype.bind=function(a){var d=
this,c=array.prototype.slice.call(arguments);a=c.shift();return function(){return d.apply(a,c.concat(array.prototype.slice.call(arguments)))}});a.a.e=new function(){function a(b,h){var k=b[c];if(!k||"null"===k||!e[k]){if(!h)return p;k=b[c]="ko"+d++;e[k]={}}return e[k]}var d=0,c="__ko__"+(new date).gettime(),e={};return{get:function(c,d){var e=a(c,!1);return e===p?p:e[d]},set:function(c,d,e){if(e!==p||a(c,!1)!==p)a(c,!0)[d]=e},clear:function(a){var b=a[c];return b?(delete e[b],a[c]=null,!0):!1},f:function(){return d++ +
c}}};a.b("utils.domdata",a.a.e);a.b("utils.domdata.clear",a.a.e.clear);a.a.w=new function(){function b(b,d){var f=a.a.e.get(b,c);f===p&&d&&(f=[],a.a.e.set(b,c,f));return f}function d(c){var e=b(c,!1);if(e)for(var e=e.slice(0),f=0;f<e.length;f++)e[f](c);a.a.e.clear(c);a.a.w.cleanexternaldata(c);if(g[c.nodetype])for(e=c.firstchild;c=e;)e=c.nextsibling,8===c.nodetype&&d(c)}var c=a.a.e.f(),e={1:!0,8:!0,9:!0},g={1:!0,9:!0};return{da:function(a,c){if("function"!=typeof c)throw error("callback must be a function");
b(a,!0).push(c)},kb:function(d,e){var f=b(d,!1);f&&(a.a.ua(f,e),0==f.length&&a.a.e.set(d,c,p))},r:function(b){if(e[b.nodetype]&&(d(b),g[b.nodetype])){var c=[];a.a.ga(c,b.getelementsbytagname("*"));for(var f=0,m=c.length;f<m;f++)d(c[f])}return b},removenode:function(b){a.r(b);b.parentnode&&b.parentnode.removechild(b)},cleanexternaldata:function(a){w&&"function"==typeof w.cleandata&&w.cleandata([a])}}};a.r=a.a.w.r;a.removenode=a.a.w.removenode;a.b("cleannode",a.r);a.b("removenode",a.removenode);a.b("utils.domnodedisposal",
a.a.w);a.b("utils.domnodedisposal.adddisposecallback",a.a.w.da);a.b("utils.domnodedisposal.removedisposecallback",a.a.w.kb);(function(){a.a.ba=function(b){var d;if(w)if(w.parsehtml)d=w.parsehtml(b)||[];else{if((d=w.clean([b]))&&d[0]){for(b=d[0];b.parentnode&&11!==b.parentnode.nodetype;)b=b.parentnode;b.parentnode&&b.parentnode.removechild(b)}}else{var c=a.a.cb(b).tolowercase();d=v.createelement("div");c=c.match(/^<(thead|tbody|tfoot)/)&&[1,"<table>","</table>"]||!c.indexof("<tr")&&[2,"<table><tbody>",
"</tbody></table>"]||(!c.indexof("<td")||!c.indexof("<th"))&&[3,"<table><tbody><tr>","</tr></tbody></table>"]||[0,"",""];b="ignored<div>"+c[1]+b+c[2]+"</div>";for("function"==typeof s.innershiv?d.appendchild(s.innershiv(b)):d.innerhtml=b;c[0]--;)d=d.lastchild;d=a.a.s(d.lastchild.childnodes)}return d};a.a.$a=function(b,d){a.a.ka(b);d=a.a.c(d);if(null!==d&&d!==p)if("string"!=typeof d&&(d=d.tostring()),w)w(b).html(d);else for(var c=a.a.ba(d),e=0;e<c.length;e++)b.appendchild(c[e])}})();a.b("utils.parsehtmlfragment",
a.a.ba);a.b("utils.sethtml",a.a.$a);a.d=function(){function b(c,d){if(c)if(8==c.nodetype){var g=a.d.gb(c.nodevalue);null!=g&&d.push({bc:c,mc:g})}else if(1==c.nodetype)for(var g=0,h=c.childnodes,k=h.length;g<k;g++)b(h[g],d)}var d={};return{ua:function(a){if("function"!=typeof a)throw error("you can only pass a function to ko.memoization.memoize()");var b=(4294967296*(1+math.random())|0).tostring(16).substring(1)+(4294967296*(1+math.random())|0).tostring(16).substring(1);d[b]=a;return"\x3c!--[ko_memo:"+
b+"]--\x3e"},rb:function(a,b){var g=d[a];if(g===p)throw error("couldn't find any memo with id "+a+". perhaps it's already been unmemoized.");try{return g.apply(null,b||[]),!0}finally{delete d[a]}},sb:function(c,d){var g=[];b(c,g);for(var h=0,k=g.length;h<k;h++){var f=g[h].bc,m=[f];d&&a.a.ga(m,d);a.d.rb(g[h].mc,m);f.nodevalue="";f.parentnode&&f.parentnode.removechild(f)}},gb:function(a){return(a=a.match(/^\[ko_memo\:(.*?)\]$/))?a[1]:null}}}();a.b("memoization",a.d);a.b("memoization.memoize",a.d.ua);
a.b("memoization.unmemoize",a.d.rb);a.b("memoization.parsememotext",a.d.gb);a.b("memoization.unmemoizedomnodeanddescendants",a.d.sb);a.la={throttle:function(b,d){b.throttleevaluation=d;var c=null;return a.j({read:b,write:function(a){cleartimeout(c);c=settimeout(function(){b(a)},d)}})},ratelimit:function(a,d){var c,e,g;"number"==typeof d?c=d:(c=d.timeout,e=d.method);g="notifywhenchangesstop"==e?t:s;a.ta(function(a){return g(a,c)})},notify:function(a,d){a.equalitycomparer="always"==d?null:h}};var r=
{undefined:1,"boolean":1,number:1,string:1};a.b("extenders",a.la);a.pb=function(b,d,c){this.target=b;this.wa=d;this.ac=c;this.cb=!1;a.a(this,"dispose",this.k)};a.pb.prototype.k=function(){this.cb=!0;this.ac()};a.p=function(){a.a.aa(this,a.p.fn);this.m={}};var g="change",a={u:function(b,d,c){var e=this;c=c||g;var g=new a.pb(e,d?b.bind(d):b,function(){a.a.ua(e.m[c],g);e.nb&&e.nb()});e.va&&e.va(c);e.m[c]||(e.m[c]=[]);e.m[c].push(g);return g},notifysubscribers:function(b,d){d=d||g;if(this.ab(d))try{a.k.ea();
for(var c=this.m[d].slice(0),e=0,g;g=c[e];++e)g.cb||g.wa(b)}finally{a.k.end()}},ta:function(b){var d=this,c=a.c(d),e,g,h;d.qa||(d.qa=d.notifysubscribers,d.notifysubscribers=function(a,b){b&&b!==g?"beforechange"===b?d.kb(a):d.qa(a,b):d.lb(a)});var k=b(function(){c&&h===d&&(h=d());e=!1;d.pa(g,h)&&d.qa(g=h)});d.lb=function(a){e=!0;h=a;k()};d.kb=function(a){e||(g=a,d.qa(a,"beforechange"))}},ab:function(a){return this.m[a]&&this.m[a].length},yb:function(){var b=0;a.a.g(this.m,function(a,c){b+=c.length});
return b},pa:function(a,d){return!this.equalitycomparer||!this.equalitycomparer(a,d)},extend:function(b){var d=this;b&&a.a.g(b,function(b,e){var g=a.la[b];"function"==typeof g&&(d=g(d,e)||d)});return d}};a.a(a,"subscribe",a.u);a.a(a,"extend",a.extend);a.a(a,"getsubscriptionscount",a.yb);a.a.xa&&a.a.za(a,function.prototype);a.p.fn=a;a.db=function(a){return null!=a&&"function"==typeof a.u&&"function"==typeof a.notifysubscribers};a.b("subscribable",a.p);a.b("issubscribable",a.db);a.y=a.k=function(){function b(a){c.push(e);
e=a}function d(){e=c.pop()}var c=[],e,g=0;return{ea:b,end:d,jb:function(b){if(e){if(!a.db(b))throw error("only subscribable things can act as dependencies");e.wa(b,b.vb||(b.vb=++g))}},b:function(a,c,f){try{return b(),a.apply(c,f||[])}finally{d()}},la:function(){if(e)return e.s.la()},ma:function(){if(e)return e.ma}}}();a.b("computedcontext",a.y);a.b("computedcontext.getdependenciescount",a.y.la);a.b("computedcontext.isinitial",a.y.ma);a.b("computedcontext.issleeping",a.y.ac);a.p=function(b){function d(){if(0<
arguments.length)return d.pa(c,arguments[0])&&(d.x(),c=arguments[0],d.w()),this;a.k.jb(d);return c}var c=b;a.p.call(d);a.a.aa(d,a.p.fn);d.v=function(){return c};d.w=function(){d.notifysubscribers(c)};d.x=function(){d.notifysubscribers(c,"beforechange")};a.a(d,"peek",d.v);a.a(d,"valuehasmutated",d.w);a.a(d,"valuewillmutate",d.x);return d};a.p.fn={equalitycomparer:h};var f=a.p.rc="__ko_proto__";a.p.fn[f]=a.p;a.a.xa&&a.a.za(a.p.fn,a.p.fn);a.ma=function(b,d){return null===b||b===p||b[f]===p?!1:b[f]===
d?!0:a.ma(b[f],d)};a.c=function(b){return a.ma(b,a.p)};a.ra=function(b){return"function"==typeof b&&b[f]===a.p||"function"==typeof b&&b[f]===a.j&&b.hc?!0:!1};a.b("observable",a.p);a.b("isobservable",a.c);a.b("iswriteableobservable",a.ra);a.b("iswritableobservable",a.ra);a.aa=function(b){b=b||[];if("object"!=typeof b||!("length"in b))throw error("the argument passed when initializing an observable array must be an array, or null, or undefined.");b=a.p(b);a.a.aa(b,a.aa.fn);return b.extend({trackarraychanges:!0})};
a.aa.fn={remove:function(b){for(var d=this.v(),c=[],e="function"!=typeof b||a.c(b)?function(a){return a===b}:b,g=0;g<d.length;g++){var h=d[g];e(h)&&(0===c.length&&this.x(),c.push(h),d.splice(g,1),g--)}c.length&&this.w();return c},removeall:function(b){if(b===p){var d=this.v(),c=d.slice(0);this.x();d.splice(0,d.length);this.w();return c}return b?this.remove(function(c){return 0<=a.a.m(b,c)}):[]},destroy:function(b){var d=this.v(),c="function"!=typeof b||a.c(b)?function(a){return a===b}:b;this.x();
for(var e=d.length-1;0<=e;e--)c(d[e])&&(d[e]._destroy=!0);this.w()},destroyall:function(b){return b===p?this.destroy(function(){return!0}):b?this.destroy(function(d){return 0<=a.a.m(b,d)}):[]},indexof:function(b){var d=this();return a.a.m(d,b)},replace:function(a,d){var c=this.indexof(a);0<=c&&(this.x(),this.v()[c]=d,this.w())}};a.a.u("pop push reverse shift sort splice unshift".split(" "),function(b){a.aa.fn[b]=function(){var a=this.v();this.x();this.sb(a,b,arguments);a=a[b].apply(a,arguments);this.w();
return a}});a.a.u(["slice"],function(b){a.aa.fn[b]=function(){var a=this();return a[b].apply(a,arguments)}});a.a.xa&&a.a.za(a.aa.fn,a.p.fn);a.b("observablearray",a.aa);var j="arraychange";a.la.trackarraychanges=function(b){function d(){if(!c){c=!0;var d=b.notifysubscribers;b.notifysubscribers=function(a,b){b&&b!==g||++g;return d.apply(this,arguments)};var f=[].concat(b.v()||[]);e=null;b.u(function(c){c=[].concat(c||[]);if(b.ab(j)){var d;if(!e||1<g)e=a.a.fa(f,c,{sparse:!0});d=e;d.length&&b.notifysubscribers(d,
j)}f=c;e=null;g=0})}}if(!b.sb){var c=!1,e=null,g=0,h=b.u;b.u=b.subscribe=function(a,b,c){c===j&&d();return h.apply(this,arguments)};b.sb=function(b,d,m){function l(a,b,c){return q[q.length]={status:a,value:b,index:c}}if(c&&!g){var q=[],h=b.length,t=m.length,z=0;switch(d){case "push":z=h;case "unshift":for(d=0;d<t;d++)l("added",m[d],z+d);break;case "pop":z=h-1;case "shift":h&&l("deleted",b[z],z);break;case "splice":d=math.min(math.max(0,0>m[0]?h+m[0]:m[0]),h);for(var h=1===t?h:math.min(d+(m[1]||0),
h),t=d+t-2,z=math.max(h,t),u=[],r=[],e=2;d<z;++d,++e)d<h&&r.push(l("deleted",b[d],d)),d<t&&u.push(l("added",m[e],d));a.a.wb(r,u);break;default:return}e=q}}}};a.s=a.j=function(b,d,c){function e(){a.a.g(v,function(a,b){b.k()});v={}}function g(){e();c=0;u=!0;n=!1}function h(){var a=f.throttleevaluation;a&&0<=a?(cleartimeout(p),p=settimeout(k,a)):f.ib?f.ib():k()}function k(b){if(t){if(e)throw error("a 'pure' computed must not be called recursively");}else if(!u){if(w&&w()){if(!z){s();return}}else z=!1;
t=!0;if(y)try{var c={};a.k.ea({wa:function(a,b){c[b]||(c[b]=1,++c)},s:f,ma:p});c=0;q=r.call(d)}finally{a.k.end(),t=!1}else try{var e=v,m=c;a.k.ea({wa:function(a,b){u||(m&&e[b]?(v[b]=e[b],++c,delete e[b],--m):v[b]||(v[b]=a.u(h),++c))},s:f,ma:e?p:!c});v={};c=0;try{var l=d?r.call(d):r()}finally{a.k.end(),m&&a.a.g(e,function(a,b){b.k()}),n=!1}f.pa(q,l)&&(f.notifysubscribers(q,"beforechange"),q=l,!0!==b&&f.notifysubscribers(q))}finally{t=!1}c||s()}}function f(){if(0<arguments.length){if("function"===typeof o)o.apply(d,
arguments);else throw error("cannot write a value to a ko.computed unless you specify a 'write' option. if you wish to read the current value, don't pass any parameters.");return this}a.k.jb(f);n&&k(!0);return q}function m(){n&&!c&&k(!0);return q}function l(){return n||0<c}var q,n=!0,t=!1,z=!1,u=!1,r=b,e=!1,y=!1;r&&"object"==typeof r?(c=r,r=c.read):(c=c||{},r||(r=c.read));if("function"!=typeof r)throw error("pass a function that returns the value of the ko.computed");var o=c.write,x=c.disposewhennodeisremoved||
c.o||null,b=c.disposewhen||c.ia,w=b,s=g,v={},c=0,p=null;d||(d=c.owner);a.p.call(f);a.a.aa(f,a.j.fn);f.v=m;f.la=function(){return c};f.hc="function"===typeof c.write;f.k=function(){s()};f.z=l;var a=f.ta;f.ta=function(a){a.call(f,a);f.ib=function(){f.kb(q);n=!0;f.lb(f)}};c.pure?(y=e=!0,f.va=function(){y&&(y=!1,k(!0))},f.nb=function(){f.yb()||(e(),y=n=!0)}):c.deferevaluation&&(f.va=function(){m();delete f.va});a.a(f,"peek",f.v);a.a(f,"dispose",f.k);a.a(f,"isactive",f.z);a.a(f,"getdependenciescount",
f.la);x&&(z=!0,x.nodetype&&(w=function(){return!a.a.ja(x)||b&&b()}));y||c.deferevaluation||k();x&&l()&&x.nodetype&&(s=function(){a.a.w.kb(x,s);g()},a.a.w.da(x,s));return f};a.jc=function(b){return a.ma(b,a.j)};a=a.p.rc;a.j[a]=a.p;a.j.fn={equalitycomparer:h};a.j.fn[a]=a.j;a.a.xa&&a.a.za(a.j.fn,a.p.fn);a.b("dependentobservable",a.j);a.b("computed",a.j);a.b("iscomputed",a.jc);a.ib=function(b,d){if("function"===typeof b)return a.s(b,d,{pure:!0});b=a.a.extend({},b);b.pure=!0;return a.s(b,d)};a.b("purecomputed",
a.ib);(function(){function b(a,g,h){h=h||new c;a=g(a);if("object"!=typeof a||null===a||a===p||a instanceof date||a instanceof string||a instanceof number||a instanceof boolean)return a;var k=a instanceof array?[]:{};h.save(a,k);d(a,function(c){var d=g(a[c]);switch(typeof d){case "boolean":case "number":case "string":case "function":k[c]=d;break;case "object":case "undefined":var l=h.get(d);k[c]=l!==p?l:b(d,g,h)}});return k}function d(a,b){if(a instanceof array){for(var c=0;c<a.length;c++)b(c);"function"==
typeof a.tojson&&b("tojson")}else for(c in a)b(c)}function c(){this.keys=[];this.hb=[]}a.qb=function(c){if(0==arguments.length)throw error("when calling ko.tojs, pass the object you want to convert.");return b(c,function(b){for(var c=0;a.c(b)&&10>c;c++)b=b();return b})};a.tojson=function(b,c,d){b=a.qb(b);return a.a.eb(b,c,d)};c.prototype={save:function(b,c){var d=a.a.m(this.keys,b);0<=d?this.hb[d]=c:(this.keys.push(b),this.hb.push(c))},get:function(b){b=a.a.m(this.keys,b);return 0<=b?this.hb[b]:p}}})();
a.b("tojs",a.qb);a.b("tojson",a.tojson);(function(){a.i={q:function(b){switch(a.a.t(b)){case "option":return!0===b.__ko__hasdomdataoptionvalue__?a.a.e.get(b,a.d.options.va):7>=a.a.l?b.getattributenode("value")&&b.getattributenode("value").specified?b.value:b.text:b.value;case "select":return 0<=b.selectedindex?a.i.q(b.options[b.selectedindex]):p;default:return b.value}},ca:function(b,d,c){switch(a.a.t(b)){case "option":switch(typeof d){case "string":a.a.e.set(b,a.d.options.va,p);"__ko__hasdomdataoptionvalue__"in
b&&delete b.__ko__hasdomdataoptionvalue__;b.value=d;break;default:a.a.e.set(b,a.d.options.va,d),b.__ko__hasdomdataoptionvalue__=!0,b.value="number"===typeof d?d:""}break;case "select":if(""===d||null===d)d=p;for(var e=-1,g=0,h=b.options.length,k;g<h;++g)if(k=a.i.q(b.options[g]),k==d||""==k&&d===p){e=g;break}if(c||0<=e||d===p&&1<b.size)b.selectedindex=e;break;default:if(null===d||d===p)d="";b.value=d}}}})();a.b("selectextensions",a.i);a.b("selectextensions.readvalue",a.i.q);a.b("selectextensions.writevalue",
a.i.ca);a.h=function(){function b(b){b=a.a.cb(b);123===b.charcodeat(0)&&(b=b.slice(1,-1));var c=[],d=b.match(e),k,n,t=0;if(d){d.push(",");for(var z=0,u;u=d[z];++z){var r=u.charcodeat(0);if(44===r){if(0>=t){k&&c.push(n?{key:k,value:n.join("")}:{unknown:k});k=n=t=0;continue}}else if(58===r){if(!n)continue}else if(47===r&&z&&1<u.length)(r=d[z-1].match(g))&&!h[r[0]]&&(b=b.substr(b.indexof(u)+1),d=b.match(e),d.push(","),z=-1,u="/");else if(40===r||123===r||91===r)++t;else if(41===r||125===r||93===r)--t;
else if(!k&&!n){k=34===r||39===r?u.slice(1,-1):u;continue}n?n.push(u):n=[u]}}return c}var d=["true","false","null","undefined"],c=/^(?:[$_a-z][$\w]*|(.+)(\.\s*[$_a-z][$\w]*|\[.+\]))$/i,e=regexp("\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'|/(?:[^/\\\\]|\\\\.)*/w*|[^\\s:,/][^,\"'{}()/:[\\]]*[^\\s,\"'{}()/:[\\]]|[^\\s]","g"),g=/[\])"'a-za-z0-9_$]+$/,h={"in":1,"return":1,"typeof":1},k={};return{ha:[],v:k,wa:b,ya:function(f,m){function e(b,m){var f;if(!z){var u=a.getbindinghandler(b);if(u&&u.preprocess&&
!(m=u.preprocess(m,b,e)))return;if(u=k[b])f=m,0<=a.a.m(d,f)?f=!1:(u=f.match(c),f=null===u?!1:u[1]?"object("+u[1]+")"+u[2]:f),u=f;u&&h.push("'"+b+"':function(_z){"+f+"=_z}")}t&&(m="function(){return "+m+" }");g.push("'"+b+"':"+m)}m=m||{};var g=[],h=[],t=m.valueaccessors,z=m.bindingparams,u="string"===typeof f?b(f):f;a.a.u(u,function(a){e(a.key||a.unknown,a.value)});h.length&&e("_ko_property_writers","{"+h.join(",")+" }");return g.join(",")},lc:function(a,b){for(var c=0;c<a.length;c++)if(a[c].key==
b)return!0;return!1},pa:function(b,c,d,e,k){if(b&&a.c(b))!a.ra(b)||k&&b.v()===e||b(e);else if((b=c.get("_ko_property_writers"))&&b[d])b[d](e)}}}();a.b("expressionrewriting",a.h);a.b("expressionrewriting.bindingrewritevalidators",a.h.ha);a.b("expressionrewriting.parseobjectliteral",a.h.wa);a.b("expressionrewriting.preprocessbindings",a.h.ya);a.b("expressionrewriting._twowaybindings",a.h.v);a.b("jsonexpressionrewriting",a.h);a.b("jsonexpressionrewriting.insertpropertyaccessorsintojson",a.h.ya);(function(){function b(a){return 8==
a.nodetype&&h.test(g?a.text:a.nodevalue)}function d(a){return 8==a.nodetype&&k.test(g?a.text:a.nodevalue)}function c(a,c){for(var f=a,e=1,k=[];f=f.nextsibling;){if(d(f)&&(e--,0===e))return k;k.push(f);b(f)&&e++}if(!c)throw error("cannot find closing comment tag to match: "+a.nodevalue);return null}function e(a,b){var d=c(a,b);return d?0<d.length?d[d.length-1].nextsibling:a.nextsibling:null}var g=v&&"\x3c!--test--\x3e"===v.createcomment("test").text,h=g?/^\x3c!--\s*ko(?:\s+([\s\s]+))?\s*--\x3e$/:/^\s*ko(?:\s+([\s\s]+))?\s*$/,
k=g?/^\x3c!--\s*\/ko\s*--\x3e$/:/^\s*\/ko\s*$/,f={ul:!0,ol:!0};a.f={q:{},childnodes:function(a){return b(a)?c(a):a.childnodes},ja:function(c){if(b(c)){c=a.f.childnodes(c);for(var d=0,f=c.length;d<f;d++)a.removenode(c[d])}else a.a.ka(c)},t:function(c,d){if(b(c)){a.f.ja(c);for(var f=c.nextsibling,e=0,k=d.length;e<k;e++)f.parentnode.insertbefore(d[e],f)}else a.a.t(c,d)},hb:function(a,c){b(a)?a.parentnode.insertbefore(c,a.nextsibling):a.firstchild?a.insertbefore(c,a.firstchild):a.appendchild(c)},bb:function(c,
d,f){f?b(c)?c.parentnode.insertbefore(d,f.nextsibling):f.nextsibling?c.insertbefore(d,f.nextsibling):c.appendchild(d):a.f.hb(c,d)},firstchild:function(a){return b(a)?!a.nextsibling||d(a.nextsibling)?null:a.nextsibling:a.firstchild},nextsibling:function(a){b(a)&&(a=e(a));return a.nextsibling&&d(a.nextsibling)?null:a.nextsibling},gc:b,xc:function(a){return(a=(g?a.text:a.nodevalue).match(h))?a[1]:null},fb:function(c){if(f[a.a.t(c)]){var k=c.firstchild;if(k){do if(1===k.nodetype){var g;g=k.firstchild;
var h=null;if(g){do if(h)h.push(g);else if(b(g)){var t=e(g,!0);t?g=t:h=[g]}else d(g)&&(h=[g]);while(g=g.nextsibling)}if(g=h)for(h=k.nextsibling,t=0;t<g.length;t++)h?c.insertbefore(g[t],h):c.appendchild(g[t])}while(k=k.nextsibling)}}}}})();a.b("virtualelements",a.f);a.b("virtualelements.allowedbindings",a.f.q);a.b("virtualelements.emptynode",a.f.ja);a.b("virtualelements.insertafter",a.f.bb);a.b("virtualelements.prepend",a.f.hb);a.b("virtualelements.setdomnodechildren",a.f.t);(function(){a.j=function(){this.yb=
{}};a.a.extend(a.j.prototype,{nodehasbindings:function(b){switch(b.nodetype){case 1:return null!=b.getattribute("data-bind")||a.g.getcomponentnamefornode(b);case 8:return a.f.gc(b);default:return!1}},getbindings:function(b,d){var c=this.getbindingsstring(b,d),c=c?this.parsebindingsstring(c,d,b):null;return a.g.mb(c,b,d,!1)},getbindingaccessors:function(b,d){var c=this.getbindingsstring(b,d),c=c?this.parsebindingsstring(c,d,b,{valueaccessors:!0}):null;return a.g.mb(c,b,d,!0)},getbindingsstring:function(b){switch(b.nodetype){case 1:return b.getattribute("data-bind");
case 8:return a.f.xc(b);default:return null}},parsebindingsstring:function(b,d,c,e){try{var g=this.yb,h=b+(e&&e.valueaccessors||""),k;if(!(k=g[h])){var f,m="with($context){with($data||{}){return{"+a.h.ya(b,e)+"}}}";f=new function("$context","$element",m);k=g[h]=f}return k(d,c)}catch(l){throw l.message="unable to parse bindings.\nbindings value: "+b+"\nmessage: "+l.message,l;}}});a.j.instance=new a.j})();a.b("bindingprovider",a.j);(function(){function b(a){return function(){return a}}function d(a){return a()}
function c(b){return a.a.na(a.k.b(b),function(a,c){return function(){return b()[c]}})}function e(a,b){return c(this.getbindings.bind(this,a,b))}function g(b,c,d){var f,e=a.f.firstchild(c),k=a.j.instance,g=k.preprocessnode;if(g){for(;f=e;)e=a.f.nextsibling(f),g.call(k,f);e=a.f.firstchild(c)}for(;f=e;)e=a.f.nextsibling(f),h(b,f,d)}function h(b,c,d){var e=!0,k=1===c.nodetype;k&&a.f.fb(c);if(k&&d||a.j.instance.nodehasbindings(c))e=f(c,null,b,d).shouldbinddescendants;e&&!l[a.a.t(c)]&&g(b,c,!k)}function k(b){var c=
[],d={},f=[];a.a.g(b,function y(e){if(!d[e]){var k=a.getbindinghandler(e);k&&(k.after&&(f.push(e),a.a.u(k.after,function(c){if(b[c]){if(-1!==a.a.m(f,c))throw error("cannot combine the following bindings, because they have a cyclic dependency: "+f.join(", "));y(c)}}),f.length--),c.push({key:e,zb:k}));d[e]=!0}});return c}function f(b,c,f,g){var m=a.a.e.get(b,q);if(!c){if(m)throw error("you cannot apply bindings multiple times to the same element.");a.a.e.set(b,q,!0)}!m&&g&&a.ob(b,f);var l;if(c&&"function"!==
typeof c)l=c;else{var h=a.j.instance,n=h.getbindingaccessors||e,s=a.j(function(){(l=c?c(f,b):n.call(h,b,f))&&f.i&&f.i();return l},null,{o:b});l&&s.z()||(s=null)}var v;if(l){var w=s?function(a){return function(){return d(s()[a])}}:function(a){return l[a]},a=function(){return a.a.na(s?s():l,d)};a.get=function(a){return l[a]&&d(w(a))};a.has=function(a){return a in l};g=k(l);a.a.u(g,function(c){var d=c.zb.init,e=c.zb.update,k=c.key;if(8===b.nodetype&&!a.f.q[k])throw error("the binding '"+k+"' cannot be used with virtual elements");
try{"function"==typeof d&&a.k.b(function(){var a=d(b,w(k),a,f.$data,f);if(a&&a.controlsdescendantbindings){if(v!==p)throw error("multiple bindings ("+v+" and "+k+") are trying to control descendant bindings of the same element. you cannot use these bindings together on the same element.");v=k}}),"function"==typeof e&&a.j(function(){e(b,w(k),a,f.$data,f)},null,{o:b})}catch(g){throw g.message='unable to process binding "'+k+": "+l[k]+'"\nmessage: '+g.message,g;}})}return{shouldbinddescendants:v===p}}
function m(b){return b&&b instanceof a.n?b:new a.n(b)}a.d={};var l={script:!0};a.getbindinghandler=function(b){return a.d[b]};a.n=function(b,c,d,f){var e=this,k="function"==typeof b&&!a.c(b),g,m=a.j(function(){var g=k?b():b,l=a.a.c(g);c?(c.i&&c.i(),a.a.extend(e,c),m&&(e.i=m)):(e.$parents=[],e.$root=l,e.ko=a);e.$rawdata=g;e.$data=l;d&&(e[d]=l);f&&f(e,c,l);return e.$data},null,{ia:function(){return g&&!a.a.ob(g)},o:!0});m.z()&&(e.i=m,m.equalitycomparer=null,g=[],m.tb=function(b){g.push(b);a.a.w.da(b,
function(b){a.a.ua(g,b);g.length||(m.k(),e.i=m=p)})})};a.n.prototype.createchildcontext=function(b,c,d){return new a.n(b,this,c,function(a,b){a.$parentcontext=b;a.$parent=b.$data;a.$parents=(b.$parents||[]).slice(0);a.$parents.unshift(a.$parent);d&&d(a)})};a.n.prototype.extend=function(b){return new a.n(this.i||this.$data,this,null,function(c,d){c.$rawdata=d.$rawdata;a.a.extend(c,"function"==typeof b?b():b)})};var q=a.a.e.f(),n=a.a.e.f();a.ob=function(b,c){if(2==arguments.length)a.a.e.set(b,n,c),
c.i&&c.i.tb(b);else return a.a.e.get(b,n)};a.ra=function(b,c,d){1===b.nodetype&&a.f.fb(b);return f(b,c,m(d),!0)};a.wb=function(d,f,e){e=m(e);return a.ra(d,"function"===typeof f?c(f.bind(null,e,d)):a.a.na(f,b),e)};a.ca=function(a,b){1!==b.nodetype&&8!==b.nodetype||g(m(a),b,!0)};a.pb=function(a,b){!w&&s.jquery&&(w=s.jquery);if(b&&1!==b.nodetype&&8!==b.nodetype)throw error("ko.applybindings: first parameter should be your view model; second parameter should be a dom node");b=b||s.document.body;h(m(a),
b,!0)};a.ha=function(b){switch(b.nodetype){case 1:case 8:var c=a.ob(b);if(c)return c;if(b.parentnode)return a.ha(b.parentnode)}return p};a.$b=function(b){return(b=a.ha(b))?b.$data:p};a.b("bindinghandlers",a.d);a.b("applybindings",a.pb);a.b("applybindingstodescendants",a.ca);a.b("applybindingaccessorstonode",a.ra);a.b("applybindingstonode",a.wb);a.b("contextfor",a.ha);a.b("datafor",a.$b)})();(function(b){function d(d,f){var e=g.hasownproperty(d)?g[d]:b,l;e||(e=g[d]=new a.p,c(d,function(a){h[d]=a;delete g[d];
l?e.notifysubscribers(a):settimeout(function(){e.notifysubscribers(a)},0)}),l=!0);e.u(f)}function c(a,b){e("getconfig",[a],function(c){c?e("loadcomponent",[a,c],function(a){b(a)}):b(null)})}function e(c,d,g,l){l||(l=a.g.loaders.slice(0));var h=l.shift();if(h){var n=h[c];if(n){var t=!1;if(n.apply(h,d.concat(function(a){t?g(null):null!==a?g(a):e(c,d,g,l)}))!==b&&(t=!0,!h.suppressloaderexceptions))throw error("component loaders must supply values by invoking the callback, not by returning values synchronously.");
}else e(c,d,g,l)}else g(null)}var g={},h={};a.g={get:function(a,c){var e=h.hasownproperty(a)?h[a]:b;e?settimeout(function(){c(e)},0):d(a,c)},tb:function(a){delete h[a]},jb:e};a.g.loaders=[];a.b("components",a.g);a.b("components.get",a.g.get);a.b("components.clearcacheddefinition",a.g.tb)})();(function(){function b(b,c,d,e){function k(){0===--u&&e(h)}var h={},u=2,r=d.template;d=d.viewmodel;r?g(c,r,function(c){a.g.jb("loadtemplate",[b,c],function(a){h.template=a;k()})}):k();d?g(c,d,function(c){a.g.jb("loadviewmodel",
[b,c],function(a){h[f]=a;k()})}):k()}function d(a,b,c){if("function"===typeof b)c(function(a){return new b(a)});else if("function"===typeof b[f])c(b[f]);else if("instance"in b){var e=b.instance;c(function(){return e})}else"viewmodel"in b?d(a,b.viewmodel,c):a("unknown viewmodel value: "+b)}function c(b){switch(a.a.t(b)){case "script":return a.a.ba(b.text);case "textarea":return a.a.ba(b.value);case "template":if(e(b.content))return a.a.ia(b.content.childnodes)}return a.a.ia(b.childnodes)}function e(a){return s.documentfragment?
a instanceof documentfragment:a&&11===a.nodetype}function g(a,b,c){"string"===typeof b.require?n||s.require?(n||s.require)([b.require],c):a("uses require, but no amd loader is present"):c(b)}function h(a){return function(b){throw error("component '"+a+"': "+b);}}var k={};a.g.tc=function(b,c){if(!c)throw error("invalid configuration for "+b);if(a.g.qa(b))throw error("component "+b+" is already registered");k[b]=c};a.g.qa=function(a){return a in k};a.g.wc=function(b){delete k[b];a.g.tb(b)};a.g.ub={getconfig:function(a,
b){b(k.hasownproperty(a)?k[a]:null)},loadcomponent:function(a,c,d){var e=h(a);g(e,c,function(c){b(a,e,c,d)})},loadtemplate:function(b,d,f){b=h(b);if("string"===typeof d)f(a.a.ba(d));else if(d instanceof array)f(d);else if(e(d))f(a.a.s(d.childnodes));else if(d.element)if(d=d.element,s.htmlelement?d instanceof htmlelement:d&&d.tagname&&1===d.nodetype)f(c(d));else if("string"===typeof d){var k=v.getelementbyid(d);k?f(c(k)):b("cannot find element with id "+d)}else b("unknown element type: "+d);else b("unknown template value: "+
d)},loadviewmodel:function(a,b,c){d(h(a),b,c)}};var f="createviewmodel";a.b("components.register",a.g.tc);a.b("components.isregistered",a.g.qa);a.b("components.unregister",a.g.wc);a.b("components.defaultloader",a.g.ub);a.g.loaders.push(a.g.ub);a.g.ub=k})();(function(){function b(b,e){var g=b.getattribute("params");if(g){var g=d.parsebindingsstring(g,e,b,{valueaccessors:!0,bindingparams:!0}),g=a.a.na(g,function(d){return a.s(d,null,{o:b})}),h=a.a.na(g,function(d){return d.z()?a.s(function(){return a.a.c(d())},
null,{o:b}):d.v()});h.hasownproperty("$raw")||(h.$raw=g);return h}return{$raw:{}}}a.g.getcomponentnamefornode=function(b){b=a.a.t(b);return a.g.qa(b)&&b};a.g.mb=function(c,d,g,h){if(1===d.nodetype){var k=a.g.getcomponentnamefornode(d);if(k){c=c||{};if(c.component)throw error('cannot use the "component" binding on a custom element matching a component');var f={name:k,params:b(d,g)};c.component=h?function(){return f}:f}}return c};var d=new a.j;9>a.a.l&&(a.g.register=function(a){return function(b){v.createelement(b);
return a.apply(this,arguments)}}(a.g.register),v.createdocumentfragment=function(b){return function(){var d=b(),g=a.g.ub,h;for(h in g)g.hasownproperty(h)&&d.createelement(h);return d}}(v.createdocumentfragment))})();(function(){var b=0;a.d.component={init:function(d,c,e,g,h){function k(){var a=f&&f.dispose;"function"===typeof a&&a.call(f);m=null}var f,m;a.a.w.da(d,k);a.s(function(){var e=a.a.c(c()),g,n;"string"===typeof e?g=e:(g=a.a.c(e.name),n=a.a.c(e.params));if(!g)throw error("no component name specified");
var t=m=++b;a.g.get(g,function(b){if(m===t){k();if(!b)throw error("unknown component '"+g+"'");var c=b.template;if(!c)throw error("component '"+g+"' has no template");c=a.a.ia(c);a.f.t(d,c);var c=n,e=b.createviewmodel;b=e?e.call(b,c,{element:d}):c;c=h.createchildcontext(b);f=b;a.ca(c,d)}})},null,{o:d});return{controlsdescendantbindings:!0}}};a.f.q.component=!0})();var q={"class":"classname","for":"htmlfor"};a.d.attr={update:function(b,d){var c=a.a.c(d())||{};a.a.g(c,function(c,d){d=a.a.c(d);var h=
!1===d||null===d||d===p;h&&b.removeattribute(c);8>=a.a.l&&c in q?(c=q[c],h?b.removeattribute(c):b[c]=d):h||b.setattribute(c,d.tostring());"name"===c&&a.a.mb(b,h?"":d.tostring())})}};(function(){a.d.checked={after:["value","attr"],init:function(b,d,c){function e(){var e=b.checked,k=q?h():e;if(!a.y.ma()&&(!f||e)){var g=a.k.b(d);m?l!==k?(e&&(a.a.ea(g,k,!0),a.a.ea(g,l,!1)),l=k):a.a.ea(g,k,e):a.h.pa(g,c,"checked",k,!0)}}function g(){var c=a.a.c(d());b.checked=m?0<=a.a.m(c,h()):k?c:h()===c}var h=a.ib(function(){return c.has("checkedvalue")?
a.a.c(c.get("checkedvalue")):c.has("value")?a.a.c(c.get("value")):b.value}),k="checkbox"==b.type,f="radio"==b.type;if(k||f){var m=k&&a.a.c(d())instanceof array,l=m?h():p,q=f||m;f&&!b.name&&a.d.uniquename.init(b,function(){return!0});a.s(e,null,{o:b});a.a.n(b,"click",e);a.s(g,null,{o:b})}}};a.h.v.checked=!0;a.d.checkedvalue={update:function(b,d){b.value=a.a.c(d())}}})();a.d.css={update:function(b,d){var c=a.a.c(d());"object"==typeof c?a.a.g(c,function(c,d){d=a.a.c(d);a.a.ba(b,c,d)}):(c=string(c||""),
a.a.ba(b,b.__ko__cssvalue,!1),b.__ko__cssvalue=c,a.a.ba(b,c,!0))}};a.d.enable={update:function(b,d){var c=a.a.c(d());c&&b.disabled?b.removeattribute("disabled"):c||b.disabled||(b.disabled=!0)}};a.d.disable={update:function(b,d){a.d.enable.update(b,function(){return!a.a.c(d())})}};a.d.event={init:function(b,d,c,e,g){var h=d()||{};a.a.g(h,function(k){"string"==typeof k&&a.a.n(b,k,function(b){var h,l=d()[k];if(l){try{var q=a.a.s(arguments);e=g.$data;q.unshift(e);h=l.apply(e,q)}finally{!0!==h&&(b.preventdefault?
b.preventdefault():b.returnvalue=!1)}!1===c.get(k+"bubble")&&(b.cancelbubble=!0,b.stoppropagation&&b.stoppropagation())}})})}};a.d.foreach={eb:function(b){return function(){var d=b(),c=a.a.xa(d);if(!c||"number"==typeof c.length)return{foreach:d,templateengine:a.o.oa};a.a.c(d);return{foreach:c.data,as:c.as,includedestroyed:c.includedestroyed,afteradd:c.afteradd,beforeremove:c.beforeremove,afterrender:c.afterrender,beforemove:c.beforemove,aftermove:c.aftermove,templateengine:a.o.oa}}},init:function(b,
d){return a.d.template.init(b,a.d.foreach.eb(d))},update:function(b,d,c,e,g){return a.d.template.update(b,a.d.foreach.eb(d),c,e,g)}};a.h.ha.foreach=!1;a.f.q.foreach=!0;a.d.hasfocus={init:function(b,d,c){function e(e){b.__ko_hasfocusupdating=!0;var f=b.ownerdocument;if("activeelement"in f){var g;try{g=f.activeelement}catch(h){g=f.body}e=g===b}f=d();a.h.pa(f,c,"hasfocus",e,!0);b.__ko_hasfocuslastvalue=e;b.__ko_hasfocusupdating=!1}var g=e.bind(null,!0),h=e.bind(null,!1);a.a.n(b,"focus",g);a.a.n(b,"focusin",
g);a.a.n(b,"blur",h);a.a.n(b,"focusout",h)},update:function(b,d){var c=!!a.a.c(d());b.__ko_hasfocusupdating||b.__ko_hasfocuslastvalue===c||(c?b.focus():b.blur(),a.k.b(a.a.oa,null,[b,c?"focusin":"focusout"]))}};a.h.v.hasfocus=!0;a.d.hasfocus=a.d.hasfocus;a.h.v.hasfocus=!0;a.d.html={init:function(){return{controlsdescendantbindings:!0}},update:function(b,d){a.a.$a(b,d())}};i("if");i("ifnot",!1,!0);i("with",!0,!1,function(a,d){return a.createchildcontext(d)});var k={};a.d.options={init:function(b){if("select"!==
a.a.t(b))throw error("options binding applies only to select elements");for(;0<b.length;)b.remove(0);return{controlsdescendantbindings:!0}},update:function(b,d,c){function e(){return a.a.ta(b.options,function(a){return a.selected})}function g(a,b,c){var d=typeof b;return"function"==d?b(a):"string"==d?a[b]:c}function h(c,d){if(q.length){var e=0<=a.a.m(q,a.i.q(d[0]));a.a.nb(d[0],e);n&&!e&&a.k.b(a.a.oa,null,[b,"change"])}}var k=0!=b.length&&b.multiple?b.scrolltop:null,f=a.a.c(d()),m=c.get("optionsincludedestroyed");
d={};var l,q;q=b.multiple?a.a.da(e(),a.i.q):0<=b.selectedindex?[a.i.q(b.options[b.selectedindex])]:[];f&&("undefined"==typeof f.length&&(f=[f]),l=a.a.ta(f,function(b){return m||b===p||null===b||!a.a.c(b._destroy)}),c.has("optionscaption")&&(f=a.a.c(c.get("optionscaption")),null!==f&&f!==p&&l.unshift(k)));var n=!1;d.beforeremove=function(a){b.removechild(a)};f=h;c.has("optionsafterrender")&&(f=function(b,d){h(0,d);a.k.b(c.get("optionsafterrender"),null,[d[0],b!==k?b:p])});a.a.za(b,l,function(d,e,f){f.length&&
(q=f[0].selected?[a.i.q(f[0])]:[],n=!0);e=b.ownerdocument.createelement("option");d===k?(a.a.bb(e,c.get("optionscaption")),a.i.ca(e,p)):(f=g(d,c.get("optionsvalue"),d),a.i.ca(e,a.a.c(f)),d=g(d,c.get("optionstext"),f),a.a.bb(e,d));return[e]},d,f);a.k.b(function(){c.get("valueallowunset")&&c.has("value")?a.i.ca(b,a.a.c(c.get("value")),!0):(b.multiple?q.length&&e().length<q.length:q.length&&0<=b.selectedindex?a.i.q(b.options[b.selectedindex])!==q[0]:q.length||0<=b.selectedindex)&&a.a.oa(b,"change")});
a.a.dc(b);k&&20<math.abs(k-b.scrolltop)&&(b.scrolltop=k)}};a.d.options.va=a.a.e.f();a.d.selectedoptions={after:["options","foreach"],init:function(b,d,c){a.a.n(b,"change",function(){var e=d(),g=[];a.a.u(b.getelementsbytagname("option"),function(b){b.selected&&g.push(a.i.q(b))});a.h.pa(e,c,"selectedoptions",g)})},update:function(b,d){if("select"!=a.a.t(b))throw error("values binding applies only to select elements");var c=a.a.c(d());c&&"number"==typeof c.length&&a.a.u(b.getelementsbytagname("option"),
function(b){var d=0<=a.a.m(c,a.i.q(b));a.a.nb(b,d)})}};a.h.v.selectedoptions=!0;a.d.style={update:function(b,d){var c=a.a.c(d()||{});a.a.g(c,function(c,d){d=a.a.c(d);if(null===d||d===p||!1===d)d="";b.style[c]=d})}};a.d.submit={init:function(b,d,c,e,g){if("function"!=typeof d())throw error("the value for a submit binding must be a function");a.a.n(b,"submit",function(a){var c,e=d();try{c=e.call(g.$data,b)}finally{!0!==c&&(a.preventdefault?a.preventdefault():a.returnvalue=!1)}})}};a.d.text={init:function(){return{controlsdescendantbindings:!0}},
update:function(b,d){a.a.bb(b,d())}};a.f.q.text=!0;(function(){if(s&&s.navigator)var b=function(a){if(a)return parsefloat(a[1])},d=s.opera&&s.opera.version&&parseint(s.opera.version()),c=s.navigator.useragent,e=b(c.match(/^(?:(?!chrome).)*version\/([^ ]*) safari/i)),g=b(c.match(/firefox\/([^ ]*)/));if(10>a.a.l)var h=a.a.e.f(),k=a.a.e.f(),f=function(b){var c=this.activeelement;(c=c&&a.a.e.get(c,k))&&c(b)},m=function(b,c){var d=b.ownerdocument;a.a.e.get(d,h)||(a.a.e.set(d,h,!0),a.a.n(d,"selectionchange",
f));a.a.e.set(b,k,c)};a.d.textinput={init:function(b,c,f){function k(c,d){a.a.n(b,c,d)}function h(){var d=a.a.c(c());if(null===d||d===p)d="";v!==p&&d===v?settimeout(h,4):b.value!==d&&(s=d,b.value=d)}function u(){y||(v=b.value,y=settimeout(r,4))}function r(){cleartimeout(y);v=y=p;var d=b.value;s!==d&&(s=d,a.h.pa(c(),f,"textinput",d))}var s=b.value,y,v;10>a.a.l?(k("propertychange",function(a){"value"===a.propertyname&&r()}),8==a.a.l&&(k("keyup",r),k("keydown",r)),8<=a.a.l&&(m(b,r),k("dragend",u))):
(k("input",r),5>e&&"textarea"===a.a.t(b)?(k("keydown",u),k("paste",u),k("cut",u)):11>d?k("keydown",u):4>g&&(k("domautocomplete",r),k("dragdrop",r),k("drop",r)));k("change",r);a.s(h,null,{o:b})}};a.h.v.textinput=!0;a.d.textinput={preprocess:function(a,b,c){c("textinput",a)}}})();a.d.uniquename={init:function(b,d){if(d()){var c="ko_unique_"+ ++a.d.uniquename.zb;a.a.mb(b,c)}}};a.d.uniquename.zb=0;a.d.value={after:["options","foreach"],init:function(b,d,c){if("input"!=b.tagname.tolowercase()||"checkbox"!=
b.type&&"radio"!=b.type){var e=["change"],g=c.get("valueupdate"),h=!1,k=null;g&&("string"==typeof g&&(g=[g]),a.a.ga(e,g),e=a.a.rb(e));var f=function(){k=null;h=!1;var e=d(),f=a.i.q(b);a.h.pa(e,c,"value",f)};!a.a.l||"input"!=b.tagname.tolowercase()||"text"!=b.type||"off"==b.autocomplete||b.form&&"off"==b.form.autocomplete||-1!=a.a.m(e,"propertychange")||(a.a.n(b,"propertychange",function(){h=!0}),a.a.n(b,"focus",function(){h=!1}),a.a.n(b,"blur",function(){h&&f()}));a.a.u(e,function(c){var d=f;a.a.vc(c,
"after")&&(d=function(){k=a.i.q(b);settimeout(f,0)},c=c.substring(5));a.a.n(b,c,d)});var m=function(){var e=a.a.c(d()),f=a.i.q(b);if(null!==k&&e===k)settimeout(m,0);else if(e!==f)if("select"===a.a.t(b)){var g=c.get("valueallowunset"),f=function(){a.i.ca(b,e,g)};f();g||e===a.i.q(b)?settimeout(f,0):a.k.b(a.a.oa,null,[b,"change"])}else a.i.ca(b,e)};a.s(m,null,{o:b})}else a.ra(b,{checkedvalue:d})},update:function(){}};a.h.v.value=!0;a.d.visible={update:function(b,d){var c=a.a.c(d()),e="none"!=b.style.display;
c&&!e?b.style.display="":!c&&e&&(b.style.display="none")}};(function(b){a.d[b]={init:function(d,c,e,g,h){return a.d.event.init.call(this,d,function(){var a={};a[b]=c();return a},e,g,h)}}})("click");a.h=function(){};a.h.prototype.rendertemplatesource=function(){throw error("override rendertemplatesource");};a.h.prototype.createjavascriptevaluatorblock=function(){throw error("override createjavascriptevaluatorblock");};a.h.prototype.maketemplatesource=function(b,d){if("string"==typeof b){d=d||v;var c=
d.getelementbyid(b);if(!c)throw error("cannot find template with id "+b);return new a.r.l(c)}if(1==b.nodetype||8==b.nodetype)return new a.r.fa(b);throw error("unknown template type: "+b);};a.h.prototype.rendertemplate=function(a,d,c,e){a=this.maketemplatesource(a,e);return this.rendertemplatesource(a,d,c)};a.h.prototype.istemplaterewritten=function(a,d){return!1===this.allowtemplaterewriting?!0:this.maketemplatesource(a,d).data("isrewritten")};a.h.prototype.rewritetemplate=function(a,d,c){a=this.maketemplatesource(a,
c);d=d(a.text());a.text(d);a.data("isrewritten",!0)};a.b("templateengine",a.h);a.fb=function(){function b(b,c,d,k){b=a.h.wa(b);for(var f=a.h.ha,m=0;m<b.length;m++){var l=b[m].key;if(f.hasownproperty(l)){var q=f[l];if("function"===typeof q){if(l=q(b[m].value))throw error(l);}else if(!q)throw error("this template engine does not support the '"+l+"' binding within its templates");}}d="ko.__tr_ambtns(function($context,$element){return(function(){return{ "+a.h.ya(b,{valueaccessors:!0})+" } })()},'"+d.tolowercase()+
"')";return k.createjavascriptevaluatorblock(d)+c}var d=/(<([a-z]+\d*)(?:\s+(?!data-bind\s*=\s*)[a-z0-9\-]+(?:=(?:\"[^\"]*\"|\'[^\']*\'))?)*\s+)data-bind\s*=\s*(["'])([\s\s]*?)\3/gi,c=/\x3c!--\s*ko\b\s*([\s\s]*?)\s*--\x3e/g;return{ec:function(b,c,d){c.istemplaterewritten(b,d)||c.rewritetemplate(b,function(b){return a.fb.nc(b,c)},d)},nc:function(a,g){return a.replace(d,function(a,c,d,e,l){return b(l,c,d,g)}).replace(c,function(a,c){return b(c,"\x3c!-- ko --\x3e","#comment",g)})},xb:function(b,c){return a.d.ua(function(d,
k){var f=d.nextsibling;f&&f.nodename.tolowercase()===c&&a.ra(f,b,k)})}}}();a.b("__tr_ambtns",a.fb.xb);(function(){a.r={};a.r.l=function(a){this.l=a};a.r.l.prototype.text=function(){var b=a.a.t(this.l),b="script"===b?"text":"textarea"===b?"value":"innerhtml";if(0==arguments.length)return this.l[b];var d=arguments[0];"innerhtml"===b?a.a.$a(this.l,d):this.l[b]=d};var b=a.a.e.f()+"_";a.r.l.prototype.data=function(c){if(1===arguments.length)return a.a.e.get(this.l,b+c);a.a.e.set(this.l,b+c,arguments[1])};
var d=a.a.e.f();a.r.fa=function(a){this.l=a};a.r.fa.prototype=new a.r.l;a.r.fa.prototype.text=function(){if(0==arguments.length){var b=a.a.e.get(this.l,d)||{};b.gb===p&&b.ga&&(b.gb=b.ga.innerhtml);return b.gb}a.a.e.set(this.l,d,{gb:arguments[0]})};a.r.l.prototype.nodes=function(){if(0==arguments.length)return(a.a.e.get(this.l,d)||{}).ga;a.a.e.set(this.l,d,{ga:arguments[0]})};a.b("templatesources",a.r);a.b("templatesources.domelement",a.r.l);a.b("templatesources.anonymoustemplate",a.r.fa)})();(function(){function b(b,
c,d){var e;for(c=a.f.nextsibling(c);b&&(e=b)!==c;)b=a.f.nextsibling(e),d(e,b)}function d(c,d){if(c.length){var e=c[0],g=c[c.length-1],h=e.parentnode,n=a.j.instance,t=n.preprocessnode;if(t){b(e,g,function(a,b){var c=a.previoussibling,d=t.call(n,a);d&&(a===e&&(e=d[0]||b),a===g&&(g=d[d.length-1]||c))});c.length=0;if(!e)return;e===g?c.push(e):(c.push(e,g),a.a.ka(c,h))}b(e,g,function(b){1!==b.nodetype&&8!==b.nodetype||a.pb(d,b)});b(e,g,function(b){1!==b.nodetype&&8!==b.nodetype||a.d.sb(b,[d])});a.a.ka(c,
h)}}function c(a){return a.nodetype?a:0<a.length?a[0]:null}function e(b,e,h,l,q){q=q||{};var n=b&&c(b),n=n&&n.ownerdocument,t=q.templateengine||g;a.fb.ec(h,t,n);h=t.rendertemplate(h,l,q,n);if("number"!=typeof h.length||0<h.length&&"number"!=typeof h[0].nodetype)throw error("template engine must return an array of dom nodes");n=!1;switch(e){case "replacechildren":a.f.t(b,h);n=!0;break;case "replacenode":a.a.lb(b,h);n=!0;break;case "ignoretargetnode":break;default:throw error("unknown rendermode: "+
e);}n&&(d(h,l),q.afterrender&&a.k.b(q.afterrender,null,[h,l.$data]));return h}var g;a.ab=function(b){if(b!=p&&!(b instanceof a.h))throw error("templateengine must inherit from ko.templateengine");g=b};a.ya=function(b,d,h,l,q){h=h||{};if((h.templateengine||g)==p)throw error("set a template engine before calling rendertemplate");q=q||"replacechildren";if(l){var n=c(l);return a.j(function(){var g=d&&d instanceof a.n?d:new a.n(a.a.c(d)),p=a.c(b)?b():"function"===typeof b?b(g.$data,g):b,g=e(l,q,p,g,h);
"replacenode"==q&&(l=g,n=c(l))},null,{ia:function(){return!n||!a.a.ja(n)},o:n&&"replacenode"==q?n.parentnode:n})}return a.d.ua(function(c){a.ya(b,d,h,c,"replacenode")})};a.uc=function(b,c,g,h,q){function n(a,b){d(b,s);g.afterrender&&g.afterrender(b,a)}function t(c,d){s=q.createchildcontext(c,g.as,function(a){a.$index=d});var f=a.c(b)?b():"function"===typeof b?b(c,s):b;return e(null,"ignoretargetnode",f,s,g)}var s;return a.j(function(){var b=a.a.c(c)||[];"undefined"==typeof b.length&&(b=[b]);b=a.a.ta(b,
function(b){return g.includedestroyed||b===p||null===b||!a.a.c(b._destroy)});a.k.b(a.a.za,null,[h,b,t,g,n])},null,{o:h})};var h=a.a.e.f();a.d.template={init:function(b,c){var d=a.a.c(c());"string"==typeof d||d.name?a.f.ja(b):(d=a.f.childnodes(b),d=a.a.oc(d),(new a.r.fa(b)).nodes(d));return{controlsdescendantbindings:!0}},update:function(b,c,d,e,g){var n=c(),t;c=a.a.c(n);d=!0;e=null;"string"==typeof c?c={}:(n=c.name,"if"in c&&(d=a.a.c(c["if"])),d&&"ifnot"in c&&(d=!a.a.c(c.ifnot)),t=a.a.c(c.data));
"foreach"in c?e=a.uc(n||b,d&&c.foreach||[],c,b,g):d?(g="data"in c?g.createchildcontext(t,c.as):g,e=a.ya(n||b,g,c,b)):a.f.ja(b);g=e;(t=a.a.e.get(b,h))&&"function"==typeof t.k&&t.k();a.a.e.set(b,h,g&&g.z()?g:p)}};a.h.ha.template=function(b){b=a.h.wa(b);return 1==b.length&&b[0].unknown||a.h.lc(b,"name")?null:"this template engine does not support anonymous templates nested within its templates"};a.f.q.template=!0})();a.b("settemplateengine",a.ab);a.b("rendertemplate",a.ya);a.a.wb=function(a,d,c){if(a.length&&
d.length){var e,g,h,k,f;for(e=g=0;(!c||e<c)&&(k=a[g]);++g){for(h=0;f=d[h];++h)if(k.value===f.value){k.moved=f.index;f.moved=k.index;d.splice(h,1);e=h=0;break}e+=h}}};a.a.fa=function(){function b(b,c,e,g,h){var k=math.min,f=math.max,m=[],l,q=b.length,n,p=c.length,s=p-q||1,u=q+p+1,r,v,w;for(l=0;l<=q;l++)for(v=r,m.push(r=[]),w=k(p,l+s),n=f(0,l-1);n<=w;n++)r[n]=n?l?b[l-1]===c[n-1]?v[n-1]:k(v[n]||u,r[n-1]||u)+1:n+1:l+1;k=[];f=[];s=[];l=q;for(n=p;l||n;)p=m[l][n]-1,n&&p===m[l][n-1]?f.push(k[k.length]={status:e,
value:c[--n],index:n}):l&&p===m[l-1][n]?s.push(k[k.length]={status:g,value:b[--l],index:l}):(--n,--l,h.sparse||k.push({status:"retained",value:c[n]}));a.a.wb(f,s,10*q);return k.reverse()}return function(a,c,e){e="boolean"===typeof e?{dontlimitmoves:e}:e||{};a=a||[];c=c||[];return a.length<=c.length?b(a,c,"added","deleted",e):b(c,a,"deleted","added",e)}}();a.b("utils.comparearrays",a.a.fa);(function(){function b(b,d,g,h,k){var f=[],m=a.j(function(){var l=d(g,k,a.a.ka(f,b))||[];0<f.length&&(a.a.lb(f,
l),h&&a.k.b(h,null,[g,l,k]));f.length=0;a.a.ga(f,l)},null,{o:b,ia:function(){return!a.a.ob(f)}});return{$:f,j:m.z()?m:p}}var d=a.a.e.f();a.a.za=function(c,e,g,h,k){function f(b,d){x=q[d];r!==d&&(a[b]=x);x.na(r++);a.a.ka(x.$,c);s.push(x);w.push(x)}function m(b,c){if(b)for(var d=0,e=c.length;d<e;d++)c[d]&&a.a.u(c[d].$,function(a){b(a,d,c[d].sa)})}e=e||[];h=h||{};var l=a.a.e.get(c,d)===p,q=a.a.e.get(c,d)||[],n=a.a.da(q,function(a){return a.sa}),t=a.a.fa(n,e,h.dontlimitmoves),s=[],u=0,r=0,v=[],w=[];e=
[];for(var a=[],n=[],x,b=0,d,f;d=t[b];b++)switch(f=d.moved,d.status){case "deleted":f===p&&(x=q[u],x.j&&x.j.k(),v.push.apply(v,a.a.ka(x.$,c)),h.beforeremove&&(e[b]=x,w.push(x)));u++;break;case "retained":f(b,u++);break;case "added":f!==p?f(b,f):(x={sa:d.value,na:a.p(r++)},s.push(x),w.push(x),l||(n[b]=x))}m(h.beforemove,a);a.a.u(v,h.beforeremove?a.r:a.removenode);for(var b=0,l=a.f.firstchild(c),g;x=w[b];b++){x.$||a.a.extend(x,b(c,g,x.sa,k,x.na));for(u=0;t=x.$[u];l=t.nextsibling,g=t,u++)t!==l&&a.f.bb(c,
t,g);!x.ic&&k&&(k(x.sa,x.$,x.na),x.ic=!0)}m(h.beforeremove,e);m(h.aftermove,a);m(h.afteradd,n);a.a.e.set(c,d,s)}})();a.b("utils.setdomnodechildrenfromarraymapping",a.a.za);a.o=function(){this.allowtemplaterewriting=!1};a.o.prototype=new a.h;a.o.prototype.rendertemplatesource=function(b){var d=(9>a.a.l?0:b.nodes)?b.nodes():null;if(d)return a.a.s(d.clonenode(!0).childnodes);b=b.text();return a.a.ba(b)};a.o.oa=new a.o;a.ab(a.o.oa);a.b("nativetemplateengine",a.o);(function(){a.sa=function(){var a=this.kc=
function(){if(!w||!w.tmpl)return 0;try{if(0<=w.tmpl.tag.tmpl.open.tostring().indexof("__"))return 2}catch(a){}return 1}();this.rendertemplatesource=function(b,e,g){g=g||{};if(2>a)throw error("your version of jquery.tmpl is too old. please upgrade to jquery.tmpl 1.0.0pre or later.");var h=b.data("precompiled");h||(h=b.text()||"",h=w.template(null,"{{ko_with $item.kobindingcontext}}"+h+"{{/ko_with}}"),b.data("precompiled",h));b=[e.$data];e=w.extend({kobindingcontext:e},g.templateoptions);e=w.tmpl(h,
b,e);e.appendto(v.createelement("div"));w.fragments={};return e};this.createjavascriptevaluatorblock=function(a){return"{{ko_code ((function() { return "+a+" })()) }}"};this.addtemplate=function(a,b){v.write("<script type='text/html' id='"+a+"'>"+b+"\x3c/script>")};0<a&&(w.tmpl.tag.ko_code={open:"__.push($1 || '');"},w.tmpl.tag.ko_with={open:"with($1) {",close:"} "})};a.sa.prototype=new a.h;var b=new a.sa;0<b.kc&&a.ab(b);a.b("jquerytmpltemplateengine",a.sa)})()})})();})();
data.js
$(function() {
var navdata = [
{
title: ['家用电器'],
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '大家电',
content: ['平板电视', '空调', '销售总监', '区域总监', '销售副总', '店长', '招商经理']
},
{
title: '生活电器',
content: ["电话销售", "渠道销售", "促销员", "二手房销售", "4s店销售", "会议营销", "奢侈品销售", "营业员"]
},
{
title: '厨房电器',
content: ["电商销售", "大客户销售", "销售工程师", "地产销售", "金融销售", "医药代表", "业务员"]
},
{
title: '个护健康',
content: ["市场经理", "市场专员", "品牌推广", "市场企划", "市场文案", "市场活动", "网络推广"]
}
]
},
{
title: ['家用电器2'],
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '大家电2',
content: ['平板电视', '空调', '销售总监', '区域总监', '销售副总', '店长', '招商经理']
},
{
title: '生活电器2',
content: ["电话销售", "渠道销售", "促销员", "二手房销售", "4s店销售", "会议营销", "奢侈品销售", "营业员"]
},
{
title: '厨房电器2',
content: ["电商销售", "大客户销售", "销售工程师", "地产销售", "金融销售", "医药代表", "业务员"]
},
{
title: '个护健康2',
content: ["市场经理", "市场专员", "品牌推广", "市场企划", "市场文案", "市场活动", "网络推广"]
}
]
},
{
title: ['计算机', '互联网', '通信/电子'],
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '网络运营',
content: ['网店客服', 'seo', '网站推广', '网络安全', '网络架构', '网站维护', '网站策划', '网站编辑']
},
{
title: '程序员',
content: ['web前端', 'java', 'c++', 'php', 'c', 'c#', '.net', 'node.js', 'html5/css3', 'android', 'ios', 'flash']
},
{
title: '设计师',
content: ['网店美工', 'ui设计师', 'vi设计师', '网页设计', '游戏界面设计', 'app设计']
},
{
title: 'it管理',
content: ['技术总监', '技术经理', '项目总监', '项目经理']
},
{
title: '质量检测',
content: ['品质经理', '系统测试', '软件测试', '硬件测试']
},
{
title: '通信技术',
content: ['通信技术', '有线传输', '无线通信', '电信交换', '数据通信', '移动通信', '电信网络', '通信电源']
},
{
title: '电子电器',
content: ['集成电路', 'ic验证', '电子', '电气', '电路/(模拟/数字)', '电声/音响', '半导体技术', '自动控制', '电子软件开发', '嵌入式软件开发', '电池/电源开发', 'fae 现场应用', '家用电器/数码产品研发', '分析师', '测试', '电子技术研发']
}
]
},
{
title: '销售/客服/技术支持',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '销售管理',
content: ['销售主管', '销售经理', '销售总监', '区域总监', '销售副总', '店长', '招商经理']
},
{
title: '坐家等客',
content: ["电话销售", "渠道销售", "促销员", "二手房销售", "4s店销售", "会议营销", "奢侈品销售", "营业员"]
},
{
title: '往外跑的',
content: ["电商销售", "大客户销售", "销售工程师", "地产销售", "金融销售", "医药代表", "业务员"]
},
{
title: '客服',
content: ["售前服务", "售后服务", "技术支持", "呼叫中心"]
}
]
},
{
title: '财务/审计/税务',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '财务',
content: ['首席财务官 cfo', '财务总监', '财务经理', '财务/总帐主管', '成本会计', '固定资产会计', '出纳', '财务/会计助理', '会计文员', '财务分析经理/主管', '财务分析员']
},
{
},
{
title: '审计税务',
content: ['审计经理/主管', '审计专员/助理', '税务经理/税务主管', '税务专员/助理', '统计员']
}
]
},
{
title: '金融/银行/保险',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '金融',
content: ['证券/期货/外汇经纪人', '证券分析师', '股票/期货操盘手', '金融/经济研究员', '投资/基金项目经理', '投资/理财顾问', '投资银行业务', '融资经理/融资主管', '融资专员', '拍卖/担保/典当业务', '金融产品经理', '投资银行财务分析', '风险管理/控制']
},
{
},
{
title: '银行',
content: ['行长/副行长', '资产评估/分析', '风险控制', '进出口/信用证结算', '清算人员', '外汇交易', '高级客户经理/客户经理', '客户主管/专员', '信贷管理', '银行柜员', '银行卡、电子银行业务推广', '个人业务部门经理/主管', '个人业务客户经理', '公司业务部门经理/主管', '公司业务客户经理', '综合业务经理/主管', '综合业务专员', '信审核查', '营业部大堂经理', '银行客户总监']
},
{
title: '保险',
content: ['保险精算师', '保险产品开发/项目策划', '保险业务经理/主管', '保险代理/经纪人/客户经理', '理财顾问/财务规划师', '储备经理人', '保险核保', '保险理赔', '保险客户服务/续期管理', '保险培训师', '保险内勤', '契约管理']
}
]
},
{
title: '生产/营运/采购/物流',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '生产营运',
content: ['']
},
{
title: '质量安全',
content: ['']
},
{
title: '机械能源',
content: ['']
},
{
title: '汽车制造',
content: ['']
},
{
title: '汽车销售',
content: ['']
},
{
title: '服装纺织',
content: ['']
},
{
title: '贸易',
content: ['']
}
]
},
{
title: '生物/制药/医疗/护理',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '制药医疗器械',
content: ['']
},
{
title: '化工',
content: ['']
},
{
title: '医疗护理',
content: ['']
}
]
},
{
title: '广告/市场/媒体/艺术',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '广告',
content: ['']
},
{
title: '公关媒介',
content: ['']
},
{
title: '市场营销',
content: ['']
},
{
title: '影视媒体',
content: ['']
},
{
title: '写作出版',
content: ['']
},
{
title: '艺术设计',
content: ['']
}
]
},
{
title: '建筑/房地产',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '建筑装潢/市政建设',
content: ['']
},
{
title: '房地产开发/销售',
content: ['']
},
{
title: '房地产中介',
content: ['']
},
{
title: '物业管理',
content: ['']
}
]
},
{
title: '人事/行政/高级管理',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '人力资源',
content: ['']
},
{
title: '高级管理',
content: ['']
},
{
title: '行政/后勤',
content: ['']
}
]
},
{
title: '咨询/法律/教育/科研',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '咨询/顾问',
content: ['']
},
{
title: '律师/法务/合规',
content: ['']
},
{
title: '教师',
content: ['']
},
{
title: '培训',
content: ['']
},
{
title: '科研人员',
content: ['']
}
]
},
{
title: '服务业',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '餐饮/娱乐',
content: ['']
},
{
title: '酒店/旅游',
content: ['']
},
{
title: '美容/健身/体育',
content: ['']
},
{
title: '百货/连锁/零售服务',
content: ['']
},
{
title: '交通运输服务',
content: ['']
},
{
title: '保安/家政',
content: ['']
}
]
},
{
title: '公务员/翻译/其他',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '公务员',
content: ['']
},
{
title: '翻译',
content: ['']
},
{
title: '在校学生',
content: ['']
},
{
title: '储备*/培训生/实习生',
content: ['']
},
{
title: '环保',
content: ['']
},
{
title: '农林牧渔',
content: ['']
},
{
title: '兼职',
content: ['']
}
]
},
{
title: '管理岗位',
id: 'speedmenu' + parseint(math.random() * 1000),
content: [
{
title: '总监级',
content: ['运营总监', '营销总监', '销售总监', '生产总监', '制片总监', '拍摄总监', '创意总监', '技术总监', '执行总监', '财务总监', '设计总监']
},
{
title: '经理级',
content: ['运营经理', '营销经理', '销售经理', '生产经理', '制片经理', '拍摄经理', '创意经理', '技术经理', '执行经理', '财务经理', '设计经理']
}
]
}
];
ko.applybindings({
navdata: navdata
})
})
script.js
$(function() {
var scrolltimer, html = '',
$menu = $(".macth-dropdown-menu");
$menu.menuaim({
activate: activatesubmenu,
deactivate: deactivatesubmenu,
exitmenu: function() {
$(".macth_popover").hide();
$(".macth_xvh3_a a.maintainhover").removeclass("maintainhover");
$('.macth_xvitem.macth_itemhover').removeclass('macth_itemhover');
$('.macth_xvitem s').show();
}
});
function activatesubmenu(row) {
var $row = $(row),
submenuid = $row.data("submenuid"),
$submenu = $("#" + submenuid),
// height = $menu.outerheight(),
width = $menu.outerwidth();
$submenu.css({
display: "block",
top: -1,
left: width + 5
});
$row.addclass('macth_itemhover');
$row.find("h3 a").addclass("maintainhover");
$row.find("h3 s").hide();
}
function deactivatesubmenu(row) {
var $row = $(row),
submenuid = $row.data("submenuid"),
$submenu = $("#" + submenuid);
$submenu.hide();
$row.removeclass('macth_itemhover');
$row.find("h3 a").removeclass("maintainhover");
$row.find("h3 s").show();
}
function showhide(dom, child) {
$(dom).hover(function() {
$(this).addclass('active').find(child).show();
$(this).siblings().find('.show').hide();
$(this).siblings().removeclass('active');
},
function() {});
}
//浠婃棩鏀剁泭姒�
$(".scroll-top").hover(function() {
clearinterval(scrolltimer);
},
function() {
scrolltimer = setinterval(function() {
scrollnews($(".scroll-top"));
},
2000);
}).trigger("mouseout");
function scrollnews(obj) {
var $self = obj.find("ul:first");
var lineheight = $self.find("li:first").height();
$self.animate({
"margin-top": -lineheight + "px"
},
600,
function() {
$self.css({
"margin-top": "0px"
}).find("li:first").appendto($self);
})
}
});
图片素材如下：
上一篇： 使用JQuery完成省市联动效果
下一篇： 使用JQuery完成复选框的全选效果