Added Episodes of Episodes Total progress bar to Series Grid.

This commit is contained in:
Mark McDowall 2011-06-01 20:36:30 -07:00
commit fdfd0a2153
5 changed files with 166 additions and 64 deletions

View file

@ -1,49 +1,72 @@
<style>
.quality-selectee { width: 75px; padding: 1px; padding-left: 5px; margin: 3px; }
.quality-selecting { background: #85AEF9; }
.quality-selected { background: #065EFE; color: white; }
<script>
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var innerdiv = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
innerdiv.css("width", width + "%");
div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<style>
/* progress bar container */
.progressbar
{
z-index: 1;
border:1px solid grey;
-khtml-border-radius:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:125px;
height:20px;
position:relative;
color:black;
}
.progress
{
z-index: 5;
}
/* color bar */
.progressbar div.progress
{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#065EFE;
}
/* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
}
</style>
<fieldset class="quality-selectee">
SDTV
</fieldset>
<div id="progressbar" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<fieldset class="quality-selectee">
DVD
</fieldset>
<fieldset class="quality-selectee">
HDTV
</fieldset>
<fieldset class="quality-selectee">
WEBDL
</fieldset>
<fieldset class="quality-selectee">
Bluray720p
</fieldset>
<fieldset class="quality-selectee">
Bluray1080p
</fieldset>
<br />
@Html.TextBox("result", "")
<script type="text/javascript">
$('.quality-selectee').click(function () {
if ($(this).hasClass('quality-selected'))
$(this).removeClass('quality-selected');
else
$(this).addClass('quality-selected');
result = "";
$(".quality-selected").each(function () {
result += this.firstChild.data + ",";
});
$("#result").empty().val(result);
});
<script>
$("#progressbar").episodeProgress(100, 200);
</script>