İlgiselcom » javascript http://ilgisel.com/blog İlgi alanlarına dair konular Fri, 11 May 2012 19:59:24 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Thickbox Nedir? Nasıl Kullanılır? http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/ http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/#comments Tue, 20 Oct 2009 19:02:39 +0000 Degre http://ilgisel.com/blog/?p=1954 Thickbox, Lightbox akımıyla birlikte çıkan Lightbox türevlerinden Javascript-Ajax nimetlerinden biridir. Tabiki farkları olduğu için Lightbox kullanmak istemeyenler için bir seçenek olarak görebiliriz. Bu script’i kullanarak Resimlerinizi veya içeriklerinizi Klasik Pop-up pencere içinde açmak yerine varsayılan sayfa içinde açıp kullanabilirsiniz. Tek Resim veya Resim Galerinizi göstermek bulunduğunuz sayfanın herhangi bir yerinde yazdığınız yazıyı yazının bulunduğu ‘id‘ i kullanarak açtırabilir, iframe veya Ajax türünde içeriği, bu script sayesinde açabilirsiniz.

Bu bizim Resim dışında ne işimize yarayacak diyenler için şöyle bir örnek verebilirim. Üyelik sistemi için Üye Ol yada Giriş Yap gibi bir link ekleyip linke tıklandığında Thickbox’la Üyelik Formu veya Kullanıcı Girişi ekranına giden bir tasarım yapabilirsiniz. Neye benzediğini görmek için konunun en altındaki Resimlere bakabilirsiniz.
Bunu herhangi bir siteye nasıl kuracağımızı öğrenmek için aşağıdaki Kurulum’u okuyunuz.

Kurulum

Kuruluma geçmeden önce aşağıdaki dosyaları ThickBox sitesinden yada aşağıdaki linklere basarak indirin.
Kurulum için gereken dosyalar;

Yukarıdaki dosyalardan Jquery kütüphanesinden herhangi birini indirdiğimizde ismini jquery.js olarak ayarlamayı unutmayın. Şimdi sırasıyla bunları sitenize eklemeniz gerekiyor. Eğer bu script’i bir WordPress Teması içinde kullanacaksanız aşağıda yazan dosyalarinbulunacagiklasor yerine <?php bloginfo(‘template_directory’); ?> yazın

(Bu kodla sitenizinadı.com/wp-content/themes/kullandığınıztema içine girmenizi sağlayacaktır.) ve yukarıdaki dosyaları doğrudan temanızın içine yerleştirin.
Aşağıda gördüğünüz kodlarıysa sitenizde yada temanızda bulunan <head> </head> kısmının arasında bir yere gerekli değişiklikleri yaparak kopyalayın. WordPress’te temadaki Header.php içinde ilgili yere kopyalayın.


<script type="text/javascript" src="dosyalarinbulunacagiklasor/jquery.js"></script><script type="text/javascript" src="dosyalarinbulunacagiklasor/thickbox.js"></script>

Burada unutmamanız gereken en önemli olay macFFgHack.png dosyasını css dosyasının bulunduğu yere kopyalarken LoadingAnimation.gif denilen dosyayıysa diğer dosyaları attığınız yere bir images klasörü oluşturarak dosyayı içine atın.

Nasıl kullanılır?

En basit halde linklerinizin içine class=“thickbox” ekleyerek bu script’i kullanabilirsiniz. Aşağıda benzer bir kullanımını örnek olmak açısından verdim. Daha fazla bilgi için Thickbox’ın sitesinde bulunan Examples bölümüne gözatmanızı tavsiye ederim. (İçerik Ingilizcedir)

Tekli Resim için


<a class="thickbox" title="baslik" href="images/single.jpg"><img src="images/single_t.jpg" alt="Tekli Resim" /></a>

Gördüğünüz gibi Thickbox’ın benzer kullanımları da bu şekilde yapılmakta. Bu script’le ilgili daha fazla bilgiyi aşağıdaki linkten alabilirsiniz. Şimdilik hoşçakalın.

http://jquery.com/demo/thickbox/

]]> http://ilgisel.com/blog/yazi/thickbox-nedir-nasil-kullanilir/feed/ 0 Web Sayfanızda İstediğiniz yazı fontunu kullanın! http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/ http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/#comments Tue, 20 Oct 2009 17:47:20 +0000 Metin http://ilgisel.com/blog/?p=1953

Çoğu webmaster’ın derdidir font sorunları. Kimi zaman başlıklarda kimi zaman ise güzel bi reklam yazısı yapmaya çalışırız. Bu script kesinlikle yazı şeklinde reklamlarda kullanılacak bi script. Flir sitesi işte bu derdimize çare oluyor. Hemen sevinmeyin seçilebilir yazı değil :) Resim olarak gösteriyor yazıyı. Ama yine bence muhteşem bi script.

Gereksinimler: GD Library; PHP 4 ve üzeri
Download: http://facelift.mawhorter.net/download/

Demosunu http://facelift.mawhorter.net/examples/ adresindeki sağda bulunan Update It butonuna basarak görebilirsiniz.

]]> http://ilgisel.com/blog/yazi/web-sayfanizda-istediginiz-yazi-fontunu-kullanin/feed/ 0 Jquery Foto Slideshow / Galeri Pluginleri (eklentileri) http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/ http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/#comments Fri, 09 Oct 2009 12:40:30 +0000 Degre http://ilgisel.com/blog/?p=1904 Gün ve gün Jquery Web 2.0 sitelerin vazgeçilmez elemanı olmaya adım adım ilerliyor. Jquery ile yapılmış Slideshow ve galeri eklentileri de bu aracın bir kısmı.

Jquery sayesinde oluşturulmuş eklentiler sayesinde, flash dışında efektler yaratabilen ve dinamik olarak çalışabilen sayfalar tasarlamak çok kolaylaşıyor. Fazla söze gerek yok aşağıdaki eklentileri tek tek görelim.

jQuery Multimedia Portfolio

jquery01

Space Gallery

jquery0w

Jquery Slider Gallery

jquery03

EOGallery

jquery05

Jquery SlideViewer

jquery06

Jquery Lightbox Plugin

jquery07

Galleriffic

jquery08

PiroBox

jquery09

Zoomimage

jquery10

]]> http://ilgisel.com/blog/yazi/jquery-foto-slideshow-galeri-pluginleri-eklentileri/feed/ 0 Javascript WYSIWYG Zengin Metin Editörleri http://ilgisel.com/blog/yazi/javascript-wysiwyg-zengin-metin-editorleri/ http://ilgisel.com/blog/yazi/javascript-wysiwyg-zengin-metin-editorleri/#comments Mon, 05 Oct 2009 09:02:56 +0000 Degre http://ilgisel.com/blog/?p=1845 Eğer içerik sağlanacak ve makale yazılacak bir sistem tasarlıyorsanız, Zengin metin editörü kullanmak tam size göre bir seçenek olacaktır.

WYSIWYG, What You See Is What You Get’in kısaltılmışıdır. Bu da Ne görürsen onu alırsın anlamına gelmektedir. Yani bu editörler yardımıyla nasıl yazıp, biçimlendiriyorsak, içerik yayınlandığında da içeriği aynı biçim şeklinde görürüz. (Sanki ofis programında yazar gibi kolay bir kullanımı vardır) Şimdi bu editörleri tek tek tanıyalım;

TinyMCE

tinymceeditor

Editörler içinde en bilinenlerden biridir. Çoğu sistem bu editörü kullanır. Tarayıcı uyumu: Mozilla (PC, Mac ve Linux), MSIE (PC) ve FireFox (PC, Mac ve Linux)

Link: http://tinymce.moxiecode.com/

WMD-Editor

wmdeditor

Tarayıcı Uyumu: Internet Explorer 6 & 7, Firefox 1.5+, Safari 2+, Opera 8.5+, Konqueror 3.5+, Netscape 8+

Link: http://wmd-editor.com/

FreeRichTextEditor

freeonlinejava

Tarayıcı Uyumu: Internet Explorer 6 & 7, Mozilla Firefox 1.5+, Opera 9, Safari 1.3+

Link: http://www.freerichtexteditor.com/index.php?inc=demo/index

F-CKEditor

ckeditor

Tarayıcı uyumu: Internet Explorer 5.5+, Firefox 1.0+, Mozilla 1.3+, Safari ve Netscape 7+

Link: http://ckeditor.com/

OpenWYSIWYG

openeditor

Tarayıcı uyumu: Internet Explorer 5.5+, Firefox 1.0+, Mozilla 1.3+ ve Netscape 7+

Link: http://www.openwebware.com/

]]> http://ilgisel.com/blog/yazi/javascript-wysiwyg-zengin-metin-editorleri/feed/ 0 WordPress’te Video yayınlamak isteyenler için Video Player http://ilgisel.com/blog/yazi/wordpresste-video-yayinlamak-isteyenler-icin-video-player/ http://ilgisel.com/blog/yazi/wordpresste-video-yayinlamak-isteyenler-icin-video-player/#comments Wed, 30 Sep 2009 10:54:20 +0000 Degre http://ilgisel.com/blog/?p=1821 wpicinflvvideoplayer

Youtube ve ona benzer servis veren web firmalarının Türkiye’de yasaklanması Içeriğinde buna benzer şeyler kullananların yeni çözüm yolları aramasına neden oldu. Bu gibi yasaklar yüzünden içeriğimizde kullandığımız videoları kendi server’ımızda tutma gereği duymaya başladık. Bunu yaparkende bu videoları NET üzerinde oynatacak Media Player’lar aramaya başladık. Nette yaptığım araştırmaların sonucunda JW FLV Media Player bu soruna bir çözüm getirmek isteyenler için kullanabilecekleri bir araç olarak gözüme çarptı.

Tabi benim gibi WordPress kullanan arkadaşlar içinde Flash Video Player adı verilen bir eklenti bulunmakta. Bu iki Player birbirine çok benziyor. Tam olarak aynı mı yoksa farklı mı oldukları hakkında bir görüşüm yok. Zaten bizi burası değil nasıl kurulacağı ve kullanılacağı ilgilendiriyor.

JW FLV Media Player’a da gözatın

JW FLV Media Player benim için fazla kullanışlı olmadığı için bir link ve WordPress dışında sisteminde bu tip bir aracı kullanmak isteyenler için buraya ekledim. Asıl konum Flash Video Player Eklentisini incelemek ve nasıl kurulduğunu ve çalıştığını size anlatmaktır fakat JW FLV Media Player (bundan sonra JW olarak kısaltıcam) hakkında biraz konuşmakta da fayda var.

JW player her türlü kodlamaya eklenecek bir script yapısına sahip. Sonuçta JW bir Eklenti değil. Bu yüzden bizi kısıtlamıyor. Sitesinde bulunan Installation (Kurulum) da da gördüğünüz gibi zipteki dosyaları sitenizin anadizinine (yada istediğiniz bir alt dizine) atıp eklenecek kod üzerinde ilgili değişikleri yaparak Video oynatıcıyı sitemiz içinde işler hale getirebiliyoruz. Bence JW’yi daha fazla anlatmaya gerek yok. Bunu kendi sistemine entegre edecek arkadaşlar zaten sitesinden de işi kavrayıp istedikleri sonuca ulaşacaklardır. JW FLV Media Player‘a ulaşmak için; http://www.jeroenwijering.com/?item=JW_FLV_Media_Player

Flash Video Player Nedir? Nasıl Kurulur?

Şimdi asıl konumuz olan Flash Video Player eklentisini inceleyelim. Bu eklenti sadece bir Flv Video oynatıcı. Yani dosyayı convert edemez. Dosyanızı flv yapmak için Total Video Converter programını kullanabilirsiniz. Her WP eklentisinde yaptığımız gibi zipli dosyayı Buraya tıklayarak ilgili siteden indiriyoruz. Zipli dosyayı açıp içinden çıkan klasörü FTP yardımıyla wp-contents/plugins dizini içine atıyoruz.

Daha sonra Wp-admin’e giriş yapıp Eklentiler‘e giriyoruz. Buradan Flash Video Player’a gelip Etkinleştir‘e tıklıyoruz. Eğer herşeyi doğru yapmışsak kurulum aşamasını geçtik demektir. Eğer buraya kadar herşey yolundaysa Eklentiler‘e ve oradan Flash Video‘ya gidin. Burada her birini ayrı ayrı saymama gerek yok sanıyorum. Flash Player’ın görüntü büyüklüğünden tutunda Player’ın renklerine kadar ayar seçeneği bize tanınmış. Ingilizceniz hiç olmasa bile bir Ingilizce sözlüğü elinize aldığınızda bu ayarlar menüsüyle ilgili bütün herşeyi anlayabilirsiniz. Şimdi gelelim Videomuzu nasıl yazımıza ekleyeceğiz. WordPress’te yazılarımızı yazdığımız alana aşağıdaki gibi kodu sizin flv dosyanıza göre ayarlayıp yapıştırın.


[flashvideo filename=videonunoldugudizin/video.flv /]

Tam yerini yazmışsanız, Kodu eklediğiniz yerde video gözükecek. Yukarıdaki kodda varolan videonunoldugudizin WordPress’i kurduğunuz root’un içinde olmalı. Peki Videoyu nasıl atacağız diyenlerinizi duyar gibiyim. Video Ekle tuşunu kullanarak videoyu server’a atabilir ve aşağıdaki yere linki yapıştırabiliriz. Onun dışında FTP yardımıyla flv dosyasını istediğimiz yere atabiliriz. Şimdilik açıklamalarım bu kadar takıldığınız yerde bana soru sorabilirsiniz. Elimden geldiğince yardım etmeye çalışırım.

]]> http://ilgisel.com/blog/yazi/wordpresste-video-yayinlamak-isteyenler-icin-video-player/feed/ 12 Facebox Nedir? Nasıl Kurulur ve Kullanılır? http://ilgisel.com/blog/yazi/facebox-nedir-nasil-kurulur-ve-kullanilir/ http://ilgisel.com/blog/yazi/facebox-nedir-nasil-kurulur-ve-kullanilir/#comments Wed, 23 Sep 2009 12:35:48 +0000 Degre http://ilgisel.com/blog/?p=1806 Facebook‘taki gibi pencereler açtırmayı istiyorsanız, bu yazı tam size göre demektir. Bu yazımda Facebox‘ın ne işe yaradığından ve nereden bulabileceğinizden bahsedeceğiz. Bu script’i kullanarak Resimlerinizi veya içeriklerinizi Klasik Pop-up pencere içinde açmak yerine varsayılan sayfa içinde açıp kullanabilirsiniz. Javascript-Ajax nimetlerinden biri olan bu script’in nasıl kurulacağını anlatarak konumuza giriş yapalım.

Facebox Kurulum

Kuruluma geçmeden önce aşağıdaki dosyaları Facebox‘un sitesinden veya aşağıdan indirin. Facebox sitesinde Tar dosyası olarak sunulduğu için Dynamic Drive‘daki dosyaları kullanmak daha uygun olur diye düşündüm. Aşağıdaki dosyaları oradan verdim. Kurulum için gerekli dosyalar; Facebox1.1.zip

Zip dosyasının içinden facebox.js, facebox.css, jquery-1.2.2.pack ve facebox içinde kullanılacak resim dosyaları çıkmış olmalı. facefiles klasörü içinde bulunan dosyaları sitenizde kullanmak istediğiniz yere koyun. Eğer bu script’i bir WordPress Teması içinde kullanacaksanız aşağıda yazan dosyalarinbulunacagiklasor yerine <?php bloginfo(’template_directory’); ?> yazın (Bu kodla sitenizinadı.com/wp-content/themes/kullandığınıztema içine girmenizi sağlayacaktır.) ve facefiles klasörünü doğrudan temanızın içine yerleştirin. Aşağıda gördüğünüz kodlarıysa sitenizde yada temanızda bulunan <head> </head> kısmının arasında bir yere gerekli değişiklikleri yaparak kopyalayın. WordPress’te temadaki Header.php içinde ilgili yere kopyalayın.


<script src="dosyalarinbulunacagiklasor/facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>

<link href="dosyalarinbulunacagiklasor/facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />

<script src="dosyalarinbulunacagiklasor/facefiles/facebox.js" type="text/javascript"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox()

})

</script>

Yukarıda yazılanları yapıp dosyaları ilgili yere atmışsanız. Kurulum işleri tamamlanmış demektir. Şimdi gelelim nasıl kullanacağımıza.

Nasıl kullanılır?

En basit halde linklerinizin içine rel=”facebox” ekleyerek kullanabilirsiniz. Aşağıda benzer bir kullanımını örnek olmak açısından verdim. Daha fazla bilgi için Dynamic Drive‘daki ilgili yeri veya Facebox sitesini gözatmanızı tavsiye ederim.


<p><a href="resim.jpg" rel="facebox">Resim</a></p>

Gördüğünüz gibi Facebox’ın benzer kullanımları da bu şekilde yapılmakta. Bu script’le ilgili daha fazla bilgiyi aşağıdaki linklerden alabilirsiniz. Şimdilik hoşçakalın.

http://www.dynamicdrive.com/dynamicindex4/facebox/index.htm

http://famspam.com/facebox

]]> http://ilgisel.com/blog/yazi/facebox-nedir-nasil-kurulur-ve-kullanilir/feed/ 2 Galleria – JQuery Resim Galerisi http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/ http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/#comments Sun, 19 Jul 2009 23:25:16 +0000 Degre http://www.dincerdegre.com/weblog/?p=152 Diğer seçenek ise AJAX yardımıyla bir Resim Galerisi Script’i bulmak. Bu devrede karşımıza JQuery ile oluşturulmuş Galleria resim galerisi Plugin’i çıkıyor.

JQuery, AJAX diye bilinen Javascript Framework’leri içinde adını duyurmuş iyi bir Framework, Galleria’da bu Framework ile yazılmış iyi ve sade bir eklenti. Galleria’yı kullanarak oldukça esnek ve istediğimiz şekilde bir resim galerisine sahip olabiliriz. Gerekli ayarları yaptığımızda ve eklentiyi tanıdıkça nasıl çalıştığını da daha iyi anlayacağız.

jquery-gallery

Eklenti, Büyük resim yüklendiğinde küçük halini bize gösteriyor. Preload yapısı ile oldukça hızlı yükleniyor. Galleria’da her küçük resme tıkladığımızda ilgili fotoğrafın büyük halini görüyoruz. Galleria eklentisini daha iyi anlamak için ilk önce özelliklerine bir gözatmakta fayda var.

Galleria’nın Özellikleri

  • Sade olarak yazılmış Javascript
  • Tarayıcı özelliklerine göre ayarlanan yapı
  • Dosya boyutu ufaklığı
  • Gerçek imaj yüklendiğinde gösterilen küçük imaj kopyası
  • CSS’le oynayarak Galeriyi kendine göre düzenleme
  • Hızlı resim yükleme
  • Resme bir isim ve açıklama atayabilme
  • Tarayıcı uyumluluğu

Galleria neye benzer?

Eklentiyi hazırlayanlar sistemin nasıl işlediğini şeklen görmemiz için iki demosunu vermişler. Bunlardan ilki siyah zemin üstüne bir yapıda bulunuyor. Demo 01′i görmek için tıklayınız. Diğeri ise beyaz zemin üzerine ve alt yerine solda küçük resimlerin bulunduğu bir yapıda bulunuyor. Demo 02′yi görmek için tıklayınız. Bunlar eklentinin yapabildiklerini gösteren demolar, CSS dosyaları ile oynayarak kendi yapımızı da oluşturabiliriz. Bu eklenti üzerindeki amatörlüğümüzü attıktan sonra yapacağımız iş olacak.

galleria

Kurulum

<link href="galleria.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.galleria.js"></script>
<script type="text/javascript">
jQuery(function($) { $('ul.gallery').galleria(); });
</script>
  • Sırasız şekilde bir resim listesi oluşturun ve buna bir tanımlayıcı atayın (Ben class=’gallery’ kullandım)
  • CSS dosyası ile oynayarak galerinizin şeklini oluşturun.

Bu şekilde baktığınızda çok karışık gelebilir. Bence Demo’ların kod yapısını inceleyerek bu olayı çözmek en iyi ve en kolay yol olacaktır. Genelde benim yaptığımda bu oluyor. Böylece eklentiye daha hakim olunuyor.

Bu kadar mı? Başka kaynak yok mu?

Galleria ile ilgili daha fazla bilgiyi elbetteki eklentiyi oluşturan verecektir. Bunun için bir parça ingilizce gerekiyor olsa da, ben size güveniyorum ve biliyorum ki kodu ve sistemi orjinal kaynaktanda çözebilirsiniz. Galleria hakkında daha fazla bilgi almak için http://devkick.com/lab/galleria/ a gitmeniz gerekiyor. Sağlıcakla Kalın.

]]> http://ilgisel.com/blog/yazi/galleria-jquery-resim-galerisi/feed/ 1 Jquery’de Sekmeler http://ilgisel.com/blog/yazi/jqueryde-sekmeler/ http://ilgisel.com/blog/yazi/jqueryde-sekmeler/#comments Sat, 18 Jul 2009 23:19:08 +0000 Degre http://www.dincerdegre.com/weblog/?p=149 Görsel olarak Javascript bazlı değişimler yapmak için bir sürü Framework oluşturulmuş bulunmakta. Bu yazı ile Jquery ile sekme sisteminin nasıl yapıldığını anlayıp uygulayacaksınız.

Neye İhtiyacımız Var?

Basit bir Sekme sistemi oluşturacağımız için bize JQuery Framework Dosyası ve JQuery UI Javascript dosyaları gerekiyor. UI Downloader size hangi özellikleri kullanmak istediğinizi seçme olanağı tanıyor, bu aşamada ben sadece Tabs yani sekme bölümünü seçtim. Neler gerekli olduğunu öğrendiğimize göre artık işleme başlayabiliriz.

Başlangıçta Yapılacaklar

İlk işimiz indirdiğimiz Jquery dosyalarını HTML dosyamızın bulunduğu yere kopyalamak ve ilgili HTML dosyamız içinde </head> bölümünün hemen üstüne aşağıdaki kodları yapıştırmak.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery-tabs.js"></script>

Bir sonraki aşamamızda script’in döküman yüklendiğinde ne yapması gerektiğini yazıyoruz. diğer kodların hemen altına. Buradaki “#tabs” ilgili taşıyıcı div’in id’sidir.

<script>
$(document).ready(function()
{
	$("#tabs > ul").tabs();
});
</script>

Basitçe anlatmak gerekirse bu script bütün diğer dosyalar yüklendiğinde bir kereye mahsus çalışacak. Script’in istediğimiz yeri döküman içinden seçebilmesi için Div’in id olayı kullanıldı. Sistemi az çok anladığımıza göre şimdi içerik ekleyelim.

Sekmeleri Oluşturalım

Sekmeler birer div taşıyıcına bağlanacak, böylece istediğimizi script sayesinde gösterebileceğiz. Biraz önce div taşıyıcı olarak id’i “#tabs” olarak kullandığımız için burada da aşağıdaki gibi olacak.

<div id="tabs" class="tabs">
<ul>
	<li><a href="target"><span>Bir</span></a></li>
	<li><a href="target"><span>İki</span></a></li>
</ul>
</div>

Bilgiyi sekmelerin içine koymak için bir çok yol var. İlki ilgili sekmede göstermek istediğimiz bilgiyi sayfadaki farklı bir div’den çekebiliriz. Bunu yapmak için çekmek istediğimiz farklı div’in id’sini olması gerektiği gibi gerekli yere yazmalıyız. Diğer metottaysa sekmeyi div olarak deil dosya yani .html olarak çekmekten bahsedebiliriz.

Bu şekilde anlatıldığında anlamlı gelmese de yukarıdaki kodumuzu biraz değiştirerek ne demek istediğimizi anlatabiliriz.

<div id="tabs" class="tabs">
<ul>
	<li><a href="#example"><span>Örnek</span></a></li>
	<li><a href="another_file.html"><span>Diğer Dosya</span></a></li>
</ul>
        <div id="example">
        Birşeyler yazalım
        </div>
</div>

Bunu yaptıktan sonra aynı dizine birde another_file.html dosyası oluşturun ve içine aşağıdakini yazıp kaydedin.

<p>bu da diğer dosyadaki yazı</p>

HTML dosyasında yapmamız gerekenler bu kadardan ibaret. Şu anda basit şekilde oluşturulmuş sekmelerimiz bulunmakta. Bu dosyalara CSS yardımıyla şekil vermek size kalmış. Daha fazla bilgi için aşağıdaki ZIP’li dosyayı indirebilir veya demoyu inceleyebilirsiniz.

Jquery Sekme Demo

Jquery Sekme ZIP Indir

]]> http://ilgisel.com/blog/yazi/jqueryde-sekmeler/feed/ 1