├── .gitignore
├── LICENSE
├── README.md
├── example
    ├── data.js
    ├── example.png
    ├── example2.png
    └── index.html
├── ganttView.css
├── ganttView.js
└── lib
    └── jquery-ui-1.8.4.css


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | jQuery-ganttView
 2 | ================
 3 | 
 4 | jQuery-ganttView是基于jQuery，下载后直接运行即可。
 5 | 特性：
 6 | 1.可以点击、拖动、调整大小、以及直接拖拽新任务到视图中
 7 | [![示例图](https://github.com/982964399/jQuery-ganttView/master/example/example.png)]
 8 | [![示例图](https://github.com/982964399/jQuery-ganttView/master/example/example2.png)]
 9 | 
10 | 依赖
11 | ------------
12 | - jQuery 1.4以上
13 | - jQuery-UI 1.8.4以上
14 | 
15 | 用法
16 | ----------
17 | <pre><code>
18 | $("#ganttChart").ganttView({
19 | 	data: data,
20 | 	behavior: {
21 | 		onClick: function (data) { 
22 | 			var msg = "click事件:" + JSON.stringify(data);
23 | 			$("#eventMessage").text(msg);
24 | 		},
25 | 		onResize: function (data) {
26 | 			var msg = "resize事件:" + JSON.stringify(data);
27 | 			$("#eventMessage").text(msg);
28 | 		},
29 | 		onDrag: function (data) {
30 | 			var msg = "drag事件:" + JSON.stringify(data);
31 | 			$("#eventMessage").text(msg);
32 | 		}
33 | 	}
34 | });
35 | </pre></code>
36 | 
37 | 参数
38 | -----------------
39 | <pre><code>
40 | showWeekends: boolean
41 | data: object
42 | data格式：[
43 |     {
44 |         id: 2, name: "Aaron", series: [
45 |             {
46 | 			    taskId: 1,
47 | 			    name: "任务1",
48 | 			    start: '2018/01,05',
49 | 			    end: '2018/01/20',
50 | 			    options:{ // 单条配置
51 | 			        resizable?:boolean, // default:true
52 | 			        draggable?:boolean, // default:true
53 | 			        color?: string
54 |                 },
55 |                 ...其他参数
56 | 			 }
57 | 		]
58 |     }
59 | ]
60 | dataUrl: string,
61 | cellWidth: number, default: 30
62 | cellHeight: number, default: 30
63 | vtHeaderWidth: number, default: 100,
64 | behavior: { // 整体配置， 如果整体设置不能拖拽、改变大小，则单条配置会失效
65 | 	clickable: boolean,
66 | 	draggable: boolean,
67 | 	resizable: boolean,
68 | 	onClick: function,
69 | 	onDrag: function,
70 | 	onResize: function
71 | }
72 | </code></pre>
73 | 
74 | 
75 | License
76 | -------
77 | MIT License
78 | 
79 | Copyright (c) 2018 982964399
80 | 
81 | Permission is hereby granted, free of charge, to any person obtaining a copy
82 | of this software and associated documentation files (the "Software"), to deal
83 | in the Software without restriction, including without limitation the rights
84 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
85 | copies of the Software, and to permit persons to whom the Software is
86 | furnished to do so, subject to the following conditions:
87 | 
88 | The above copyright notice and this permission notice shall be included in all
89 | copies or substantial portions of the Software.
90 | 
91 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
92 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
93 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
94 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
95 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
96 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
97 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | jQuery-ganttView 资源甘特图
  2 | ================
  3 | 
  4 | jQuery-ganttView是基于jQuery，下载后直接运行即可。
  5 | 
  6 | 特性
  7 | --------
  8 | 1.可以点击、拖动、调整大小、以及直接拖拽新任务到视图中
  9 | ![示例图](https://github.com/982964399/jQuery-ganttView/blob/master/example/example.png)
 10 | ![示例图](https://github.com/982964399/jQuery-ganttView/blob/master/example/example2.png)
 11 | 
 12 | 依赖
 13 | ------------
 14 | - jQuery 1.4以上
 15 | - jQuery-UI 1.8.4以上
 16 | 
 17 | 用法
 18 | ----------
 19 | <pre><code>
 20 | $("#ganttChart").ganttView({
 21 | 	data: data,
 22 | 	behavior: {
 23 | 		onClick: function (data) { 
 24 | 			var msg = "click事件:" + JSON.stringify(data);
 25 | 			$("#eventMessage").text(msg);
 26 | 		},
 27 | 		onResize: function (data) {
 28 | 			var msg = "resize事件:" + JSON.stringify(data);
 29 | 			$("#eventMessage").text(msg);
 30 | 		},
 31 | 		onDrag: function (data) {
 32 | 			var msg = "drag事件:" + JSON.stringify(data);
 33 | 			$("#eventMessage").text(msg);
 34 | 		}
 35 | 	}
 36 | });
 37 | </pre></code>
 38 | 
 39 | 参数
 40 | -----------------
 41 | <pre><code>
 42 | showWeekends: boolean
 43 | data: object
 44 | data格式：[
 45 |     {
 46 |         id: 2, name: "Aaron", series: [
 47 |             {
 48 | 			    taskId: 1,
 49 | 			    name: "任务1",
 50 | 			    start: '2018/01,05',
 51 | 			    end: '2018/01/20',
 52 | 			    options:{ // 单条配置
 53 | 			        resizable?:boolean, // default:true
 54 | 			        draggable?:boolean, // default:true
 55 | 			        color?: string
 56 |                 },
 57 |                 ...其他参数
 58 | 			 }
 59 | 		]
 60 |     }
 61 | ]
 62 | dataUrl: string,
 63 | cellWidth: number, default: 30
 64 | cellHeight: number, default: 30
 65 | vtHeaderWidth: number, default: 100,
 66 | behavior: { // 整体配置， 如果整体设置不能拖拽、改变大小，则单条配置会失效
 67 | 	clickable: boolean,
 68 | 	draggable: boolean,
 69 | 	resizable: boolean,
 70 | 	onClick: function,
 71 | 	onDrag: function,
 72 | 	onResize: function
 73 | }
 74 | </code></pre>
 75 | 
 76 | 
 77 | License
 78 | -------
 79 | MIT License
 80 | 
 81 | Copyright (c) 2018
 82 | 
 83 | Permission is hereby granted, free of charge, to any person obtaining a copy
 84 | of this software and associated documentation files (the "Software"), to deal
 85 | in the Software without restriction, including without limitation the rights
 86 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 87 | copies of the Software, and to permit persons to whom the Software is
 88 | furnished to do so, subject to the following conditions:
 89 | 
 90 | The above copyright notice and this permission notice shall be included in all
 91 | copies or substantial portions of the Software.
 92 | 
 93 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 94 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 95 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 96 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 97 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 98 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 99 | SOFTWARE.
100 | 


--------------------------------------------------------------------------------
/example/data.js:
--------------------------------------------------------------------------------
 1 | var ganttData = [
 2 | 	{
 3 | 		id: 1, name: "黄飞鸿",
 4 | 		series: [
 5 | 		]
 6 | 	},
 7 | 	{
 8 | 		id: 2, name: "张泽鑫", series: [
 9 | 			{ name: "任务1", start: '2018/01/05', end: '2018/01/20' },
10 | 			{ name: "任务2", start: '2018,01/06', end: '2018/01/17' }
11 | 		]
12 | 	},
13 | 	{
14 | 		id: 3, name: "李峰", series: [
15 | 			{ name: "任务1", start: '2018/01/11', end: '2018/01/15', options: {draggable: false, resizable: false, color: 'rgba(153, 204, 51, .8)'}}
16 | 		]
17 | 	},
18 | 	{
19 | 		id: 4, name: "王志飞", series: [
20 | 			{ name: "任务1", start: '2018/01/01', end: '2018/01/03' }
21 | 		]
22 | 	},
23 | 	{
24 | 		id: 5, name: "黄晓", series: [
25 | 			{ name: "任务1", start: '2018/01/16', end: '2018/01/24' }
26 | 		]
27 | 	},
28 | 	{
29 | 		id: 6, name: "张三丰", series: [
30 | 			{ name: "任务1", start: '2018/01/08', end: '2018/01/17' }
31 | 		]
32 | 	},
33 | 	{
34 | 		id: 7, name: "刘静", series: [
35 | 			{ name: "任务1", start: '2018/01/25', end: '2018/02/03' }
36 | 		 ]
37 | 	},
38 | 	{
39 | 		id: 8, name: "张涛", series: [
40 | 			{ name: "任务1", start: '2018/01/08', end: '2018/01/12' }
41 | 		]
42 | 	}
43 | ];


--------------------------------------------------------------------------------
/example/example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BeichenPlus/jQuery-ganttView/d13e91d4eb0e0902882c618c1115418943ac0fde/example/example.png


--------------------------------------------------------------------------------
/example/example2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BeichenPlus/jQuery-ganttView/d13e91d4eb0e0902882c618c1115418943ac0fde/example/example2.png


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | 
 3 | <html lang="en">
 4 | <head>
 5 | 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 | 	<link rel="stylesheet" type="text/css" href="../lib/jquery-ui-1.8.4.css" />
 7 | 	<link rel="stylesheet" type="text/css" href="../ganttView.css" />
 8 | 	<style type="text/css">
 9 | 		body {
10 | 			font-family: tahoma, verdana, helvetica;
11 | 			font-size: 0.8em;
12 | 			padding: 10px;
13 | 		}
14 | 	</style>
15 | 	<title>jQuery Gantt</title>
16 | 	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
17 | 	<script src="https://cdn.bootcss.com/jqueryui/1.9.0/jquery-ui.min.js"></script>
18 | </head>
19 | <body>
20 | 
21 | 	<div id="ganttChart"></div>
22 | 	<br/><br/>
23 | 	<div id="eventMessage"></div>
24 | 	<div class="task" data-task='{ "name": "任务7", "start": "2018/01/11", "end": "2018/01/18" }'
25 | 		 style="background: #fff; overflow: hidden;margin: 10px 0; box-shadow:0 0 10px rgba(0,0,0,.3); width:200px;padding:10px;-webkit-user-select: none;user-select: none;">
26 | 		<h2>任务7</h2>
27 | 		<p>预计开始时间：2018/1/12</p>
28 | 		<p>预计结束时间：2018/1/15</p>
29 | 	</div>
30 | 	<div class="task" data-task='{ "name": "任务6", "start": "2018/01/06", "end": "2018/01/13" }'
31 | 		 style="background: #fff; overflow: hidden;margin: 10px 0;box-shadow:0 0 10px rgba(0,0,0,.3); width:200px;padding:10px;-webkit-user-select: none;user-select: none;">
32 | 		<h2>任务6</h2>
33 | 		<p>预计开始时间：2018/1/06</p>
34 | 		<p>预计结束时间：2018/1/13</p>
35 | 	</div>
36 | 	<button id="submit">提交</button>
37 | 	<div id="submitData"></div>
38 | 	<script type="text/javascript">
39 |         $( ".task" ).draggable({
40 | 			revert: true,
41 |             opacity: 0.7
42 | 		});
43 | 	</script>
44 | 	<script type="text/javascript" src="../ganttView.js"></script>
45 | 	<script type="text/javascript" src="data.js"></script>
46 | 	<script type="text/javascript">
47 | 		$(function () {
48 | 			$("#ganttChart").ganttView({
49 |                 // showWeekends: true,
50 | 				data: ganttData,
51 | 				behavior: {
52 | 					onClick: function (data) { 
53 | 						var msg = "click事件:" + JSON.stringify(data);
54 | 						$("#eventMessage").text(msg);
55 | 					},
56 | 					onResize: function (data) {
57 | 					    console.log(data);
58 | 						var msg = "resize事件:" + JSON.stringify(data);
59 | 						$("#eventMessage").text(msg);
60 | 					},
61 | 					onDrag: function (data) {
62 | 					    // console.log(data);
63 | 						var msg = "drag事件:" + JSON.stringify(data);
64 | 						$("#eventMessage").text(msg);
65 | 					}
66 | 				}
67 | 			});
68 | 			$("#submit").click(function () {
69 |                 $("#ganttChart").ganttView("getDatas", function (datas) {
70 |                     console.log(datas);
71 |                     $("#submitData").text(JSON.stringify(datas));
72 |                 });
73 |             });
74 | 		});
75 | 	</script>
76 | 
77 | </body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/ganttView.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
  3 | 
  4 | 
  5 | div.ganttview-hzheader-month,
  6 | div.ganttview-hzheader-day,
  7 | div.ganttview-vtheader,
  8 | div.ganttview-vtheader-title-name,
  9 | div.ganttview-vtheader-item-name,
 10 | div.ganttview-vtheader-series,
 11 | div.ganttview-grid,
 12 | div.ganttview-grid-row-cell {
 13 | 	float: left;
 14 | }
 15 | 
 16 | div.ganttview-hzheader-month,
 17 | div.ganttview-hzheader-day {
 18 | 	text-align: center;
 19 | }
 20 | 
 21 | div.ganttview-grid-row-cell.last,
 22 | div.ganttview-hzheader-day.last,
 23 | div.ganttview-hzheader-month.last {
 24 | 	border-right: none;
 25 | }
 26 | 
 27 | div.ganttview {
 28 | 	border: 1px solid #999;
 29 | }
 30 | 
 31 | 
 32 | /* Horizontal Header */
 33 | 
 34 | div.ganttview-hzheader-month {
 35 | 	width: 60px;
 36 | 	height: 30px;
 37 | 	border-right: 1px solid #d0d0d0;
 38 | 	line-height: 30px;
 39 | }
 40 | 
 41 | div.ganttview-hzheader-day {
 42 | 	width: 30px;
 43 | 	height: 30px;
 44 | 	border-right: 1px solid #f0f0f0;
 45 | 	border-top: 1px solid #d0d0d0;
 46 | 	line-height: 30px;
 47 | 	color: #777;
 48 | }
 49 | 
 50 | 
 51 | /* Vertical Header */
 52 | 
 53 | div.ganttview-vtheader {
 54 | 	width: 150px;
 55 | 	overflow: hidden;
 56 | 	background-color: #fff;
 57 | }
 58 | 
 59 | div.ganttview-vtheader-title,
 60 | div.ganttview-vtheader-item {
 61 | 	overflow: hidden;
 62 | 	color: #666;
 63 | }
 64 | div.ganttview-vtheader-title-name {
 65 | 	text-align: center;
 66 | }
 67 | div.ganttview-vtheader-title-name + div.ganttview-vtheader-title-name {
 68 | 	border-left: 1px solid #d0d0d0;
 69 | }
 70 | 
 71 | div.ganttview-vtheader-item-name {
 72 | 	box-sizing: border-box;
 73 | 	width: 80px;
 74 | 	text-align: center;
 75 | 	box-sizing: border-box;
 76 | 	/*width: 100px;*/
 77 | 	padding: 3px;
 78 | 	border-top: 1px solid #d0d0d0;
 79 | 	line-height: 16px;
 80 | }
 81 | 
 82 | div.ganttview-vtheader-series {
 83 | 	width: calc(100% - 80px);
 84 | }
 85 | div.ganttview-vtheader-series-name {
 86 | 	box-sizing: border-box;
 87 | 	width: 100%;
 88 | 	border-top: 1px solid #d0d0d0;
 89 | 	text-align: center;
 90 | 	padding: 3px;
 91 | }
 92 | 
 93 | 
 94 | /* Slider */
 95 | 
 96 | div.ganttview-slide-container {
 97 | 	overflow-x: auto;
 98 | 	overflow-y: hidden;
 99 | 	border-left: 1px solid #999;
100 | }
101 | 
102 | 
103 | /* Grid */
104 | 
105 | div.ganttview-grid-row-cell {
106 | 	width: 30px;
107 | 	height: 31px;
108 | 	border-right: 1px solid #f0f0f0;
109 | 	border-top: 1px solid #f0f0f0;
110 | }
111 | 
112 | div.ganttview-weekend {
113 | 	/*background-color: #fafafa;*/
114 | 	color: #FF6666;
115 | 	/*background-color: #f6e7e8;*/
116 | }
117 | 
118 | 
119 | /* Blocks */
120 | 
121 | div.ganttview-block-container {
122 | 	height: 24px;
123 | 	padding: 4px 0;
124 | }
125 | 
126 | div.ganttview-block {
127 | 	position: relative;
128 | 	height: 24px;
129 | 	background-color: rgba(51,153,204, .8);
130 | 	/*border: 1px solid #c0c0c0;*/
131 | 	border-radius: 3px;
132 | 	-moz-border-radius: 3px;
133 | 	-webkit-border-radius: 3px;
134 | }
135 | 
136 | div.ganttview-block-text {
137 | 	box-sizing: border-box;
138 | 	position: absolute;
139 | 	/*height: 24px;*/
140 | 	font-size: 12px;
141 | 	/*line-height: 20px;*/
142 | 	color: #fff;
143 | 	padding: 0px 4px;
144 | 	-moz-user-select: none;
145 | 	-webkit-user-select: none;
146 | 	user-select: none;
147 | }
148 | 
149 | 
150 | /* Adjustments for jQuery UI Styling */
151 | 
152 | div.ganttview-block div.ui-resizable-handle.ui-resizable-s {
153 | 	bottom: -0;
154 | }
155 | 
156 | .gantt-drag-hover{background-color: #D7FFF0;}


--------------------------------------------------------------------------------
/ganttView.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | Options
  3 | -----------------
  4 | showWeekends: boolean
  5 | data: object
  6 | data格式：[
  7 |     {
  8 |         id: 2, name: "Aaron", series: [
  9 |             {
 10 | 			    taskId: 1,
 11 | 			    name: "任务1",
 12 | 			    start: '2018/01,05',
 13 | 			    end: '2018/01/20',
 14 | 			    options:{ // 单条配置
 15 | 			        resizable?:boolean, // default:true
 16 | 			        draggable?:boolean, // default:true
 17 | 			        color?: string
 18 |                 }
 19 | 			 }
 20 | 		]
 21 |     }
 22 | ]
 23 | dataUrl: string,
 24 | cellWidth: number, default: 30
 25 | cellHeight: number, default: 30
 26 | vtHeaderWidth: number, default: 100,
 27 | behavior: { // 整体配置， 如果整体设置不能拖拽、改变大小，则单条配置会失效
 28 | 	clickable: boolean,
 29 | 	draggable: boolean,
 30 | 	resizable: boolean,
 31 | 	onClick: function,
 32 | 	onDrag: function,
 33 | 	onResize: function
 34 | }
 35 | */
 36 | 
 37 | (function (jQuery) {
 38 | 	var ganttOpts = {};
 39 | 	var ganttView = null;
 40 |     jQuery.fn.resizeEnd = function (callback, timeout) {
 41 |         $(this).resize(function () {
 42 |             var $this = $(this);
 43 |             if ($this.data('resizeTimeout')) {
 44 |                 clearTimeout($this.data('resizeTimeout'));
 45 |             }
 46 |             $this.data('resizeTimeout', setTimeout(callback, timeout));
 47 |         });
 48 |     };
 49 |     jQuery.fn.ganttView = function () {
 50 |     	
 51 |     	var args = Array.prototype.slice.call(arguments);
 52 |     	
 53 |     	if (args.length === 1 && typeof(args[0]) === "object") {
 54 |             ganttView = this;
 55 |         	build.call(ganttView, args[0]);
 56 |     	} else if(args.length >= 1 && typeof(args[0] === "string")) {
 57 |     	    handleMethod.call(ganttView, args);
 58 |     	}
 59 |         $(window).resizeEnd(function() {
 60 |             build.call(ganttView, ganttOpts);
 61 |         }, 500);
 62 | 
 63 |     };
 64 |     
 65 |     function build(options) {
 66 |     	ganttView.children().remove();
 67 |         var defaults = {
 68 |             showWeekends: true,
 69 |             cellWidth: 40,
 70 |             cellHeight: 30,
 71 |             vtHeaderWidth: 200,
 72 |             data: [],
 73 |             dataUrl: null,
 74 |             behavior: {
 75 |             	clickable: true,
 76 |             	draggable: true,
 77 |             	resizable: true
 78 |             }
 79 |         };
 80 |         
 81 |         var opts = jQuery.extend(true, defaults, options);
 82 |         jQuery.extend(ganttOpts, opts);
 83 | 		if (opts.data) {
 84 | 			build();
 85 | 		} else if (opts.dataUrl) {
 86 | 			jQuery.getJSON(opts.dataUrl, function (data) {
 87 | 				opts.data = data;
 88 |                 jQuery.extend(ganttOpts, opts);
 89 | 				build();
 90 | 			});
 91 | 		}
 92 | 
 93 | 		function build() {
 94 | 			for(var i = 0; i < opts.data.length; i++) {
 95 | 			    for(var j = 0; j < opts.data[i].series.length; j++) {
 96 | 			        var serie = opts.data[i].series[j];
 97 | 			        if (!!serie.start && !!serie.end) {
 98 | 			            serie.start = new Date(serie.start);
 99 | 			            serie.end = new Date(serie.end);
100 |                     }
101 |                 }
102 |             }
103 | 			var minDays = Math.floor(((ganttView.outerWidth() - opts.vtHeaderWidth ) / opts.cellWidth)  + 15);
104 | 			var startEnd = DateUtils.getBoundaryDatesFromData(opts.data, minDays);
105 | 			opts.start = startEnd[0];
106 | 			opts.end = startEnd[1];
107 | 
108 |             ganttView.each(function () {
109 | 	            var container = jQuery(this);
110 | 	            var div = jQuery("<div>", { "class": "ganttview" });
111 | 	            new Chart(div, opts).render();
112 | 				container.append(div);
113 | 	            new Behavior(container, opts).apply();
114 | 	        });
115 | 		}
116 |     }
117 | 
118 |     function handleMethod(args) {
119 | 
120 |         if(args.length > 1) {
121 |             if (args[0] === "getDatas" && typeof(args[1]) === "function") {
122 |                 var datas = [];
123 |                 ganttOpts.data.forEach(function (value) {
124 |                     var data = {};
125 |                     jQuery.extend(data, value);
126 |                     data.series = value.series.filter(function (v) {
127 |                         return !v._empty;
128 |                     });
129 |                     datas.push(data);
130 |                 })
131 |                 args[1](datas);
132 |             }
133 |         }
134 |     }
135 | 
136 | 	var Chart = function(div, opts) {
137 | 		
138 | 		function render() {
139 | 			addVtHeader(div, opts.data, opts.cellHeight, opts.vtHeaderWidth);
140 |             var slideDiv = jQuery("<div>", {
141 |                 "class": "ganttview-slide-container",
142 |                 // "css": { "width": ganttView.outerWidth() - opts.vtHeaderWidth - 3 + "px" }
143 |             });
144 | 			
145 |             var dates = getDates(opts.start, opts.end);
146 |             addHzHeader(slideDiv, dates, opts.cellWidth,opts.showWeekends);
147 |             addGrid(slideDiv, opts.data, dates, opts.cellWidth, opts.cellHeight, opts.showWeekends);
148 |             addBlockContainers(slideDiv, opts.data, opts.cellHeight);
149 |             addBlocks(slideDiv, opts.data, opts.cellWidth, opts.start, opts.cellHeight);
150 |             div.append(slideDiv);
151 |             applyLastClass(div.parent());
152 | 		}
153 | 		
154 | 		var monthNames = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
155 | 
156 |         function getDates(start, end) {
157 |             var dates = [];
158 | 			dates[start.getFullYear()] = [];
159 | 			dates[start.getFullYear()][start.getMonth()] = [start];
160 | 			var last = start;
161 | 			while (last.getTime() < end.getTime()) {
162 | 				var next = DateUtils.addDays(new Date(last), 1);
163 | 				if (!dates[next.getFullYear()]) { dates[next.getFullYear()] = []; }
164 | 				if (!dates[next.getFullYear()][next.getMonth()]) { 
165 | 					dates[next.getFullYear()][next.getMonth()] = []; 
166 | 				}
167 | 				dates[next.getFullYear()][next.getMonth()].push(next);
168 | 				last = next;
169 | 			}
170 | 			return dates;
171 |         }
172 | 
173 |         function addVtHeader(div, data, cellHeight, vtHeaderWidth) {
174 |             var headerDiv = jQuery("<div>", {
175 |                 "class": "ganttview-vtheader",
176 |                 "css": {"width": vtHeaderWidth + "px"}
177 |             });
178 |             var headerTitleDiv = jQuery("<div>", {
179 |                 "class": "ganttview-vtheader-title",
180 |                 "css": {"width": vtHeaderWidth + "px", "height": cellHeight * 2 + 1+ "px"}
181 |             });
182 | 
183 |             headerTitleDiv.append(jQuery("<div>", {
184 |                 "class": "ganttview-vtheader-title-name",
185 |                 "css": {"height": "100%", "line-height": cellHeight * 2 + 1 + "px", "width": "80px"}
186 |             }).append("名称"));
187 |             headerTitleDiv.append(jQuery("<div>", {
188 |                 "class": "ganttview-vtheader-title-name",
189 |                 "css": {"height": "100%", "line-height": cellHeight * 2 + 1 + "px", "width": "calc(100% - 81px)"}
190 |             }).append("任务"));
191 | 
192 |             headerDiv.append(headerTitleDiv);
193 |             for (var i = 0; i < data.length; i++) {
194 |                 if (!data[i].series || data[i].series.length === 0) { // 没有任务则加一条空的任务
195 |                     data[i].series = [{id: null, name: '暂无任务', _empty: true}];
196 |                 }
197 |                 var itemDiv = jQuery("<div>", {
198 |                     "class": "ganttview-vtheader-item",
199 |                     "css": { "height": (data[i].series.length * cellHeight) + "px" }
200 |                 });
201 |                 itemDiv.append(jQuery("<div>", {
202 |                     "class": "ganttview-vtheader-item-name",
203 |                     "css": { "height": (data[i].series.length * cellHeight) + "px", "line-height": (data[i].series.length * cellHeight - 6) + "px" }
204 |                 }).append(data[i].name));
205 |                 var seriesDiv = jQuery("<div>", { "class": "ganttview-vtheader-series" });
206 |                 for (var j = 0; j < data[i].series.length; j++) {
207 |                     seriesDiv.append(jQuery("<div>", {
208 |                         "class": "ganttview-vtheader-series-name",
209 |                         "css": { "height": cellHeight + "px", "line-height": cellHeight - 6 + "px" }
210 |                     })
211 |                         .append(data[i].series[j].name));
212 |                 }
213 |                 itemDiv.append(seriesDiv);
214 |                 headerDiv.append(itemDiv);
215 | 
216 |             }
217 | 
218 |             div.append(headerDiv);
219 |         }
220 | 
221 |         function addHzHeader(div, dates, cellWidth,showWeekends) {
222 |             var headerDiv = jQuery("<div>", { "class": "ganttview-hzheader" });
223 |             var monthsDiv = jQuery("<div>", { "class": "ganttview-hzheader-months clearfix" });
224 |             var daysDiv = jQuery("<div>", { "class": "ganttview-hzheader-days clearfix" });
225 |             var totalW = 0;
226 | 			for (var y in dates) {
227 | 				for (var m in dates[y]) {
228 | 					var w = dates[y][m].length * cellWidth;
229 | 					totalW = totalW + w;
230 | 					monthsDiv.append(jQuery("<div>", {
231 | 						"class": "ganttview-hzheader-month",
232 | 						"css": { "width": (w - 1) + "px" }
233 | 					}).append(y + "年" + monthNames[m]));
234 | 					for (var d in dates[y][m]) {
235 |                         var dayDiv = jQuery("<div>", {
236 |                             "class": "ganttview-hzheader-day",
237 |                             "css": {"width": (cellWidth - 1) + "px"}
238 |                         });
239 |                         dayDiv.append(dates[y][m][d].getDate());
240 |                         if (DateUtils.isWeekend(dates[y][m][d]) && showWeekends) {
241 |                             dayDiv.addClass("ganttview-weekend");
242 |                         }
243 | 						daysDiv.append(dayDiv);
244 | 					}
245 | 				}
246 | 			}
247 |             monthsDiv.css("width", totalW + "px");
248 |             daysDiv.css("width", totalW + "px");
249 |             headerDiv.append(monthsDiv).append(daysDiv);
250 |             div.append(headerDiv);
251 |         }
252 | 
253 |         function addGrid(div, data, dates, cellWidth, cellHeight, showWeekends) {
254 |             var gridDiv = jQuery("<div>", { "class": "ganttview-grid" });
255 |             var rowDiv = jQuery("<div>", { "class": "ganttview-grid-row clearfix" });
256 | 			for (var y in dates) {
257 | 				for (var m in dates[y]) {
258 | 					for (var d in dates[y][m]) {
259 | 						var cellDiv = jQuery("<div>", {
260 | 						    "class": "ganttview-grid-row-cell",
261 |                             "css": {"width": (cellWidth - 1) + "px", "height": (cellHeight - 1) + "px"}
262 |                         });
263 | 						if (DateUtils.isWeekend(dates[y][m][d]) && showWeekends) { 
264 | 							cellDiv.addClass("ganttview-weekend"); 
265 | 						}
266 | 						rowDiv.append(cellDiv);
267 | 					}
268 | 				}
269 | 			}
270 |             var w = jQuery("div.ganttview-grid-row-cell", rowDiv).length * cellWidth;
271 |             rowDiv.css("width", w + "px");
272 |             gridDiv.css("width", w + "px");
273 |             for (var i = 0; i < data.length; i++) {
274 |                 for (var j = 0; j < data[i].series.length; j++) {
275 |                 	var cloneRowDiv = rowDiv.clone();
276 |                     cloneRowDiv.droppable({
277 |                         accept: '.task',
278 |                         hoverClass: "gantt-drag-hover",
279 |                         drop: function (e, ui) {
280 |                             var task = ui.helper.data("task");
281 |                         	var lineCount = gridDiv.children(".ganttview-grid-row").index(jQuery(this))+1;
282 |                             var count = 0;
283 |                             for(var i = 0; i < ganttOpts.data.length; i ++) {
284 |                                 for(var j = 0; j < ganttOpts.data[i].series.length; j ++) {
285 |                                     count ++;
286 |                                     if (count === lineCount) {
287 |                                         console.log(task);
288 |                                         task.start = new Date(task.start);
289 |                                         task.end = new Date(task.end);
290 |                                         ui.helper.remove();
291 |                                         var series = ganttOpts.data[i].series.filter(function (value) {
292 |                                             return !value._empty;
293 |                                         } );
294 |                                         series.push(task);
295 |                                         ganttOpts.data[i].series = series;
296 |                                         build(ganttOpts);
297 |                                         break;
298 |                                     }
299 |                                 }
300 |                                 if (count === lineCount) {
301 |                                     break;
302 |                                 }
303 |                             }
304 |                         }
305 |                     });
306 |                     gridDiv.append(cloneRowDiv);
307 |                 }
308 |             }
309 |             div.append(gridDiv);
310 |         }
311 | 
312 |         function addBlockContainers(div, data, cellHeight) {
313 |             var blocksDiv = jQuery("<div>", { "class": "ganttview-blocks" });
314 |             for (var i = 0; i < data.length; i++) {
315 |                 for (var j = 0; j < data[i].series.length; j++) {
316 |                     blocksDiv.append(jQuery("<div>", {
317 |                         "class": "ganttview-block-container",
318 |                         "css": {"height": cellHeight - 8 + "px"}
319 |                     }));
320 |                 }
321 |             }
322 |             div.append(blocksDiv);
323 |         }
324 | 
325 |         function addBlocks(div, data, cellWidth, start, cellHeight) {
326 |             var rows = jQuery("div.ganttview-blocks div.ganttview-block-container", div);
327 |             var rowIdx = 0;
328 |             for (var i = 0; i < data.length; i++) {
329 |                 for (var j = 0; j < data[i].series.length; j++) {
330 |                     var series = data[i].series[j];
331 |                     var size = 0;
332 |                     if (!series._empty) {
333 |                         size = DateUtils.daysBetween(series.start, series.end) + 1;
334 | 
335 |                         var offset = DateUtils.daysBetween(start, series.start);
336 |                         var block = jQuery("<div>", {
337 |                             "class": "ganttview-block",
338 |                             "title": series.name + "： " + size + " 天",
339 |                             "css": {
340 |                                 "width": ((size * cellWidth) - 8) + "px",
341 |                                 "height": cellHeight - 8 + "px",
342 |                                 "margin-left": ((offset * cellWidth) + 4) + "px"
343 |                             }
344 |                         });
345 |                         addBlockData(block, data[i], series);
346 |                         if (!!data[i].series[j].options && data[i].series[j].options.color) {
347 |                             block.css("background-color", data[i].series[j].options.color);
348 |                         }
349 |                         block.append(jQuery("<div>", {
350 |                             "class": "ganttview-block-text",
351 |                             "css": {"height": cellHeight - 8 + "px", "line-height": cellHeight - 8 + "px"}
352 |                         }).text(size + "天"));
353 |                         jQuery(rows[rowIdx]).append(block);
354 |                     }
355 |                     rowIdx = rowIdx + 1;
356 |                 }
357 |             }
358 |         }
359 |         
360 |         function addBlockData(block, data, series) {
361 |             var options = {draggable: true, resizable: true};
362 |         	var blockData = { id: data.id, taskId: null, name: data.name};
363 |         	if (!!series.options) {
364 |                 jQuery.extend(options, series.options);
365 |             }
366 |         	jQuery.extend(blockData, series);
367 |             blockData.options = options;
368 |         	block.data("block-data", blockData);
369 |         }
370 | 
371 |         function applyLastClass(div) {
372 |             jQuery("div.ganttview-grid-row div.ganttview-grid-row-cell:last-child", div).addClass("last");
373 |             jQuery("div.ganttview-hzheader-days div.ganttview-hzheader-day:last-child", div).addClass("last");
374 |             jQuery("div.ganttview-hzheader-months div.ganttview-hzheader-month:last-child", div).addClass("last");
375 |         }
376 | 		
377 | 		return {
378 | 			render: render
379 | 		};
380 | 	}
381 | 
382 | 	var Behavior = function (div, opts) {
383 | 		
384 | 		function apply() {
385 | 			
386 | 			if (opts.behavior.clickable) { 
387 |             	bindBlockClick(div, opts.behavior.onClick); 
388 |         	}
389 |         	
390 |             if (opts.behavior.resizable) { 
391 |             	bindBlockResize(div, opts.cellWidth, opts.start, opts.behavior.onResize); 
392 |         	}
393 |             
394 |             if (opts.behavior.draggable) { 
395 |             	bindBlockDrag(div, opts.cellWidth, opts.start, opts.behavior.onDrag); 
396 |         	}
397 | 		}
398 | 
399 |         function bindBlockClick(div, callback) {
400 |             jQuery("div.ganttview-block", div).live("click", function () {
401 |                 if (callback) { callback(jQuery(this).data("block-data")); }
402 |             });
403 |         }
404 |         
405 |         function bindBlockResize(div, cellWidth, startDate, callback) {
406 |             jQuery("div.ganttview-block", div).each(function () {
407 |             if (jQuery(this).data("block-data").options.resizable) {
408 |                 jQuery(this).resizable({
409 |                     // grid: cellWidth,
410 |                     handles: "e",
411 |                     stop: function () {
412 |                         var block = jQuery(this);
413 |                         var count = (block.outerWidth()+8)%cellWidth < cellWidth/2?Math.floor((block.outerWidth()+8)/cellWidth):Math.ceil((block.outerWidth()+8)/cellWidth);
414 |                         block.width(count * cellWidth - 8);
415 |                         updateDataAndPosition(div, block, cellWidth, startDate);
416 |                         if (callback) { callback(block.data("block-data")); }
417 |                     }
418 |                 });
419 |             }});
420 |         }
421 |         
422 |         function bindBlockDrag(div, cellWidth, startDate, callback) {
423 | 		    jQuery("div.ganttview-block", div).each(function () {
424 |                 // console.log(jQuery(this));
425 |                 if (jQuery(this).data("block-data").options.draggable) {
426 |                     jQuery(this).draggable({
427 |                         axis: "x",
428 |                         stop: function () {
429 |                             var block = jQuery(this);
430 |                             var container = jQuery("div.ganttview-slide-container", div);
431 |                             var scroll = container.scrollLeft();
432 |                             var offset = block.offset().left - container.offset().left - 1 + scroll;
433 |                             offset = offset >=0 ? offset : 0;
434 |                             var left =((offset%cellWidth < cellWidth/2)?Math.floor(offset/cellWidth):Math.ceil(offset/cellWidth)) * cellWidth;
435 |                             block.css('left', "");
436 |                             block.css('margin-left', left + 4 +'px');
437 | 
438 |                             updateDataAndPosition(div, block, cellWidth, startDate);
439 |                             if (callback) { callback(block.data("block-data")); }
440 |                         }
441 |                     });
442 |                 }
443 |             });
444 |         }
445 |         
446 |         function updateDataAndPosition(div, block, cellWidth, startDate) {
447 |         	var container = jQuery("div.ganttview-slide-container", div);
448 |         	var scroll = container.scrollLeft();
449 | 			var offset = block.offset().left - container.offset().left - 1 + scroll;
450 | 			
451 | 			// Set new start date
452 | 			var daysFromStart = Math.floor(offset / cellWidth);
453 | 			var newStart = DateUtils.addDays(new Date(startDate),daysFromStart);
454 | 			block.data("block-data").start = newStart;
455 | 
456 | 			// Set new end date
457 |         	var width = block.outerWidth();
458 | 			var numberOfDays = Math.floor(width / cellWidth);
459 | 			var newEnd = DateUtils.addDays(new Date(newStart),numberOfDays);
460 | 			block.data("block-data").end = newEnd;
461 | 			jQuery("div.ganttview-block-text", block).text(numberOfDays + 1 + "天");
462 | 
463 | 			block.css("top", "").css("left", "")
464 | 				.css("position", "relative");
465 |            updateGanttOptsDatas(block, newStart, newEnd);
466 |         }
467 | 
468 |         function updateGanttOptsDatas(block, newStart, newEnd) {
469 |             var blockIndex = ganttView.find(".ganttview-block").index(block);
470 |             var count = 0;
471 |             for(var i = 0; i < ganttOpts.data.length; i++) {
472 |                 for (var j = 0; j < ganttOpts.data[i].series.length; j++) {
473 |                     if(ganttOpts.data[i].series[j]._empty) {
474 |                         continue;
475 |                     }
476 |                     // count ++;
477 |                     if (count === blockIndex) {
478 |                         console.log(ganttOpts.data[i].series[j]);
479 |                         ganttOpts.data[i].series[j].start = newStart;
480 |                         ganttOpts.data[i].series[j].end = newEnd;
481 |                         return;
482 |                     }
483 |                     count ++;
484 |                 }
485 |             }
486 |         }
487 |         
488 |         return {
489 |         	apply: apply	
490 |         };
491 | 	}
492 | 
493 |     // var ArrayUtils = {
494 |     //     contains: function (arr, obj) {
495 |     //         var has = false;
496 |     //         for (var i = 0; i < arr.length; i++) { if (arr[i] == obj) { has = true; } }
497 |     //         return has;
498 |     //     }
499 |     // };
500 | 
501 |     var DateUtils = {
502 | 
503 |         addDays: function(date, number)
504 |     	{
505 | 			var adjustDate = new Date(date.getTime() + 24*60*60*1000*number);
506 | 			return adjustDate;
507 |     	},
508 |     	
509 |         daysBetween: function (start, end) {
510 |             if (!start || !end) { return 0; }
511 |             if (new Date(start).getFullYear() === 1901 || new Date(end).getFullYear() === 8099) { return 0; }
512 |             var count = 0, date = new Date(start);
513 |             while (date.getTime() < new Date(end).getTime()) { count = count + 1; date = DateUtils.addDays(date,1);}
514 |             return count;
515 |         },
516 |         
517 |         isWeekend: function (date) {
518 |             return date.getDay() % 6 == 0;
519 |         },
520 | 
521 | 		getBoundaryDatesFromData: function (data, minDays) {
522 | 			var minStart = DateUtils.addDays(new Date(), -15);
523 | 			var maxEnd = new Date();
524 | 			for (var i = 0; i < data.length; i++) {
525 | 				for (var j = 0; j < data[i].series.length; j++) {
526 | 					if (!data[i].series[j].start || !data[i].series[j].end){
527 | 						continue;
528 | 					}
529 |                     // series.start = new Date()
530 | 					var start = new Date(data[i].series[j].start);
531 | 					var end = new Date(data[i].series[j].end);
532 | 					if (i == 0 && j == 0) { minStart = new Date(start); maxEnd = new Date(end); }
533 | 					if (minStart.getTime() > start.getTime()) { minStart = new Date(start); }
534 | 					if (maxEnd.getTime() < end.getTime()) { maxEnd = new Date(end); }
535 | 				}
536 | 			}
537 | 			if (DateUtils.daysBetween(minStart, maxEnd) < minDays) {
538 | 				maxEnd = DateUtils.addDays(minStart, minDays);
539 | 			}
540 | 			
541 | 			return [minStart, maxEnd];
542 | 		}
543 |     };
544 | })(jQuery);


--------------------------------------------------------------------------------
/lib/jquery-ui-1.8.4.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * jQuery UI CSS Framework @VERSION
  3 |  *
  4 |  * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
  5 |  * Dual licensed under the MIT or GPL Version 2 licenses.
  6 |  * http://jquery.org/license
  7 |  *
  8 |  * http://docs.jquery.com/UI/Theming/API
  9 |  */
 10 | 
 11 | /* Layout helpers
 12 | ----------------------------------*/
 13 | .ui-helper-hidden { display: none; }
 14 | .ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
 15 | .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
 16 | .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
 17 | .ui-helper-clearfix { display: inline-block; }
 18 | /* required comment for clearfix to work in Opera \*/
 19 | * html .ui-helper-clearfix { height:1%; }
 20 | .ui-helper-clearfix { display:block; }
 21 | /* end clearfix */
 22 | .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
 23 | 
 24 | 
 25 | /* Interaction Cues
 26 | ----------------------------------*/
 27 | .ui-state-disabled { cursor: default !important; }
 28 | 
 29 | 
 30 | /* Icons
 31 | ----------------------------------*/
 32 | 
 33 | /* states and images */
 34 | .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
 35 | 
 36 | 
 37 | /* Misc visuals
 38 | ----------------------------------*/
 39 | 
 40 | /* Overlays */
 41 | .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 42 | 
 43 | 
 44 | /*
 45 |  * jQuery UI CSS Framework @VERSION
 46 |  *
 47 |  * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 48 |  * Dual licensed under the MIT or GPL Version 2 licenses.
 49 |  * http://jquery.org/license
 50 |  *
 51 |  * http://docs.jquery.com/UI/Theming/API
 52 |  *
 53 |  * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
 54 |  */
 55 | 
 56 | 
 57 | /* Component containers
 58 | ----------------------------------*/
 59 | .ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }
 60 | .ui-widget .ui-widget { font-size: 1em; }
 61 | .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; }
 62 | .ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; }
 63 | .ui-widget-content a { color: #333333; }
 64 | .ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
 65 | .ui-widget-header a { color: #ffffff; }
 66 | 
 67 | /* Interaction states
 68 | ----------------------------------*/
 69 | .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; }
 70 | .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
 71 | .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; }
 72 | .ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
 73 | .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; }
 74 | .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; }
 75 | .ui-widget :active { outline: none; }
 76 | 
 77 | /* Interaction Cues
 78 | ----------------------------------*/
 79 | .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; }
 80 | .ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
 81 | .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; }
 82 | .ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; }
 83 | .ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; }
 84 | .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
 85 | .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
 86 | .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
 87 | 
 88 | /* Icons
 89 | ----------------------------------*/
 90 | 
 91 | /* states and images */
 92 | .ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
 93 | .ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
 94 | .ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
 95 | .ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); }
 96 | .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
 97 | .ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); }
 98 | .ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); }
 99 | .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); }
100 | 
101 | /* positioning */
102 | .ui-icon-carat-1-n { background-position: 0 0; }
103 | .ui-icon-carat-1-ne { background-position: -16px 0; }
104 | .ui-icon-carat-1-e { background-position: -32px 0; }
105 | .ui-icon-carat-1-se { background-position: -48px 0; }
106 | .ui-icon-carat-1-s { background-position: -64px 0; }
107 | .ui-icon-carat-1-sw { background-position: -80px 0; }
108 | .ui-icon-carat-1-w { background-position: -96px 0; }
109 | .ui-icon-carat-1-nw { background-position: -112px 0; }
110 | .ui-icon-carat-2-n-s { background-position: -128px 0; }
111 | .ui-icon-carat-2-e-w { background-position: -144px 0; }
112 | .ui-icon-triangle-1-n { background-position: 0 -16px; }
113 | .ui-icon-triangle-1-ne { background-position: -16px -16px; }
114 | .ui-icon-triangle-1-e { background-position: -32px -16px; }
115 | .ui-icon-triangle-1-se { background-position: -48px -16px; }
116 | .ui-icon-triangle-1-s { background-position: -64px -16px; }
117 | .ui-icon-triangle-1-sw { background-position: -80px -16px; }
118 | .ui-icon-triangle-1-w { background-position: -96px -16px; }
119 | .ui-icon-triangle-1-nw { background-position: -112px -16px; }
120 | .ui-icon-triangle-2-n-s { background-position: -128px -16px; }
121 | .ui-icon-triangle-2-e-w { background-position: -144px -16px; }
122 | .ui-icon-arrow-1-n { background-position: 0 -32px; }
123 | .ui-icon-arrow-1-ne { background-position: -16px -32px; }
124 | .ui-icon-arrow-1-e { background-position: -32px -32px; }
125 | .ui-icon-arrow-1-se { background-position: -48px -32px; }
126 | .ui-icon-arrow-1-s { background-position: -64px -32px; }
127 | .ui-icon-arrow-1-sw { background-position: -80px -32px; }
128 | .ui-icon-arrow-1-w { background-position: -96px -32px; }
129 | .ui-icon-arrow-1-nw { background-position: -112px -32px; }
130 | .ui-icon-arrow-2-n-s { background-position: -128px -32px; }
131 | .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
132 | .ui-icon-arrow-2-e-w { background-position: -160px -32px; }
133 | .ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
134 | .ui-icon-arrowstop-1-n { background-position: -192px -32px; }
135 | .ui-icon-arrowstop-1-e { background-position: -208px -32px; }
136 | .ui-icon-arrowstop-1-s { background-position: -224px -32px; }
137 | .ui-icon-arrowstop-1-w { background-position: -240px -32px; }
138 | .ui-icon-arrowthick-1-n { background-position: 0 -48px; }
139 | .ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
140 | .ui-icon-arrowthick-1-e { background-position: -32px -48px; }
141 | .ui-icon-arrowthick-1-se { background-position: -48px -48px; }
142 | .ui-icon-arrowthick-1-s { background-position: -64px -48px; }
143 | .ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
144 | .ui-icon-arrowthick-1-w { background-position: -96px -48px; }
145 | .ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
146 | .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
147 | .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
148 | .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
149 | .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
150 | .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
151 | .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
152 | .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
153 | .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
154 | .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
155 | .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
156 | .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
157 | .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
158 | .ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
159 | .ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
160 | .ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
161 | .ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
162 | .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
163 | .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
164 | .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
165 | .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
166 | .ui-icon-arrow-4 { background-position: 0 -80px; }
167 | .ui-icon-arrow-4-diag { background-position: -16px -80px; }
168 | .ui-icon-extlink { background-position: -32px -80px; }
169 | .ui-icon-newwin { background-position: -48px -80px; }
170 | .ui-icon-refresh { background-position: -64px -80px; }
171 | .ui-icon-shuffle { background-position: -80px -80px; }
172 | .ui-icon-transfer-e-w { background-position: -96px -80px; }
173 | .ui-icon-transferthick-e-w { background-position: -112px -80px; }
174 | .ui-icon-folder-collapsed { background-position: 0 -96px; }
175 | .ui-icon-folder-open { background-position: -16px -96px; }
176 | .ui-icon-document { background-position: -32px -96px; }
177 | .ui-icon-document-b { background-position: -48px -96px; }
178 | .ui-icon-note { background-position: -64px -96px; }
179 | .ui-icon-mail-closed { background-position: -80px -96px; }
180 | .ui-icon-mail-open { background-position: -96px -96px; }
181 | .ui-icon-suitcase { background-position: -112px -96px; }
182 | .ui-icon-comment { background-position: -128px -96px; }
183 | .ui-icon-person { background-position: -144px -96px; }
184 | .ui-icon-print { background-position: -160px -96px; }
185 | .ui-icon-trash { background-position: -176px -96px; }
186 | .ui-icon-locked { background-position: -192px -96px; }
187 | .ui-icon-unlocked { background-position: -208px -96px; }
188 | .ui-icon-bookmark { background-position: -224px -96px; }
189 | .ui-icon-tag { background-position: -240px -96px; }
190 | .ui-icon-home { background-position: 0 -112px; }
191 | .ui-icon-flag { background-position: -16px -112px; }
192 | .ui-icon-calendar { background-position: -32px -112px; }
193 | .ui-icon-cart { background-position: -48px -112px; }
194 | .ui-icon-pencil { background-position: -64px -112px; }
195 | .ui-icon-clock { background-position: -80px -112px; }
196 | .ui-icon-disk { background-position: -96px -112px; }
197 | .ui-icon-calculator { background-position: -112px -112px; }
198 | .ui-icon-zoomin { background-position: -128px -112px; }
199 | .ui-icon-zoomout { background-position: -144px -112px; }
200 | .ui-icon-search { background-position: -160px -112px; }
201 | .ui-icon-wrench { background-position: -176px -112px; }
202 | .ui-icon-gear { background-position: -192px -112px; }
203 | .ui-icon-heart { background-position: -208px -112px; }
204 | .ui-icon-star { background-position: -224px -112px; }
205 | .ui-icon-link { background-position: -240px -112px; }
206 | .ui-icon-cancel { background-position: 0 -128px; }
207 | .ui-icon-plus { background-position: -16px -128px; }
208 | .ui-icon-plusthick { background-position: -32px -128px; }
209 | .ui-icon-minus { background-position: -48px -128px; }
210 | .ui-icon-minusthick { background-position: -64px -128px; }
211 | .ui-icon-close { background-position: -80px -128px; }
212 | .ui-icon-closethick { background-position: -96px -128px; }
213 | .ui-icon-key { background-position: -112px -128px; }
214 | .ui-icon-lightbulb { background-position: -128px -128px; }
215 | .ui-icon-scissors { background-position: -144px -128px; }
216 | .ui-icon-clipboard { background-position: -160px -128px; }
217 | .ui-icon-copy { background-position: -176px -128px; }
218 | .ui-icon-contact { background-position: -192px -128px; }
219 | .ui-icon-image { background-position: -208px -128px; }
220 | .ui-icon-video { background-position: -224px -128px; }
221 | .ui-icon-script { background-position: -240px -128px; }
222 | .ui-icon-alert { background-position: 0 -144px; }
223 | .ui-icon-info { background-position: -16px -144px; }
224 | .ui-icon-notice { background-position: -32px -144px; }
225 | .ui-icon-help { background-position: -48px -144px; }
226 | .ui-icon-check { background-position: -64px -144px; }
227 | .ui-icon-bullet { background-position: -80px -144px; }
228 | .ui-icon-radio-off { background-position: -96px -144px; }
229 | .ui-icon-radio-on { background-position: -112px -144px; }
230 | .ui-icon-pin-w { background-position: -128px -144px; }
231 | .ui-icon-pin-s { background-position: -144px -144px; }
232 | .ui-icon-play { background-position: 0 -160px; }
233 | .ui-icon-pause { background-position: -16px -160px; }
234 | .ui-icon-seek-next { background-position: -32px -160px; }
235 | .ui-icon-seek-prev { background-position: -48px -160px; }
236 | .ui-icon-seek-end { background-position: -64px -160px; }
237 | .ui-icon-seek-start { background-position: -80px -160px; }
238 | /* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
239 | .ui-icon-seek-first { background-position: -80px -160px; }
240 | .ui-icon-stop { background-position: -96px -160px; }
241 | .ui-icon-eject { background-position: -112px -160px; }
242 | .ui-icon-volume-off { background-position: -128px -160px; }
243 | .ui-icon-volume-on { background-position: -144px -160px; }
244 | .ui-icon-power { background-position: 0 -176px; }
245 | .ui-icon-signal-diag { background-position: -16px -176px; }
246 | .ui-icon-signal { background-position: -32px -176px; }
247 | .ui-icon-battery-0 { background-position: -48px -176px; }
248 | .ui-icon-battery-1 { background-position: -64px -176px; }
249 | .ui-icon-battery-2 { background-position: -80px -176px; }
250 | .ui-icon-battery-3 { background-position: -96px -176px; }
251 | .ui-icon-circle-plus { background-position: 0 -192px; }
252 | .ui-icon-circle-minus { background-position: -16px -192px; }
253 | .ui-icon-circle-close { background-position: -32px -192px; }
254 | .ui-icon-circle-triangle-e { background-position: -48px -192px; }
255 | .ui-icon-circle-triangle-s { background-position: -64px -192px; }
256 | .ui-icon-circle-triangle-w { background-position: -80px -192px; }
257 | .ui-icon-circle-triangle-n { background-position: -96px -192px; }
258 | .ui-icon-circle-arrow-e { background-position: -112px -192px; }
259 | .ui-icon-circle-arrow-s { background-position: -128px -192px; }
260 | .ui-icon-circle-arrow-w { background-position: -144px -192px; }
261 | .ui-icon-circle-arrow-n { background-position: -160px -192px; }
262 | .ui-icon-circle-zoomin { background-position: -176px -192px; }
263 | .ui-icon-circle-zoomout { background-position: -192px -192px; }
264 | .ui-icon-circle-check { background-position: -208px -192px; }
265 | .ui-icon-circlesmall-plus { background-position: 0 -208px; }
266 | .ui-icon-circlesmall-minus { background-position: -16px -208px; }
267 | .ui-icon-circlesmall-close { background-position: -32px -208px; }
268 | .ui-icon-squaresmall-plus { background-position: -48px -208px; }
269 | .ui-icon-squaresmall-minus { background-position: -64px -208px; }
270 | .ui-icon-squaresmall-close { background-position: -80px -208px; }
271 | .ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
272 | .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
273 | .ui-icon-grip-solid-vertical { background-position: -32px -224px; }
274 | .ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
275 | .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
276 | .ui-icon-grip-diagonal-se { background-position: -80px -224px; }
277 | 
278 | 
279 | /* Misc visuals
280 | ----------------------------------*/
281 | 
282 | /* Corner radius */
283 | .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
284 | .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
285 | .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
286 | .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
287 | .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
288 | .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
289 | .ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
290 | .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
291 | .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
292 | 
293 | /* Overlays */
294 | .ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); }
295 | .ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/*
296 |  * jQuery UI Resizable @VERSION
297 |  *
298 |  * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
299 |  * Dual licensed under the MIT or GPL Version 2 licenses.
300 |  * http://jquery.org/license
301 |  *
302 |  * http://docs.jquery.com/UI/Resizable#theming
303 |  */
304 | .ui-resizable { position: relative;}
305 | .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
306 | .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
307 | .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
308 | .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
309 | .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
310 | .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
311 | .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
312 | .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
313 | .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
314 | .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
315 | 
316 | .ui-draggable { cursor: move; }


--------------------------------------------------------------------------------