利用jquery实现甘特图项目插件



18 69 24



特效描述:利用jquery实现 甘特图 项目插件,利用jquery实现甘特图项目插件

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/prettify.css" />

2. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/prettify.js"></script>

3. HTML代码

		<div class="contain">
			<h1>
				jQuery.Gantt
				<small>&mdash; Draw Gantt charts with the famous jQuery ease of development</small>
			</h1>
			<h2>Contributors</h2>
			<ul>
				<li>
					<strong>Marek Bielańczuk</strong> wrote the original jQuery.Gantt plugin that this version is based off of.
				</li>
				<li>
					<strong>Tait Brown</strong> enforced stricter code guidelines by validating the code, updating it to support HTML5 and tweaking the design.
				</li>
				<li>
					<strong>Leo Pfeifenberger</strong> made <em>major</em> performance updates as well as adding requested features such as click events, state persisting via cookies and scrollToToday on load functionality.
				</li>
			</ul>
	    	<h2>
	    		Example
	    	</h2>
			<div class="gantt"></div>
			<h2>
				Gantt Configuration
			</h2>
<pre class="prettyprint">
$(".selector").gantt({
	source: "ajax/data.json",
	scale: "weeks",
	minScale: "weeks",
	maxScale: "months",
	onItemClick: function(data) {
		alert("Item clicked - show some details");
	},
	onAddClick: function(dt, rowId) {
		alert("Empty space clicked - add an item!");
	},
	onRender: function() {
		console.log("chart rendered");
	}
});
</pre>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>
							Parameter
						</th>
						<th>
							Default
						</th>
						<th>
							Accepts Type
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<code>source</code>
						</td>
						<td>
							null
						</td>
						<td>
							Array, String (url)
						</td>
					</tr>
					<tr>
						<td>
							<code>itemsPerPage</code>
						</td>
						<td>
							7
						</td>
						<td>
							Number
						</td>
					</tr>
					<tr>
						<td>
							<code>months</code>
						</td>
						<td>
							["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
						</td>
						<td>
							Array
						</td>
					</tr>
					<tr>
						<td>
							<code>dow</code>
						</td>
						<td>
							["S", "M", "T", "W", "T", "F", "S"]
						</td>
						<td>
							Array
						</td>
					</tr>
					<tr>
						<td>
							<code>navigate</code>
						</td>
						<td>
							"buttons"
						</td>
						<td>
							String ("buttons","scroll")
						</td>
					</tr>
					<tr>
						<td>
							<code>scale</code>
						</td>
						<td>
							"days"
						</td>
						<td>
							String
						</td>
					</tr>
					<tr>
						<td>
							<code>maxScale</code>
						</td>
						<td>
							"months"
						</td>
						<td>
							String
						</td>
					</tr>
					<tr>
						<td>
							<code>minScale</code>
						</td>
						<td>
							"hours"
						</td>
						<td>
							String
						</td>
					</tr>
					<tr>
						<td>
							<code>waitText</code>
						</td>
						<td>
							"Please Wait..."
						</td>
						<td>
							String
						</td>
					</tr>
					<tr>
						<td>
						    <code>onItemClick: </code>
                            </td>
						<td>
							<code>function (data) { return; }</code></td>
						<td>
						    a JS Function that gets called when clicking on a Gantt-Item. <br />The parameter passed to the function is the dataObj of the item</td>
					</tr>
				    <tr>
				        <td>
				            <code>onAddClick</code></td>
				        <td>
				            <code>function (dt, rowId) { return; }</code></td>
				        <td>
				            a JS Function that gets called when clicking on a Gantt-Item. <br />The parameter passed to the function is the DateTime in ms for the clicked Cell, and the ID if the source object (row)</td>
				    </tr>
				    <tr>
				        <td>
				            <code>onRender</code></td>
				        <td>
				            <code>function () { return; }</code></td>
				        <td>
				            a JS Function called whenever the chart is (re)rendered</td>
				    </tr>
                    <tr>
						<td>
							<code>useCookie</code></td>
						<td>
							<code>false</code></td>
						<td>
						    indicates if cookies should be used to track the chart's state (scale, scrollposition) between postpacks<br />
						    <code>jquery.cookie.js</code> needs to be referenced for this to work</td>
					</tr>
					<tr>
						<td>
							<code>scrollToToday</code></td>
						<td>
							<code>true</code></td>
						<td>
						    Boolean</td>
					</tr>
				</tbody>
			</table>
			<h2>
				Source Configuration
			</h2>
<pre class="prettyprint">
source: [{
	name: "Example",
	desc: "Lorem ipsum dolor sit amet.",
	values: [ ... ]
}]
</pre>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>
							Parameter
						</th>
						<th>
							Default
						</th>
						<th>
							Accepts Type
						</th>
						<th>
							Meaning
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<code>name</code>
						</td>
						<td>
							null
						</td>
						<td>
							String
						</td>
						<td>
							Bold value in the left-most column of the gantt row.
						</td>
					</tr>
					<tr>
						<td>
							<code>desc</code>
						</td>
						<td>
							null
						</td>
						<td>
							String
						</td>
						<td>
							Secondary value in the gantt row.
						</td>
					</tr>
					<tr>
						<td>
							<code>values</code>
						</td>
						<td>
							null
						</td>
						<td>
							Array
						</td>
						<td>
							Collection of date ranges for gantt items. See next table.
						</td>
					</tr>
				</tbody>
			</table>
			<h2>
				Value Configuration
			</h2>
<pre class="prettyprint">
values: [{
	to: "/Date(1328832000000)/",
	from: "/Date(1333411200000)/",
	desc: "Something",
	label: "Example Value",
	customClass: "ganttRed",
	dataObj: foo.bar[i]
}]
</pre>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>
							Parameter
						</th>
						<th>
							Accepts Type
						</th>
						<th>
							Meaning
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<code>to</code>
						</td>
						<td>
							String (Date)
						</td>
						<td>
							-
						</td>
					</tr>
					<tr>
						<td>
							<code>from</code>
						</td>
						<td>
							String (Date)
						</td>
						<td>
							-
						</td>
					</tr>
					<tr>
						<td>
							<code>desc</code>
						</td>
						<td>
							String
						</td>
						<td>
							Text that appears on hover, I think?
						</td>
					</tr>
					<tr>
						<td>
							<code>label</code>
						</td>
						<td>
							String
						</td>
						<td>
							Appears on the gantt item.
						</td>
					</tr>
					<tr>
						<td>
							<code>customClass</code>
						</td>
						<td>
							String
						</td>
						<td>
							Custom class to be applied to the gantt item.
						</td>
					</tr>
					<tr>
						<td>
							<code>dataObj</code>
						</td>
						<td>
							All
						</td>
						<td>
							A data object that is applied directly to the gantt item.
						</td>
					</tr>
				</tbody>
			</table>
		</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 文字提示框 提示文字 提示框/弹出层 按钮控制
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到