Skip to content

Commit

Permalink
change demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@ateliee
ateliee committed Jun 15, 2014
1 parent 664b820 commit 6c6694a
Show file tree
Hide file tree
Showing 2 changed files with 1,330 additions and 73 deletions.
225 changes: 152 additions & 73 deletions demo/index.html
View file
Expand Up @@ -3,6 +3,80 @@
<head>
<title>jq.Schedule Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="jquery-1.10.2.js" type="text/javascript" language="javascript"></script>
<script src="jquery-ui-1.10.4.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.4.css" />

<script type="text/javascript" src="../js/jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
var $sc = jQuery("#schedule").timeSchedule({
startTime: "07:00", // schedule start time(HH:ii)
endTime: "21:00", // schedule end time(HH:ii)
widthTime:600, // cell timestamp
timeLineY:60, // height(px)
verticalScrollbar:20, // scrollbar (px)
timeLineBorder:2, // border(top and bottom)
debug:"#debug", // debug string output elements
rows : {
'1' : {
title : 'Title Area',
schedule:[
{
start:'09:00',
end:'12:00',
text:'Text Area',
data:{
}
},
{
start:'11:00',
end:'14:00',
text:'Text Area',
data:{
}
}
]
},
'2' : {
title : 'Title Area',
schedule:[
{
start:'16:00',
end:'17:00',
text:'Text Area',
data:{
}
}
]
}
},
change: function(node,data){
alert("change event");
},
init_data: function(node,data){
},
click: function(node,data){
alert("click event");
},
append: function(node,data){
},
time_click: function(time,data){
alert("time click event");
},
});
});
</script>
</head>
<body>

Expand Down Expand Up @@ -34,6 +108,10 @@ <h1 id="home">jq.Schedule</h1>
<p>Resize Schedule</p>
<p>Ajax Support(Callback Event Option)</p>
<p><button onclick="javascript:location.href='https://github.com/ateliee/jquery.schedule';" class="btn btn-large btn-primary" type="button">Download jq.Schedule</button></p>
<p>
<iframe src="http://ghbtns.com/github-btn.html?user=ateliee&repo=jquery.schedule&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</p>
</div>
<h2 id="demo">Demo</h2>
<p>
Expand Down Expand Up @@ -67,7 +145,7 @@ <h2 id="option">Option</h2>
<table class="table table-striped">
<tr>
<th colspan="2">name</th>
<th width="80">Value</th>
<th width="80">Type</th>
<th>description</th>
</tr>
<tr>
Expand Down Expand Up @@ -121,80 +199,81 @@ <h2 id="option">Option</h2>
<td>Array</td>
<td>Schedule Cell Data</td>
</tr>
<tr>
<td colspan="2">change</td>
<td>function</td>
<td>callback change time</td>
</tr>
<tr>
<td colspan="2">click</td>
<td>function</td>
<td>callback click time</td>
</tr>
<tr>
<td colspan="2">time_click</td>
<td>function</td>
<td>callback timebar click</td>
</tr>
<tr>
<td colspan="2">append</td>
<td>function</td>
<td>callback append time</td>
</tr>
</table>
</p>

<h2 id="option">Schedule Data</h2>
<p>
<table class="table table-striped">
<tr>
<th colspan="2">name</th>
<th width="80">Type</th>
<th>description</th>
</tr>
<tr>
<td colspan="2">title</td>
<td>String</td>
<td>Visible Text Schedule Bar</td>
</tr>
<tr>
<td colspan="2">class</td>
<td>String</td>
<td>add class name</td>
</tr>
<tr>
<td rowspan="5">schedule</td>
<td colspan="2">array</td>
<td>add schedule data</td>
</tr>
<tr>
<td>start</td>
<td>String</td>
<td>time String(HH:ii)</td>
</tr>
<tr>
<td>end</td>
<td>String</td>
<td>time String(HH:ii)</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>Show Text</td>
</tr>
<tr>
<td>data</td>
<td>Object,Array</td>
<td>callback data Object</td>
</tr>
</table>
</p>
<!-- /container --></div>
<script src="jquery-1.10.2.js" type="text/javascript" language="javascript"></script>
<script src="jquery-ui-1.10.4.js" type="text/javascript" language="javascript"></script>

<script type="text/javascript" src="../js/jq.schedule.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
var $sc = jQuery("#schedule").timeSchedule({
startTime: "07:00", // schedule start time(HH:ii)
endTime: "21:00", // schedule end time(HH:ii)
widthTime:600, // cell timestamp
timeLineY:60, // height(px)
verticalScrollbar:20, // scrollbar (px)
timeLineBorder:2, // border(top and bottom)
debug:"#debug", // debug string output elements
rows : {
'1' : {
title : 'Title Area',
schedule:[
{
start:'09:00',
end:'12:00',
text:'Text Area',
data:{
}
},
{
start:'11:00',
end:'14:00',
text:'Text Area',
data:{
}
}
]
},
'2' : {
title : 'Title Area',
schedule:[
{
start:'16:00',
end:'17:00',
text:'Text Area',
data:{
}
}
]
}
},
change: function(node,data){
alert("change event");
},
init_data: function(node,data){
},
click: function(node,data){
alert("click event");
},
append: function(node,data){
},
time_click: function(time,data){
alert("time click event");
},
});
});
</script>


<div id="footer">
<div class="container">
<p class="muted credit">Copyright © 2014 <a href="https://github.com/ateliee" target="_blank">ateliee</a> inc. All Rights Reserved.</p>
</div>
</div>
</body>
</html>

0 comments on commit 6c6694a

Please sign in to comment.