Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<select id="from" style="float: left; width: 200px;" multiple> <option value="1">AA</option> <option value="2">BB</option> <option value="3">CC</option> <option value="4">DD</option> <option value="5">EE</option> </select> <button style="float: left; margin-left: 10px; margin-right: 10px;" id="a">></button> <button style="float: left; margin-left: 10px; margin-right: 10px;" id="b"><</button> <select id="to" style="float: left; width: 200px;" multiple></select>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.col1 { background: red; width: 66.67%; float: left; overflow: hidden; } .col2 { background: green; width: 33.333%; float: right; overflow: hidden; } .subcol1 { float: right; width: 50%; background: blue; } .subcol2 { float: left; width: 50%; background: red; } @media screen and (max-width: 767px) { .col1, .col2, .subcol1, .subcol2 { width: 100%; float: none; } }
CSS
Autoformát
CSS reset
Až na konci
var $from = $("#from"); var $to = $("#to"); $("#a").click(function(){ moveOptions($from, $to); }); $("#b").click(function(){ moveOptions($to, $from); }); function moveOptions(from, to) { $("option:selected", from).appendTo(to); var x = $("#from option").sort(function(a, b){ a = a.value; b = b.value; return a-b; }); var y = $("#to option").sort(function(a, b){ a = a.value; b = b.value; return a-b; }); $("#from").html(x); $("#to").html(y); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>