ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づくパーセンテージ動的カラー バー プラグイン
jquery_jquery に基づくパーセンテージ動的カラー バー プラグイン
- WBOYオリジナル
- 2016-05-16 17:49:51969ブラウズ
私はこれまで 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({ "background": "なし 繰り返しスクロール 0 0 #EFEFEF", "border": "1px ソリッド #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"}); .each(function(index, element) {
$( element).append("
{
$( element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "遅い" ,options1.callback)
}else
{
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) } , "slow")
}
});
//カラーバーを初期化します
関数 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; pvar 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], width: 500 });
var styleData=InitColor();
$(this).css({ "background": "なし 繰り返しスクロール 0 0 #EFEFEF", "border": "1px ソリッド #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"}); .each(function(index, element) {
$( element).append("
"); g==index 1)
{
$( element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) }, "遅い" ,options1.callback)
}else
{
$(element).find("span").animate({ width: Math.round(options1.percent[index] * options1.width) } , "slow")
}
});
//カラーバーを初期化します
関数 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
o.push(q[k]);
q.splice(k, 1); .length == 0) {
q = n.slice( )
}
}
return o
}
}
})(jQuery);
当初はCSSを分離したかったのですが、最終的にはjqueryプラグインに直接エクスポートした方が使いやすいです。
例:
コードをコピー
コードは次のとおりです:
$ (".good").percentbar({ パーセント: [0.5, 0.4], width: 500 });
".good ">
メソッドパラメータの説明:
percent: 比例配列 (比例)、例: [0.5,0.4,0.6] 長さが次の場合1、順番に分配されます Ratio
bar_bgcolor: カラーバーの背景色
メソッドパラメータの説明:
percent: 比例配列 (比例)、例: [0.5,0.4,0.6] 長さが次の場合1、順番に分配されます Ratio
bar_bgcolor: カラーバーの背景色
bar_bordercolor: カラーバーの境界線の色bar_borderwidth: カラーバーの境界線の幅width: カラーバーの幅height: カラーバーの高さcallback: コールバック関数 (カラーバー表示後)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。