jQuery popup eklentisi v2

jQuery popup eklentisi v2’de güncelleme yapılmıştır Son güncelleme tarihi : 13.05.2011

Cookie’li popup uygulaması için buraya tıklayınız.

Merhaba arkadaşlar uzun bir süredir düzgün bir paylaşım yapamıyordum, tembelliği üstümden attım ve yoğun istek üzerine ilk yazdığım jquery popup uygulamasını yeniden yazdım ve eklenti haline getirdim.

Yenilikler neler ?

1 – Açılış

İstenilen butona tıklayınca açılma veya otomatik açılma.

Popup’un pozisyonunu belirleme, bu kısımda iki seçenek var 1 ortala, orta 2 ortala,top,100px

Arka planda renk ve opacity ayarlama

2 – Kapanış

İstnilen butona tıklayınca kapanma

Esc ye basında kapanma

Arka plana tıklayınca kapanma.

Kullanım kolay mı ?

Evet kullanımı çok kolay.

Yapmanız gerekenler ;

1- İndirdiğiniz dosyayı ftp’nize atmak,
2- Css/js dosyalarını sayfanıza ekmek,
3- Popup’u koyacağınız sayfaya 2 ufak ekleme yapmak.

3.a Html taglarını kendinize göre düzenleyip sayfanıza yerleştirmek

<!-- ================================================ -->
<!-- ! abPopup baslangic -->
<!-- ================================================ -->
< div id = "popup1" >
    < div id = "abPopup" >
    < div id = "ab-ust" >
    < a class = "ab-kapat"
href = "#" > Kapat < /a>
<h2 id="ab-baslik">abPopup uygulaması 2. versiyon ~ aycan.net</h2 >
    < /div>
<!-- ab-ust DIV kapanis -->
<div id="ab-orta">
<img src="kutuphane/resim / aycan.jpg " alt="
aycan bülbül " />
Lorem Ipsum is simply dummy text of the printing and typesetting industry <a title="
aycan " href="
http: //www.aycan.net/">aycan.net</a> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<!-- ab-orta DIV kapanis -->
< div id = "ab-alt" >
    Üretken site: < a title = "aycan.net"
href = "http://www.aycan.net/" > aycan.net < /a></div >
<!-- ab-alt DIV kapanis --></div>
<!-- abPopup DIV kapanis --></div>
<!-- ================================================ -->
<!-- ! abPopup bitis -->
<!-- ================================================ -->

< div id = "popup1" >

< div id = "abPopup" >

< div id = "ab-ust" >

< a class = "ab-kapat"

href = "#" > Kapat < /a>

<h2 id="ab-baslik">abPopup uygulaması 2. versiyon ~ aycan.net</h2 >

< /div>

<img src="kutuphane/resim / aycan.jpg " alt="

aycan bülbül " />

Lorem Ipsum is simply dummy text of the printing and typesetting industry <a title="

aycan " href="

http: //www.aycan.net/">aycan.net</a> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

< div id = "ab-alt" >

Üretken site: < a title = "aycan.net"

href = "http://www.aycan.net/" > aycan.net < /a></div >

</div>

</div>

3.b script tagları arasında eklentimizi çağırmak

 $('#popup1').abPopup();

1	$('#popup1').abPopup();

Tüm işlemler bu kadar.

Eğer profesyonel bir kullanım istiyorsanız eklentimizi çağırırken kendi özelliklerinize göre eklentiyi çağırabilirsiniz.

 $('#popup1').abPopup({
     'acilis': 'tiklama,buton1',
     'pozisyon': 'ortala,ortala',
     'arkaplan': '#333',
     'arkaplanSaydam': '0.6',
     'htmlTag': '.ab-kapat',
     'siyahCerceve': true,
     'esc': true
 });

$('#popup1').abPopup({

'acilis': 'tiklama,buton1',

'pozisyon': 'ortala,ortala',

'arkaplan': '#333',

'arkaplanSaydam': '0.6',

'htmlTag': '.ab-kapat',

'siyahCerceve': true,

'esc': true

});

Detaylı Kullanım

jQuery('#popup1').abPopup({###
        Acilis### 'acilis': otomatik veya tiklama.Eger tıklama ise hangi butona tıklayınca açılacağını belirtme yani(tiklama, buton1) Buton1 id 'li html tagına tıklanınca.
'
        pozisyon ' : ortala,ortala veya ortal,top,50px
'
        arkaplan ' : opsiyonel
'
        arkaplanSaydam ' : opsiyonel (arkaplanin saydamlik derecesi)
### Kapanis ###
'
        htmlTag ' : opsiyonel (#buton, .buton vs.)
'
        siyahCerceve ' : true veya false (Arka plana tiklayinca kapanma)
'
        esc ' : true veya false (Esc tusuna basinca kapatma)
});

jQuery('#popup1').abPopup({###

Acilis### 'acilis': otomatik veya tiklama.Eger tıklama ise hangi butona tıklayınca açılacağını belirtme yani(tiklama, buton1) Buton1 id 'li html tagına tıklanınca.

pozisyon ' : ortala,ortala veya ortal,top,50px

arkaplan ' : opsiyonel

arkaplanSaydam ' : opsiyonel (arkaplanin saydamlik derecesi)

### Kapanis ###

htmlTag ' : opsiyonel (#buton, .buton vs.)

siyahCerceve ' : true veya false (Arka plana tiklayinca kapanma)

esc ' : true veya false (Esc tusuna basinca kapatma)

});

Demo 1 = Tıklama ile ortalanmış bir şekilde açılma,

Demo 2 = Otamatik açılış ve arka plan değiştirme,

Demo 3 = Tıklama ile açılış, arka plan değiştirme, top değerini belirtme.

Uygulamayı indir. Ön İzleme Ön İzleme Ön İzleme

Post Views: 25.603