저는 이전에 jquery 플러그인을 작성해 본 적이 없습니다. 이것을 개발할 때 코드를 작성하고 jquery 플러그인의 정의(개발 방법 등)를 보고 왔다 갔다 했습니다.
제가 이 플러그인을 작성하려는 이유는 주로 향후 프로젝트에서 이러한 유형의 기능 구현을 용이하게 하기 위한 것입니다. 이전 설문조사 애플리케이션에서는 결과를 표시하는 데 사용되었지만, 그 당시에는 개발되지 않았습니다. 플러그인이 아니어도 읽기가 귀찮고 사용하기가 번거롭습니다(조정하는 데 오전 내내 걸렸습니다).
다행히 이 기능은 비교적 간단하고 새로운 필기 플러그인에 딱 맞습니다.
구체적인 효과는 그림과 같습니다.
이것도 간단한 비례도입니다. ( function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({
var g=this.length
var styleData=InitColor();
$(this).css({ "배경": "없음 반복 스크롤 0 0 #EFEFEF", "border": "1px solid #E2E2E2" ,"height": options1.height "px","width" : options1.width "px","Background-color":options1 .bar_bgcolor,"border-color":options1.bar_bordercolor,"border-width":options1.bar_borderwidth "px"})
$(this) .each(function(index, element) {
$( element).append("
"); g==색인 1)
{
$( 요소).find("span").animate({ 너비: Math.round(options1.percent[index] * options1.width) }, "느림" ,options1.callback)
}else
{
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) } , "느림")
}
});
//컬러바 초기화
function InitColor() {
var o = []
var n = ["# 5dbc5b", "#6c81b6", "#9eb5f0", "#a5cbd6", "#aee7f8", "#c2f263", "#d843b3", "#d8e929", "#e58652", "#e7ab6d", "# ee335f", "#fbe096", "#ffc535"];
var q = n.slice();
for (var p = 0, l = g; p < l; p ) {
var k = Math.floor(Math.random() * q.length)
o.push(q[k])
q.splice(k, 1); .length == 0) {
q = n.slice( )
}
}
return o
}
}
})(jQuery);
원래는 CSS를 분리하고 싶었지만 결국에는 jquery 플러그인으로 직접 내보내는 게 더 사용하기 편리합니다.
예:
코드 복사
코드는 다음과 같습니다.
$ (".good").percentbar({ 퍼센트: [0.5, 0.4], 너비: 500 })