|
Manşet Haber | NewsTicker
Yazar:
Hakkı Tabanoğlu
Kategori:
ASP.NET
Eklenme Tarihi:
20.07.2009 21:59:30
Merhabalar, Günümüzde web sitemize gelen ziyaretcilere haberlerimizi,makalelerimizi,forum konularını sunmak için değişik uygulamalar kullanarak şık güzel bir şekilde sunmayı hedefleriz bizde bu yazımızda jquerynin eklentilerinden yararlanarak asp.net ile güzel bir manşet haber hazırlayacağız.
jQuery, hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür. 2006 başında John Resig tarafından duyurulmuş ve hali hazırda 15 kişilik bir ekip tarafından gelişimi sürdürülmektedir. Açık kaynak bir framework olmasından dolayı üzerine bir çok eklenti yazılmış ve bu sayede de tüm dünyada kullanıcı kitlesi bir anda artmıştır.
Kullanacağımız jquery kütüphanesi ve eklentileri http://jqueryjs.googlecode.com/files/jquery-1.3.2.js http://malsup.com/jquery/cycle/jquery.cycle.all.js?v2.6
http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js
haberlerimizi veri tabanından çekeceğiz ben microsft access kullandım. tablonun görünümü
tabloyu basit bir şekilde hazırladıktan sonra css dosyamıza geçiyoruz. siz kendinize göre css dosyası değiştirerek daha efektif sunumlar elde edebilirsiniz
body {font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;}
*{margin:0}
#haber{margin:10px 0 0 10px;height:147px;width:500px;overflow:hidden;border:solid 1px #DEDEDE;padding:6px 10px 1px 10px;}
#haber li{border:0;margin:0; padding:0; list-style:none;}
#haber li{padding:2px;list-style:none;}
#haber a{color:#000000;}
#haber a:hover{color:Silver;}
#haber .haber-baslik{display:block;font-weight:bold;margin-bottom:4px;font-size:11px;}
#haber .haber-baslik:hover{color:Red;}
#haber .haber-kisa{display:block;font-size:11px;color:#666666;}
#haber img{float:left;margin-right:14px;padding:4px;border:solid 1px #DEDEDE;}
#page{margin-left:10px;width:500px;overflow:hidden;padding:2px;}
#page li{ width: 20px; float: left; margin-bottom:2px; list-style: none;display: block;padding-right:2px}
#page a{text-decoration:none;float:left; margin-right:1px; font:bold 11px arial; color:#0a6ed4; text-align:center; width:20px; height:19px; padding:2px 0 0 0; background:url(images/bos.gif) no-repeat top left}
#page .aktif{ border-bottom:solid 2px #f8a900;color:#FA6501;}
#page a:focus{ outline: none;}
#page a:hover{color:#FA6501;} html yapımız.
build sonrası 
sayfamızda 1 adet repeater kullandık ve veritabanımızdan gelen verileri repeater bağladık.
<%@Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Manşet Haber | News Ticker</title>
//jquery kütüpanesi ve eklentilerini ekliyoruz.
<scripttype="text/javascript" src="js/jquery-1.3.2.js"></script>
<scripttype="text/javascript" src="js/jquery.easing.1.3.js"></script>
<scripttype="text/javascript" src="js/jquery.cycle.all.js"></script>
<linkrel="stylesheet" type="text/css" href="main.css" />
<scripttype="text/javascript">
//$.fn.cycle.updateActivePagerLink ile sayfalarımız değiştikçe hangi sayfanın görüntülendiğini görebilmek için
//<a></a> tagına jquery ile class ekliyoruz.
$.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) {
$(pager).find('a').removeClass('aktif').filter('a:eq(' + currSlideIndex + ')').addClass('aktif');
};
$(document).ready(function() {
//veritabanından gelen haberlerimizi efektif olarak göstermek için kullandığımız jquery nin cycle eklentisi
// özelliklerini belirliyoruz.
$('#haber').cycle({
//efektimiz scrolldown belirliyoruz. yani haberimiz aşağı doğru kayacak
fx: 'scrollDown',
//timeout yani haberimizin bekleme süresini ms cinsinden 6000 ms (6sn) olarak belirliyoruz.
timeout: 6000,
//bir sonraki habere gecerken efektimizi easing easeOutQuart olarak ayarlıyoruz.
easing: 'easeOutQuart',
//Haber Sayısını gösterileceği listimizin Id'sini pager özelliğine tanımlıyoruz #page
pager: '#page',
//mouse haberin üzerine geldiğinde geçişlerin durması için 1 yapıyoruz 0 yaparsanız mouse haberin üzerinde olsa
//bile devam eder.
pause: 1,
//pagerAnchorbulder özelline sayfalarmızı belirtiriyoruz. bu özelli li tağından kac tane olduğunu belirleyerek bize
// sayfa döndürmektedir. ve sayfayı link olarak beliryecektir. bizde css kısmında bu linkleri nasıl görünmesi gerektiğini belirledik.
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#">' + (idx + 1) + '</a></li>';
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<divstyle="width:"510px">
<!--[if !IE]>Repeater ımızı yerleştirdik ve veritabanından gelen verilerimizi yerlerini belirledik.<![endif]-->
<!--[if !IE]>verilerimizi ul li içinde kullanacağız ve li'lerin sayısı bize sayfa sayısını verecektir.<![endif]-->
<asp:Repeater ID="RpHaber" runat="server">
<HeaderTemplate><ul id="haber"></HeaderTemplate>
<ItemTemplate>
<li>
<img src='<%#DataBinder.Eval(Container.DataItem, "Haber_img")%>' alt="" /><a href="#" class="haber-baslik"><%#DataBinder.Eval(Container.DataItem, "Haber_Title")%></a>
<span class="haber-kisa"><%#DataBinder.Eval(Container.DataItem, "Haber_Content")%></span>
</li>
</ItemTemplate>
<FooterTemplate></ul>
<ul id="page"></ul></FooterTemplate>
</asp:Repeater>
<!--[if !IE]>javascript tarafındaki tanımlarda pager :#page olarak tanımladığımız listeleyicide herhangi bir li tagı gözükmüyor. çünki cycle eklentisi herşeyi kendisi halletmektedir. kac haberimizin olduğunu kendisi belirleyecek <![endif]-->
</div>
</form>
</body>
</html>
code behind kısmına göz atalım
Imports System.Web
ImportsSystem.Data
ImportsSystem.Data.OleDb
ImportsSystem.Data.DataTable
Partial Class_Default
InheritsSystem.Web.UI.Page
Privatecommand AsOleDbCommand
PrivateBaglanti AsOleDbConnection
Protected SubPage_Load(ByValsender As Object, ByVale AsSystem.EventArgs) Handles Me.Load
DimDataTable As NewDataTable 'Datatable de§iŸkenimizi tanmlyoruz.
Baglanti = NewOleDbConnection
Baglanti.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="+ Server.MapPath("~/app_data\yazilimgunlugu.mdb")
IfBaglanti.State = ConnectionState.Closed ThenBaglanti.Open() command = NewOleDbCommand command.Connection = Baglanti command.CommandText = "SELECT * FROM HABERLER" ' haberlerimizi cekiyoruz Dimrs AsOleDbDataAdapter = NewOleDbDataAdapter(command) rs.Fill(DataTable) 'Çektiğimiz verileri datatable nesnesine aktarıyoruz.
Baglanti.Close()
RpHaber.DataSource = DataTable 'repaeter datasource ne haberlerimizi aktarıyoruz.
RpHaber.DataBind()
End Sub
End Class sonuc
http://www.testsayfasi.qsh.me/default.aspxcycle eklentisinin özellikleri
// override these globally if you like (they are all optional)
fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
timeout: 4000, // milliseconds between slide transitions (0 to disable auto advance)
timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)
continuous: 0, // true to start next transition immediately after current one completes
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the 'in' transition
speedOut: null, // speed of the 'out' transition
next: null, // selector for element to use as click trigger for next slide
prev: null, // selector for element to use as click trigger for previous slide
prevNextClick: null, // callback fn for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement)
pager: null, // selector for element to use as pager container
pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'click', // name of event which drives the pager navigation
pagerAnchorBuilder: null, // callback fn for building anchor links: function(index, DOMelement)
before: null, // transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
after: null, // transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag)
end: null, // callback invoked when the slideshow terminates (use with autostop or nowrap options): function(options)
easing: null, // easing method for both in and out transitions
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
shuffle: null, // coords for shuffle animation, ex: { top:15, left: 200 }
animIn: null, // properties that define how the slide animates in
animOut: null, // properties that define how the slide animates out
cssBefore: null, // properties that define the initial state of the slide before transitioning in
cssAfter: null, // properties that defined the state of the slide after transitioning out
fxFn: null, // function used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag)
height: 'auto', // container height
startingSlide: 0, // zero-based index of the first slide to be displayed
sync: 1, // true if in/out transitions should occur simultaneously
random: 0, // true for random, false for sequence (not applicable to shuffle fx)
fit: 0, // force slides to fit container
containerResize: 1, // resize container to fit largest slide
pause: 0, // true to enable "pause on hover"
pauseOnPagerHover: 0, // true to pause when hovering over pager link
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
delay: 0, // additional delay (in ms) for first transition (hint: can be negative)
slideExpr: null, // expression for selecting slides (if something other than all children is required)
cleartype: !$.support.opacity, // true if clearType corrections should be applied (for IE)
cleartypeNoBg: false, // set to true to disable extra cleartype fixing (leave false to force background color setting on slides)
nowrap: 0, // true to prevent slideshow from wrapping
fastOnEvent: 0, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
randomizeEffects: 1, // valid when multiple effects are used; true to make the effect sequence random
rev: 0, // causes animations to transition in reverse
manualTrump: true, // causes manual transition to stop an active transition instead of being ignored
requeueOnImageNotLoaded: true, // requeue the slideshow if any image slides are not yet loaded
requeueTimeout: 250 // ms delay for requeue
Kullanabileceğiniz cycle eklentisi efektleri aşağıdaki adresten teste edip denyebilirsiniz. Umarım yararlı bir makale olmuştur.
Hatalarımdan dolayı affola.
Başka bir makalede görüşmek dileği ile.
Hakkı TABANOĞLU
www.yazilimgunlugu.com
Hakkı Tabanoğlu
02.08.1980 Kastamonu Doğumludur. ASP.NET, VISUALBASIC.NET, SQL,CSS İle ilgili Kendini Geliştirmektedir.
|