Bu dersimde jquery ui nin diyalog özelliğini anlatacam.Sitemizde bir uyarı vereceğimizde .alert() kullanırız genellikle tasarımları sitemize uymaz yada güzel değildir.Alert kullanmak yerine kendimiz diyalog kutusu yapabiliriz.Jquery ui de bunun için kolay ve özelliştirmelere serbest güzel bir şey etmiş.
Şimdi kodlara bakalım.
index.html
<html>
<head>
<title>cArleone</title>
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.0.custom.js"></script>
<link rel="stylesheet" href="demos.css" />
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.min.css" />
<script type="text/javascript">
$(function() {
$("button").click(function(){ $("#diyalog").dialog( "open" ); }) //burda open parametrresi ile açtırabiliriyoruz
$( "#diyalog" ).dialog({
autoOpen: false,//otomatik açılmayı iptal ediyor
title: "Erişim",//başlık
buttons: [
{ text: "Tamam", click: function() { alert("Tamam basıldı"); $( this ).dialog( "close" ); } } ,
{ text: "Kapat", click: function() { alert("Kapata basıldı"); $( this ).dialog( "close" ); } } ] , //butonlar ben 2 tane koydum bu butonlara tıklanınca istediğiniz işlemleri yaptırabilirsiniz
draggable: true,//diyalog kutusu taşına bilirliği burdan açıp kapaya biliriz
height: 200,//yükseklik
width: 400,//genişlik
hide: "bounce",//kapanış animasyonu
show: "explode",//açılış animasyonu.diğer animasyonlar bir alt satırda
/*fold-blind-bounce-clip-drop-explode-fade-highlight-puff-pulsate-scale-shake-slide-size-transfer*/
maxHeight: 200,minHeight: 100,//yüksekliğin max ve min boyutları
maxWidth: 500,minWidth: 100,//genişliğin max ve min boyutları
resizable: false,//boyutlandırmayı burdan açıp kapata biliriz
modal: true,//arka planı kitler tıklanmaz yapar
});
});
</script>
<style type="text/css">
body{font-size:20px;}
</style>
</head>
<body>
cArleone
<input type="text" />
<button>diyalog aç</button>
<div id="diyalog">
Buraya Erişemezsiniz.
</div>
</body>
indir : http://ustaderslik.com/dosya/Jquery-Uİ%20(Diyalog).rar
video :
UstaDerslik
