ホームページ > ウェブフロントエンド > jsチュートリアル > JQUERY_jquery に基づく JQUBar Histogram プラグイン

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

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

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

<%--JQUBAR コンテナ--%>







名前あいまいクエリ:



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

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



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


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


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

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


コードをコピーします コードは次のとおりです。
に追加してください。

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/

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート