> 웹 프론트엔드 > JS 튜토리얼 > JQUERY_jquery를 기반으로 하는 JQUBar 히스토그램 플러그인

JQUERY_jquery를 기반으로 하는 JQUBar 히스토그램 플러그인

WBOY
풀어 주다: 2016-05-16 18:15:35
원래의
1468명이 탐색했습니다.
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. 자바스크립트 코드 추가


코드 복사 코드는 다음과 같습니다.
에 추가하세요.

5. ASP.NET MVC2.0 서버 코드


코드 복사 다음: 개인 십진수[] GetPricesByEmployeeId(int EmployeesId)
{
decimal[] result = null
result = _Context.Orders.Where(o => o .EmployeeID == 직원 ID)
.Take(5)
.Select(oo => (십진수)oo.ShipVia).ToArray()
결과 반환
}
공개 JsonResult LoadData(문자열 이름)
{
var data = (from e in _Context.Employees.Take(10).ToList()
새 항목 선택
{
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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿