|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DaST - Video Library | {PageTitleDate}</title>
<link href="res/CSS/common.css" type="text/css" rel="stylesheet" />
<link id="csslink_jqui" href="res/jQuery/Themes/ui-lightness/jquery-ui.custom.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="res/jQuery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="res/jQuery/jquery-ui-1.8.9.custom.min.js"></script>
</head>
<body>
<div class="ui-widget ui-widget-content ui-corner-all" style="padding:0 20px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="width:300px;">
<div class="ui-state-highlight ui-corner-all" style="padding:10px;margin:10px 0;">
<h1 style="margin:0;">Video Library v1.4</h1>
<i>DaST Technology Demonstrator</i>
</div>
</td>
<td style="min-width:800px;">
<ul>
<li>Prototype of a video portal with complex and dynamic Web 2.0 UI.</li>
<li>Populate playlist. Remove from playlist. Open details dialog. Add user reviews and ratings. Change jQuery UI theme.</li>
<li>NOTE that all changes made (including new comments) are discarded when session ends. </li>
</ul>
</td>
</tr>
</table>
</div>
<hr />
<div id="canvas">
<table cellpadding="0" cellspacing="10px" border="0" width="100%">
<tr>
<td style="width:300px;" valign="top">
<div class="settingsPanel ui-widget ui-widget-content ui-corner-all">
<div class="ui-widget-header ui-corner-all">
Application Settings
</div>
<table cellpadding="0" cellspacing="5px" border="0" width="100%">
<tr>
<td style="text-align:right;">Selection page size</td>
<td>
<div scope="PageSizeRepeater">
<select onchange="AspNetDaST.Action('{ScopeClientID}', 'PageSizeChanged', this.options[this.selectedIndex].value)" autocomplete="off" style="width:120px;">
<!--scope-from-->
<option value="{OptionValue}" attr_selected>{OptionValue} item(s)</option>
<!--scope-stop-->
</select>
</div>
</td>
</tr>
<tr>
<td style="text-align:right">jQuery theme</td>
<td>
<div scope="SiteThemeRepeater">
<select onchange="ChangeSiteTheme(this.options[this.selectedIndex].value)" autocomplete="off" style="width:120px;">
<!--scope-from-->
<option value="{OptionValue}" attr_selected>{OptionValue}</option>
<!--scope-stop-->
</select>
</div>
</td>
</tr>
</table>
</div>
<div class="playlistPanel ui-widget ui-widget-content ui-corner-all">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<div scope="PlaylistHeader">
<!--showfrom:playlist-empty:yes-->
<div class="ui-widget-header ui-corner-all" style="display: block;margin-bottom:10px;">Playlist empty</div>
You have no items in your playlist so far. Populate playlist by clicking "+" button on the top right corner of the video packshot.
<!--showstop:playlist-empty:yes-->
<!--showfrom:playlist-empty:no-->
<div class="ui-widget-header ui-corner-all" style="display: block;">Playlist ({TotalItemCount})</div>
<!--showstop:playlist-empty:no-->
</div>
</td>
<td style="max-width:160px;text-align:right;">
<div scope="PlaylistPager"></div>
</td>
</tr>
</table>
<div scope="PlaylistRepeater">
<div scope="VideoItem"></div>
</div>
</div>
</td>
<td valign="top">
<div class="videoItemsGrid ui-widget ui-widget-content ui-corner-all">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<div class="ui-widget-header ui-corner-all">
Video Library |
<div scope="VideoItemGridInfo" style="display: inline;">
Displaying videos {FromItemNum}-{ToItemNum} of {TotalItemCount}
</div>
</div>
</td>
<td style="width:180px;text-align:right;">
<div scope="VideoItemPager"></div>
</td>
</tr>
</table>
<div scope="VideoItemRepeater">
<div scope="VideoItem"></div>
</div>
</div>
</td>
</tr>
</table>
<div scope="DetailsPopup"></div>
</div>
<div class="globalProgress" style="background-color:Gray;border:solid 2px black;position:fixed;top:0px;left:100%;margin-left:-305px;width:300px;height:20px;overflow:hidden;">
<div class="screen0" style="color:black;background-color:lime;font-weight:bold;text-align:center;height:100%;display:block;">READY / IDLE</div>
<div class="screen1" style="color:white;background-color:red;font-weight:bold;text-align:center;height:100%;display:block;">PROCESSING ASYNC POSTBACK ...</div>
</div>
<script language="javascript" type="text/javascript">
; (function($)
{
$(document).ready(function()
{
$(".actionButton.ui-state-default").live("mouseenter", function() { $(this).addClass('ui-state-hover'); });
$(".actionButton.ui-state-hover").live("mouseleave", function() { $(this).removeClass('ui-state-hover'); });
$(".videoItemContainer").live("mouseenter", function() { $(this).addClass('ui-state-hover'); });
$(".videoItemContainer").live("mouseleave", function() { $(this).removeClass('ui-state-hover'); });
var instance = Sys.WebForms.PageRequestManager.getInstance();
instance.add_initializeRequest(instance_initializeRequest);
instance.add_endRequest(instance_EndRequest);
function instance_initializeRequest(sender, args)
{
if (instance.get_isInAsyncPostBack()) args.set_cancel(true);
else
{
$(".globalProgress .screen0").css("display", "none");
$(".globalProgress .screen1").css("display", "block");
}
}
function instance_EndRequest(sender, args)
{
$(".globalProgress .screen0").css("display", "block");
$(".globalProgress .screen1").css("display", "none");
}
});
})(jQuery);
function ChangeSiteTheme(themeName)
{
var themePath = "res/jQuery/Themes/" + themeName + "/";
$("#csslink_jqui").attr("href", themePath + "jquery-ui.custom.css");
}
</script>
</body>
</html>
|
By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.
If a file you wish to view isn't highlighted, and is a text file (not binary), please
let us know and we'll add colourisation support for it.
Software Architect with over 15 years in IT field. Started with deep math and C++ Computer Vision software. Currently in .NET and PHP web development. Creator of DaST pattern, open-source frameworks, and plugins. Interested in cutting Edge IT, open-source, Web 2.0, .NET, MVC, C++, Java, jQuery, Mobile tech, and extreme sports.
Submit an article or tip