Removed jQuery UI selectable, using custom select boxes now. Cutoff dropbox is dynamic (based on selected qualities).
parent
556d5d9fb3
commit
803ad8ca91
@ -1,58 +1,49 @@
|
|||||||
Hello World
|
<style>
|
||||||
|
.quality-selectee { width: 75px; padding: 1px; padding-left: 5px; margin: 3px; }
|
||||||
|
.quality-selecting { background: #85AEF9; }
|
||||||
|
.quality-selected { background: #065EFE; color: white; }
|
||||||
|
</style>
|
||||||
|
|
||||||
<input type="checkbox" id="id_chk1" class="chkbox" value="1" />Check 1<br/>
|
<fieldset class="quality-selectee">
|
||||||
<input type="checkbox" id="id_chk2" class="chkbox" value="2" />Check 2<br/>
|
SDTV
|
||||||
<input type="checkbox" id="id_chk3" class="chkbox" value="3" />Check 3<br/>
|
</fieldset>
|
||||||
<input type="checkbox" id="id_chk4" class="chkbox" value="4" />Check 4<br/>
|
|
||||||
<input type="checkbox" id="id_chk5" class="chkbox" value="5" />Check 5<br/>
|
|
||||||
<input type="checkbox" id="id_chk6" class="chkbox" value="6" />Check 6<br/>
|
|
||||||
<input type="checkbox" id="id_chk7" class="chkbox" value="7" />Check 7<br/>
|
|
||||||
|
|
||||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
|
<fieldset class="quality-selectee">
|
||||||
<script type="text/javascript">
|
DVD
|
||||||
var lastChecked = null;
|
</fieldset>
|
||||||
|
|
||||||
$(document).ready(function () {
|
<fieldset class="quality-selectee">
|
||||||
$('.chkbox').click(function (event) {
|
HDTV
|
||||||
if (!lastChecked) {
|
</fieldset>
|
||||||
lastChecked = this;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.shiftKey) {
|
<fieldset class="quality-selectee">
|
||||||
var start = $('.chkbox').index(this);
|
WEBDL
|
||||||
var end = $('.chkbox').index(lastChecked);
|
</fieldset>
|
||||||
|
|
||||||
for (i = Math.min(start, end); i <= Math.max(start, end); i++) {
|
<fieldset class="quality-selectee">
|
||||||
$('.chkbox')[i].checked = lastChecked.checked;
|
Bluray720p
|
||||||
}
|
</fieldset>
|
||||||
}
|
|
||||||
|
|
||||||
lastChecked = this;
|
<fieldset class="quality-selectee">
|
||||||
});
|
Bluray1080p
|
||||||
});
|
</fieldset>
|
||||||
</script>
|
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
<style>
|
@Html.TextBox("result", "")
|
||||||
#selectable .ui-selecting { background: #85AEF9; }
|
|
||||||
#selectable .ui-selected { background: #065EFE; color: white; }
|
|
||||||
#selectable { list-style-type: none; margin: 0; padding: 0; width: 110px; }
|
|
||||||
#selectable li { margin: 3px; padding-left: 0.4em; padding-bottom: 1.5em; padding-top: 0em; font-size: 1.2em; height: 6px; }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(function () {
|
$('.quality-selectee').click(function () {
|
||||||
$("#selectable").selectable();
|
if ($(this).hasClass('quality-selected'))
|
||||||
|
$(this).removeClass('quality-selected');
|
||||||
|
else
|
||||||
|
$(this).addClass('quality-selected');
|
||||||
|
|
||||||
|
result = "";
|
||||||
|
$(".quality-selected").each(function () {
|
||||||
|
result += this.firstChild.data + ",";
|
||||||
});
|
});
|
||||||
</script>
|
|
||||||
|
|
||||||
<ol id="selectable">
|
$("#result").empty().val(result);
|
||||||
<li class="ui-widget-content">Unknown</li>
|
});
|
||||||
<li class="ui-widget-content">SDTV</li>
|
</script>
|
||||||
<li class="ui-widget-content">DVD</li>
|
|
||||||
<li class="ui-widget-content">HDTV</li>
|
|
||||||
<li class="ui-widget-content">WEBDL</li>
|
|
||||||
<li class="ui-widget-content">Bluray720p</li>
|
|
||||||
<li class="ui-widget-content">Bluray1080p</li>
|
|
||||||
</ol>
|
|
Loading…
Reference in new issue