JQUERY_jquery に基づく JQUBar Histogram プラグイン

1. JQUBAR (V1.0) JQUERY プラグインの概要
1. .net、java、php およびその他のプラットフォームをサポートします。
2. ユーザーはマウスでヒストグラムをドラッグすることで各列の高さを変更でき、最終的にはグラフィカル インターフェイスをマウスでドラッグすることでサーバー データを変更するという目的を達成できます。
3. ヒストグラムのスケーリングをサポートします。
4. 現在サポートしているブラウザ: IE7、IE8、Firefox、Chrome。

2. HTML

コードをコピーします コードは次のとおりです:

zoom

ドラッグ


名前あいまいクエリ:



スクリーンショットは次のとおりです:

3. JavaScript と CSS ファイルの紹介

コードをコピーします コードは次のとおりです:

" rel= "stylesheet" type ="text/css" />


注: 上記のファイルを HTML にインポートしてください。

4. Javascript コードを追加します

コードをコピーします コードは次のとおりです。

$(function () {

$("#con").jQUBar({
zoom: true ,
ドラッグ: true,
url: ''
}); () {
$("#con").setBarParam({
ズーム: $("#cbZoom").attr("checked"),
ドラッグ: $("#cbDragable")。 attr("checked "),
//.net java php 呼び出しを容易にするための json データを提供します。この例は、Asp.net MVC2.0
url: '}).reload();
});
});
> ;


注: 上記の js スクリプトを html に追加してください。

5. ASP.NET MVC2.0 サーバー コード



コードをコピー

private 10mal[] GetPricesByEmployeeId(intemployeeId) {

10 進数 [] result = null;

result = _Context.Orders.Where(o => o .EmployeeID ==employeeId)
.Take(5)
.Select(oo => (10 進数)oo.ShipVia).ToArray();
return result;
public JsonResult LoadData(文字列名)
{
var data = (from e in _Context.Employees.Take(10).ToList()
select new
{
EmployeeID = e.EmployeeID,
Orders = GetPricesByEmployeeId(e.EmployeeID),
Name = e.FirstName,
}).Distinct();
if (!string.IsNullOrEmpty(name))
{
data = data.Where(d => d.Name.IndexOf(name) >= 0);
}
return Json(new { Success = true, Msg = data }, JsonRequestBehavior.AllowGet) ;
}


注: 読みやすくするために、NORTHWIND データベースを使用してください。

6. 実行中のプログラムのスクリーンショット

ズーム:

モバイル:

最後に: 時間がなかったため、JQUBAR1.0 プラグイン システムをテストできませんでした。ご興味がございましたら、JQUBAR1.0 プラグインこちら。
このプラグインに関して貴重なご意見をいただきましたガーデンフレンドの皆様に心より感謝申し上げます。いただいたご意見をもとに、時間をかけて JQUBAR1.0 プラグインをアップグレードしていきます。

同時に、この記事が開発中に遭遇する問題の解決に役立つことを願っています。
著者: RyanDing
出典:
http://www.cnblogs.com/ryanding/