<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Selectable - Display as grid</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback {
font-size: 1.4em;
}
#selectable_1 .ui-selecting {
background: #FECA40;
}
#selectable_1 .ui-selected {
background: #4EF314;
color: #CC0033;
}
#selectable_2 .ui-selecting {
background: #1638CA;
}
#selectable_2 .ui-selected {
background: #F39814;
color: white;
}
#selectable_1 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable_2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#selectable_1 li {
margin: 3px;
padding: 1px;
float: left;
width: 100px;
height: 80px;
font-size: 4em;
text-align: center;
}
#selectable_2 li {
margin: 3px;
padding: 1px;
float: left;
width: 120px;
height: 90px;
font-size: 4em;
text-align: center;
}
</style>
<script>
$(function ()
{
$("#selectable_1").selectable();
});
$(function () {
$("#selectable_2").selectable();
});
</script>
</head>
<body>
<div >
<ol id="selectable_1">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
</ol>
</div>
<div>
<ol id="selectable_2">
<li class="ui-state-default">A</li>
<li class="ui-state-default">B</li>
<li class="ui-state-default">C</li>
<li class="ui-state-default">D</li>
<li class="ui-state-default">E</li>
<li class="ui-state-default">F</li>
<li class="ui-state-default">G</li>
</ol>
</div>
</body>
</html>
Yorumlar
Yorum Gönder