jQuery kullanarak elementler üzerinde resizable ve draggable nasıl yapılır ?
Bu makalemizde bu sorunun cevabını vermeye çalışacağız.
Öncelikle uygulamamızın html kodlarının içinde head etiketleri arasına aşağıdaki kodları yazıyoruz.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
Aslında yukarıdaki jQuery kodlarını başka bir sunucu üzerinden çekmek çok mantıklı bir yöntem değil. Bu linkten kodları alıp proje dizini içne jQuery dosyası olarak yapıştırılıp kaydedilmesi tavsiye edilir.Sırada CSS kodlarımızı yazmaya geldi. Css kodlarımızı yine aynı şekilde head etiketleri arasına yazıyoruz.
| <STYLE> | ||||||
| .demo { | ||||||
| width:150px; | ||||||
| height:150px; | ||||||
| padding:5px; | ||||||
| background-color:#ff8811; | ||||||
| position:absolute; | ||||||
| top:150px; | ||||||
| left:300px; | ||||||
| } | ||||||
|
<div class="demo">Mansur İşçel</div>
Son olarak aşağıdaki Javascript fonksiyonumuzu <body> etiketinin altına yazıyoruz.
| <SCRIPT> | |||||
| $(function(){ | |||||
| $('.demo') | |||||
| .draggable() | |||||
| .resizable(); | |||||
| }); | |||||
| </SCRIPT> |
Kolay gelsin...
Mansur İşçel
DEMO için tıklayınız...
Hiç yorum yok:
Yorum Gönder