Herkese merhabalar.
İki hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere bootbox.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Uygulaması oldukça kolay olan bu kütüphane sayesinde web sayfanızda Twitter Bootstrap modelini kullanarak ileti kutuları oluşturabilmeniz mümkün. Alarm, teyit ettirme gibi durumlarda ileti kutularımızdaki butonlar ve yazılar ile bize seçenekler sunulur. Kütüphaneyi bu siteden indirerek işe koyulmaya başlayabiliriz. Aşağıda sizlere bu kütüphanenin önemli metotlarından bahsetmek istiyorum.
Alarm Durumu
Alarm Durumu
bootbox.alert(message,callback): Kullanıcıyı uyarma durumunda kullanılan metottur.
bootbox.alert("Merhaba Arkadaşlar :)!", function() {
Example.show("Merhaba Arkadaşlar :)! geri bildirimi");
});
Onaylama
bootbox.confirm(message,callback): Kullanıcıyı onaylatma durumunda kullanılan metottur.
bootbox.confirm("Emin misiniz?", function(result) {
Example.show("Sonucu doğrula: "+result);
});
Harekete Geçirmek (Prompt)
bootbox.prompt(message,callback): Kullanıcıya herhangi bir sorunun cevabı sorulduğu durumda kullanılan metottur.
bootbox.prompt("İsminiz nedir?", function(result) {
if (result === null) {
Example.show("Prompt'a cevap verilmedi");
} else {
Example.show("Merhaba <b>"+result+"</b>");
}
});
Diyalog (Custom Dialog) Kullanımı
Aşağıdaki örnekte, "title" kısmına belirlediğiniz konuşma konusunu yazabilirsiniz. Bootstrap modeline ait olan yeşil, kırmızı ve mavi renkteki üç buton bulunmaktadır. Bu butonlara tıkladığınızda Example.show ile ileti kutusu içerisinde dilediğiniz yazıyı kullanıcıya gösterebilirsiniz.
bootbox.dialog({
message: "Ben bir custom dialog'um",
title: "Custom title",
buttons: {
success: {
label: "Başarılı!",
className: "btn-success",
callback: function() {
Example.show("btn-success butonu!");
}
},
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
Example.show("btn-danger butonu!");
}
},
main: {
label: "Tıklayınız!",
className: "btn-primary",
callback: function() {
Example.show("btn-primary butonu!");
}
}
}
});
Şimdi ise sizler için ASP.NET ortamında yapmış olduğum örneğe bir bakalım. Solution Explorer' a kütüphanemizi ve bootstrap dosyalarımızı ekliyoruz.
Proje Kodları:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="UTF-8">
<title>BootBox -ÖRNEK</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h2>Bootbox.Js - ÖRNEK</h2>
<button class="btn1 btn btn-danger">Alert Box!</button>
<button class=" btn2 btn btn-success">Prompt Box!</button>
<button class=" btn3 btn btn-primary">Confirm Box!</button>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.btn2').on('click', function () {
bootbox.prompt("İsminiz nedir?", function (res) {
if (res == null) {
alert("Kullanıcı tarafından prompt reddedildi");
} else {
alert("Merhaba: " + res);
}
});
});
});
$(document).ready(function () {
$('.btn1').on('click', function () {
bootbox.alert("LÜTFEN İSMİNİZİ DİKKATLİ GİRİNİZ!!", function (res) {
});
});
});
$(document).ready(function () {
$('.btn3').on('click', function () {
bootbox.confirm("Emin misiniz?", function (res) {
});
});
});
</script>
</body>
</html>
Ekran Görüntüsü:
Prompt Box'a tıkladığınızdaki ekran görüntüsü:
Confirm Box'a tıkladığınızdaki ekran görüntüsü:
Yukarıda üç temel metodu kullanarak bootbox.js kütüphanesinin nasıl basit bir şekilde kullanıldığını gördük. Umarım anlaşılır ve yararlı bir örnek olmuştur. Bu haftalık anlatacaklarım bu kadar, bir sonraki hafta knockout.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...
KAYNAKLAR
1. http://the-phpjs-ldc.rgou.net/twitter-bootstrap-plugins/bootbox/3.0/
2. http://creativitytuts.org/twitter-bootstrap-tutorial-15-bootbox-js-alert-dialogs/
3. http://bootboxjs.com/
Hiç yorum yok:
Yorum Gönder