Arkadaşlar bu yazımda sizlere bir çok haber sitelerinde resimli manşet haber paneli nasıl yapılır onu göstereceğimBu panel için Jquery nin bir eklentisi olan JqueryUI tabs ı kullanacağız.jqueryui.com eklentinin ana sayfasıdirek indirmek için ise buraya tıklayınız.indirdikten sonra bu dersimizde kullanacağımız şablonumuz isecleantype.cleantype için buraya tıklayınızcleantype klasörümüzü sunucumuzdaki www veya public_html klasörümüze açalım ve index.html dosyasını index.php olarak değiştirelim.daha sonra jquery-ui-1.7.2.zip dosyamızın içinden jquery.1.3.2.js dosyasını. ui ve themes klasörünüde index.php mizin bulunduğu www veya public_html klasörümüze kopyalayalım.daha sonra demos/tabs/mouseover.html mizi editör programımızla açalım ve.aşağıdaki kodları . index.php dosyamızdaki tagları arasına yazalım.

bunlarıda hallettikten sonra.mouseover.html içinde

ile başlayan(div id tabs dahil) end demodaki son

dahil olmadan olan bölümü kopyalayıp index.php dosyamızda

nin içini boşaltıp içine kopyalayalım.
önümüze aşağıdaki resimdeki gibi bir görüntü gelecek

şimdi sıra geliyor. tabları aşağıya alıp, tab sayısını yükselteceğiz.bunun için .


ul listemizi div id=tabs-3 divimizin kapanma tagı olan

in bitişine taşıyoruz.
ekran görüntümüz aşağıdaki şekilde olmalı

sonraki adım ise div tabs-4 ve div tabs-5 olmak üzere 2 tane daha div yapacağız ve bunlara linkleyecek olan

  • Aenean lacinia
  • Aenean lacinia


    • kodu ile 2 tane daha tab ekliyelim. ve dan önceki Aenean lacinia gibi yazıyı 1-2-3-4-5 rakamlara değiştirebiliriz eğer isterseniz . başka bir image dosyası koyarak image butonlarıda yapabilirsiniz.
    sıra geldi tablarımızın içini silmeye..div id=tabs-1 den itibaren divlerimizin içini boşaltıyoruz.


    şimdilik onlar boş kalıyor. ve bir tane database yaratıyoruz.ben db ismini abc olarak seçtim. içinede 5 haber için bilgilerle doldurdum.haber tablosununda sql i aşağıdadır. CREATE TABLE IF NOT EXISTS `haber` (`id` int(4) NOT NULL AUTO_INCREMENT,`baslik` text CHARACTER SET utf8 NOT NULL,`buyukresim` text CHARACTER SET utf8 NOT NULL,`ufakresim` text CHARACTER SET utf8 NOT NULL,`manset` int(1) NOT NULL,PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;—- Tablo döküm verisi `haber`–INSERT INTO `haber` (`id`, `baslik`, `buyukresim`, `ufakresim`, `manset`) VALUES(1, ‘haber’, ‘buyuk1.jpg’, ‘kucuk1.jpg’, 1),(2, ‘haber2’, ‘buyuk2.jpg’, ‘buyuk2.jpg’, 1),(3, ‘haber3’, ‘buyuk3.jpg’, ‘ufak3.jpg’, 1),(4, ‘haber4’, ‘buyuk4.jpg’, ‘ufak4.jpg’, 1),(5, ‘haber5’, ‘buyuk5.jpg’, ‘ufak5.jpg’, 1);
    bunuda halledince.database baglantimizi yapacak olan php kodumuzu index.php sayfamizin en üstüne ekliyoruz.mysql_connect(“localhost”, “root”, “”) or die(mysql_error());mysql_select_db(“abc”) or die(mysql_error());$query= “SELECT * from haber”;$query = mysql_query($query); ve veritabanimizdan bilgilerimizi çekelim.şimdi geldik işin zor kısmına. 2 tane loop çevirmemiz lazım 1 i resimler diğeri ise tablar için.onunda kodu şu şekildedir.aşağıdaki kod tabs divimizin içeriği nasıl olur ona dair.

    “;$tabid= ++$tabid; ?>