基于jquery-ui的YAUI Kit框架的示例代码
代码语言:html
所属分类:布局界面
代码描述:基于jquery-ui的YAUI Kit框架的示例代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700'> <link rel='stylesheet' href='https://weloveiconfonts.com/api/?family=typicons'> <link rel='stylesheet' href='https://weloveiconfonts.com/api/?family=fontawesome'> <style> @charset "UTF-8"; /*============================================== Demo Styles ================================================ */ html { font-family: 'Roboto Slab', serif; font-size: 16px; height: 100%; } body { background: #9b59b6; text-align: center; } * { box-sizing: border-box; } section { width: 30rem; margin: auto; padding-bottom: 10rem; } h1 { color: #fff; font-size: 5rem; font-weight: bold; margin: 0 0 2rem 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4); } h2 { color: #fff; font-size: 2rem; font-weight: bold; margin: 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4); } h4 { color: #fff; margin: -2rem 0 2rem 0; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4); } /*============================================== Base Form Styles All form elements need these styles The rest are modular ================================================ */ [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 2; } .ui { border-radius: 2rem; box-shadow: inset 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); display: inline-block; font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; text-align: center; width: 30rem; } .ui input[type="email"], .ui input[type="password"], .ui input[type="search"] { background: rgba(0, 0, 0, 0.25); border: 0; border-radius: 0; height: 3rem; width: 58%; color: #fff; float: left; padding-left: 0.5rem; } .ui input[type="email"]:focus, .ui input[type="password"]:focus, .ui input[type="search"]:focus { background: rgba(0, 0, 0, 0.5); transition: background 1s ease; } .ui input[type="submit"] { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3; } .ui input[type="submit"]:hover { background: rgba(0, 0, 0, 0.6); transition: all 1s ease; } .ui label { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3; border-radius: 1rem 0 0 1rem; line-height: 3; } /*============================================== Color Picker Slider ================================================ */ #red, #green, #blue { float: left; clear: left; width: 100%; margin: 1rem 0; } #red .ui-slider-range { background: #ef2929; } #green .ui-slider-range { background: #8ae234; } #blue .ui-slider-range { background: #729fcf; } .ui-slider-handle { width: 2rem !important; height: 2rem !important; border-radius: 50%; margin-top: -0.2rem; } .ui-slider-range { border-radius: 1rem; } .colors > div { background: rgba(0, 0, 0, 0.5); border: none; border-radius: 1rem; height: 1rem; width: 100%; } /*============================================== Ratings modified version of Lea Verou's http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/ ================================================ */ fieldset { border: 0; } .rating:not(:checked) > input { clip: rect(0, 0, 0, 0); position: absolute; top: -9999px; } .rating:not(:checked) > label { background: none; color: rgba(0, 0, 0, 0.6); cursor: pointer; float: right; height: 3.5rem; overflow: hidden; padding: 0; transition: color 1s ease-in-out; white-space: nowrap; width: 5.4rem; } .rating:not(:checked) > label:before { content: '= '; font-family: 'Typicons', sans-serif; font-size: 5rem; line-height: 1; } .rating > input:checked + label:hover, .rating > input:checked + label:hover ~ label, .rating > input:checked ~ label:hover, .rating > input:checked ~ label:hover ~ label, .rating > label:hover ~ input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label, .rating > input:checked ~ label { color: #fff; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4); transition: color 1s ease-in-out; } /*============================================== Progress Steps ================================================ */ ol.ui { list-style: none; list-style-image: none; margin: 0 0 1rem 0; padding: 1rem 0 1rem 1rem; white-space: nowrap; } ol.ui li { float: left; margin-right: 1rem; position: relative; text-align: center; width: 100px; } ol.ui li > span { color: #fff; display: block; margin-bottom: 0.5rem; width: 100px; } ol.ui span:nth-of-type(2) { background: rgba(0, 0, 0, 0.4); border: 0.2rem solid transparent; border-radius: 50%; cursor: pointer; font-size: 1.5rem; font-weight: bold; width: 3rem; height: 3rem; display: inline-block; line-height: 1.7; transition: all 1.2s ease-in-out; } ol.ui span:nth-of-type(2):before { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: -2.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 0rem; } ol.ui span:nth-of-type(2):after { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: 4.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 4.35rem; } ol.ui li:first-of-type span:nth-of-type(2):before, ol.ui li:last-of-type span:nth-of-type(2):after { display: none; } ol.ui .active span:nth-of-type(2) { border: 0.2rem solid white; transition: all 1s ease-in-out; transition-delay: 0.8s; } ol.ui .active span:nth-of-type(2):before { background: white; transition: all 1.2s ease-in-out; width: 4.35rem; } ol.ui p { color: #fff; left: 50%; margin-left: -1rem; margin-top: 4.5rem; cursor: pointer; position: absolute; } #first { transition-delay: 0; } /*============================================== Video Player ================================================ */ input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem; } #video-container { margin: 0.5rem 0.5rem 0 0.5rem; } #video-controls { position: relative; bottom: 0; left: 0; right: 0; } button { background: none; border: 0; color: #EEE; border-radius: 3px; width: 2rem; } button [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; font-size: 1.5rem; line-height: 1.7; } button:hover { cursor: pointer; color: #ccc; } #seek-bar { width: 58%; } #volume-bar { width: 16%; } /*============================================== Menu ================================================ */ .ui ul { list-style: none; margin: 0 -1rem; } .ui ul li { color: #fff; cursor: pointer; float: left; font-size: 1.3rem; height: 2rem; position: relative; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6); width: 5rem; } .notification-sml:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.6); content: '1'; font-size: 0.8rem; font-weight: bold; height: 1.2rem; left: 4.4rem; margin-top: -1rem; position: absolute; width: 1.2rem; } /*============================================== Drop Down Menu ================================================ */ .menu ul { list-style: none; display: none; width: 100%; background: rgba(0, 0, 0, 0.5); float: left; margin: 1rem 0 0 0; padding: 0; border-radius: 1rem; overflow: hidden; } .menu ul li { color: #fff; cursor: pointer; display: block; float: none; height: 3rem; padding: 0.5rem; width: 100%; } .menu ul li:hover { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; cursor: pointer; } .menu div { float: left; width: 100%; background: rgba(0, 0, 0, 0.25); border-radius: 1rem; color: #fff; cursor: pointer; line-height: 3; padding-left: 3rem; } .menu div span { float: right; background: rgba(0, 0, 0, 0.2); border-radius: 0 1rem 1rem 0; cursor: pointer; padding: 0 1rem; } .menu div span:hover { background: rgba(0, 0, 0, 0.5); } /*============================================== Slider ================================================ */ input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 0.5); height: 1rem; width: 100%; } input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: white; height: 2rem; width: 2rem; } /*============================================== Progress Bar =============================================== */ .progress > span { background-color: rgba(255, 255, 255, 0.6); border-radius: 1rem; display: block; height: 2rem; overflow: hidden; position: relative; } .progress > span:after { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); background-size: 5rem 5rem; border-radius: 1rem; content: ""; overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } /*============================================== Notifications =============================================== */ .notifications ul { margin: 0; padding: 0; } .notifications ul li { background-color: rgba(0, 0, 0, 0.5); border-radius: 1rem; color: #fff; cursor: pointer; float: left; height: 5rem; list-style: none; margin: 0 0.5rem; width: 6rem; } .notifications ul li [class*="fontawesome-"]:before { font-size: 3rem; line-height: 1.7; } .notification:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05.........完整代码请登录后点击上方下载按钮下载查看
网友评论0