More dynamic UI

This commit is contained in:
Mehdi ABAAKOUK 2011-12-16 19:05:36 +01:00
parent 5eda1b47d3
commit 46e2f086c0
1 changed files with 34 additions and 5 deletions

View File

@ -4,22 +4,36 @@
<script type="text/javascript" src="{{url_for('static', filename='jquery.js') }}"></script> <script type="text/javascript" src="{{url_for('static', filename='jquery.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
$("#typ option[value={{typ}}]").attr("selected", "selected")
$("#host option[value='{{host}}']").attr("selected", "selected")
$("#host").change()
$("#typ").change(function(){ $("#typ").change(function(){
$("#name").hide() $("#name").hide()
$("#prefix").hide() $("#prefix").hide()
$("#submit").hide()
switch ($("#typ").val()) switch ($("#typ").val())
{ {
case "summary": case "summary":
if ($("#typ").val() != "{{typ}}")
$("#submit").click()
break; break;
case "detail": case "detail":
$("#name").show() $("#name").show()
$("#submit").show()
break; break;
case "prefix": case "prefix":
$("#submit").show()
$("#prefix").show() $("#prefix").show()
if ($("#prefix").val()) {
$("#submit").click()
}
break; break;
} }
}); });
$("#typ").change()
$("#submit").click( function(){ $("#submit").click( function(){
switch ($("#typ").val()) switch ($("#typ").val())
{ {
@ -34,10 +48,6 @@
break; break;
} }
}); });
$("#typ option[value={{typ}}]").attr("selected", "selected")
$("#typ").change()
$("#host option[value='{{host}}']").attr("selected", "selected")
$("#host").change()
keypress_handler = function(e) { keypress_handler = function(e) {
if (e.which == 13) { if (e.which == 13) {
@ -47,6 +57,25 @@
$("#prefix").keypress(keypress_handler) $("#prefix").keypress(keypress_handler)
$("#name").keypress(keypress_handler) $("#name").keypress(keypress_handler)
$("#host").change(function (){
switch ($("#typ").val())
{
case "summary":
$("#submit").click()
break;
case "detail":
if ($("#name").val()) {
$("#submit").click()
}
break;
case "prefix":
if ($("#prefix").val()) {
$("#submit").click()
}
break;
}
});
}); });
</script> </script>
<div id="page"> <div id="page">
@ -55,7 +84,7 @@
<select id="host"> <select id="host">
<option value="gw/ipv4">gw (ipv4)</option> <option value="gw/ipv4">gw (ipv4)</option>
<option value="gw/ipv6">gw (ipv6)</option> <option value="gw/ipv6">gw (ipv6)</option>
<option value="h3/ipv4" selected="selected">h3 (ipv4)</option> <option value="h3/ipv4">h3 (ipv4)</option>
<option value="h3/ipv6">h3 (ipv6)</option> <option value="h3/ipv6">h3 (ipv6)</option>
</select> </select>
<select id="typ"> <select id="typ">