jquery_jquery를 기반으로 하는 백분율 동적 색상 막대 플러그인

저는 이전에 jquery 플러그인을 작성해 본 적이 없습니다. 이것을 개발할 때 코드를 작성하고 jquery 플러그인의 정의(개발 방법 등)를 보고 왔다 갔다 했습니다.

제가 이 플러그인을 작성하려는 이유는 주로 향후 프로젝트에서 이러한 유형의 기능 구현을 용이하게 하기 위한 것입니다. 이전 설문조사 애플리케이션에서는 결과를 표시하는 데 사용되었지만, 그 당시에는 개발되지 않았습니다. 플러그인이 아니어도 읽기가 귀찮고 사용하기가 번거롭습니다(조정하는 데 오전 내내 걸렸습니다).

다행히 이 기능은 비교적 간단하고 새로운 필기 플러그인에 딱 맞습니다.

구체적인 효과는 그림과 같습니다.



이것도 간단한 비례도입니다. ( function ($) {
$.fn.percentbar = function (o) {
var options1 = $.extend({

percent:[],//% 배열, 예: [0.5, 0.4, 0.6] 길이가 1보다 큰 경우 분포 비율은 bar_bgcolor:'#EFEFEF', //색상 막대의 배경색bar_bordercolor:'#E2E2E2',//테두리 색상 순서입니다. 색상 막대bar_borderwidth: 1,//색상 막대의 테두리 너비width:250,//색상 막대의 너비height:14,//색상 막대의 높이 callback:function(){}//lCallback 함수(색상 막대가 표시된 후)

},o)

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 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 })

　

메서드 매개변수 설명:

percent: 비율 배열(비율), 예: [0.5,0.4,0.6] 길이가 다음보다 큰 경우 1, 순서대로 배포됩니다. Ratiobar_bgcolor: 컬러바의 배경색bar_bordercolor: 컬러바의 테두리 색상bar_borderwidth: 컬러바의 테두리 너비width: 컬러바의 너비height: 컬러바의 높이callback: 콜백 함수 (컬러바가 표시된 후)