Categories
Archive
Recent comments

İçerik Ara



Yasal Uyarı
Bu sitede sunulan tüm bilgi ve dökümanlar Turgay Sahtiyan tarafından yazılmaktadır. Yazıların kaynak göstermek şartıyla kullanılması serbesttir.

© Copyright 2009-2011
Takvim
<<  May 2012  >>
MoTuWeThFrSaSu
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Blogroll
Keywords

JQuery ile div e tıklamaca :)

turgay , 5. July 2009, 20:09

Merhaba arkadaşlar,

JQuery animasyon olayları ile çalışırken çok eskilerden kalma uygulamayı yapmayı düşündüm:)

Uygulamamız basit. Ekrandaki “tıkla” yazılı div e tıklamaya çalışıyoruz.

Denemek için burayı tıklayabilirsiniz.

Source kod aşağıda;

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var left = 20;
        var top = 10;
        $(document).ready(function() {
            $(".block").mouseenter(function() {
                leftOld = left;
                topOld = top;

                left = Math.floor(Math.random() * 500);
                if ((left >= leftOld) && (left - leftOld <= 35)) {
                    left += 35 - (left - leftOld);
                }
                if ((left < leftOld) && (leftOld - left <= 35)) {
                    left -= 35 - (leftOld - left);
                }
                if (left < 0) left = 100;
                top = Math.floor(Math.random() * 500);
                if ((top >= topOld) && (top - topOld <= 20)) {
                    top += 20 - (top - topOld);
                }
                if ((top < topOld) && (topOld - top <= 20)) {
                    top -= 20 - (topOld - top);
                }
                if (top < 0) top = 100;
                $(".block").animate({ "left": left, "top": top });
            });
        });
    </script>
  <style>
      div { 
        position:absolute; 
        background-color:#abc; 
        left:20px;
        width:135px; 
        height:120px;
        top:10px;
        margin:5px; 
      }
  </style>
    
</head>
<body>
    <div class="block" onclick="alert('efferim')">Tıkla</div>
</body>
</html>

Gerçi biraz kasılırsa tıklanabiliyor. Artık onuda siz optimize edersiniz:)

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery de Efekt Fonksiyonları (Effects)

turgay , 28. June 2009, 19:00

Merhaba arkadaşlar,

Bu yazımızda JQuery de ki efekt fonksiyonlarını göreceğiz.

show() – Saklı olan bir nesne veya nesneleri görünür yapmaya yarar. Mesela loaderGif id li img i show etmek için $(“#loaderGif”).show();

show( speed, [callback] )  - Show işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde show yapalım. $("p").show("slow");

hide() – Görünür olan bir nesne veya nesneleri saklamaya yarar. Mesela loaderGif id li img i hide etmek için $(“#loaderGif”).hide();

hide( speed, [callback] )  - Hide işlemini istediğimiz hızda yapmamızı yarar. Speed değeri olarak slow,normal yada fast değeri alabilir. Yada milisaniye cinsinden de değer vermek mümkündür. Mesela sayfada ki paragrafları hızlı biçimde hide yapalım. $("p").hide("slow");

toggle() – Saklı olan bir nesneyi göstermeye, görünür olan bir nesneyi saklamaya yarar. Misal bir butona basıldığında loaderGif saklansın, tekrar basıldığında görünür hale gelsin. 

    $("#button1").click(function () {
      $("#loaderGif").toggle();
    });

toggle( switch ) – Switch değeri true ise elemanlar hide olur, false ise elemanlar show olur.

toggle( speed, [callback] )  - Toggle işlemini hide veya show da ki gibi belli bir hızla yapmaya yarar. Gene hız değeri olarak slow,normal yada fast değeri alabilir. Örneğin loaderGif i yavaş bir biçimde toggle layalım. $(“loaderGif”).toggle(“slow”);

slideDown( speed, [callback] ) – Verilen hızda istenen nesneleri aşağıya doğru açılarak göstermeye yarar. Örneğin $("#loaderGif").slideDown("slow");

slideUp( speed, [callback] ) – Verilen hızda istenen nesneleri yukarıya doğru kapanarak saklamaya yarar. Örneğin $("#loaderGif").slideUp("slow");

slideToggle( speed, [callback] ) – Verilen hızda nesneyi slide olarak toggle yapmaya yarar. Toggle ile çalışma mantığı aynı şekildedir. Örneğin $("#loaderGif").slideToggle("slow");

fadeIn( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini arttırarak göstermeye yarar. Örneğin $("#loaderGif").fadeIn("slow");

fadeOut( speed, [callback] ) – Verilen hızda istenen nesneleri opacity lerini azaltarak saklamaya yarar. Örneğin $("#loaderGif").fadeOut("slow");

fadeTo( speed, opacity, [callback] )  - Verilen hızda istenen nesnelerinin opacity lerini verilen değer yapar. Örneğin $("#loaderGif").fadeTo("slow",0.33);

jQuery.fx.off – Bütün animasyonları disable etmeye yarar. disable etmek için jQuery.fx.off = true;, tekrar enabled etmek için jQuery.fx.off = false;

 

Jquery de Efekt fonksiyonları bu şekilde.

Daha fazla bilgi için JQuery Effects sayfasını inceleyebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery de Olaylar (Events)

turgay , 25. June 2009, 16:44

Merhaba arkadaşlar

Bu yazımda JQuery de ki olayları yani event ları anlatacağım.

ready(fn)

İlk göreceğimiz event ready event i. Bunu hemen hemen her jqeury işleminde görmeniz mümkün. Bir DOM element load edildiğe anda gerçekleşir. Mesela sayfamız da bir image olsun ve biz sayfa yüklendiğinde bu image i hide edelim. 

$(document).ready(function() {
        $("#loaderGif").hide();
});

Bunun gibi event bind işlemlerinide ready nin altında yapabilirsiniz. Mesela sayfada ki tbFiyat diye biten bütün textbox ların focus event ine alert koyalım.

$(document).ready(function() {
        $("form input:text[id$=tbFiyat]").focus(function() {
            alert("aaa");
        });
});

bind( type, [data], fn )

Bir DOM elemana bir event i bind etmeye yarar. Mesela sayfada ki paragraflara tıklandığında alert vermesi için 

$("p").bind('click', function(e){
	alert("aaa");
});

unbind( [type], [fn] )

bind işleminin tersini yapar. Mesela paragraflara bind ettiğimiz click event ini unbind edelim

$("p").unbind('click');

one( type, [data], fn )

Bir DOM elemana event bind etmeye yarar. bind dan farkı bir kere çalışır. Mesela sayfada ki paragralara tıklandığında alert verelim ama bu tıklama sadece bir kere yapılabilsin. 

$("p").one("click", function(e){
	alert("aaa");
});

trigger( event, [data] )

İstenilen DOM elemanın istenilen event ini tetiklemeye yarar. Mesela buton 1 e click event i atıyalım. buton 2 nin click event in de de buton1 in click event ini tetikleyelim. 

$("#button1").click(( function(){
	alert("aaa");
});

$("#button2").click(( function(){
	$("#button1").trigger('click');
});

hover( over, out )

Bir DOM elemanın üstüne gelindiğinde ve mouse üzerinden gittiğinde çalışacak fonksiyonları set etmeye yarar. Örneğin tüm table td leri için şöyle bir hover olayı yazabiliriz. 

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

toggle( fn, fn2, [fn3,fn4,...] )

Bir DOM elemanına her tıklamada hangi fonksiyonun çalışmasını istiyorsak set edebiliriz. Fonksiyonlar her tıklamada sırasıyla çalışır. Bitince en başa döner.

Bu toggle ı kaldırmak için unbind(‘click’) metodunu kullanabiliriz.

Mesela bir paragrafa tıklandığında sırasıyla çalışacak toggle fonksiyonları için 

    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );

blur

Bir eleman focus özelliğini kaybettiğinde blur özelliği çalışır. Bunu tetiklemek için mesela $(“#button1”).blur() şeklinde kullanabiliriz. Set etmek için ise

    $("input").blur(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });

Aşağıdaki diğer event lerin kullanım şekli blur gibidir. O yüzden sadece ne zaman tetiklendiklerini yazmakla yetineceğim.

blur Eleman focus özelliğinde kaybettiğinde çalışır.
change Eleman focus özelliğini kaybettiğinde ve içeriği değiştiği zaman çalışır.
click Eleman tıklandığında çalışır.
dblclick Eleman çift tıklandığında çalışır.
error Eleman hata verdiğinde çalışır.
focus Eleman focus olduğunda çalışır.
keydown Bir tuşa basıldığı zaman çalışır.
keypress Bir tuşa basılı tutulduğu sürece çalışır.
keyup Bir tuştan parmak çekilince çalışır.
load Eleman yüklendiğinde çalışır.
mousedown Elemanın üstündeyken mouse basıldığı zaman çalışır.
mouseup mouse un basılma tuşu bırakıldığı zaman çalışır.
mouseenter mouse elemanın üzerine geldiğinde çalışır.
mouseleave mouse elemanın üzerinden gittiğinde çalışır. Elemanın içinde ki elemana geçiş yapıldığında çalışmaz.
mousemove mouse elemanın üzerinde gezinirken çalışır.
mouseout mouse elemanın üzerinden gittiğinde çalışır. Elemanın içinde ki elemana geçiş yapıldığında çalışır.
mouseover mouse elemanın üzerine geldiğinde çalışır.
resize Elemanın eni veya boyu değiştirildiğinde yani resize edilidğinde çalışır.
scroll Eleman scroll edildiğinde çalışır.
select Eleman seçildiğinde çalışır. Mesela bir textbox ın içinde ki bir kısım veri mouse ile seçildiğinde çalışır.
submit Eleman submit edildiğinde çalışır
unload Eleman unload ediliğinde çalışır.


JQuery de Events yani olaylar bu şekilde.

Daha fazla bilgi almak JQuery Events sayfasını inceleyebilirsiniz.

Sormak istediğiniz bir şey olursa yorum kısmını kullanabilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery de CSS ve Posizyon İşlemleri

turgay , 15. June 2009, 18:52

Merhaba arkadaşlar

Bu yazımda JQuery de CSS ve Posizyon fonksiyonlarını anlatacağım.

Yazıyı 3 ana başlıkta toplayacağız. Bunlar

  • CSS işlemleri
  • Posizyon İşlemleri
  • Yükseklik ve Genişlik İşlemleri

 

JQuery de CSS İşlemleri

css(name) – Belirtilen elemanın name adlı özelliğinin değerini verir. Mesela button1 id li buton un background-color değerini almak için $(“#button1”).css(“background-color”)

css(properties) – Belirtilen elemanın istenen özelliklerini değiştirmek için kullanılır. Mesela button1 idli butonun background-color ve font-weight ini değiştirmek için
$(“#button1”).css({‘background-color’:’yellow’,’font-weight’:’bolder’})

css(key,value) – Belirtilen objenin key value mantığında css özelliğini değiştirmeye yarar. Mesela button1 id li button un background-color unu değiştirmek için
$(“#button1”).css(“background-color”,”yellow”)

 

JQuery de Posizyon İşlemleri (Position)

offset() – Belirtilen objenin ana dökümana göre left ve top ını öğrenmek için kullanılır. Örneğin button1 id li buton un sayfaya göre left ini bulmak için $(“#button1”).offset().left

position() – Belirtilen objenin üst parent ına göre left ve top ını öğrenmek için kullanılır. Örneğin button1 id li buton un üst parent ına göre left ini bulmak için $(“#button1”).position().left

scrollTop() – Belirtilen objenin eğer scroll u varsa scroll un yükselik olarak hangi posizyonda olduğunu verir.
$(“p:first”).scrollTop()

scrollTop(val) – Belirtilen objenin eğer scroll u varsa val değeri ile scroll un yükselik olarak posizyonu set edilir.
$(“div:first”).scrollTop(250)

scrollLeft() – Belirtilen objenin eğer scroll u varsa scroll un left olarak hangi posizyonda olduğunu verir.
$(“p:first”).scrollLeft()

scrollLeft(val) – Belirtilen objenin eğer scroll u varsa val değeri ile scroll un left olarak posizyonu set edilir.
$(“div:first”).scrollLeft(250)

 

JQuery de Yükselik ve Genişlik İşlemleri (Height - Width)

height() – Belirtilen objenin yükseliğini verir. $(“#button1”).height()

height(value) – Belirtilen objenin yükseliğini set etmeye yarar. $(“#button1”).height(100)

width() – Belirtilen objenin genişliğini verir. $(“#button1”).width()

width(value) – Belirtilen objenin genişliğini set etmeye yarar. $(“#button1”).width(100)

innerHeight() – Belirtilen objenin border ve padding gibi özelliklerinin eklenmiş yükseliğini verir. $(“#p1”).height()

innerwidth() – Belirtilen objenin border ve padding gibi özelliklerinin eklenmiş genişliğini verir. $(“#p1”).width()

 

Anlatacağımız fonksiyonlar bu kadar.

Daha fazla bilgi ve örneğe JQuery sayfasından erişebilirsiniz.

Kolay gelsin

Turgay Sahtiyan

Tags: , , ,
Kategori: JQuery | Development
E-mail   |     |   Comments (0)   |   Trackback

JQuery de DOM Elemanları Manipule Etmek (JQuery Manipulation)

turgay , 13. June 2009, 22:34

Merhaba arkadaşlar. Bu makalemde size JQuery de DOM elemanların nasıl manipule edileceğini, manipule ederken kullanılan fonksiyonların açıklamalarını anlatmaya çalışacağım.

Fonksiyonları 3 başlık altında gruplayacağım. Bunlar

  • JQuery de DOM Eleman İçeriği Değiştirme
  • JQuery de DOM Elemanlara Ekleme Yapma
  • Diğer Fonksiyonlar (Replace, Remove, Copy)

 

JQuery de DOM Eleman İçeriği Değiştirme

Bu kısımda text yada div gibi elemanlarının html ve text içeriklerinin nasıl okunacağını ve değiştirileceğini göreceğiz.

html() - Belirtilen objenin html içeriğini almaya yarar. Örneğin p1 id li paragrafın html içeriğini almak için $("#p1").html()

html(val) - Belirtilen objenin html içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın html içeriğini p2 id li paragrafa atamak için $("#p2").html($("#p1").html())

text() - Belirtilen objenin text içeriğini almaya yarar. Örneğin p1 id li paragrafın text içeriğini almak için $("#p1").text()

text(val) - Belirtilen objenin text içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın text içeriğini p2 id li paragrafa atamak için $("#p2").text($("#p1").text())

 

JQuery de DOM Elemanlara Ekleme Yapma

Bu bölümde div p dropdownlist gibi DOM elemanlarına ekleme yapmayı göreceğiz. Eklemelerimiz 3 değişik şekilde olacak. Elemanın içine, dışına ve etrafına eklemek.

DOM Elemanların İçine Ekleme Yapma

append(content) – İstenilen DOM elemana content i eklemeye yarar. Mesela dropDownList1 e yeni bir eleman eklemek için $(“#dropDownList1”).Append(<option value='99'>Turgay</option>)

appendTo(selector) – Selector olarak verilen DOM elemana seçilen elemanları eklemeye yarar. Mesela button1 id li butonu bütün paragraflara append yapalım. (“#button1”).appendTo(“p”)

prepend(content) – İstenilen DOM elemana content i en başa ekler. Mesela bütün paragrafların içeriğinin en başına Merhaba yazalım. $(“p”).append(“<b>Merhaba</b>”)

prependTo(selector) – Selector olarak verilen DOM elemanın en başına seçilen elemanları eklemeye yarar. Mesela button1 id li butonu bütün paragraflara prepend yapalım. (“#button1”).prependTo(“p”)

DOM Elemanların Dışına Ekleme Yapma

after(content) – Content diye verilen eleman veya içeriği istenen eleman yada elemanlardan sonra eklemeye yarar. Mesela button1 id li butondan sonra solda bir buton var diye yazmak için $(“#button1”).after(“Solda bir buton var”)

before(content) – Content diye verilen eleman veya içeriği istenen eleman yada elemanlardan önce eklemeye yarar. Mesela sayfada ki bütün p lerden evvel paragraf başlangıcı yazalım. $(“p”).before(“<b>Parafraf başlangıcı</b><br>”)

insertAfter(selector) – After ile aynı işe yapar. Sadece değişkenlerin yazılma yeri farklıdır. Örneğin $(“#button1”).after(“p”) ye denk gelen insertAfter kodu $(“p”).insertAfter(“#button1”) dir.

insertBefore(selector) – Before ile aynı işe yapar. Sadece değişkenlerin yazılma yeri farklıdır. Örneğin $(“#button1”).before(“p”) ye denk gelen insertBefore kodu $(“p”).insertBefore(“#button1”) dir.

DOM Elemanların Etrafına Ekleme Yapma

wrap(html) – İstenilen objelerin etrafına html olarak verilen content i ekler. Mesela bütün paragrafların her birinin etrafına bir div ekleyelim. $(“p”).wrap(“<div></div>”)

wrap(eleman) – İstenilen objelerin etrafına eleman olarak verilen elemanı ekler. Mesela bütün paragrafların her birinin etrafına bir div ekleyelim. $(“p”).wrap(document.createElement(“div”))

wrapAll(html) – İstenilen objelerin etrafına html olarak verilen content i ekler. Mesela bütün paragrafların her birinin etrafına değil tamamının etrafına bir div ekleyelim. $(“p”).wrapAll(“<div></div>”)

wrapAll(eleman) – İstenilen objelerin etrafına eleman olarak verilen elemanı ekler. Mesela bütün paragrafların her birinin etrafına değil tamamının etrafına bir div ekleyelim. $(“p”).wrapAll(document.createElement(“div”))

wrapInner(html) – İstenilen objelerin içindeki veriyi html olarak verilen content ile çevreler. Mesela bütün paragrafların her birinin içeriğini bold yapalım. $(“p”).wrapInner(“<b></b>”)

wrapInner(eleman) – İstenilen objelerin içindeki veriyi verilen eleman ile çevreler. Mesela bütün paragrafların her birinin içeriğini bold yapalım. $(“p”).wrapInner(“document.createElement(“b”)”)

 

Diğer Fonksiyonlar (Replace, Remove, Copy)

replaceWith(content) – İstenilen objelerin yerine content diye verilen bilgiyi koyar. Mesela button1 id li butonun yerine yazı yazalım. $(“#button1”).replaceWith(“Eskiden burda bir buton vardı. Hey gidi günler hey!!”)

replaceAll(selector) – Replace ile aynıdır. Elemanların yazılma şekli farklıdır. Mesela sayfada ki bütün p lerin yerine “paragraf” yazalım. $(“paragraf”).replaceAll(“p”)

empty() – Verilen objenin içinde ki bütün child nodes ları siler. Mesela dropdownlist in içeriğini boşaltalım. $(“#dropDownList1”).empty()

remove([expr]) – Verilen objeleri silmeye yarar. Mesela sayfada ki bütün p leri silelim. $(“p”).remove()

clone() – Verilen objeyi kopyalar ve seçer

 

JQuery de Manipulation işlemleri olarak anlatacaklarım bu kadar.

Daha fazla bilgi ve örneğe JQuery sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.NET te JQuery ile Yazıcı Dostu Sayfa Yazdırmak

turgay , 12. June 2009, 23:53

Merhaba arkadaşlar,

Bir çoğumuz sayfalarımızda masterpage, template ve bolca resim kullanmaktayız. Sayfalarımızı yazdırmak istediğimizde ise bunların çıkmamasını ve sadece content in yazdırılmasını isteriz.

İşte bu tarz durumlarda yazıcı dostu sayfalar hazırlayıp bunları yazdırmak isteriz.

Bu makalemizde bu yazıcı dostu sayfaları nasıl hazırlayacağımızı göreceğiz.

Bu işlem için bir javascript fonksiyonu kullanacağız. Butona basınca bu javascript çalışacak ve yeni sayfa açarak istediğimiz id li elemanı yazıcı dostu bir şekilde ekrana getirecek.

Mesela şu yapıda bir aspx.dosyamız olduğunu varsayalım.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Yazıcı Dostu Sayfa Yazdırmak..Turgay Sahtiyan</title>
    <link href="myCss.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="yazdir.js"></script>        
</head>
<body>
    <form id="form1" runat="server">
    <div id="divMain">    
    <div id="divForm">    
        Form 1
        <br />
        <table style="width: 210px" border=1>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label1" runat="server" Text="Ad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" Text="Turgay"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td class="style2">
                    <asp:Label ID="Label2" runat="server" Text="Soyad"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Text="Sahtiyan"></asp:TextBox>
                </td>
            </tr>
        </table>
        <asp:Button ID="Button1" runat="server" Text="Gönder" />
        <asp:Button ID="Button2" runat="server" Text="Vazgeç" />
        <br /><br />
    </div>
    <div id="divTable1" class="yazdirma">    
    Tablo 1
    <br />
    <table style="width: 210px" border=1>
        <tr>
            <td class="style2">
                1-1</td>
            <td>
                1-2</td>
        </tr>
        <tr>
            <td class="style2">
                2-1</td>
            <td>
                2-2</td>
        </tr>
    </table>
    <br />
    </div>
    <div id="divTable2">    
    Tablo 2<br />
    <table border=1>
        <tr>
            <td class="style3">
                a</td>
            <td class="style4">
                b</td>
            <td class="style5">
                c</td>
        </tr>
        <tr>
            <td class="style3">
                d</td>
            <td class="style4">
                e</td>
            <td class="style5">
                f</td>
        </tr>
        <tr>
            <td class="style3">
                g</td>
            <td class="style4">
                h</td>
            <td class="style5">
                ı</td>
        </tr>
    </table>
    </div>
    <br /><br />
    </div>
    
    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>                 
    </form>
</body>
</html>

Gördüğünüz gibi div ler için id kullandık. Çünkü bu id leri kullanarak istediğimiz id li elemanı yazdırabileceğiz.

Aynı zamanda göreceğiniz gibi divTable1 id li div de yazdirma diye bir class kullandık. Ve bu class sayesinde bu div yazdırılacak kısımın içinde olsa bile bunu yazdırmamayı sağlayabileceğiz.

Yani demek istediğim şu. Bir divin tamamını yazdırmak istiyoruz ama onun için de bir kısmı yazdırmak istemiyoruz. İşte bunu class ataması sayesinde halledeceğiz.

Sayfamızın yapısını şu şekilde tekrar basitçe hatırlayacak olursak.

<div id=”divMain”>
	<div id="divForm">
	</div>
           <div id="divTable1" class="yazdirma"> 
	</div>
           <div id="divTable2">    
	</div>
</div>

Buton a atayacağımız kod ise şu şekilde olacak.

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divMain');false;"/>

Butona basıldığında divMain içeriğinin tamamı yazılacak. Ama divTable1 yazılmayacak çünkü onun class atamasında yazdırma seçili. Bu şekilde yazdırmak istemediklerimize class ataması yapabiliriz.

Mesela sadece divTable2 yi yazdıralım

    <asp:Button ID="print" runat="server" Text="Sayfayı Yazdır" OnClientClick="yazdir('divTable2');false;"/>

Şimdi yazdırma işini üstlenen javascript kodumuzu inceleyelim.

function yazdir(yazdirilacakBolum) {
    //Yeni bir sayfa create ediyoruz. Yazdırılacak veriyi yeni sayfada açacağız.
    var pp = window.open();
    //Yeni sayfaya HTML ve Head taglarını açıyoruz.
    pp.document.writeln('<HTML><HEAD><title>Yazdır</title></HEAD>');
    //css imizi ekliyoruz
    pp.document.writeln('<LINK href=myCss.css  type="text/css" rel="stylesheet">');
    //head tag ını kapatıyoruz.
    pp.document.writeln('</HEAD>');
    //Body tag ı ekliyoruz
    pp.document.writeln('<body bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">');
    //Form tag ı ekliyoruz
    pp.document.writeln('<form  method="post">');
    //yazdır ve kapat diye 2 tane buton ekliyoruz.
    pp.document.writeln('<TABLE width=100%><TR><TD></TD></TR>');
    pp.document.writeln('<TR><TD align=right>');
    pp.document.writeln('<INPUT ID="PRINT" type="button" value="Yazdır" ');
    pp.document.writeln('onclick="javascript:location.reload(true);window.print();">');
    pp.document.writeln('<INPUT ID="CLOSE" type="button" value="Kapat" ');
    pp.document.writeln('onclick="window.close();">');
    pp.document.writeln('</TD></TR><TR><TD></TD></TR></TABLE>');
    //yazdırılıcak bölümü sayfaya yazıyoruz.
    //Görüldüğü gibi yazdırılacak bölümün önce child elemanlarına erişiyoruz.
    //Daha sonrada bu child elemanlardan yazdirma class ı içermeyenleri alıp
    //objeler adında bir değişken listesinde topluyoruz.
    objeler = $("#" + yazdirilacakBolum).children().not(".yazdirma");
    //objeler değişken listesine map fonksiyonu ile erişip bunları array e dönüştürüyoruz
    //array dönüşen kısmında her bir elemanı için html() fonksiyonu ile
    //html içeriğini alıyoruz. Bunuda documan a yazdırıyoruz.
    pp.document.writeln(objeler.map(function() {
                    return $(this).html();
                }).get().join(" ") );
    //form,body ve html taglarını kapatıyoruz.
    pp.document.writeln('</form></body></HTML>');
}

Evet işlemimiz bu kadar. Umarım açıklayıcı olmuştur.

Kafanıza takılan veya sormak istediğiniz herhangi bir şey olursa yorum kısmında sorabilirsiniz. En kısa sürede cevap vermeye çalışırım.

Projeyi buradan indirip inceleyebilirsiniz. YaziciDostu.zip (23,87 kb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , ,
Kategori: ASP.NET | Development | Javascript | JQuery
E-mail   |     |   Comments (3)   |   Trackback

JQuery de Traversing (Düğümlere ve Düğüm Elemanlarına Erişmek)

turgay , 11. June 2009, 17:37

Merhaba arkadaşlar,

Bu yazımızda JQuery de traversing yani düğümlere ve düğüm elemanlarına erişmeyi işleyeceğim.

Düğüm nedir. Daha önce ki yazılarımızda görmüştük. Mesela sayfamızda ki bütün dvileri seçmek için $(“div”) komutunu kullanabiliyoduk. Peki bu divleri seçtik ama bu divlerden ilkini yada belirli filtrelere uyanlara erişmek istiyoruz. İşte bu alt elemanlara düğüm erişme işlemine de traversing deniyor.

Bu bölümde işleyeceğim JQuery fonksiyonlarını 2 ana başlık altında anlatacağım. Bunlar

  • Filtreleme Yöntemi ile Erişim
  • Bulma Yöntemi ile Erişim
  • Diğer Fonksiyonlar

 

Filtreleme (Filtering)

eq(index) – Belirtilen index te ki objeyi döndürür. index 0 dan başlar. Mesela div lerimizden 3. süne erişmek için $(“div”).eq(2)

slice(start, [end]) – eq ile 1 elemana erişiyoduk. slice ile ise start tan başlayıp end e kadar olan elemanlara erişebiliriz. Yada end değerini vermezsek start tan başlayıp son elemana kadar erişebiliriz. Mesela sayfamızda ki divlerden 3 ile 7 sıra arasında olanlar için $(“div”).slice(2,6), yada sayfamızda ki divlerden index numarası 3 ten büyük olanlar için $(“div”).slice(2)

filter(expr) – Belirtilen özelliğe uyan elemanları döndürür. Mesela sayfamız da ki divlerden class ı my class olanları bulmak için $(“div”).filter(“.myClass”)

not(expr) – Belirtilen özelliğe uymayan elemanları döndürür. Mesela sayfamız da ki divlerden class ı my class olmayanları bulmak için $(“div”).not(“.myClass”)

Bu arada birden fazla özelliği arka arkaya kullanabiliriz. Mesela myClass olmayan ve id si myDiv olmayan div ler için $(“div”).not(“.myClass, #myDiv”)

is(expr) – Seçili öğenin expr ile verilen özelliği olup olmamasını sınar. Mesela sayfamızda ki divlerden 3.div in class özelliği myClass mı diye bakalım.

if $(“div”).eq(2).is(“.myClass”) {
    //doğru
}

map(callback) – Bir grup elemanı array e dönüştürmeye yarar. Mesela sayfamızda ki textboxların içinde ki değerleri virgülle ayrıştırıp id si sonuc olan paragrafa yazalım.

 $("#sonuc").append( $("input").map(function(){
      return $(this).val();
    }).get().join(", ") );

Bulma (Finding)

add(expr) – Seçili olan eleman listesine daha fazla eleman eklemeye yarar. Mesela sayfamız daki div lerin border ını değiştirdikten sonra bütün paragrafları ekleyip hepsinin background unu değiştirelim.

$("div").css("border", "2px solid red")
           .add("p")
           .css("background", "yellow");

children([expr]) – Bir elemanın alt elemanlarına erişmeye yarar. Mesela bir div içinde ki bütün elemanları başka bir değişkene atalım. var $altEleman=$(“div”).eq(0).children();

find(expr) – Bir eleman listesi içinde ki başka bir eleman listesine erişmeye yarar. Mesela sayfamızda ki divler içinde ki span lara erişmek için $(“div”).find(“span”)

next([expr]) – Bir elemandan sonraki elemanı işaret eder. Mesela button1 id li bir butonun yanında ki span a soldaki bir butondur yazdıralım. $(“#button1”).next().text(“Soldaki bir butondur”)

nextAll([expr]) – Bir elemandan sonraki bütün elemanları işaret eder. Mesela 3.div den sonraki bütün divlere class ataması yapalım. $(“div”).eq(2).nextAll().addClass(“myClass”);

prev([expr]) – Bir elemandan önceki elemanı işaret eder. Mesela button1 id li bir butonun yanında ki span a sağdaki bir butondur yazdıralım. $(“#button1”).prev().text(“Sağdaki bir butondur”)

prevAll([expr]) – Bir elemandan önceki bütün elemanları işaret eder. Mesela 3.div den önceki bütün divlere class ataması yapalım. $(“div”).eq(2).prevAll().addClass(“myClass”);

parent([expr]) – Belirtilen elemanın parent ına erişmek için kullanılır. Mesela sayfamız da ki button1 id li button un parent inin tipini öğrenelim. $(“#button1”).parent().get(0).tagName;

parents([expr]) – Bir elemanın bütün parentlarını bulmaya yarar. Mesela button1 id li elemanın parentlarını bulalım ve bunları virgülle ayırarak sonuc id li paragrafa yazalım.

var parentEls = $("#button1").parents()
                          .map(function () { 
                                return this.tagName; 
                              })
                          .get().join(", ");
    $("b").append("<strong>" + parentEls + "</strong>");

 

Diğer Fonksiyonlar

addSelf() – Geçerli seçimin üstüne bir önceki seçimi ekler. Mesela aşağıda ki örnek te div ve p lerin border ı değişirken sadece p lerin background u değişmektedir.

    $("div").find("p").andSelf().addClass("border");
    $("div").find("p").addClass("background");

end() – Geçerli filtrelemeyi iptal etmeye yarar. Mesela div ilkine class ataması yapıp daha sonra tamamına background atayalım.

$("div")
	.eq(0)
	.addClass("myClass")
	.end()
	.css("background", "yellow");

Traversing anlatımımız bu kadar.

Daha fazla bilgi ve örneğe JQuery Traversing sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Ajax,JQuery ve JSON Kullanarak İl-İlçe-Semt Uygulaması

turgay , 10. June 2009, 22:31

Merhaba arkadaşlar

Bu yazımda daha önce Ajax, JQuery ve WebMethod kullanarak yaptığımız il-ilçe-semt uygulamasını şimdi remote bir dosya ve JSON kullanarak yapacağız. Önceki makaleye buradan erişebilirsiniz.

DataTableToJSon metoduyla alakalı makaleye de buradan erişebilirsiniz.

Açıklamalar kod üzerindedir.

ilce_semt.aspx. ilçe ve semt bilgilerini getiren aspx dosyası.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;
using System.Data.SqlClient;

public partial class ilce_semt : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string tip = Request["tip"].ToString();
        string id = Request["id"].ToString();

        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTable = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            if (tip == "ilce")
            {
                sqlCommand = new SqlCommand("Select * from ilceler where IlID=@ID", sqlConnection);
            }
            else if (tip == "semt")
            {
                sqlCommand = new SqlCommand("Select * from semtler where IlceID=@ID", sqlConnection);
            }

            sqlCommand.Parameters.Add("ID", SqlDbType.NVarChar);
            sqlCommand.Parameters["ID"].Value = id;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTable);

            if (tip == "ilce")
                Response.Write(DataTableToJSon("0", dataTable, "IlceID,Ad"));
            else if (tip == "semt")
                Response.Write(DataTableToJSon("0", dataTable, "SemtID,Ad"));
        }
        catch
        {
            Response.Write("");
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    /// <summary>Verilen datatable'ı JSON string olarak döndürür.</summary>
    /// <param name="type">"0" ise kolon adlarıyla dönüş yapar."1" ise row-col şeklinde dönüş yapar.</param>
    /// <param name="dt">JSON'a dönüştürülecek DataTable.</param>
    /// <param name="allowCols">İstenilen kolonlar.Virgül ile ayrılarak yazılacak.</param>
    /// <returns>JSON String.</returns>
    public string DataTableToJSon(string type, DataTable dt, string allowCols)
    {
        //allowCols string ini indexof kullanabilmek için List e atıyoruz
        List<string> listCols = new List<string>();
        if (allowCols != null)
        {
            foreach (string s in allowCols.Split(','))
            {
                listCols.Add(s);
            }
        }

        //dönüş string i
        StringBuilder JsonString = new StringBuilder();
        if (dt != null && dt.Rows.Count > 0)
        {
            if (type == "0")
            {
                JsonString.Append("{ ");
                JsonString.Append("\"Head\":[ ");
            }
            else
            {
                JsonString.Append("{ ");
                JsonString.Append("\"TABLE\":[{ ");
                JsonString.Append("\"ROW\":[ ");
            }
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                if (type != "0")
                    JsonString.Append("\"COL\":[ ");

                JsonString.Append("{ ");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    //allowCols null sa veya bu colon allowCols ta var ise
                    if ((allowCols == null) || (listCols.IndexOf(dt.Columns[j].ColumnName.ToString()) > -1))
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\",");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"},");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            if (type == "0")
                                JsonString.Append("\"" + dt.Columns[j].ColumnName.ToString() + "\":" + "\"" + dt.Rows[i][j].ToString() + "\"");
                            else
                                JsonString.Append("{" + "\"DATA\":\"" + dt.Rows[i][j].ToString() + "\"}");
                        }
                    }
                }
                if (i == dt.Rows.Count - 1)
                {
                    if (type == "0")
                        JsonString.Append("} ");
                    else
                        JsonString.Append("]} ");
                }
                else
                {
                    if (type == "0")
                        JsonString.Append("}, ");
                    else
                        JsonString.Append("]}, ");
                }
            }
            if (type == "0")
                JsonString.Append("]}");
            else
                JsonString.Append("]}]}");
            return JsonString.ToString();
        }
        else
        {
            return null;
        }
    }
}

Default.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.Net te Ajax ve JQuery Kullanarak İl-İlçe-Semt Uygulaması</title>
    <meta name="coder" content="Turgay SAHTİYAN" />
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //sayfa çalıştığında yapılan işlemler
    $(document).ready(function() {
        //ilçe ve semt in yanında ki yükleniyor gif lerini sayfa çalıştığında hide yapıyoruz.
        $("#loaderGif1").hide();
        $("#loaderGif2").hide();

        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz.
        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        //il dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_il").change(function() {
            ilChange();
        })

        //ilçe dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    //il dropdown u change olduğunda çalışacak fonksiyon
    function ilChange() {
        //ilçenin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif1").show();
        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //il dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilID = $("#ddl_il").val();

        $.getJSON("ilce_semt.aspx", { tip: "ilce", id: ilID },
            function (JSON) {
                //ilçenin içini boşaltalım.
                $('#ddl_ilce').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_ilce").append("<option value=''>İlçe Seçiniz</option>");
                //json datamızı dönerek ilçe nin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_ilce").append("<option value='" + data.IlceID + "'>" + data.Ad + "</option>");
                });
                //ilçenin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif1").hide();
                //ilçenin disabled özelliğini kaldırıyoruz.
                $("#ddl_ilce").removeAttr("disabled");
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }        
        );
        
        return false;
    }

    //ilçe dropdown u change olduğunda çalışacak fonksiyon
    function ilceChange() {
        //semtin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif2").show();
        //semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //ilçe dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilceID = $("#ddl_ilce").val();

        $.getJSON("ilce_semt.aspx", { tip: "semt", id: ilceID },
            function(JSON) {
                //semtin içini boşaltalım.
                $('#ddl_semt').empty();
                //ilk item olarak ilçe seçiniz yazısını ekleyelim
                $("#ddl_semt").append("<option value=''>Semt Seçiniz</option>");
                //json datamızı dönerek semtin içini dolduralım
                $.each(JSON.Head, function(i, data) {
                    $("#ddl_semt").append("<option value='" + data.SemtID + "'>" + data.Ad + "</option>");
                });
                //semtin yanında ki yükleniyor gif ini hide yapıyoruz.
                $("#loaderGif2").hide();
                //semt in disabled özelliğini kaldırıyoruz.
                $("#ddl_semt").removeAttr("disabled");
            }
        );

        return false;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>
        <br />
    </div>
    </form>
</body>
</html>

Default.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Text;

public partial class _Default : System.Web.UI.Page 
{

    protected void Page_Load(object sender, EventArgs e)
    {
        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", sqlConnection);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            //il dropdown unu dolduruyoruz
            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz", "");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            sqlConnection.Close();
        }
    }
}

 

Dikkat etmemiz gereken bir nokta ilce_semt.aspx dosyasında sadece JSON verisi olmalı. Yoksa JSON fonksiyonu çalışmaz.

Örneği buradan indirebilirsiniz. Ajax_JSon_il_ilce_semt.zip (1,80 mb)

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , , , , , ,
Kategori: Development | Ajax | ASP.NET | JQuery | JSon
E-mail   |     |   Comments (2)   |   Trackback

JSON Nedir?

turgay , 9. June 2009, 17:45

JSON kelime anlamı olarak JavaScript Object Notation manasına gelmektedir.

Yapı olarak XML e çok benzeyen JSON tipinin ana amacı veri alış verişi yaparken daha küçük boyutlarda veri alıp göndermektir. Ayrıca kullanımı da çok kolaydır.

XML ve JSON karşılaştırması için bir örnek verelim. Bunun için Müşteri datalarını tuttuğumuzu varsayalım.

XML Örneği

<musteriler>
    <musteri>
        <kod>120.01.001</kod>
        <ad>Microsoft</ad>
        <unvan>Microsoft AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.002</kod>
        <ad>Google</ad>
        <unvan>Google AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.003</kod>
        <ad>Yahoo</ad>
        <unvan>Yahoo AŞ.</unvan>
    </musteri>
    <musteri>
        <kod>120.01.004</kod>
        <ad>Apple</ad>
        <unvan>Apple AŞ.</unvan>
    </musteri>
</musteriler>

Şimdide bunu JSON ile ifade edelim.

{musteriler:[
    {
       "kod":"120.01.001",
       "ad"="Microsoft",
       "unvan"="Microsoft AŞ",
    }
    {
       "kod":"120.01.002",
       "ad"="Google",
       "unvan"="Google AŞ",
    }
    {
       "kod":"120.01.003",
       "ad"="Yahoo",
       "unvan"="Yahoo AŞ",
    }
    {
       "kod":"120.01.004",
       "ad"="Apple",
       "unvan"="Apple AŞ",
    }
]}

Gördüğünüz üzere kodumuz oldukça azaldı ve yazması-okumasıda kolaylaştı.

Böyle 3-5 elemanlı örneklerde per bir performans göremesenizde 1000-2000 elemanlı örneklerde performans oldukça farkedecektir.

JSON un JQuery de kullanımıda çok basittir. Bununla alaklı bir örnek verip yazımızı noktalayalım.

JQuery nin kendi sitesinde verdiği örneği verip açıklamasını yapacağım.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
               //dönen datadaki her bir eleman için...
               $.each(data.items, function(i,item){ 
                   //elamanın media değerini alarak bir jpg oluştur
                   $("<img/>").attr("src", item.media.m).appendTo("#images");
                   //sadece ilk 4 kaydı getir
                   if ( i == 3 ) return false;
          });
});

Bu örnek kod flickr sitesinde ki cat kategorisine gönderilmiş son 4 resmi JSON kullanarak getirmekte.

 

JSON a giriş anlatımını baz olan bu yazımız bu kadar. Daha fazla bilgi için JSON http://www.json.org sitesini inceleyebilirsiniz.

 

Kolay gelsin

Turgay Sahtiyan

Tags: , , ,
Kategori: Development | JSon | JQuery
E-mail   |     |   Comments (0)   |   Trackback

ASP.Net te Ajax ve JQuery Kullanarak İl-İlçe-Semt Uygulaması

turgay , 9. June 2009, 13:08

Merhaba arkadaşlar,

Bu yazımda web sayfalarında sık sık karşımıza çıkan bir uygulama olan sayfayı reload etmeden ajax ile il-ilçe-semt seçim işleminin nasıl yapıldığını anlatacağım. Bu arada bu örneğimizi WebMethod ile geliştireceğiz. WebMethod aspx.cs dosyalarımızda ki fonksiyonlara javascript içerisinden erişme metodudur.

Daha sonra bu örneğin aynısını json ilede yapacağız.

Kodun tamamı kendi yazdığım bir koddur ve anlaşılması kolay olsun diye pek fazla sıkıştırma yapılmamıştır. Siz kendi isteğinize göre düzenlersiniz.

Default.aspx dosyası

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ASP.Net te Ajax ve JQuery Kullanarak İl-İlçe-Semt Uygulaması</title>
    <meta name="coder" content="Turgay SAHTİYAN" />
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //sayfa çalıştığında yapılan işlemler
    $(document).ready(function() {
        //ilçe ve semt in yanında ki yükleniyor gif lerini sayfa çalıştığında hide yapıyoruz.
        $("#loaderGif1").hide(); 
        $("#loaderGif2").hide();

        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz.
        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        //il dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_il").change(function() {
            ilChange();
        })

        //ilçe dropdown u change olduğunda çalışacak fonksiyon
        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    //il dropdown u change olduğunda çalışacak fonksiyon
    function ilChange() {
        //ilçenin yanında ki yükleniyor gif ini show yapıyoruz.
        $("#loaderGif1").show();
        //ilçe ve semt dropdown larının içini sayfa çalıştığında set ediyoruz ve disabled yapıyoruz.
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        //il dropdown unda ki seçili öğenin değerini alıyoruz.
        var ilID = $("#ddl_il").val();
        //webmethod ile çalışacağımız için path bilgisini alıyoruz.
        var pagePath = window.location.pathname;

        //ajax isteğimiz
        $.ajax({
            type: "POST", //GET veya POST
            url: pagePath + "/ilChange", //hangi fonksiyonu çağıracaz.default.aspx/ilchange
            contentType: "application/json; charset=utf-8",
            data: '{ilID:'+ilID+'}', //gönderdiğimiz parametreler
            dataType: "json",
            success: onSucceeded1, //istek başarılı olduğunda çalışacak fonksiyon
            error: onFailed //istek hatalı olduğunda çalışacak fonksiyon
        });
        return false;
    }

    //istek başarılı olduğunda çalışacak fonksiyon
    function onSucceeded1(result) {
        //ilçenin yanında ki yükleniyor gif ini hide yapıyoruz.
        $("#loaderGif1").hide();
        //ilçe dropdown una gelen bilgiyi atıyoruz. aynı zamanda disabled özelliğini kaldırıyoruz.
        $("#ddl_ilce").removeAttr("disabled").html(result.d);
        //semt in disabled özelliğini kaldırıyoruz.
        $("#ddl_semt").removeAttr("disabled");
    }

    //istek hatalı olduğunda çalışacak fonksiyon
    function onFailed(result) {
        alert(result.d);
    }

    //bu fonksiyonun çalışma mantığıda ilChange gibi
    function ilceChange() {
        $("#loaderGif2").show();
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        var ilceID = $("#ddl_ilce").val();
        var pagePath = window.location.pathname;

        $.ajax({
            type: "POST",
            url: pagePath + "/ilceChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilceID:' + ilceID + '}',
            dataType: "json",
            success: onSucceeded2,
            error: onFailed
        });
        return false;
    }

    function onSucceeded2(result) {
        $("#loaderGif2").hide();
        $("#ddl_semt").removeAttr("disabled").html(result.d);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

Defaul.aspx.cs dosyası

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", sqlConnection);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            //il dropdown unu dolduruyoruz
            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz","");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    //trick nokta burası. Procedure umuzun üstüne WebMethod yazıyoruz ve javascript ten erişiyoruz.
    //bu arada public ve static olarak tanımlıyoruz.
    [WebMethod]
    public static string ilChange(string ilID)
    {
        //yükleniyor giflerini görmek için. Daha sonra kaldırınız.
        System.Threading.Thread.Sleep(2000); 

        //bağlantılar
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableIlce = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result="";

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from ilceler where IlID=@IlID", sqlConnection);

            sqlCommand.Parameters.Add("IlID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlID"].Value = ilID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIlce);

            //result ımızı dolduruyoruz.
            result += "<option value=''>İlçe Seçiniz</option>";
            foreach (DataRow dataRow in dataTableIlce.Rows)
            {
                result += "<option value='" + dataRow["IlceId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch(Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            sqlConnection.Close();
        }
    }

    //ilchange ile aynı.
    [WebMethod]
    public static string ilceChange(string ilceID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection sqlConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings["connectionString"]);
        DataTable dataTableSemt = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result = "";

        sqlConnection.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from semtler where IlceID=@IlceID", sqlConnection);

            sqlCommand.Parameters.Add("IlceID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlceID"].Value = ilceID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableSemt);

            result += "<option value=''>Semt Seçiniz</option>";
            foreach (DataRow dataRow in dataTableSemt.Rows)
            {
                result += "<option value='" + dataRow["SemtId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch (Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            sqlConnection.Close();
        }
    }
}

Projeyi buradan indirebilirsiniz. Ajax_il_ilce_semt.zip (1,80 mb)

Bu arada veritabanı Gökhan http://gokhanbagci.blogcu.com/ dan alınmıştır. Kendisine teşekkür ediyoruz.

 

Aynı örneği bir sonra ki yazımızda json ile geliştireceğiz. Şimdilik hoşçakalın.

Kolay Gelsin

Turgay Sahtiyan

Tags: , , , , , , ,
Kategori: Ajax | ASP.NET | Development | JQuery
E-mail   |     |   Comments (8)   |   Trackback

JQuery de Ajax İşlemleri

turgay , 9. June 2009, 12:15

Merhaba Arkadaşlar,

Bu yazımda JQuery ile ajax işlemlerini anlatacağım.

Ajax bildiğiniz üzere artık bir web sayfasının olmazsa olmazları arasında. JQuery ile de ajax işlemlerini ek bir kütüphane kullanmadan çok rahat bir şekilde yapabilmekteyiz.

Anlatımı 3 başlık altında yapacağım. Bunlar

  • Ajax istekleri (Ajax Request)
  • Ajax Olayları (Ajax Events)
  • Ajax Yardımcıları (misc.)

Ajax İstekleri

jquery.ajax(options) – En temel ajax isteğidir. Bir örnekle gösterelim 

 $.ajax({
   type: "POST", 
   url: "deneme.aspx", 
   data: "ad=Turgay&soyad=Sahtiyan",
   success: function(msg){
       alert( "Gelen bilgi" + msg );
   error:function(msg){
       alert("hata" + msg)
   }
 });
  • type = İsteğin şeklini belirler. POST veya GET değeri alabilir.
  • url = İstek yapılacak sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz.
  • success = İstek başarılı olduğunda çalışacak fonksiyondur.
  • error = İstek başarısız olduğunda çalışacak fonksiyondur.

load(url, [data], [callback]) – Url diye belirtilen sayfadan bilgileri çekip belirttiğimiz elemana atar.

Mesela linkler.aspx dosyasında ki bilgiyi linkler div ine yazmak için. 

$("#linkler").load("linkler.aspx");

 

  • url = İsteğin yapılacağı sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
  • callback = İstek tamamlandığında çalışacak fonksiyondur. Kullanılması zorunlu değildir.

jQuery.get( url, [data], [callback], [type] ) – İstenilen sayfayı HTTP Get isteği ile yükler.

Mesela üstte load ile yaptığımız işlemi get ile yapalım. Linkler.aspx sayfamızda ki linktip i sinema olanları alıp linkler id li div e yazıyoruz. 

$.get("linkler.aspx",       
           { linkTip: "sinema" },       
           function(data){$(“#linkler”).html(data)}      
           );

 

  • url = İsteğin yapılacağı sayfanın url sidir.
  • data = Eğer sayfaya parametre göndereceksek burada belirtebiliriz. Kullanılması zorunlu değildir.
  • callback = İstek tamamlandığında çalışacak fonksiyondur. Elemana atamayı burda yapıyoruz. Kullanılması zorunlu değildir.
  • type = Dönen data nın tipini belirtmemize yarar. "xml", "html", "script", "json", "jsonp" veya "text" değerini alabilir.

jQuery.getJSON( url, [data], [callback] ) – HTTP Get metodu ile JSON Datası yüklemeye yarar. Parametre kullanımı aynıdır. JSON işlemlerine özel örnekler ileriki yazılarda detaylı anlatılacaktır.

jQuery.getScript( url, [callback] ) – Bir javascript dosyasını yükleyip çalıştırmaya yarar. Kullanımı şu şekildedir. 

$.getScript("test.js");

jQuery.post( url, [data], [callback], [type] ) - İstenilen sayfayı HTTP Post isteği ile yükler. Kullanımı Get ile aynıdır.

Ajax Olayları

ajaxComplete( callback ) – Herhangi bir ajax isteği tamamlandığında çalışır. Mesela sayfamızda ki mesaj id li div e bir ajax isteği sonuçlandığında bilgi yazalım. 

 $("#mesaj").ajaxComplete(function(event,request, settings){
   $(this).append("<li>İstek Tamamlandı</li>");
 });

ajaxError( callback ) - Herhangi bir ajax isteği hata verdiğinde çalışır. Kullanımı complete ile aynıdır.

ajaxSend( callback ) - Herhangi bir ajax isteği gönderilmeden hemen önce çalışır. Kullanımı complete ile aynıdır.

ajaxStart( callback ) - Herhangi bir ajax isteği başladığında çalışır. Kullanımı complete ile aynıdır.

ajaxStop( callback ) - Herhangi bir ajax isteği sonlandığında çalışır. Kullanımı complete ile aynıdır.

ajaxSuccess( callback ) - Herhangi bir ajax isteği başarılı olduğında çalışır. Kullanımı complete ile aynıdır.

Ajax Yardımcıları

jQuery.ajaxSetup( options ) – Ajax ayarlarını yapmamıza yarar. Sayfamızda kullandığımız ajax isteklerinin tamamında aynı bazı özellikleri kullanıyorsak bunları ajaxSetup ile bir kere yazabiliriz. Mesela bütün ajax isteklerimizde type özelliğini POST, dataType özelliğinide json kullanıyoruz. Bu durumda bunları her ajax isteğimizde yazmaktansa ajaxSetup ile belirleyebiliriz. Kodlarımızda azalmış olur:)

Kullanımı 

$.ajaxSetup({
  type: "POST",
  dataType: "json"
});

serialize( ) – input elemanlarını parametre olarak kullanabilmek için serialize etmeye yarar. Örneğin form1 id li form umuzun içinde ad,soyad ve yas id li txt boxlar olsun. Ve bunlara da turgay,sahtiyan,29 bilgileri girilmiş olsun. Bu durumda aşağıda ki kodu yazdığımızda 

$("#form1").serialize();

 

sonuç olarak şu bilgiyi alabiliriz. 

ad=Turgay&soyad=Sahtiyan&yas=29

Ne kadar kolay ve hızlı değil mi:)

serializeArray( ) – Serialize ile aynı işi yapar. Tek farkı json data döndürmesidir.

JQuery ile ajax işlemleri bu şekilde. İleriki yazılarımda bolca örnek yapacağım. O zaman daha iyi anlatabileceğime eminim:)

Daha fazla bilgiye JQuery sayfasından erişebilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Ajax | Development | JQuery | JSon
E-mail   |     |   Comments (0)   |   Trackback

JQuery ile Tarih Seçimi (datepicker)

turgay , 8. June 2009, 17:26

Merhaba arkadaşlar,

Bu yazımızda Kelvin Luck un JQuery ile yazdığı tarih seçim plug in ini inceleyeceğiz.

Bu plug inde JQuery, DateMethods ,bgiFrame plugin ini kullanacağız. Dolayısıyla linklere basıp bu dosyaları indiriniz.

Ayrıca jquery.datePicker.js ve datePicker.css de kullanacağımız ana dosyalarımız. Bunlarıda indiriniz.

Visual Studio yu açıp yeni bir web site başlatıyoruz. Default.aspx dosyamıza 2 tane textbox koyup bunların CssClass larını "date-pick" yapıyoruz. Textboxlarla tek yapmamız gereken bu. Geri kalanı datePicker ayarlıyor:)

Sayfamızın script kısmına gerekli js leri ve css leri ekleyip aşağıda ki kodu yazıyoruz. 

    <script type="text/javascript" charset="utf-8">
        $.dpText = {
            TEXT_PREV_YEAR: 'Önceki Yıl',
            TEXT_PREV_MONTH: 'Önceki Ay',
            TEXT_NEXT_YEAR: 'Gelecek Yıl',
            TEXT_NEXT_MONTH: 'Gelecek Ay',
            TEXT_CLOSE: 'Kapat',
            TEXT_CHOOSE_DATE: 'Seç'
        }    
        $(function() {
            $('.date-pick').datePicker({ startDate: '01/01/1996' });
        });
    </script>

startDate e hangi tarihten itibaren başlanacağını yazıyoruz.

Birde textboxlarımızın yanında butonlar çıkmasını istiyorsak Images klasoru altına bir calendar.png atıyoruz ve sayfamızın head kısmına aşağıda ki css i ekliyoruz. 

    <style type="text/css">
        a.dp-choose-date {
            float: left;
            width: 16px;
            height: 16px;
            padding: 0;
            margin: 5px 3px 0;
            display: block;
            text-indent: -2000px;
            overflow: hidden;
            background: url(Images/calendar.png) no-repeat; 
        }
        a.dp-choose-date.dp-disabled {
            background-position: 0 -20px;
            cursor: default;
        }
        input.dp-applied {
            width: 140px;
            float: left;
        }    
    </style>

image1  

Uygulamayı burdan indirip inceleyebilirsiniz. datePicker.zip (38,17 kb)

Daha fazla örnek için datePicker in official sayfasına bakabilirsiniz. http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/index.html

 

Kolay gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery de Öznitelikler (Attributes)

turgay , 5. June 2009, 02:01

Merhaba arkadaşlar,

Bu yazımda Jquery de ki Öznitelikler yani Attributes konusunu işleyeceğim.

Anlatımı 3 başlık altında yapacağım. Bunlar

  • Öznitelikler (Attributes) 
  • Class işlemleri
  • Değer işlemleri (html,val,text)


1 - Öznitelikler (Attributes)

Jquey ile nesnelerin özniteliklerine ekleme,çıkarma veya değiştirme yapmamız mümkün. Mesela bir resim nesnesinin title veya src etiketlerini değiştirmemiz veya kaldırmamız mümkün.

Bu tarz işlemlerin için aşağıda ki fonksiyonları kullanıyoruz.

attr(name) - name isimli verilen özniteliğe erişilmeye yarar. Misal img1 id li resmin title ını div1 id li div e yazdıralım. $("#div1").text($("#img1").attr("title"))

attr(properties) - Bir den fazla özniteliğin key value mantığında değiştirilmesine yarar. Mesela sayfada ki bütün img lerin title ve alt özniteliğini değiştirelim.

    $("img").attr({title="deneme",alt="deneme 2"});

attr(key,value) - Bir özniteliğin key value mantığında değiştirilmesine yarar. Mesela sayfada ki bütün img lerin title ını değiştirelim.

     $("img").attr("title","deneme")

removeAttr(name) - Bir özniteliğin belirtilen objelerden kaldırılmasına yarar. Mesela textbox1 id li disabled olan bir textbox ın disabled özelliğini kaldıralım. $("#textbox1").removeAttr("disabled")

 

2 - Class İşlemleri

addClass(class) - Verilen class ın belirtilen objelere eklenmesine yarar.Sayfamızda ki paragraflardan ilkine selected ekleyelim. $("p:first").addClass("selected")

hasClass(class) - Verilen class ın belirtilen objelerden minimum birinde bulunması durumunda true hiç birinde bulunmaması durumunda false döndürür. Örneğin sayfamızda ki p lerin hiç birinde selected var mı diye öğrenmek için $("p").hasClass("selected")

removeClass(class) - Verilen class ın belirtilen objelerden çıkarılmasına yarar.Sayfamızda ki paragrafların hepsinden selected özelliğini çıkaralım. $("p").removeClass("selected")

toggleClass(class) - Verilen class eğer nesnede varsa remove eder, yoksa ekler. Bir objeyi görünür görünmez yapmak için kullanılabilir. Mesela sayfada ki paragraflara tıklayınca highlight yapıp tekrar tıklayınca highlight özelliğini kaldırmak için 

    $("p").click(function () {
$(this).toggleClass("highlight");
});
3 - Değer İşlemleri (html,text,val)

html() - Belirtilen objenin html içeriğini almaya yarar. Örneğin p1 id li paragrafın html içeriğini almak için $("#p1").html()

html(val) - Belirtilen objenin html içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın html içeriğini p2 id li paragrafa atamak için $("#p2").html($("#p1").html())

text() - Belirtilen objenin text içeriğini almaya yarar. Örneğin p1 id li paragrafın text içeriğini almak için $("#p1").text()

text(val) - Belirtilen objenin text içeriğine val ı set etmeye yarar. Örneğin p1 id li paragrafın text içeriğini p2 id li paragrafa atamak için $("#p2").text($("#p1").text())

val() - Belirtilen objenin input value sunu almaya yarar. Örneğin textbox1 id li textbox ın input value sunu almak için $("#textbox1").val()

val(val) - Belirtilen objenin input value suna set etmeye yarar. Örneğin textbox1 id li textbox ın input value sunu textbox2 id li textbox a atamak için $("#textbox2").val($("#textbox1").val())

 

JQuery de attribute işlemleri bu şekilde.

Daha fazlası için JQuery Attributes sayfasına bakabilirsiniz.

Kolay Gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

YUI Compressor ile JS ve CSS Dosyalarını Küçültme

turgay , 2. June 2009, 05:42

Merhaba arkadaşlar,

Bu yazımda size performans amaçlı olarak js ve css dosyalarını compressor ederek küçültme işleminden bahsedeceğim.

Bunun için yahoo nun BSD lisanslı ürünü YUI Compressor u kullanacağız.

YUI Compressor %40 ila %60 arasında bir sıkıştırma yapmakta.

Gerekli incelemeyi burdan , compressor u indirmeyi de burdan yapabilirsiniz.

Dosyayı indirdikten sonra hdd mize açıyoruz. Build in içinde ki yuicompressor-x.y.z.rar dosyasını alıp kolay bir yere atıyoruz. Mesela c nin altına atalım. (xyz versiyonu ifade etmekte.)

Sıkıştırmak istediğimiz js veya css dosyasınıda c ye atıyoruz.Örneğin dosyamızın adı MyCss.css olsun.

dos prompt u açıp aşağıda ki kodu yazıp enter a basıyoruz.

       java -jar c:\yuicompressor-x.y.z.rar -o c:\deneme.css d:\MyCss.css

İşlem sonunda eğer hata vermezse c nin altında sıkıştırılmış formatta ki deneme.css oluşmuş olacaktır.

Eğer js sıkıştırıyorsanız ve kodun obfuscate edilmesini istemiyorsanız şu şekilde kullanabilirsiniz.

     java -jar c:\yuicompressor-x.y.z.rar --nomunge -o c:\deneme.css d:\MyCss.css

 

Kolay gelsin

Turgay Sahtiyan

Tags: , , , , ,
Kategori: CSS | Development | JQuery | Javascript
E-mail   |     |   Comments (0)   |   Trackback

JQuery de Seçiciler (Selectors)

turgay , 2. June 2009, 03:34

Merhaba arkadaşlar

Bu yazımda JQuery için çok önemli bir yeri olan Seçicileri (Selectors) işleyeceğim. Seçmezsek nasıl işlem yapacağız değil mi? :)

Seçicileri 4 başlık altında toplayıp anlatacağım. Bunlar

  • Temel Seçiciler
  • Temel Filtreler
  • Öznitelik Filtreleri
  • Form Elemanları

 

1 - Temel Seçiciler

Jquery'e başlangıç yazımızda görmüştük. $("#myDiv") diyerek id si mydiv olan eleman a erişebiliyoduk. Bu tarz seçicileri bu kısımda anlatacağım.

#id - Yukarıda da bahsettiğim gibi id si verilen elemanı bulmaya yarar. $("#myDiv") gibi.

element  - Belirtilen tür de ki bütün elemanları getirir. Mesela $("table") size bütün tabloları getirecektir.

.class - Class özelliği belirtilen class olanları bulmaya yarar. $(".deneme") misal bu seçici ile class ı deneme olan elemanlarının tamamına erişebiliriz.

*  - Sayfada ki bütün elemanları seçmenize yarar. Kullanımı $("*")

Seçimleri virgülle ayırıp 1 den fazla yazabiliriz. Mesela sayfada ki bütün table, div ve paragrafların border ını değiştirelim. $("div,table,p").css("border","3px solid red");

ana, çocuk - Güzel bir seçici. Mesela sayfada çok sayıda input var ama biz sadece bir form içinde olanları çekmek istiyoruz. Bu durumda şunu kullanıyoruz $("form input")

Yada belirli bir id li form içinde ki bütün elemanlara erişmek istiyoruz. Bu durumda ise $("#benimForm > *") kullanıyoruz.

önce + sonra - Bu da güzel bir seçici. Mesela sayfamızda ki önünde label olan inputları bulmak istiyoruz. $("label + input")

 

 

2 - Temel Filtreler

:first - İlk elemanı bulmaya yarar. Mesela sayfamızda ki ilk div $("div:first")

:last - Son elemanı bulmaya yarar. Mesela sayfamızda ki son div $("div:last")

:even - Sıra numarası çift olan elemanları seçmeye yarar. 0 çift varsayılır. Misal sıra numarası çift olan tr leri seçmek için $("tr:even")

:odd - Sıra numarası tek olan elemanları seçmeye yarar. Misal sıra numarası tek olan tr leri seçmek için $("tr:odd") 

:eq(index) - Belirtilen sıradaki elemanı seçmeye yarar. index 0 dan başlar. Misal 4.sırada ki tr yi seçmek için $("t4:eq(3)")

:gt(index) - Sıra numarası belirtilen index ten büyük olan elemanları seçmeye yarar. index 0 dan başlar. Misal sıra numarası 4 ten büyük olan tr ler için $("t4:gt(4)")

:lt(index) - Sıra numarası belirtilen index ten küçük olan elemanları seçmeye yarar. index 0 dan başlar. Misal sıra numarası 4 ten küçük olan tr ler için $("t4:lt(4)") 

:header - Sayfada ki bütün header ları seçmeye yarar. Kullanımı $(":header")

:contains(yazi) - Verilen yazıyı içeren elemanları seçmeye yarar. Misal içinde jquery geçen div ler için $("div:contains('jquery')")

:empty - İçi boş olan elemanları bulmaya yarar. Misal içi boş olan td ler için $("td:empty")

:has(selector) - Selector diye verilen elemanlardan en az bir tane içeren elemanları verir. Mesela içinde table geçen div leri bulmak için $("div:has(table)")

:hidden - Hidden olan elemanları bulmaya yarar. Mesela sayfada ki hidden div leri seçmek için $("div:hidden")

:visible - Visible olan elemanları bulmaya yarar. Mesela sayfada ki visible div leri seçmek için $("div:visible")

:enabled - Enabled olan elemanları bulmaya yarar. Mesela sayfada ki enabled olan inputları seçmek için $("input:enabled") 

:disabled - Disabled olan elemanları bulmaya yarar. Mesela sayfada ki disabled olan inputları seçmek için $("input:disabled")  

:checked - Seçili olan elemanları bulmaya yarar. Mesela sayfada ki seçili olan inputları seçmek için $("input:checked")  

 

3 - Öznitelik Filtreleri

[attribute] - Belirtilen özniteliğe sahip olan elemanları seçmeye yarar. Mesela id si olan div leri seçmek için $("div[id]")

[attribute=value] - Belirtilen özniteliğin belirtilen değere eşit olan elemanları seçmeye yarar. Mesela name i deneme olan divleri seçmek için $("div[name='deneme']") 

[attribute!=value] - Belirtilen özniteliğin belirtilen değere eşit olmayan elemanları seçmeye yarar. Mesela name i deneme olmayan divleri seçmek için $("div[name!='deneme']") 

[attribute^=value] - Belirtilen özniteliğin belirtilen değer ile başlayan elemanları seçmeye yarar. Mesela name i deneme ile başlayan divleri seçmek için $("div[name^='deneme']")  

[attribute$=value] - Belirtilen özniteliğin belirtilen değer ile biten elemanları seçmeye yarar. Mesela name i deneme ile biten divleri seçmek için $("div[name$='deneme']")   

[attribute*=value] - Belirtilen özniteliğin belirtilen değeri içeren elemanları seçmeye yarar. Mesela name inin içinde deneme geçen divleri seçmek için $("div[name*='deneme']")    

Bu özellikleri birden fazla kullanmak mümkündür. Mesela deneme ile başlayan turgay ile biten divleri bulmak için $("div[name^='deneme'][name$='turgay']")

 

4 - Form Elemanları

:input - Sayfada ki bütün inputları seçmeye yarar. Kullanımı $(":input")

:text - Sayfada ki tipi text olan inputları seçmeye yarar $(":text") yerine $("input:text") kullanılması performans açısından önerilir.

:password - Sayfada ki tipi password olan inputları seçmeye yarar. Kullanımı $("input:password")

:radio - Sayfada ki tipi radio olan inputları seçmeye yarar. Kullanımı $("input:radio") 

:checkbox - Sayfada ki tipi checkbox olan inputları seçmeye yarar. Kullanımı $("input:checkbox")  

:submit - Sayfada ki tipi submit olan inputları seçmeye yarar. Kullanımı $(":submit")   

:image - Sayfada ki tipi image olan inputları seçmeye yarar. Kullanımı $(":image")    

:reset - Sayfada ki tipi reset olan inputları seçmeye yarar. Kullanımı $(":reset")     

:button - Sayfada ki tipi button olan inputları ve buttonları seçmeye yarar. Kullanımı $(":button")      

:file - Sayfada ki tipi file olan inputları seçmeye yarar. Kullanımı $(":file")             

 

Bu yazımız bu kadar. Bir sonraki JQuery yazımızda buluşmak üzere.

 

Daha fazla bilgiye http://docs.jquery.com/Selectors sayfasından erişebilirsiniz.

 

Kolay Gelsin

Turgay Sahtiyan

Tags: , ,
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback

JQuery e Giriş

turgay , 2. June 2009, 00:13

Merhaba Arkadaşlar,

Bu yazımda ana hatlarıyla JQuery nedir ne işe yarar anlatmaya çalışacağım.

JQuery, John Resig in oluşturduğu bir javascript kütüphanesidir. Ana amacı, içinde bulundurduğu fonksiyonlar ile daha az kod yazarak daha hızlı ve kolay geliştirme yapmaktır.

2006 yılında ortaya çıkan JQuery(JQuery tarihçesine buradan ulaşabilirsiniz. ) çok hızlı bir şekilde gelişmiş, yapısında ki kolaylık ve işlevselliği sayesinde bir çok profesyonel web sayfasında kullanılmaya başlanmıştır.

Google, Dell, Digg, Netflix, Mozilla, Wordpress, JQuery kullanan firmalardan birkaçıdır.Bütün listeye buradan ulaşabilirsiniz.

19 KB lık sıkıştırılmış versiyonu performans  delilerinin yüzünü güldürürken 120 MB lık development sürümü de bulunmaktadır.

Şu an için 1.3.2 realese ortamlarda arzı endam etmektedir. Sürekli geliştirilmeye devam edilmekte, third part plug in leride internette bolca bulunmaktadır.

JQuery Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+ ve Chrome 1+ ile problemsiz çalışmaktadır.

Ayrıca Microsoft, Visual Studio 2008 de SP 1 ile Jquery intellisense getirmiştir ki bu da tadından yenmeyecek bir durumdur :)

 

Şimdi JQuery kolaylıklarından biraz örnek verelim.

Mesela sayfadaki bütün div leri tek bir $("div") koduyla seçmek mümkün.

Bu divlerin borderlarında topluca bir değişiklik yapmak istersek yazmamız gereken sadece 

      $("div").css("border", "1px solid gray");

bu:)

Yada runtime da ismi btnSil ile biten bütün butonların onclick ine bir kontrol koyalım. 

    $(document).ready(function() {
        $("form input:submit[id$=btnSil]").click(function() {
             if (!confirm('Kayıt silinecektir. Devam etmek istiyor musunuz?')) return false;
        });
    });

JQuery  en işlevsel özelliklerinden biride özellikleri ardı ardına sıralayabilmektir.

Mesela sayfada ki bütün divlerin içine deneme yazıp border ını değiştirelim 

$("div").text("deneme").css("color","red");

Şimdi JQuery ana fonksiyonlarına bir göz atalım.

Size() - Bir JQuery component in içindeki eleman sayısını verir. Misal sayfadaki div sayısını şu şekilde alabiliriz. $("div").Size();

Length - Bir JQuery objesinin içindeki eleman sayısını verir.Hemen hemen Size() ile aynı işi yapar. Kullanımı şu şekildedir. $("div").length;

eq(sıra) - BirJQuery dizi formatında istediğimiz elemana erişmek için kullanabiliriz. Elemanlar 0.sıradan başlar. Misal sayfadaki div lerden 4. süne şu şekilde erişebiliriz.  $("div").eq(3)

get() - Sayfada ki bütün elemanlara erişmemizi sağlar. Eğer bu elemanlardan i. sırada ki erişmek istersek get(5) gibi kullanabiliriz.

#id - En basit seçme işlemidir. Mesela $("#myDiv") size id si myDiv olan div elemanını getirmektedir. Firefox,internet  explorer vs için ayrı ayrı kod yazmanıza gerek kalmaz. Bu seçiciler bütün browser larda sorunsuz çalışır.

 

Evet arkadaşlar, JQuery e giriş yazımız bu şekilde. Bir sonra ki yazımda seçicileri (selectors) işlemeye çalışacağım.

Herkese kolay gelsin

Turgay Sahtiyan

Tags:
Kategori: Development | JQuery
E-mail   |     |   Comments (0)   |   Trackback