Serpito » CSS http://www.serpito.com Güncel Teknoloji ve Yazılım Blogu Fri, 03 Feb 2012 11:44:15 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Css Admin Panel http://www.serpito.com/css-admin-panel/ http://www.serpito.com/css-admin-panel/#comments Fri, 09 Jul 2010 14:32:33 +0000 sword fish http://www.serpito.com/?p=1162
Css Admin Panel


Web sitelerimizn yönetim bölümünde kullanılabilecek, zengin içerikli bir admin panel.

Admin paneli zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/css-admin-panel/feed/ 10 Link İle Form Submit http://www.serpito.com/link-ile-form-submit/ http://www.serpito.com/link-ile-form-submit/#comments Mon, 22 Feb 2010 15:46:02 +0000 sword fish http://www.serpito.com/?p=868 read more »]]> Web sitelerimizde yer alan formları submit ederken butonlar yerine sitemizde yer alan daha önce css leri hazırlanmış olan linkler yer alabilir. Hazır linklerimiz dururken css leri ile hazırlanmış olarak birdaha yeniden botunların css lerini ayarlamakla ugraşmak istemiyebiliriz. Bu örneğimizde linklere submit özelliği vermeyi ögreneceğiz.
İlk olarak linkimizden başlayalım.


<a href="javascript:document.login.submit()">Giriş</a>

Örnek Formumuzda, name’i login (name=”login”) olan formu submit ediyoruz. Gönderim şeklimiz post (method=”post”). Formumuzu göndermemizi sağlayan kod ise javascript:document.login.submit() dir. Buradaki login form name’mimizdir


&lt;form action="login.php" name="login" method="post"&gt;
&lt;input type="text" name="eposta" id="eposta" value="Email adresiniz" maxlength="200" onFocus="if (this.value=='Email adresiniz') this.value='';return;" onBlur="if (this.value=='') this.value='Email adresiniz';return;"&gt;

&lt;input type="password" name="password" id="password" value="Şifreniz" maxlength="200" onFocus="if (this.value=='Şifreniz') this.value='';return;" onBlur="if (this.value=='') this.value='Şifreniz';return;"&gt;

&lt;input type="hidden" name="kaydet" value="kaydet" /&gt;
&lt;input type="hidden" name="return" value="&lt;?=$_SERVER['REQUEST_URI']?&gt;" /&gt;
<a href="javascript:document.login.submit()">Giriş</a>
&lt;/form&gt;
]]> http://www.serpito.com/link-ile-form-submit/feed/ 0 Jquery:Twitter İleti Listeleme (jquery.twit.js) http://www.serpito.com/jquery-twitter-ileti-listeleme-twit-js/ http://www.serpito.com/jquery-twitter-ileti-listeleme-twit-js/#comments Wed, 17 Feb 2010 11:25:28 +0000 Atilla Akoğlu http://www.serpito.com/?p=775 read more »]]> Twitter

Twitter iletilerinizi websitelerinizde yayınlamak için Twitter resmi widget sayfasındaki sihirbazı kullanmak gerekiyordu.  Bu uygulamada inceleyeceğimiz Jquery eklentisi ile birlikte istediğimiz ölçülerde ve özellikte twitter iletilerimizi listeleyebilirsiniz.

Öncelikle bu adresten Jquery Twit eklenti dosyalarını indirin. Zip klasörünün içinde gerekli olan  javascript dosyası ve stil dosyası bulunmaktadır.

Kurulum aşamasını atlamak için serpito tarafından derlenen çalışır haldeki uygulamanın zip arşivini indirmek için tıklayınız.

Eklentinin kurulumu

HTML sayfanızın <head> kısmına aşağıki satırları ekleyerek javascript ve css dosyalarını çalıştırabilirsiniz.


&lt;pre&gt;&lt;code&gt;&lt;link href=&quot;&lt;/code&gt;jquery.twit.0.1.1&lt;code&gt;.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;&lt;/code&gt;jquery.twit.0.1.1&lt;code&gt;.js&quot;&gt;&lt;/script&gt;&lt;/code&gt;&lt;/pre&gt;

Sayfa <body> tagları içinde istediğiniz herhangi bir yere aşağıdaki kodları yazabilirsiniz.


&lt;div id=&quot;twitin&quot;&gt;&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

$('#twitin').twit('serpito'); //serpito twitter username , siz de kendi twitter hesap ismini yazmalısınız.
&lt;/script&gt;

Uygulamanın çalışır demosunu incelemek için tıklayınız.

Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

Ayrıca jquery.twit.js dosyasına çeşitli opsiyon vermek için aşağıdaki parametreleri kullanabilirsiniz.

Örnek opsiyon:


$('#id_of_container').twit('serpito', {
  limit: 5,
  label: 'Serpito.com',
  title: 'Serpito.com twitter iletileri'
});

Opsiyonlar:

opsiyon türü öntanımlı
count integer 200 Çekilecek ileti sayısı. Önerilen sayı maximum 200.
callback function Eğer tarayıcı desteği varsa, Json formatında veri döndürebiliyor.
icon boolean true
label string ‘Twitter’
limit integer 7
title string ”
text boolean true
username boolean true
]]> http://www.serpito.com/jquery-twitter-ileti-listeleme-twit-js/feed/ 2 Mootools Slider Buton http://www.serpito.com/mootools-slider-buton-2/ http://www.serpito.com/mootools-slider-buton-2/#comments Mon, 15 Feb 2010 21:58:17 +0000 Atilla Akoğlu http://www.serpito.com/?p=739 read more »]]> Web sitelerimizde yer alan butonları mootools ve css ile daha görsel ve kullanışlı hale getirebiliriz. Sayfalarımızda yer alan menü isimleri bazen yeteri kullanıcılara bilgi vermeye bilir. Kullanıcıların butonlara tıklamak için mause ile üzerlerine geldiklerinde açılan bir açıklama bölümü oluşturmaya ögreneceğiz bu uygulamada.

İlk olarak javascript kodlarımızdan başlayalım 
&lt;br /&gt;
	&amp;lt;script type=&quot;text/javascript&quot; src=&quot;mootools-1.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;
	&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;&lt;br /&gt;
		window.addEvent('domready',function() {&lt;br /&gt;
			$$('.slidebttn').each(function(btn) {&lt;br /&gt;
				var prev = btn.getPrevious('a').set('tween',{ duration: 500 });&lt;br /&gt;
				var span = prev.getElement('span');&lt;br /&gt;
				btn.addEvents({&lt;br /&gt;
					mouseenter: function(e) {&lt;br /&gt;
						btn.addClass('a');&lt;br /&gt;
						prev.tween('width',225);&lt;br /&gt;
						span.fade('in');&lt;br /&gt;
					},&lt;br /&gt;
					mouseleave:function(e) {&lt;br /&gt;
						btn.removeClass('button_c');&lt;br /&gt;
						prev.tween('width',70);&lt;br /&gt;
						span.fade('out');&lt;br /&gt;
					}&lt;br /&gt;
				});&lt;br /&gt;
			});&lt;br /&gt;
		});&lt;br /&gt;
	&amp;lt;/script&amp;gt;&lt;br /&gt;

Html Kodlarımız

&lt;br /&gt;
&amp;lt;div id=&quot;content&quot;&amp;gt;&lt;br /&gt;
    &amp;lt;div class=&quot;button_wrap&quot;&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_aRight&quot; id=&quot;button_aLeft&quot;&amp;gt;&amp;lt;span style=&quot;visibility: hidden; opacity: 0;&quot;&amp;gt;Facebook'a giriş yapma&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_bRight slidebttn&quot; id=&quot;button_bRight&quot;&amp;gt;Facabook&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
    &amp;lt;div class=&quot;button_wrap&quot;&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_aRight&quot; id=&quot;button_aLeft&quot;&amp;gt;&amp;lt;span style=&quot;visibility: hidden; opacity: 0;&quot;&amp;gt;Twitter'a giriş yapma&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&lt;br /&gt;
        &amp;lt;a class=&quot;button_bRight slidebttn&quot; id=&quot;button_bRight&quot;&amp;gt;Twitter&amp;lt;/a&amp;gt;&lt;br /&gt;
    &amp;lt;/div&amp;gt;&lt;br /&gt;
&amp;lt;/div&amp;gt;&lt;br /&gt;

Uygulamanın çalışır demosunu incelemek için tıklayınız.
Uygulama dosyalarını zip şeklinde indirmek için tıklayınız.

]]> http://www.serpito.com/mootools-slider-buton-2/feed/ 1 Twitter Tarzı Jquery – CSS More Çubuğu http://www.serpito.com/twitter-tarzi-more-bar/ http://www.serpito.com/twitter-tarzi-more-bar/#comments Fri, 12 Feb 2010 12:04:04 +0000 Atilla Akoğlu http://www.serpito.com/?p=655 read more »]]>

Twitter’a dadanmışken tam olsun artık. Sayfa altında yer alan more çubuğu nasıl çalışıyor, ne gibi yararları var sorularına cevap arayalım.

Twitter moreTakip listendeki insanların feedleri  çok sık güncellenebileceği için (benim listemde dakikada ortalama 30 twit geliyor)  profil sayfanızın  ilk yüklendiği sırada en son gönderilen 20 twit listeleniyor. Bu şekilde aynı anda binlerce satır verinin yüklenmesi önleniyor ve hem sunucu hem de kullanıcı için rahat bir servis sağlanıyor.

More çubuğu daha fazla verinin istenildiği zaman sayfaya yüklenmesini sağlıyor.

Uygulamayı gerçekleştirebilmek için öncelikle bir veritabanına yani veri topluluğuna ihtiyacımız var.

Elinizde hazır bir veritabanı yoksa aşağıdaki Mysql kodu ile örnek bir veritabanı tablosu açabilirsiniz.


CREATE TABLE messages(
id INT AUTO_INCREMENT PRIMARY KEY,
message TEXT
);
//messages tablosu açıldı, içine örnek veri girmek için aşağıdaki kodu da çalıştırabilirsiniz.

INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemes21we sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'sdsadk2as jkf klsdssdsdf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dene2mese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemaaes2e sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemesdsse sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneme5632ssdsde sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denegffgmese sadkas jkf klf kfn');
INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denemese sad546546kas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'densdaseme456546se sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denedasdmese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'denaasemese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'dendasd45emese sadkas jkf klf kfn');INSERT INTO `messages` (`msg_id`, `message`) VALUES (NULL, 'deneasdamese sadkas jkf klf kfn');

Yukarıdaki Mysql kodları demo için kullanabileceğiniz ham maddeleri sağlar. Eğer ki local bilgisayarınızda çalışma imkanı bulamadıysanız buradan local PHP ve Mysql server kurulumu hakkında bilgi alabilirsiniz. Ama ben Serpito.com’un çalışan hazır veritabanını kullanacağım.

WordPress veritabanı yapısında wp_posts tablosunda tutulan postları listeleyerek siz küçük bir Ajax Load Bar demosu hazırladım.

Uygulama dosyalarını tek tek buraya yazalım:
(Özellikle yorum satırlarına dikkat ederseniz daha rahat anlaşılır.)

index.php kodları:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Serpito.com - Jquery &amp;amp;amp; Ajax Twitter tarzı more uygulası</title>
<style type="text/css">
*{ margin:0px; padding:0px }
ol.timeline
{
list-style:none
}
ol.timeline li
{
position:relative;
border-bottom:1px #dedede dashed;
padding:8px;
}
#panel{
color:#333;
background-color:#C8E6E2;
width:100%;
}
.morebox
{
font-weight:bold;
color:#B0AD28;
text-align:center;
border:solid 1px #CCC;
padding:8px;
font-size:14px;
margin-top:8px;
margin-bottom:8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.morebox a{ color:#333333; text-decoration:none}
.morebox a:hover{ color:#333333; text-decoration:none}
#container{margin-left:60px; width:580px }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="images/wait.gif" />');

$.ajax({
type: "POST",
url: "more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").append(html);
$("#more"+ID).remove(); // more cubugu kaldiriliyor
}
});
}
else
{
$(".morebox").html('Baska veri kalmadi');// Listelenecek veri kalmadi
}

return false;
});
});
</script>

</head>

<body>
<div id="panel">
<center><h2>Serpito.com</h2>
Bu demo <a href="http://www.serpito.com/twitter-tarzi-more-bar/">Twitter Tarzı Jquery – CSS More Çubuğu</a> yazısı için hazırlanmıştır.
</center>
</div>
<div id='container'>
<ol id="updates">
<?php
include('mysql.php'); // kisisel olarak kullandigim bu dosyadaki $dba veritabani sinifini daha sonra detaylica aciklayacagim.
$sql=$dba->query("select ID,post_title,post_name from wp_posts where post_status='publish' ORDER BY ID DESC LIMIT 20"); // ilk acilista 10 satir getiriliyor
while($row=$dba->fetch_assoc($sql))
{

$title=$row['post_title'];
$link=$row['post_name'];
$msg_id=$row['ID'];
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php } ?>
</ol>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>

</div>

<?php
$dba->close();
?>
</body>
</html>

&amp;nbsp;

more.php kodları:


<?php
include("mysql.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select ID,post_title,post_name from wp_posts where ID<'$lastmsg' and post_status='publish' order by ID desc limit 20");
while($row=mysql_fetch_array($result))
{
$title=$row['post_title'];
$link=$row['post_name'];
$msg_id=$row['ID'];
?>
<li>
<?php echo $title." <a href='http://www.serpito.com/".$link."'>http://www.serpito.com/".$link."</a>"; ?>
</li>
<?php
}
?>

<div id="more<?php echo $msg_id; ?>">
<a href="#" id="<?php echo $msg_id; ?>">more</a>
</div>
<?php
}
?>

<?php
$dba->close();
?>

&amp;nbsp;

Kodlama olayımız bu kadar.

 

]]> http://www.serpito.com/twitter-tarzi-more-bar/feed/ 1 jQuery Dropdown (Açılır) Menu http://www.serpito.com/jquery-dropdown-men/ http://www.serpito.com/jquery-dropdown-men/#comments Thu, 11 Feb 2010 13:50:01 +0000 Atilla Akoğlu http://www.serpito.com/?p=639 read more »]]> Web sitelerimizdeki menülerin css’ler ve jquery ile daha ilgi çekici ve ilginç özellikler ekleye biliriz. Bu örneğimizde menü üzerine gelindiğinde menü gözüküyor ve alt menüleri de dropdown olarak gösteriyoruz.


Menü aşağıdaki biçimde açılıyor

Örnek Uygulama

Uygulama dosyaları

HTML kodlarımız


&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;title&gt;Gumusluoglu.Com&lt;/title&gt;

&lt;link rel=&quot;stylesheet&quot; href=&quot;main.css&quot; /&gt;

&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;xbreadcrumbs.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;xbreadcrumbs.css&quot; /&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function(){
        //  Initialize xBreadcrumbs
        $('#breadcrumbs-1').xBreadcrumbs();
        $('#breadcrumbs-2').xBreadcrumbs({ collapsible: true });
        $('#breadcrumbs-3').xBreadcrumbs();
	});
&lt;/script&gt;

&lt;style type=&quot;text/css&quot;&gt;
    .xbreadcrumbs LI {
        border-right: none;
        background: url(images/separator.gif) no-repeat right center;
        padding-right: 15px;
        padding-left: 10px;
    }
    .xbreadcrumbs LI.current { background: none; }
    .xbreadcrumbs LI UL LI { background: none; }

    .xbreadcrumbs LI A.home {
        background: url(images/home.gif) no-repeat left center;
        padding-left: 20px;
    }

    /*  Custom styles for breadcrums (#breadcrumbs-3)  */
    .xbreadcrumbs#breadcrumbs-3 {
        background: none;
    }
    .xbreadcrumbs#breadcrumbs-3 LI A {
        text-decoration: underline;
        color: #0A8ECC;
    }
    .xbreadcrumbs#breadcrumbs-3 LI A:HOVER, .xbreadcrumbs#breadcrumbs-3 LI.hover A { text-decoration: none; }
    .xbreadcrumbs#breadcrumbs-3 LI.current A {
        color: #333333;
        text-decoration: none;
    }
    .xbreadcrumbs#breadcrumbs-3 LI {
        border-right: none;
        background: url(images/separator-arrow.gif) no-repeat right center;
        padding-right: 15px;
        padding-left: 10px;
    }
    .xbreadcrumbs#breadcrumbs-3 LI.current { background: none; }
    .xbreadcrumbs#breadcrumbs-3 LI UL LI { background: none; padding: 0;  }

    /*  Demo styles  */
    BODY {
        margin: 20px;
        padding: 20px;
    }
    STRONG { color: #000000; }
    .vspacer {
        height: 20px;
    }
    PRE.code {
        padding: 7px;
        background: #777777;
        color: #F0F0F0;
        width: 400px;
        overflow: auto;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id=&quot;page&quot;&gt;
        &lt;!-- Example 2 --&gt;
        &lt;ul class=&quot;xbreadcrumbs&quot; id=&quot;breadcrumbs-2&quot;&gt;
            &lt;li&gt;
               &lt;a href=&quot;#&quot; class=&quot;home&quot;&gt;Ana Sayfa&lt;/a&gt;

               &lt;ul&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/ajax-ile-jquery-kullanici-mesaj-formu/&quot; target=&quot;_blank&quot;&gt;AJAX ile jQuery Kullanıcıa&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/htaccess-subdomaini-dizine-yonlendirmek/&quot; target=&quot;_blank&quot;&gt;.htaccess-subdomain’i &lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/jquery-form-validator/&quot; target=&quot;_blank&quot;&gt;Jquery Form Validator&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot;&gt;Advertise With Us&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/slider-login-twitter-tarzi-login/&quot; target=&quot;_blank&quot;&gt;Slider Login (Twitter Tarzı Login)&lt;/a&gt;&lt;/li&gt;

               &lt;/ul&gt;
            &lt;/li&gt;

            &lt;li&gt;
               &lt;a href=&quot;#&quot;&gt;PHP&lt;/a&gt;
               &lt;ul&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/php-ile-random-sayi-uretme/&quot; target=&quot;_blank&quot;&gt;Php ile Random Sayı Üretme&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/jquery-tab-uygulamasi/&quot; target=&quot;_blank&quot;&gt;Jquery Tab Uygulaması&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/pop-up-sayfa/&quot; target=&quot;_blank&quot;&gt;Pop-up Sayfa&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/phpde-xml-olusturma/&quot; target=&quot;_blank&quot;&gt;Php’de XML Oluşturma&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;
               &lt;a href=&quot;#&quot;&gt;MYSQL&lt;/a&gt;
               &lt;ul&gt;

                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/mysql-lower-ve-upper-komutu/&quot; target=&quot;_blank&quot;&gt;Mysql Lower ve Upper Komutu&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/mysql-andve-ve-orveya-komutu/&quot; target=&quot;_blank&quot;&gt;Mysql AND(ve) ve OR(veya) Komutu&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/mysqlde-distict-komutu/&quot; target=&quot;_blank&quot;&gt;Mysql’de Distinct Komutu&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/mysql-truncate-tablu-icerisini-bosaltma-komutu/&quot; target=&quot;_blank&quot;&gt;Mysql Truncate (Tablu içerisini boşaltma) Komutu&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.gumusluoglu.com/kategoriler/mysql-join/&quot; target=&quot;_blank&quot;&gt;Mysql Join&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;

            &lt;/li&gt;
            &lt;li&gt;
               &lt;a href=&quot;#&quot;&gt;Dost Siteler&lt;/a&gt;
               &lt;ul&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.serpito.com/&quot;&gt;Serpitp&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href=&quot;http://www.dilmen.net/&quot;&gt;Aykut Dilmen&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;

            &lt;/li&gt;
            &lt;li class=&quot;current&quot;&gt;&lt;a href=&quot;#&quot;&gt;Gumusluoglu.Com Site İçeriği&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Javascript kodalarımız


/*
	xBreadcrumbs (Extended Breadcrums) jQuery Plugin
	© 2009 ajaxBlender.com
	For any questions please visit www.ajaxblender.com
	or email us at support@ajaxblender.com
*/

;(function($){
	/*  Variables  */
	$.fn.xBreadcrumbs = function(settings){
		var element = $(this);
		var

		settings = $.extend({}, $.fn.xBreadcrumbs.defaults, settings);

		function _build(){
			if(settings.collapsible){
				var sz = element.children('LI').length;
				element.children('LI').children('A').css('white-space', 'nowrap').css('float', 'left');
				element.children('LI').children('A').each(function(i, el){
					if(i != sz - 1){
						$(this).css('overflow', 'hidden');
						$(this).attr('init-width', $(this).width());
						$(this).width(settings.collapsedWidth);
					}
				});
			}

            element.children('LI').mouseenter(function(){
                if($(this).hasClass('hover')){ return; }

            	_hideAllSubLevels();
            	if(!_subLevelExists($(this))){ return; }

            	// Show sub-level
            	var subLevel = $(this).children('UL');
            	_showHideSubLevel(subLevel, true);

            	if(settings.collapsible &amp;&amp; !$(this).hasClass('current')){
            		var initWidth = $(this).children('A').attr('init-width');
            		$(this).children('A').animate({width: initWidth}, 'normal');
            	}
            });

            element.children('LI').mouseleave(function(){
                var subLevel = $(this).children('UL');
                _showHideSubLevel(subLevel, false);

                if(settings.collapsible &amp;&amp; !$(this).hasClass('current')){
                	$(this).children('A').animate({width: settings.collapsedWidth}, 'fast');
                }
            });
		};

		function _hideAllSubLevels(){
			element.children('LI').children('UL').each(function(){
                $(this).hide();
                $(this).parent().removeClass('hover');
			});
		};

		function _showHideSubLevel(subLevel, isShow){
			if(isShow){
                subLevel.parent().addClass('hover');
                if($.browser.msie){
                	var pos = subLevel.parent().position();
                	subLevel.css('left', parseInt(pos['left']));
                }
				if(settings.showSpeed != ''){ subLevel.fadeIn( settings.showSpeed ); }
				else { subLevel.show(); }
			} else {
                subLevel.parent().removeClass('hover');
                if(settings.hideSpeed != ''){ subLevel.fadeOut( settings.hideSpeed ); }
                else { subLevel.hide(); }
			}
		};

		function _subLevelExists(obj){
			return obj.children('UL').length &gt; 0;
		};

		//    Entry point
		_build();
	};

	/*  Default Settings  */
	$.fn.xBreadcrumbs.defaults = {
		showSpeed:        'fast',
		hideSpeed:        '',
		collapsible:      false,
		collapsedWidth:   10
	};
})(jQuery);
]]> http://www.serpito.com/jquery-dropdown-men/feed/ 4 Curvy Corners ile yuvarlak köşeler http://www.serpito.com/curvycorners-ile-yuvarlak-koseler/ http://www.serpito.com/curvycorners-ile-yuvarlak-koseler/#comments Thu, 11 Feb 2010 13:19:33 +0000 Atilla Akoğlu http://www.serpito.com/?p=629 [/sourcecode] Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda read more »]]> Her ne kadar yeni nesil tarayıcılarda CSS ile pratik bir şekilde dilediğimiz ölçülerde yuvarlak köşe oluşturabilsek de, microsoft internet explorer tarayıcıları henüz bu özelliği desteklememektedir.

Mozilla Firefox, Google Chrome,  Safari gibi popüler web tarayıcı için aşağıdaki CSS kodları istenilen yuvarlak köşelere uyum gösteriyor.

[sourcecode lang="php">

[/sourcecode]

Curvy Corners javascript apisi ile birlikte hızlıca bütün tarayıcılarda kusursuz çalışan yuvarlak köşeler yapabilirsiniz.

Öncelikle CurvyCorners.js dosyasını indiriyoruz.

Yeni bir index.html dosyası oluşturup aşağıdaki kodları içine yapıştırın. 

[sourcecode lang="php"]



Curvy Corners by Serpito

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur mi est, cursus sit amet, pellentesque et, ultricies a, ipsum. Nulla facilisi. Sed quis lacus. Aenean ut risus et lectus blandit gravida. Nam sed nunc. Aliquam non felis non diam aliquam gravida. Phasellus quis sem. Curabitur at velit. Vivamus libero velit, condimentum sit amet, tempus ut, aliquam sit amet, velit. Nunc hendrerit ante. Quisque egestas feugiat erat. Morbi tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla ac ante sit amet metus hendrerit euismod. Aenean vestibulum, lectus in eleifend tempor, quam libero iaculis dolor, pellentesque pellentesque lorem nibh ut urna. Nulla rhoncus, ante sit amet tristique interdum, eros nulla nonummy justo, eu dapibus risus quam sit amet metus. Maecenas tristique augue vel enim. Duis blandit euismod pede. Pellentesque facilisis. Fusce dapibus sapien tristique massa. Nunc accumsan. Integer pretium risus et odio. Phasellus tincidunt rhoncus velit. Donec eu neque at massa mollis iaculis. Aliquam pellentesque auctor mi. Reading this stuff will rot your mind. Cras ante justo, ultricies quis, iaculis eu, tincidunt ac, velit. Etiam nunc erat, tincidunt sit amet, luctus quis, interdum a, nunc. Suspendisse elit.

Bu sayfa curvyCorners ile yuvarlak köşeler için hazırlanan demoyu inceliyorsunuz.


[sourcecode]

Uygulamanın demosu için tıklayınız.
Curvy Corners dosyalarının tamamını indirmek için tıklayınız.

]]> http://www.serpito.com/curvycorners-ile-yuvarlak-koseler/feed/ 1 Jquery Form Validator http://www.serpito.com/jquery-form-validator/ http://www.serpito.com/jquery-form-validator/#comments Wed, 10 Feb 2010 14:51:17 +0000 sword fish http://www.serpito.com/?p=578 read more »]]> Ajax Css Form DoğrulamaFormlarımızda yer alan bölümlerin eksiksiz ve uygunbir şekilde kullanıcı tarafından doldurulup doldurulmadığını post edildikten sonra kontrol edebileceğimiz gibi, kullanıcı formu doldururken de kontrol edebiliriz. Bu örneğimizde kullanıcı verileri girip onaylamadan önce formda boş veya yalnış bir veri varmı kontrol edeceğiz.

Javascript Kodlarımız:


&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;jquery.validate.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

 $(document).ready(function() {

 $.validator.addMethod(&quot;email&quot;, function(value, element) {
 return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
 }, &quot;Geçerli bir eposta adresi giriniz.&quot;);

 $.validator.addMethod(&quot;username&quot;,function(value,element){
 return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
 },&quot;Kullanıcı adı 3-15 karekter olmalıdır.&quot;);

 $.validator.addMethod(&quot;password&quot;,function(value,element){
 return this.optional(element) || /^[A-Za-z0-9!@#$%^&amp;*()_]{6,16}$/i.test(value);
 },&quot;Şifre 6-16 karekter olmalıdır.&quot;);

 // Validate signup form
 $(&quot;#signup&quot;).validate({
 rules: {
 email: &quot;required email&quot;,
 username: &quot;required username&quot;,
 password: &quot;required password&quot;,

 },

 });

 });

&lt;/script&gt;

Css kodlarımız:


&lt;style&gt;
*{ margin:0px;
padding:0px;
}
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;

}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;

}
label.error
{

font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
&lt;/style&gt;

Html kodlarımız:


&lt;body&gt;
 &lt;div align=&quot;center&quot;&gt;
 &lt;div style=&quot;width:650px; margin-top:20px&quot; align=&quot;left&quot;&gt;
 &lt;div style=&quot;margin-left:10px&quot;&gt;
 &lt;form method=&quot;post&quot; action=&quot;jqueryregthank.html&quot; name=&quot;signup&quot; id=&quot;signup&quot;&gt;
 &lt;b&gt;Email&lt;/b&gt;&lt;br /&gt;
 &lt;input type=&quot;text&quot; name=&quot;email&quot; id='email'/&gt;&lt;br /&gt;

 &lt;b&gt;UserName&lt;/b&gt;&lt;br /&gt;
 &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot; /&gt;&lt;br /&gt;
 &lt;b&gt;Password&lt;/b&gt;&lt;br /&gt;
 &lt;input type=&quot;password&quot; name=&quot;password&quot;  id=&quot;password&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
 &lt;input type=&quot;submit&quot; value=&quot; Tamam &quot; name='SUBMIT' id=&quot;SUBMIT&quot;/&gt;
 &lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;

Form doldurulmadan Tamam butonuna basıldığında

Form verileri eksik olarak Tamam butonuna basılırsa

Proje dosyaları

Örnek Uygulama

]]> http://www.serpito.com/jquery-form-validator/feed/ 2 Ajax:CSS:HTML: İletişim Formu http://www.serpito.com/css-form/ http://www.serpito.com/css-form/#comments Sat, 06 Feb 2010 16:56:56 +0000 sword fish http://www.serpito.com/?p=420 read more »]]> Web sitelerimizde yer alan kullanıcı kayıt, login veya adres gibi formlarımızın tasarımları , efektleri, sitemiz ile uyumu, kullanış açısından rahatlığı bizimbir artımızdır. Bu örneğimizde css ve jquery ile derlenmiş bir form tasarımı örneği yapacağız.

CSS Kodlarımız;


<style type="text/css">
body                       { font:12px/1.3 Arial, Sans-serif; }
form                       { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div                        { clear:both;position:relative;margin:0 0 10px; }
label                      { cursor:pointer;display:block; }
input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
input[type="text"]:focus   { border-color:#777; }
input[name="zip"]          { width:150px; }

/* submit button */
input[type="submit"]       { cursor:pointer;border:1px solid #999;
padding:5px;-moz-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }
</style>

HTML form kodlarımız


<form action="" method="post" id="info">
<h2>İletişim Formu</h2>
<div id="name-wrap">
<label for="name">İsim</label>
<input type="text" id="name" name="name">
</div><!--/#name-wrap-->

<div id="email-wrap" >
<label for="email">E-Posta</label>
<input type="text" id="email" name="email">
</div><!--/#email-wrap-->

<div id="street-wrap" >
<label for="st">Adres</label>
<input type="text" id="st" name="st">
</div><!--/#street-wrap-->

<div id="city-wrap" >
<label for="city">Şehir - Semt</label>
<input type="text" id="city" name="city">
</div><!--/#city-wrap-->

<div id="zip-wrap" >
<label for="zip">Posta Kodu</label>
<input type="text" id="zip" name="zip">
</div><!--/#zip-wrap-->

<input type="submit" id="btn" name="btn" value="Gönder">
</form>

En son olarakda formda yer alan inputlar aktif edildiğinde (tıklanıldığında) hangi harekette bulunacaklarını sağlayan kodumuza geçiyoruz. İlk olarak jquery kütüpanemizi sayfamıza dahil  ediyoruz ve ardından javascript kodlarımız yazıyoruz.


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('form#info .slider label').each(function(){
var labelColor = '#999';
var restingPosition = '5px';

// style the label with JS for progressive enhancement
$(this).css({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});

// grab the input value
var inputval = $(this).next('input').val();

// grab the label width, then add 5 pixels to it
var labelwidth = $(this).width();
var labelmove = labelwidth + 5;

//onload, check if a field is filled out, if so, move the label out of the way
if(inputval !== ''){
$(this).stop().animate({ 'left':'-'+labelmove }, 1);
}

// if the input is empty on focus move the label to the left
// if it's empty on blur, move it back
$('input').focus(function(){
var label = $(this).prev('label');
var width = $(label).width();
var adjust = width + 5;
var value = $(this).val();

if(value == ''){
label.stop().animate({ 'left':'-'+adjust }, 'fast');
} else {
label.css({ 'left':'-'+adjust });
}
}).blur(function(){
var label = $(this).prev('label');
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':restingPosition }, 'fast');
}
});
})
});
</script>

Formumuzun yer aldıgı html sayfa kodlarımız


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>Gumusluoglu.com CSS From Örneği</title>
<style type="text/css">
body                       { font:12px/1.3 Arial, Sans-serif; }
form                       { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div                        { clear:both;position:relative;margin:0 0 10px; }
label                      { cursor:pointer;display:block; }
input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
input[type="text"]:focus   { border-color:#777; }
input[name="zip"]          { width:150px; }

/* submit button */
input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('form#info .slider label').each(function(){
var labelColor = '#999';
var restingPosition = '5px';

// style the label with JS for progressive enhancement
$(this).css({
'color' : labelColor,
'position' : 'absolute',
'top' : '6px',
'left' : restingPosition,
'display' : 'inline',
'z-index' : '99'
});

// grab the input value
var inputval = $(this).next('input').val();

// grab the label width, then add 5 pixels to it
var labelwidth = $(this).width();
var labelmove = labelwidth + 5;

//onload, check if a field is filled out, if so, move the label out of the way
if(inputval !== ''){
$(this).stop().animate({ 'left':'-'+labelmove }, 1);
}

// if the input is empty on focus move the label to the left
// if it's empty on blur, move it back
$('input').focus(function(){
var label = $(this).prev('label');
var width = $(label).width();
var adjust = width + 5;
var value = $(this).val();

if(value == ''){
label.stop().animate({ 'left':'-'+adjust }, 'fast');
} else {
label.css({ 'left':'-'+adjust });
}
}).blur(function(){
var label = $(this).prev('label');
var value = $(this).val();
if(value == ''){
label.stop().animate({ 'left':restingPosition }, 'fast');
}
});
})
});
</script>
</head>
<body>
<form action="" method="post" id="info">
<h2>İletişim Formu</h2>
<div id="name-wrap">
<label for="name">İsim</label>
<input type="text" id="name" name="name">
</div><!--/#name-wrap-->

<div id="email-wrap" >
<label for="email">E-Posta</label>
<input type="text" id="email" name="email">
</div><!--/#email-wrap-->

<div id="street-wrap" >
<label for="st">Adres</label>
<input type="text" id="st" name="st">
</div><!--/#street-wrap-->

<div id="city-wrap" >
<label for="city">Şehir - Semt</label>
<input type="text" id="city" name="city">
</div><!--/#city-wrap-->

<div id="zip-wrap" >
<label for="zip">Posta Kodu</label>
<input type="text" id="zip" name="zip">
</div><!--/#zip-wrap-->

<input type="submit" id="btn" name="btn" value="Gönder">
</form>
</body>
</html>
]]> http://www.serpito.com/css-form/feed/ 0 Jquery Tab Uygulaması http://www.serpito.com/jquery-tab/ http://www.serpito.com/jquery-tab/#comments Thu, 04 Feb 2010 15:05:01 +0000 sword fish http://www.serpito.com/?p=409 read more »]]> Web sitelerimizde bir sayfada birden çok bölümün olmasını isteyebiliriz. Bu bölümlerin nasıl ve ne şekilde sıralanacağı yani düzeni önemlidir. Jquery tab uygulaması ile birden çok bölümün istediğimiz css özelliklerine göre yerleştirilmesini ve içeriğini oluşturmayı bu örneğimizde ögreneceğiz.

İlk Olarak jquery dosyamızı sayfamıza dahil ediyor.

[css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1,2,3" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true"]
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
[/css]

Sayfamızda kullanacağımız css kodlarını aşağıdaki şekilde kodluyoruz.


&lt;style type=&quot;text/css&quot;&gt;
body { margin:50px 0; background:#CCC; font-family: “Trebuchet MS”, sans-serif; font-size:11px; }
.tab-tablo { width:450px; margin:0 auto; }
.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Burdan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.tab-icerik { padding:10px; background:#fff; -moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px; }
#tab-2-icerik, #tab-3-icerik  { display:none; }
&lt;/style&gt;

Tab uygulamasının çalışması için gerekli olan js kodları ise aşağıda yer almaktadır.


&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
 $(&quot;span#tab-1&quot;).click(function(){
 $(&quot;span#tab-3&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-2&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-3-icerik&quot;).slideUp();
 $(&quot;div.#tab-2-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideDown();
 return false;
 });
 $(&quot;span#tab-2&quot;).click(function(){
 $(&quot;span#tab-3&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-2&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-3-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideUp();
 $(&quot;div.#tab-2-icerik&quot;).slideDown();
 return false;
 });
 $(&quot;span#tab-3&quot;).click(function(){
 $(&quot;span#tab-2&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-3&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-2-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideUp();
 $(&quot;div.#tab-3-icerik&quot;).slideDown();
 return false;
 });
});
&lt;/script&gt;

Şimdi sıra tab listemizi oluşturma ve tab başlıklarını vermeye geldi.


&lt;div&gt;
&lt;div&gt;
&lt;span id=&quot;tab-1&quot;&gt;Tab - 1&lt;/span&gt;
&lt;span id=&quot;tab-2&quot;&gt;Tab - 2&lt;/span&gt;
&lt;span id=&quot;tab-3&quot;&gt;Tab - 3&lt;/span&gt;
&lt;/div&gt;

Tabların içeriğini ise aşağıdaki kodlarla oluşturuyoruz. Tablar tıklanıldığında gösterilecek içeriği.


&lt;div&gt;
&lt;div id=&quot;tab-1-icerik&quot;&gt;Gumusluoglu.com Teknoloji - Programlama&lt;/div&gt;
&lt;div id=&quot;tab-2-icerik&quot;&gt;Php, Html, Dhtml, Jquery, Java Script, Mysql, Veri tabanı&lt;/div&gt;
&lt;div id=&quot;tab-3-icerik&quot;&gt; &lt;/div&gt;
&lt;/div&gt;

Yukarıdaki kod bölümlerini toplayıp sayfamızı oluşturmak istediğimizde sayfamız aşagıdaki gibi olacaktır.


&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;jQuery Tab&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
body { margin:50px 0; background:#CCC; font-family: “Trebuchet MS”, sans-serif; font-size:11px; }
.tab-tablo { width:450px; margin:0 auto; }
.tab { margin-bottom:5px; }
.tab span { cursor:pointer; color:#999; background:#f2f2f2 url(tab-arkaplan.jpg) repeat-x left bottom; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; /*Burdan*/-moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px;/*Buraya CSS3! Her tarayıcıda çalışmaz!!!..*/ }
span.tab-aktif { cursor:pointer; color:#666; background:#fff; padding:5px 8px; font-weight:bold; font-size:16px; margin-left:10px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; }
.tab-icerik { padding:10px; background:#fff; -moz-box-shadow:1px 1px 5px #7e7e7e; -moz-border-radius:5px; -webkit-border-radius:5px; }
#tab-2-icerik, #tab-3-icerik  { display:none; }
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.3.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
 $(&quot;span#tab-1&quot;).click(function(){
 $(&quot;span#tab-3&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-2&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-3-icerik&quot;).slideUp();
 $(&quot;div.#tab-2-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideDown();
 return false;
 });
 $(&quot;span#tab-2&quot;).click(function(){
 $(&quot;span#tab-3&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-2&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-3-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideUp();
 $(&quot;div.#tab-2-icerik&quot;).slideDown();
 return false;
 });
 $(&quot;span#tab-3&quot;).click(function(){
 $(&quot;span#tab-2&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-1&quot;).removeClass(&quot;tab-aktif&quot;);
 $(&quot;span#tab-3&quot;).addClass(&quot;tab-aktif&quot;);
 $(&quot;div.#tab-2-icerik&quot;).slideUp();
 $(&quot;div.#tab-1-icerik&quot;).slideUp();
 $(&quot;div.#tab-3-icerik&quot;).slideDown();
 return false;
 });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;div&gt;
 &lt;span id=&quot;tab-1&quot;&gt;Tab - 1&lt;/span&gt;
 &lt;span id=&quot;tab-2&quot;&gt;Tab - 2&lt;/span&gt;
 &lt;span id=&quot;tab-3&quot;&gt;Tab - 3&lt;/span&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;div id=&quot;tab-1-icerik&quot;&gt;Gumusluoglu.com Teknoloji - Programlama&lt;/div&gt;
&lt;div id=&quot;tab-2-icerik&quot;&gt;Php, Html, Dhtml, Jquery, Java Script, Mysql, Veri tabanı&lt;/div&gt;
&lt;div id=&quot;tab-3-icerik&quot;&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Preje dosyalarını buradan indirebilirsiniz.

Örnek uygulama.

]]> http://www.serpito.com/jquery-tab/feed/ 0