Jquery UI Diyalog (Dialog)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery UI Diyalog (Dialog)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3280)
RAPOR ET
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 :





winecciw
winecciw 3 Yıl Önce Cevaplandı
Mesela formda gönder butonuna basınca ajaxla mail gönderilmesini sağlıyorum ama işlem tamamlanınca dialog kutusu açtırmak istiyorum nasıl yapabilirim?
cArleone
cArleone 3 Yıl Önce Cevaplandı
ajax success parametresin de
$("#diyalog").dialog( "open" );
yazarak açabilirsin.
winecciw
winecciw 3 Yıl Önce Cevaplandı
Teşekkürler. Diğer sorunum da dialog penceresindeki kapatma butonunun(x) iconu gözükmüyor nasıl halledebilirim acaba?
cArleone
cArleone 3 Yıl Önce Cevaplandı
Büyük ihtimal images klasörünü almamışsınızdır.Yoksa o otomatik çıkan bir özellik.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol