Tag Archives: Hayattan

Yeni WordPress Tema!m

Posted on by
11

Custom Widgets
Merhaba dostlar. Şu konuda bahsettiğim Themeforest üzerinden satın aldığım Business Success WordPress Temasını Zingocan’da kullanmaya karar verdim.. Bir kaç eksik dışında fazla göze çarpan olumsuz bir yan görmedim ben.. Siz görürseniz söyleyin..

Temanın Özellikleri şöyle;

Anasayfa

İlk önce en sevdiğim özelliği anasayfayı dilediğim gibi kişiselleştirebilmek oldu.. Anasayfa daCU3ER adında bir eklenti mevcut. Bu eklenti bazı temalarda otomatik resim ekleme fonksiyonu yüklü fakat ben XML’den değişmekteyim. Zaten fazla değişmeyi düşünmüyorum. Bu arada o Flash galeride gördüğünüz gibi Zingocan Soru arşivi oluşturuyorum, henüz tamamlamadım ama eksik durmasın diye şimdiden yazmış oldum.. Continue reading →

Sevecen Türkçemiz..

Posted on by
1

Türkçe bu, bir cümleyi istediğin yere çekebilirsin. bu yüzden millet olarak anlaşmakta biraz zorluk çekiyoruz. iletişim eksikliği var. ama bunun nedeni türkçe’de değil. türkçe’yi nasıl kullanması gerektiğini bilmeyen bizlerde. her cümlede ya da kelime de cinsel içerikli ya da argo ifadeler aradığımız için bu tür durumlarda baskı altında kalıyoruz.

Ve türkçe bu.. eşi benzeri olmaz efendim..Nabzı attırır, kalbi durdurur.. Tek bir kelimeyle gay olursun, tek bir sözünle sınıfının en güzel kızını ayağında süründürüsün..

İşte Türçemiz ve Türkçeleştirdiklerimiz…

ahmet bey elimizde büyüdü seninki diyen kadın ;

ahmet bey’in çocuğunu kendisinin büyüttüğünü ifade etmeye çalışan; ancak kurduğu tümceyle tevriye sanatı yapan ve tümceden argo anlamlar çıkarılmasına yol açan kadın.

Ben senin altında kalmam;

birinin yaptığı iyiliğe binaen “ben senin yaptığın iyiliğin altında kalmam” demesi gerekirken yanlışlıkla “ben senin altında kalmam” diyen kadın gibi iyi niyetli hareket edip istemeden, farkında olmadan pot kırandır.

dolmuşa binen genç kız ve annesi;

-anne ben veriyorum sen dur.
-dur kızım benim ki bozuk
-olsun anne benimkide bozulacak nasıl olsa

müdür bey’in işinin bittiğini anlatmaya çalışırken gaf yapan kişi;

müdür bey boşaldı girebilirsiniz..

Otobüstese binerken kartını benim için de okut diyecek olan öğrencinin söylediği lakırdı

Ben arkadan biniyorum sen önden bana biplet..

Fatih Terim (Adanaspor-Galatasaray maçi sonrasindaki toplantida)

Seyretmedim, görmedim ama gördügüm kadariyla söylüyorum gol degildi.

bayan bir tarih hocasi (genelde bayarlar zaten);

cocuklar kapatin su pencereyi bacaklarimin arasinda firtinalar kopuyor.

siniftaki kargasayi bastirmak adina tehditte bulunmaya calisan ogretmen:
- bundan sonra her cuma habersiz quiz yapicam!

Say say say.. En sorumsuzu olumsuz soru cümlesi..

http://zingocan.com/wp-content/uploads/t1urkceninbireksigiyokbyzm2.jpg

Ölmüş sinek ile resim yapabilmek..

Posted on by
Reply

İsveçli fotoğraf sanatçısı Magnus Muhr, tarih boyunca insanların en sevmediği böceklerden biri olan sinekleri sanatında kullanıyor

Ölü sinekten resim yapıyor!Evinde pencerelerin ve lambaların etrafında bulunan ölmüş sinekleri toplayan Muhr, onları bir kağıt üzerine yerleştiriyor ve etraflarına şekiller çizerek komik resimler oluşturduktan sonra onların fotoğrafını çekiyor.Peki neden.. Kendine hiç neden bunu yapıyorum diye sordun mu mahnus.. Aslında kendine sormuş olmanı zaten beklemiyordumda, hani olaki birgün karşılaşırsak ve ben sorarsam, sanat için dersin eminim.. Sanat bu kadar mı ellahgenet mi alet oldu Allah aşkına.. Ölmüş bir canlıyla sanat mı yapılır? Söyle margus, torunların senin çürümüş bedenini topraktan çıkarım bir vazonun içine döşeseler, çokta güzel bir kalıp olsa sen sanat olmak istermiydin.. hayır madem sadece fotoğraf çekiyorsun o halde sineği de çiz dostum ne diye öldürüyorsun sinekcaazı.. Hem bilemiyorum duydun mu ama bak photsohop, paint, ve daha bir sürü resim yapabilmen için program var hem de ölmüş  gergedanları bile resmine aktarabiliosn biliyor musun? sana bunu tavsiye ederim magnus. Aslında isminde bile meymenet yok ben sana ne diim ya defol…

http://zingocan.com/wp-content/uploads/sinek_resim_2_441600287.jpg

Windows Vista Tarih Oluyor..

Posted on by
Reply

Windows Vista ve kardeşlerinin kaderi belli oldu: İşte Microsoft’tun yaptığı resmi açıklama…

Vista´nın kaderi belli oldu!Windows Vista büyük umutlarla çıkan ve pek çok teknolojiyi kullanıcılarla tanıştıran bir işletim sistemiydi.

Ne yazık ki Microsoft Vista asla Microsoft’un beklediği ve arzuladığı popülerliğe ulaşamadı. Windows 7‘nin çıkışıyla birlikte ise Vista’nın hiç şansı kalmadı.

Kullanıcılar Windows XP’yi bırakıp yeni bir işletim sistemine geçerken Windows Vista’yı artık düşünmüyor, Windows 7′ye geçiyor.

Microsoft da Windows Vista’nın teknik desteğini Windows XP SP2′den ve Windows 2000′den birkaç ay sonra kesmeyi planlıyor.

Ne zaman bitecek?

Microsoft tarafından Service Pack’siz Vista’nın desteği 13 Temmuz’da sona erdirilecek

Windows Server 2003 ise uzatılmış desteğe geçiyor; yani şirketler parasıyla teknik destek almayı sürdürecek. Desteğin bittiği işletim sistemlerinde sadece güvenlik güncellemeleri ücretsiz olarak devam edecek.

Microsoft erken duyurunun sebebinin tüketicileri hazırlıksız yakalamamak olduğunu belirtti. Sonuçta Microsoft ufak ufak eski işletim sistemlerini tedavülden kaldırıyor, Windows 7′ye ve sonrasına yolu açıyor.

http://zingocan.com/wp-content/uploads/20090906141045.jpg

WordPress Tema Yapalım – Sıfırdan Tema Anlatımı

Posted on by
8

Merhana arkadaşlar.. Bazen üstün performansta özelliğe sahip sitelerin coderleri /webmaster dahi wordpress bloguna dışarıdan bulduğu ücretli ya da ücretsiz template / temaları kullanmaktadır. İnternetimizin tuvaletimize kadar girdiği bu dönemde; blog, günlük, /hit kazanmak amaçlı site, vb kullanımlarımızda en çok kullanılan CMS sistemlerinden biri WordPress’tir. WordPress, artık hayatımızda okadar yer edinmiştir ki tema denince akla wordpress gelmesi, internet üzerinde en çok satış yapan ve ticareti yapılan temaların wordpress tema olması, wordpress tema değiştirmek, kullanılan siteyi başka bir havaya sokması, tek bir tema ile sitenin amacını değiştirmesi gibi bir çok olanağıyla wordpress temaların önemli / cidden önemli bir yer edindiğini ben şahsımca kavramış durumdayım.. Peki neden çoğu webmaster ya da coder lar kendi temalarını yapmak yerine başka tema kullanırlar diye soracak olursak, bunun birçok yanıtı olabilir ki mükemmel bir tema ortaya koymak için çok çalışmak gerektiğini düşünmekteyim..

Her neyse. Bu konumuzda en baştan alarak wordpress tema nasıl yapılır, nereden başlanır hangi pethodlar kullanılır bundan bahsedeceğim.. Benim anlatacağım tarz ile, wordpress tema yapabilmek için aşırı bir PHP bilgisine sahip olmanız gerekmiyor.. Biraz photoshop ve CSS mantığı ile bu işi çözmeyi amaçlamaktayım.. Hadi kolay gelsin..

Anlatımlarımı Part part yapmaktan yana buldum.. Hem daha anlaşılır hem de güzel bir ders olsun istedim.

1. Blog’a ön bakış

Başlamadan önce WordPress Default temasını incelemenizi öneriyorum. WordPress Default temasına bakın nasıl yapılandırışmış. Akılda kalmasını ve terimlere aşina kalmak istiyorsanız not alabilirsiniz.(eader, post title, search form, navigation, footer, vb..)

http://zingocan.com/wp-content/uploads/1.jpg

Default Frontpage (index.php)

http://zingocan.com/wp-content/uploads/2.jpg

Default Single (single.php)

2.Photoshop Örnekler

Yapacağımız temada, photoshop kullanarak Photoshop tabanlı örnek blog tasarımı oluşturacağız. Default ayarlamalarılyla uğraşmak yerine ben, glossyblue adlı temayı kullanacağım. (temayı indirmek için tıkla). Glossyblue temasını kullanmamın amacı, elimde tema arayüzünün psd dosyası bulunduğundan dolayıdır. Sizde isterseniz demo.zip dosyasını indirerek psd dosyasına ulaşabilirsiniz.Artık psd dosyamıza da ulaştığımıza göre temamızı resim çizer gibi Photoshop programı ile oluşturabiliriz. Tabiki, layer ayarlarını ve çizgisel hizalamayı bozmayarak..

http://zingocan.com/wp-content/uploads/photoshop-mockup.gif

3. HTML + CSS

PSD tasarımını tamamladıktan sonra temanın her sayfası için statik HTML + CSS  oluşturacağız. GlossyBlue Temasın içerisinde az önce verdiğim demo.zip de bulunan HTML sayfalarını kullanabilirsiniz. Zip dosyasından index.html, single.html, ve  page.html dosyalarını çıkarın. Örnek çalışmamda bu HTML sayfalarını kullanarak yeni bir tema oluşturacağım.

default homepage

Neden static HTML + CSS Dosyası oluşturuyoruz?

Çünkü Temamızın geliştirme sürecinde bize oldukça yardımcı olacaktır.Ben her temamda HTML dosyasını kullanırım, çünkü test edebilmek, CSS ve HTML yi tam olarak kullanabilmek ayrıca zaman ve emek kaybını engellemek açısından HTML + CSS dosyası oluşturmayı yararlı bulmaktayım.

4. WordPress Temaları Nasıl Çalışır?

WordPress’in default temasına bakarsanız (wp-content/themes/defeault) birçok php dosyası ve bir tane de style.css dosyası göreceksiniz. Browserınızda WordPress Anasayfanızı götüntülediğiniz zaman kullandığınız tema size aslnda index.php yi gösterirmiş gibi gelsede aslında index.php dosyasının içerdiği kodlara bakılacak olursa header.php, sidebar.php, ve  footer.php dosyalarından oluşan bir kalıp görmekteyiz.

http://zingocan.com/wp-content/uploads/3.gif

Daha fazla kod bilgisi için wordpress’in Site Architecture ve  Template Hierarchy sayfalarını ziyaret ediniz.

5.Tema Dosyamızı Yeniliyoruz

wp-content/themes klasörüne GlossyBlue HTML dosyalarını kopyalayın.Daha sonra, wordpress default temasında bulunan comments.php ve searchform.php dosyalarını glossyblue tema klasörüne atın.

http://zingocan.com/wp-content/uploads/5.gif

6. Style.css

WordPress Default temasındaki style.css dosyasını açınız. Style sayfamızın ilk başındaki kodları ve temanın bize ait olduğunu vurgulamak için bir tanım metni yerleştiriyoruz. Glossyblue temasındaki style.css sayfasını not defteriyle açarsak oradaki bağlantıları kendimize uygun olarak değiştiriyoruz.

http://www.webdesignerwall.com/wp-content/uploads/2008/11/css-commented-code.gif

7. Dosya Bölme

Şimdi, index.php dosyamızı ele alarak , hangi dosyayı nasıl böleceğizi anlayalım.index.php dosyamızı; header.php, sidebar.php ve footer.php olarak 3 ayrı dosyaya böleceğiz.Aşağıdaki resimde glossyblue temasındaki index.php dosyasının bir kütüğünü çizdim

http://zingocan.com/wp-content/uploads/splitting-files.png

8. Header.php

index.html dosyamızı açalım.Sayfanın başından <!–header–> ibaresine kadar keselim. Yeni bir php dosyası oluşturarak kestiğimiz kodu içerisine yapıştırın, adını da header.php olarak kaydedin.

header code

Default temamızın header.php dosyasını açın. PHP kodları gereken yerleri kopyalayın (<title>, <link> stylesheet, <h1>, ve <div>.)

http://zingocan.com/wp-content/uploads/header-zoom.gif

Navigasyon Menü (wp_list_page)

<li> etiketinin yerine <ul id=nav> ve aşağıdaki kodu ekleyin.


&lt;?php wp_list_pages('sort_column=menu_order&amp;depth=1&amp;title_li=');?&gt;

http://zingocan.com/wp-content/uploads/navigation-menu.png

Bilgi:  wp_list_pages.

9. Sidebar.php

index.html dosyamıza dönerek <form id=searchform> den başlayıp <div id=sidebar> etiketine kadar kesiniz. Yeni bir php dosyası oluşturup içine kopyalayın ve adını sidebar.php koyun.

<form id=searchform> yerine

<?php include (TEMPLATEPATH . ‘/searchform.php’); ?>

<li> Katagori etiketinin yerine

<?php wp_list_categories(‘show_count=1&title_li=’); ?>

ve  <li> arşiv etiketinin yerine

<?php wp_get_archives(‘type=monthly’); ?> kodlarını koyarak değiştiriniz.

sidebar

10. Footer.php

index.html dosyamıza tekrar dönerek <div id=footer> dan alıp </html> koduna kadar kesin. Yeni bir php dosyası oluşturup kestiğiniz kodu yapıştırın, dosyanın adını footer.php olarak kaydedin.

footer

Son Yazılar

Bu kısımda son 5 yazıyı gösterebilmek için query_post kodlarını kullanacağız.

recent posts

Son Yorumlar

Son yorumlar bölümü yalnız bir eklenti tarafından oluşturabilir.(tema klasörümüzde mevcut)

recent comments

11. index.php

Artık index.php dosyamızı oluşturabiliriz.index.html dosyamıza baktığımızda elimizde <div id=content> satırından başlayan kod parçacıklarını görmemiz gerekiyor..index.php sayfamıza get_header, get_sidebar, ve get_footer satırlarını sırasını değiştirmeden kopyalıyoruz.

index

12. Döngüleri anlayalım?

Aşağıdaki resimde döngüler (loop) nasıl çalışıyor görebilirsiniz. Loop  blog yayınlarını nasıl görüntülemek isteğimizi gerçekleştirir. Loop olayı, eğer görüntülenen sayfada bir blog varsa bunu görüntülemeye eğer yoksa da NOT FOUND , yada bizim daha önceden atadığımız 404 hata sayfasını getirmeye yarar.

the loop

13. Loop’ u kopyala

Default temamıza giderek index.php dosyamızı açalım. Loop satırını kopyalayalım ve <div id=content>..</div> komutlarının arasına yerleştirelim. Daha sonra static etiketlerin yerine wordpress Tema Etiketlerini kullanalım:post date, title, category, comments, next ve previous link.

http://zingocan.com/wp-content/uploads/loop2.png

14. Tema Önizleme

Tebrikler! Temamızın ön görünümünü yapmayı başardık. Şimdi sitemizin admin paneline girerek Görünüm kısmından temalara giriniz ve grossyblue temasını etkinleştiriniz.

15. Single.php

Şimdi single.php dosyası yapma zamanı geldi.İsterseniz diğer dosyalarımızda yaptığımız gibi default seçeneğindeki single.php dosyasını kullanabiliriz. Fakat;ben default temamızdaki single.php dosyamız ve geride kalan index.php dosyalarımız mıncıklamak istiyorum.Default temadaki single.php dosyamızı açarak şablonumuzu oluşturacağımız etiketleri kopyalıyoruz. comments_template içeriğini ve resimde seçtiğim bölümleri alıyoruz;

single.php

16. page.php

page.php dosyamızı zaten single.php dosyamızla birlikte oluşturduk. post date, comment form, next/previous linklerini silerek page.php dosyamızda hazır hale gelecektir. bu kodları sildikten sonrada page.php dosyamız da hazır..

17. HTML dosyalarını silelim

Ve son örneğimiz.. Son aşamada ise size arşiv sayfamızı nasıl oluşturacağımızı göstereceğim.. Sitemap pluginini kullanmadan da arşiv dosyasıyla Arama motorlarının sitemizin herbir linkine ulaşmasını sağlayacağız.Default temamızdaki archive.php dosyanını kopyalıyoruz. Aşağıda verdiğim, istemediğimiz kodları siliyoruz;

Archives template

Burada query_post u kullanarak  (showposts=-1 bütün sayfaları göstermek) bütün sayfalarımızı gösteren bir sayfa oluşturuyoruz.

Archives query posts

Daha sonra admin panelimize girerek yeni bir sayfa oluşturuyoruz ve adını da ARCHİVES  olarak atıyoruz. Ve Temamızın dropdownunda arşiv sayfamızda hazır oluyor.

Bir daha ki dersimizde aynı temamızı kullanarak temaya eklentiler ekleyecek ve jquery kullanarak güzel görünümlü bir tema yapmayı hedefliyorum.. İlginiz için teşekkürler..

4. Tür film izle Dördüncü Tür Divx Film

Posted on by
2

Yapım:2009 ~ ABD
Tür:Aksiyon, Bilim Kurgu, Gerilim, Gizem, Korku, Macera
Yönetmen:Olatunde Osunsanmi
Senaryo:Olatunde Osunsanmi
Gösterim Tarihi:06 Kasım 2009 (ABD)
Yapımcı:Joe Carnahan, Paul Brooks, Jonathan Shore
oyuncular: Milla Jovovich,Elias Koteas,Corey Johnson,Will Patton,Hakeem Kae-kazim
Film Hakkında:Alaskanın Nome bölgesinde 1960lı yıllardan bu yana insanlar hiç bir iz bırakmadan kaybolmaktadır. Daha önce FBI ajanları bu bölgede araştırma yapmışsa da, insanalrın nasıl kaybolduğu gizemi çözülememiştir.

jQuery Horizontal Accordion Yapımı

Posted on by
7

Sitelerde kimi zaman göz boyamaki, kimi zaman da sitede kullanılan alanı daraltmak adına kullanılan kullanışlı ve güzel görünümlü, başka bir deyişlede bir sayfadaki birden fazla sayfayı gösteren jQuery Accordion asparagasından bahsedeceğim.

http://media.smashingmagazine.com/cdn_noupe/img/j-5.jpg

Scriptin Fonksiyonları

  • Dependency (kolonisiz hal)
  • Plugin opsiyonel olarak kullanılabilir.
  • Bir içerik açıldığında diğeri kapanabilir.
  • Aynı anda açma ve kapama
  • Mouse üzerine gelince açılabilir
  • Dış çağrıları aracılığıyla kolaylıkla kontrol
  • Sayfa yüklenirken kaydedilmiş otomatik içerik
  • URL karma etiketleri aracılığıyla Açık içerik
  • Dokunma ile kontrol (sağ ya da sol)
  • Karışık olarak konumları seçebilme ( birinci pozisyondan dördüncü pozisyona geçebilme)
  • Olaylar animasyon ile başlar ve biter
  • Bütün içeriği gizleme kontrolu

Accordion Menü ( yada content diye adlandırılan içerik) jquery kodlarıyla oynayarak bir kaç farklı sonuç elde edebilme şansımız var.. Ben 4 ayrı stil yaparak aklıma gelen bütün özellikleri bu dört örnekte açıklamaya çalıştım.Sizlerde istediğiniz gibi değiştirip kullanabilirsiniz.Aşağıda birazcık kodlardan bahsedeceğim…

Biçimlendirme Kodumuz:

&lt;ul id=&quot;callMe&quot;&gt;
&lt;li&gt;Content 1&lt;/li&gt;
&lt;li&gt;Content 2&lt;/li&gt;
&lt;li&gt;Content 3&lt;/li&gt;
&lt;/ul&gt;

CSS – Stil Sayfamız

/* conteynırlarımızı gizleyip gösteren eleman */
.test, .test2,.test3,.test4{
 display: none;
}
/*Main Container*/
.container {
 width:100%;
}
.container ul{
 list-style-type: none;
 margin: 0;
 padding:0;
}
.container li{
 display: inline;
 margin: 0px;
 padding:0px;
}
/*Content Container*/
.contentContainer {
 padding-left: 0px;
 float: left;
 width:0px;
 height: 310px;
 overflow:hidden;
}
.contentWrapper{
}
.contentInnerWrapper{
 text-align: justify;
 padding: 10px;
}
/* Handle*/
.handle{
 float: left;
 width: 38px;
 height: 310px;
 margin: 1px;
 margin-right: -10px;
 background:  url(../images/blade.png) no-repeat;
}
.handleOver{
 background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{
 background: url(../images/blade_sel.png) no-repeat;
}

JavaScriptimiz:

$(document).ready(function() {
$(&quot;.test&quot;).hrzAccordion(
{eventTrigger:&quot;mouseover&quot;,
openOnLoad:&quot;&quot;,
cycle: true
});

$(&quot;.test4&quot;).hrzAccordion(
{eventTrigger: &quot;mouseover&quot;,
openOnLoad   : &quot;2&quot;,
handlePositionArray    : &quot;left,left,right,right,right&quot;
});

$(&quot;.test2&quot;).hrzAccordion(
{handlePosition    : &quot;right&quot;,
openOnLoad         : 5,
closeOpenAnimation    : 2
});

$(&quot;.test3&quot;).hrzAccordion(
{containerClass     : &quot;container3&quot;,
listItemClass      : &quot;listItem3&quot;,
contentWrapper     : &quot;contentWrapper3&quot;,
contentInnerWrapper: &quot;contentInnerWrapper3&quot;,
handleClass        : &quot;handle3&quot;,
handleClassOver    : &quot;handleOver3&quot;,
handleClassSelected: &quot;handleSelected3&quot;
});

});

Evet gelelim Dökümanlarımızın ne işlev gördüğüne..

Arkadaşlar, biçimlendirme kodu olarak nitelendirdiğim şey, mevzu bahsi olan accordion contentlerin açılımını sağlayacak, yada bir iç link olabilecek jquery kalıbını ortaya koymaktadır. Eğer scripti indirirseniz içinde görmüş olacağınız lib dosyasındaki javascript dosyalarımızda callME adında bir parametre oluşturduk.Adınada callME beni ara ya da çağır gibisinden bir fonksiyon olarak adlandırdık.. Amacımız her linki istediğimiz zaman önümüze getirebilmektir. Linklerimiz html formatında işimizi görmektedir.. Ama her zaman derim ki , HTML eğer basit se sitemizi güzel yapabilmek için jsp yada stil dosyamız karışık olmalı..

Ben stil bütün yükü stil sayfamıza değilde html de iş görsün diye index.html dosyamızın içerisine bir kaç fonksiyon ekledim.Örnek verecek olursak:


&lt;button  onclick=&quot;$('#test3Handle0').click()&quot;&gt;1.K&amp;#305;sm&amp;#305; aç&lt;/button&gt; | &lt;button   onclick=&quot;$('#test3Handle1').click()&quot;&gt;

4. butonumuzda bulunan onclick olayını hafifçe anlatmak istiyorum.HTML formumuzda bahsetmiş olduğumuz kod, Mouse ile bir kez tıklandığında accordion contentimizi bize göstermesini istemekten başka birşey değildir.Burada HTML nin görevi sadece faremizin tıkladığı anı kontrol edebilmektir.

button onclick ibaresi yerine ondblclick ifadesini kullanırsak  bu defa Mouse ile iki kez tıkladığımızda istediğimiz olayı aynı şekilde gerçekleşme komutunu html ye göndermiş oluruz.

http://zingocan.com/wp-content/uploads/accordion.jpg

Demo

Download

jQuery Slayt Yatay Navigasyon Menü

Posted on by
5


http://zingocan.com/wp-content/uploads/jqry.jpg

Merhaba arkadaşlar.. Bu dersimizde slayt tarzında yatay (horizontal) navigasyon menü yapımını göreceğiz. Navigasyonumuz resimde de gördüğünz gibi bir menünün sağ tarafında listelenmiş menü ve sekmelerinden oluşmaktadır.Sekmelerden birine tıkladığımızda sola doğru slaytlanan menü katmanını ve varsa sekmelerini görmemiz mümkün. Tekrar tıklanması ile de ters işlemi yapar.Ben örnek bir kod ve döküman ortaya koyacağım.. Kendi ihtiyacınıza göre düzenleyip kullanabilirsiniz.

http://zingocan.com/wp-content/uploads/t1abnav.jpg

Style

Ben bir  <div> ile sarılmış basit ve sırasız bir liste kullandım. HTML kodlarım kolay olduğu zaman hep CSS işi zorlaşır.. Bu yüzden detaylı olarak anlatıyorum..


/* nav wrapper */
.tab-nav {
 position: relative;
 width: 610px;
 overflow: hidden;
 background: #ddd url(tab-slide.png) no-repeat 0 0;
}
/* nav */
.tab-nav ul {
 position: relative;
 float: left;
 width: 1600px;
 margin-left: 535px;
 padding-left: 0;
 list-style-type: none;
 background-color: #fff;
}
.tab-nav li {
 float: left;
 clear: left;
}
.tab-nav a {
 display: block;
 width: 74px;
 border-right: 1px solid #ddd;
 height: 25px;
 line-height: 24px;
 float: left;
 text-align: center;
 text-decoration: none;
 color: #000;
 background:  url(tab-slide.png) no-repeat 2px -194px;
}
.tab-nav a.expanded {
 background-position: 2px -244px;
}
/* second-level overrides */
.tab-nav ul ul {
 float: left;
 background-color: #333;
 width: auto;
 margin-left: 0;
}
.tab-nav li li {clear: none;}
.tab-nav li li a { color: #fff; width: 100px; background-image: none;}

Buradaki  CSS  kodlarımız arasında navigasyon ayarları ve konumlandırmalar yer almaktadır. Not defterinde ya da herhangi bir programla ( tercihim Sharepoint tir) açıp kod satırlarını bölmemek ve kodilizmi bozmadan dilediğiniz gibi değiştirebilirsiniz.

Slayt Navigasyon

Ben ilk durumda bahsettiğimiz CSS stilindeki öğeleri şimdi kendi isteğime göre navigasyon haline getireceğim. Basit bir kurulum ile başlıyoruz. “tab” (top-level item) öğesi ile, slayt navigasyonumuzu ilk tıklamada açmaya sonraki tıklamada ise kapatmaya programlayacağız.Bu temel davranışı, üst düzey linkler için click komutu ile sağlayabilirim.

Bu ders için , yaptığım demoda birden çok navigasyon kullandım fakat hepsi için ayrı ayrı CSS oluşturdmadım. Hepsi için aynı CSS sınıflandırmasını kullanmaktayım..Burada ki seçiciler ve adlandırmalar özel değildir. Kendi eleman kodlarını kullanabilirsiniz fakat istediğinizi seçip kullanabilirsiniz de.

[ad]

Yapıcağımız ilk iş bir kaç değişkeni ayarlamak olacaktır. $parentItem değişkeni <li> katmanlı linke tıklandığında geçerli olacaktır.slideAmt iç içe genişliği <ul> sonraki kardeş linkidir. ve direction menümüzün sola yada sağa kaymasını belirleyen değişkendir.

var $topLinks1 = $('#tab-nav-1 &gt; ul &gt; li &gt; a');
$topLinks1.click(function() {
 var $parentItem = $(this).parent(),
 slideAmt = $(this).next().width(),
 direction;
 // code continues
});

Aşağıdaki kodda ise; click işlemi başladığı anda , this öğesinin çalışmasını sağlattım. $() deki this kalıbında jQuery yöntemlerini aradım.

var $topLinks1 = $('#tab-nav-1 &gt; ul &gt; li &gt; a');
$topLinks1.click(function() {
 var $parentItem = $(this).parent(),
 slideAmt = $(this).next().width(),
 direction;
 if (parseInt($parentItem.css('marginLeft'), 10) &lt;0) {
 direction = '+=';
 $(this).removeClass('expanded');
 } else {
 $(this).addClass('expanded');
 direction = '-=';
 }
 // code continues
});

Son olarak direction ve slideAmt parçaları animasyonumuzu oluşturan ana öğeler oldu.return farlse; satırı animasyon default ayarlarını oluşturmamı sağladı.İşte kodumuzun bitmiş hali;

var $topLinks1 = $('#tab-nav-1 &gt; ul &gt; li &gt; a');
 $topLinks1.click(function() {
 var $parentItem = $(this).parent(),
 slideAmt = $(this).next().width(),
 direction;
 if (parseInt($parentItem.css('marginLeft'), 10) &lt;0) {
 direction = '+=';
 $(this).removeClass('expanded');
 } else {
 $(this).addClass('expanded');
 direction = '-=';
 }
 $parentItem
 .animate({marginLeft: direction + slideAmt}, 400);
 return false;
 });

Eğer Menumüzde her satır ayrı ayrı açılsın istiyorsak;
marginLeft komutu ile; örneğin birinci menüyü açıyorsak ikincinin <li> satırını geçersiz kılıyor ve kapanmasını sağlıyoruz.

$(document).ready(function() {
 var $topLinks2 = $('#tab-nav-2 &gt; ul &gt; li &gt; a');
 $topLinks2.click(function() {
 var $parentItem = $(this).parent(),
 slideAmt = $(this).next().width(),
 direction;
 $topLinks2.removeClass('expanded');
 if (parseInt($parentItem.css('marginLeft'), 10) &lt;0) {
 direction = '+=';
 } else {
 $(this).addClass('expanded');
 direction = '-=';
 }
 $parentItem
 .animate({marginLeft: direction + slideAmt}, 400)
 .siblings()
 .animate({marginLeft: '0'}, 150);
 return false;
 });
});

Son tarzımızda ise transparan bir görünümle diğer bir satıra tıklandığında menünün otomatik kapanmasını sağlıyoruz.Benim en çok beğendiğim bu tarz oldu. Bunun içinde;


$(document).ready(function() {
 var closeAll,
 $topLinks3 = $('#tab-nav-3 &gt; ul &gt; li &gt; a');
 $('#tab-nav-3 ul ul').css('opacity', '0.5');
 $topLinks3.click(function() {
 var $parentItem = $(this).parent(),
 slideAmt = $(this).next().width(),
 direction;
 $topLinks3.removeClass('expanded');
 if (parseInt($parentItem.css('marginLeft'), 10) &lt;0) {
 direction = '+=';
 } else {
 $(this).addClass('expanded');
 direction = '-=';
 }
 $parentItem
 .animate({marginLeft: direction + slideAmt}, 400)
 .siblings()
 .animate({marginLeft: '0'}, 150);
 return false;
 });
 $('#tab-nav-3')
 .mouseleave(function() {
 closeAll = setTimeout(function() {
 $topLinks3.removeClass('expanded')
 .parent().animate({marginLeft: '0'}, 150);
 }, 1000);
 })
 .mouseenter(function() {
 clearTimeout(closeAll);
 })
});

kodlarını kullanıyoruz.Bu işlemi yapabilmek için jQuery de birçok yol mevcuttur. Eğer başka bir tarz biliyorsanız onu da kullanabilirsiniz. Tamamen farklı bir kalıp oluşturabilmek için CSS dosyanızı çimdikleyebilirsiniz.Bir dahaki dersimizde görüşmek üzere..

Demo

İndir

Jquery Sayfaya Yeni elementler eklemek – Başa Dön ibaresi

Posted on by
Reply

jQuery de sayfamıza diğer unsurları ekleyebilmek için iki yol vardır. .insertBefore() ve .before() …

İkiside aynı görevi üstlenmekte, aralarındaki fark ise diğer metodlarla aralarında olan bağlılıktır..(Lütfen terimlerde kasılıp kalmak yerine konuyu okumaya devam ediniz..)

Bir diğer metod çiftimiz ise .insertAfter() ve .after(), bu metodlar da sayfaya içerik eklememizi, sayfada kullanıcıya hitap etmemizi, kullanıcının hareketi ile sayfada ki jquery’nin hayata geçmesini sağlar.. Fakat bu metodların en önemli özelliği diğer tüm elementleri atlayıp kendini gösterebilmesidir.Yani sitede başka bir metod daha kullanılıyorsa insertafter ve after seçenekleri ile biz o metodları hiç görmeden bu iki metodu harekete geçirebiliriz. Örneğin bizim sayfamızda da görüdüğünüz gibi; back to top, yada başa dön olarak adlandırdığımız jquery kalıbını ele alalım.. Back to top elemanını kullanabilmemiz için .insertAfter() seçeneğini kullanmamız gerekiyor. Hemen örneklendirelim;


$(document).ready(function() {
$('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;').insertAfter('div.chapter p');
$('&lt;a id=&quot;top&quot;&gt;&lt;/a&gt;');
});

[ad]

Neden .After() metodunu kullanmadık diye içinizden bir uyartı kopuverirse şöyle söyleyeyim .After() metodu kapsar .insertAfter() metodu.. yani after metodunu kullanabilmemiz için javascript kodlarımızda şöyle bir değişikliğe uğramamız gerekiyor;


$('div.chapter p').after('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;');

Birşeye dikkatinizi çekmek isterim;

.insertAfter metodu ile oluşturduğumuz kodda <a> tarafından korunan link zincirine devam edilebilir. .After() yöntemi ile diğer ek metodlardan öne geçebilmrk için  $(‘div.chapter p’) seçicisini kullanmak durumunda kaldk. jQuery mantığıyla düşünürsek aslında paragrafın, sayfanın, bölümün yada biz neyi gösterdiysek onun başına geçebilmesi için sitenin o bölgesine link vermiş oluyoruz.. Link denince sayfa yenilenmesi akla gelebilir fakat jQuery mantığı sayfa yenilemeyi kabul etmediği için bize böyle bir kolaylık tanımıştır.

Evet kodumuzu yazdık fakat bu kodlarla istediğimiz elde edemeyiz.. Çalışmamıza hala id=”top” parametresini kodumuza eklememiz gerekmektedir.


$(document).ready(function() {
$('&lt;a href=&quot;#top&quot;&gt;başa dön&lt;/a&gt;').insertAfter('div.chapter p');
$('&lt;a id=&quot;top&quot; name=&quot;top&quot;&gt;&lt;/a&gt;').prependTo('body');
});

Bu ek kodu sayfamızın <body> kısmının sağına (sonrasına) diğer bir deyişlede sayfamızın başına eklememiz gerekiyor. Linkler için .insterAfter, zincir için ise .prependTo() metodları sayesinde artık hemen hemen her sitede gördüğümüz başa dön ibaresini kendi sitemizde dilediğimizce yayınlayabiliriz.

Başa dön bağlantılarını kullandıktan sonra Başa dön ibarelerinin kullanıcıya görünmez olması mantıklı değildir. Back to top (başa dön) kalıbı kullanıcının sürekli kullanabileceği bir kalıp olması dolayısıyla bu konuda buna yer vermeyi düşünmüyorum.. Derslerimiz şimdilik yalnız jquery kodlarımızla geçmektedir farkındayız.. Yakında örnekli sitemizle daha kaliteli dersleri hedefliyorum.. Anlamadığınız yeri sorabilirsiniz.. İlginiz için teşekkürler.