star rating2
by zunme
HTML
largest: "xs", "sm", "md", "lg", "xl"
<input id="input-111" class="rating" data-min="0" data-max="10" data-stars=10 data-step="0.5" data-default-caption="{rating} 점" data-star-captions="{}" data-size="sm" data-show-clear="false" data-readonly="false">
<input id="input-2b" class="rating" data-min="0" data-max="10" data-step="1" data-stars=5
data-symbol="" data-default-caption="{rating} 점" data-star-captions="{}">
<h3>Choose file(s)</h3>
<p>
<input id="files-upload" type="file" accept="image/*;capture=camera" multiple="" > </input>
</p>
<p id="drop-area">
<span class="drop-instructions">or drag and drop files here</span>
<span class="drop-over">Drop files here!</span>
</p>
<ul id="file-list">
<li class="no-items">(no files uploaded yet)</li>
</ul>
CSS
@font-face {
font-family: 'Glyphicons Halflings';
src: url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/fonts/glyphicons-halflings-regular.eot');
src: url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/fonts/glyphicons-halflings-regular.woff') format('woff'), url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('http://netdna.bootstrapcdn.com/bootstrap/3.1.0/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
body{zoom:1;}
.rating-loading {
width: 25px;
height: 25px;
font-size: 0px;
color: #fff;
background: transparent url('../img/loading.gif') top left no-repeat;
border: none;
}
/*
* Stars
*/
.rating-gly {
font-family: 'Glyphicons Halflings';
}
.rating-gly-star {
font-family: 'Glyphicons Halflings';
padding-left: 2px;
}
.rating-gly-star .rating-stars:before {
padding-left: 2px;
}
.rating-lg .rating-gly-star, .rating-lg .rating-gly-star .rating-stars:before {
padding-left: 4px;
}
.rating-xl .rating-gly-star, .rating-xl .rating-gly-star .rating-stars:before {
padding-left: 2px;
}
.rating-active {
cursor: default;
}
.rating-disabled {
cursor: not-allowed;
}
.rating-uni {
font-size: 1.2em;
margin-top: -5px;
}
.rating-container {
position: relative;
vertical-align: middle;
display: inline-block;
color: #a3a3a3;
overflow: hidden;
}
.rating-container:before {
content: attr(data-content);
}
.rating-container .rating-stars {
position: absolute;
left:...
JavaScript
!function(e){var t=0,a=5,n=.5,r="ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,l=function(t,a){return"undefined"==typeof t||null===t||void 0===t||t==[]||""===t||a&&""===e.trim(t)},i=function(e,t,a){var n=l(e.data(t))?e.attr(t):e.data(t);return n?n:a[t]},s=function(e){var t=(""+e).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);return t?Math.max(0,(t[1]?t[1].length:0)-(t[2]?+t[2]:0)):0},o=function(e,t){return parseFloat(e.toFixed(t))},c=function(t,a){this.$element=e(t),this.init(a)};c.prototype={constructor:c,_parseAttr:function(e,r){var s=this,o=s.$element;if("range"===o.attr("type")||"number"===o.attr("type")){var c=i(o,e,r),u=n;"min"===e?u=t:"max"===e?u=a:"step"===e&&(u=n);var p=l(c)?u:c;return parseFloat(p)}return parseFloat(r[e])},listen:function(){var t=this;t.initTouch(),t.$rating.on("click",function(e){if(!t.inactive){var a=e.pageX-t.$rating.offset().left;t.setStars(a),t.$element.trigger("change"),t.$element.trigger("rating.change",[t.$element.val(),t.$caption.html()]),t.starClicked=!0}}),t.$rating.on("mousemove",function(e){if(t.hoverEnabled&&!t.inactive){t.starClicked=!1;var a=e.pageX-t.$rating.offset().left,n=t.calculate(a);t.toggleHover(n),t.$element.trigger("rating.hover",[n.val,n.caption,"stars"])}}),t.$rating.on("mouseleave",function(){if(t.hoverEnabled&&!t.inactive&&!t.starClicked){var e=t.cache;t.toggleHover(e),t.$element.trigger("rating.hoverleave",["stars"])}}),t.$clear.on("mousemove",function(){if(t.hoverEnabled&&!t.inactive&&t.hoverOnClear){t.clearClicked=!1;var e,a='<span class="'+t.clearCaptionClass+'">'+t.clearCaption+"</span>",n=t.clearValue,r=t.getWidthFromValue(n);e={caption:a,width:r,val:n},t.toggleHover(e),t.$element.trigger("rating.hover",[n,a,"clear"])}}),t.$clear.on("mouseleave",function(){if(t.hoverEnabled&&!t.inactive&&!t.clearClicked&&t.hoverOnClear){var...