jquery.barrating实现八种不同风格的评分效果代码
代码语言:html
所属分类:星级评分
代码描述:jquery.barrating实现八种不同风格的评分效果代码,有分页式、星星式、进度式、柱状体式等
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="viewport" content="width=1024"> <style> /******* EXAMPLE A *******/ .br-wrapper .br-widget { height: 50px; } .br-wrapper .br-widget a { display: block; width: 15px; padding: 5px 0; height: 30px; float: left; background-color: #fbedd9; margin: 1px; text-align: center; } .br-wrapper .br-widget a.br-active, .br-wrapper .br-widget a.br-selected { background-color: #edb867; } .br-wrapper .br-widget .br-current-rating { font-size: 20px; line-height: 2; float: left; padding: 0 20px 0 20px; color: #edb867; font-weight: 600; } /* Center in container */ .br-wrapper { width: 240px; position: absolute; margin: 0px 0 0 -120px; left: 50%; } /******* EXAMPLE B *******/ .br-wrapper-b .br-widget { height: 10px; } .br-wrapper-b .br-widget a { display: block; width: 80px; height: 10px; float: left; background-color: #bef5e8; margin: 1px; } .br-wrapper-b .br-widget a.br-active, .br-wrapper-b .br-widget a.br-selected { background-color: #50e3c2; } .br-wrapper-b .br-widget .br-current-rating { clear: both; width: 330px; text-align: center; font-weight: 600; display: block; padding: .5em 0; color: #50e3c2; } .br-wrapper-b .br-readonly a.br-active, .br-wrapper-b .br-readonly a.br-selected { background-color: #50e3c2; } /* Center in container */ .br-wrapper-b { width: 336px; position: absolute; margin: 0px 0 0 -168px; left: 50%; } /******* EXAMPLE C *******/ .br-wrapper-c .br-widget { height: 15px; } .br-wrapper-c .br-widget a { display: block; width: 35px; height: 35px; float: left; border: 2px solid #bbcefb; background-color: white; margin: 2px; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 2.2; text-align: center; color: #bbcefb; font-weight: 600; } .br-wrapper-c .br-widget a.br-active, .br-wrapper-c .br-widget a.br-selected { border: 2px solid #4278f5; color: #4278f5; } .br-wrapper-c .br-widget .br-current-rating { clear: both; width: 330px; text-align: center; font-weight: 600; display: block; padding: .5em 0; color: #646464; } .br-wrapper-c .br-readonly a.br-active, .br-wrapper-c .br-readonly a.br-selected { background-color: #4278f5; } /* Center in container */ .br-wrapper-c { width: 220px; position: absolute; margin: 0px 0 0 -110px; left: 50%; } /******* EXAMPLE D *******/ .br-wrapper-d .br-widget { height: 15px; } .br-wrapper-d .br-widget a { font-size: 14px; display: block; width: 40px; padding: 5px 0 5px 0; height: 30px; float: left; background-color: white; border-bottom: 2px solid #fbedd9; color: #fbedd9; text-decoration: none; line-height: 2.1; text-align: center; } .br-wrapper-d .br-widget a.br-active, .br-wrapper-d .br-widget a.br-selected { color: #edb867; border-bottom: 2px solid #edb867; } .br-wrapper-d .br-widget a span { color: white; } .br-wrapper-d .br-widget a:hover span, .br-wrapper-d .br-widget a.br-current span { color: #edb867; } .br-wrapper-d .br-widget .br-current-rating { clear: both; width: 330px; text-align: center; font-weight: 600; display: block; padding: .5em 0; color: #edb867; } .br-wrapper-d .br-readonly a.br-active, .br-wrapper-d .br-readonly a.br-selected { background-color: #edb867; } /* Center in container */ .br-wrapper-d { width: 324px; position: absolute; margin: 0px 0 0 -162px; left: 50%; } /******* EXAMPLE E *******/ .br-wrapper-e .br-widget { height: 15px; } .br-wrapper-e .br-widget a { padding: 8px 16px; background-color: #bef5e8; color: #50e3c2; text-decoration: none; font-size: 13px; line-height: 3; text-align: center; font-weight: 600; } .br-wrapper-e .br-widget a:first-child { -webkit-border-top-left-radius: 999px; -webkit-border-bottom-left-radius: 999px; -moz-border-radius-topleft: 999px; -moz-border-radius-bottomleft: 999px; border-top-left-radius: 999px; border-bottom-left-radius: 999px; } .br-wrapper-e .br-widget a:last-child { -webkit-border-top-right-radius: 999px; -webkit-border-bottom-right-radius: 999px; -moz-border-radius-topright: 999px; -moz-border-radius-bottomright: 999px; border-top-right-radius: 999px; border-bottom-right-radius: 999px; } .br-wrapper-e .br-widget a.br-active, .br-wrapper-e .br-widget a.br-selected { background-color: #50e3c2; color: white; } .br-wrapper-e .br-widget .br-current-rating { clear: both; width: 330px; text-align: center; font-weight: 600; display: block; padding: .5em 0; color: #646464; } .br-wrapper-e .br-readonly a.br-active, .br-wrapper-e .br-readonly a.br-selected { background-color: #50e3c2; } /* Center in container */ .br-wrapper-e { width: 250px; position: absolute; margin: 0px 0 0 -125px; left: 50%; } /******* EXAMPLE F *******/ .br-wrapper-f .br-widget { height: 30px; } .br-wrapper-f .br-widget a { background-image: url("//repo.bfw.wiki/bfwrepo/image/60d1cf80427da.png"); width: 30px; height: 30px; display: block; float: left; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .br-wrapper-f .br-widget a { background-image: url("../img/star@2x.png"); background-size: 30px 60px; } } .br-wrapper-f .br-widget a:hover, .br-wrapper-f .br-widget a.br-active, .br-wrapper-f .br-widget a.br-selected { background-position: 0 30px; } .br-wrapper-f .br-widget .br-current-rating { clear: both; width: 330px; text-align: center; font-weight: 600; display: block; padding: .5em 0; color: #646464; } .br-wrapper-f .br-readonly a.br-active, .br-wrapper-f .br-readonly a.br-selected { background-color: #50e3c2; } /* Center in container */ .br-wrapper-f { width: 152px; position: absolute; margin: 0px 0 0 -76px; left: 50%; } /******* EXAMPLE G *******/ .br-wrapper-g .br-widget { height: 25px; } .br-wrapper-g .br-widget a { display: block; width: 25px; height: 25px; float: left; background-color: #fbedd9; margin: 1px; } .br-wrapper-g .br-widget a.br-active, .br-wrapper-g .br-widget a.br-selected { background-color: #edb867; } .br-wrapper-g .br-widget .br-current-rating { line-height: 1.5; float: left; padding: 0 20px 0 20px; color: #edb867; font-size: 18px; } .br-wrapper-g .br-readonly a.br-active, .br-wrapper-g .br-readonly a.br-selected { background-color: #edb867; } /* Center in container */ .br-wrapper-g { padding-top: 1.3em; width: 380px; position: absolute; margin: 0px 0 0 -190px; left: 50%; } /******* EXAMPLE H *******/ .br-wrapper-h .br-widget { width: 120px; } .br-wrapper-h .br-widget a { display: block; width: 120px; height: 5px; background-color: #bef5e8; margin: 1px; } .br-wrapper-h .br-widget a.br-active, .br-wrapper-h .br-widget a.br-selected { background-color: #50e3c2; } .br-wrapper-h .br-widget .br-current-rating { width: 120px; font-weight: 600; line-height: 2; text-align: center; color: #50e3c2; } .br-wrapper-h .br-readonly a.br-active, .br-wrapper-h .br-readonly a.br-selected { background-color: #50e3c2; } /* Center in container */ .br-wrapper-h { width: 120px; position: absolute; margin: 0px 0 0 -60px; left: 50%; } /******* BOX *******/ .box { width: 100%; float: left; margin: 1em 0; } .box .box-header { text-align: center; font-weight: 600; padding: .5em 0; } .box .box-body { padding-top: 2em; height: 85px; /* rating widgets will be absolutely centered relative to box body */ position: relative; } .box select { width: 120px; margin: 10px auto 0 auto; display: block; } .box-large .box-body { padding-top: 2em; height: 120px; } .box-orange .box-header { background-color: #edb867; color: white; } .box-orange .box-body { background-color: white; border: 2px solid #f5d8ab; border-top: 0; } .box-green .box-header { background-color: #50e3c2; color: white; } .box-green .box-body { background-color: white; border: 2px solid #92eed9; border-top: 0; } .box-blue .box-header { background-color: #4278f5; color: white; } .box-blue .box-body { background-color: white; border: 2px solid #8bacf9; border-top: 0; } </style> <body> <section class="section section-examples"> <div class="examples"> <div class="row"> <div class="col"> <div class="box box-orange"> <div class="box-header">Example A</div> <div class="box-body"> <select id="example-a" name="rating"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0