Friday 29 May 2015

JQuery





Jquery Programming using JQuery-UI Sorting function

<html>
<head>
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui.css" rel="stylesheet"></script>
<script>
$(document).ready(function()  
{
$("#list1").sortable();
 });
</script>
<style>
 ul
{
list-style:none;
width:110px;
border:8px solid red;
height:100px;
padding:5px;
}
ul li
{
float:left;
width:20px;
height:20px;
border:2px solid blue;
margin:5px;
background-color:blue;
color:white;
text-align:center;
border-radius:15px;cursor:pointer;
}
</style>
</head>
<body>
<h>Jquery Programming using JQuery-UI Sorting function</h1>
<hr/>
<ul id="list1">                                              
<li>9</li>
<li>7</li>
<li>6</li>
<li>5</li>
<li>2</li>
<li>8</li>
<li>1</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>