Home
índice
Página anterior

Elementos Ordenáveis

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

---

No Html:
<title>JQuery UI - Elementos Ordenáveis</title>

<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style_ui_tabs_abas.css" />
<script type= "text/javascript" src= "/static/js/jquery.min.js"></script> 
<script type= "text/javascript" src= "/static/js/jquery-ui.min.js"></script>

  <ul id="sortable">
	 <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>
	 <li class="ui-state-default">7</li>
	 <li class="ui-state-default">8</li>
	 <li class="ui-state-default">9</li>
	 <li class="ui-state-default">10</li>
  </ul>

	Na folha de estilos:

	#sortable{ 
	list-style-type: none;
	margin: 0; 
	padding: 0; 
	width: 70%;
	}

	#sortable li{
	margin: 0.3em;
	padding: 0.1em;
	float: left; 
	width: 20%;
	height: 20%;
	font-size: 2em; 
	text-align: center;
      }