Bu yazıda sizlere Asp.net ile nasıl kayan yazı yapılır onu göstereceğim.
Eğer JQuery bilmiyorsak Asp.net ile bununda bir kolay yolu var. Bizler burda
<![CDATA[
<marquee> </marquee>
]]>
taglarını kullanacağız.
Eğer istersek bu sayede ekranda Gridview buton veya başka şeyler olmadı bütün sayfayı kaydırabiliriz :)
Şimdi Gelelim Programımızı Kodlamaya...
Ben Sayfamda bir Gridview kaydırmak istiyorum ve gridviewde duyurularım olacak
Şimdi Kodları İlk başta vereyim sonra parça parça inceleyelim...
<![CDATA[
<marquee direction="up" onmouseover="stop()" onmouseout="start()"
style="height: 176px; width:100%" scrollamount="3" >
<asp:GridView ID="duyuru_listesi" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="duyuru_inf"
Height="104px" Width="100%"
RowStyle-HorizontalAlign="Center"
RowStyle-VerticalAlign="Middle" >
<Columns>
<asp:HyperLinkField DataTextField="baslik" HeaderText="DUYURULAR"
DataNavigateUrlFields="id"
DataNavigateUrlFormatString="~/bilgi/duyurular.aspx?duyuru={0}"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="duyuru_inf" runat="server"
ConnectionString="<%$ ConnectionStrings:bilgitufaniConnectionString %>"
SelectCommand="select top(10) * from duyuru_listesi order by id desc">
</asp:SqlDataSource>
</marquee>
]]>
Gördüğünüz gibi bizim kodlarımız burda.
Şimdi Yapmamız gereken ilk iş hangi nesneyi kaydıracaksak onu hazırlamak olmalı. Bunu nesne halinde hazırlamayı düşünüyorsanız bu çok daha kolay olacaktır.
Benim GridView nesnem zaten hazır aşağıdaki kodlar GridView nesneme ait.
<![CDATA[
<asp:GridView ID="duyuru_listesi" runat="server" AutoGenerateColumns="False"
DataKeyNames="id" DataSourceID="duyuru_inf" Height="104px" Width="100%"
RowStyle-HorizontalAlign="Center" RowStyle-VerticalAlign="Middle" >
<Columns>
<asp:HyperLinkField DataTextField="baslik" HeaderText="DUYURULAR"
DataNavigateUrlFields="id"
DataNavigateUrlFormatString="~/bilgi/duyurular.aspx?duyuru={0}"/>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="duyuru_inf" runat="server"
ConnectionString="<%$ ConnectionStrings:bilgitufaniConnectionString %>"
SelectCommand="select top(10) * from duyuru_listesi order by id desc">
</asp:SqlDataSource>
]]>
Bu hazır olduktan sonra ikinci yapmam gereken Marquee yani kayan yazı alanımı hazırlamak olmalıdır. Oda aşağıdaki gibi
<![CDATA[
<marquee direction="up" onmouseover="stop()"
onmouseout="start()" style="height: 176px; width:100%" scrollamount="3" >
//Nesnemizin geleceği aralık
//yani kaynağı bu arada olan kodlarımız kayacaktır
</marquee>
]]>
Kaydırma kodlarınıda yazdıktan sonra şimdi gelelim tag içindekilerin ne işe yaradığına bakmaya.
marquee direction="up" -> Kayan yazının hangi yöne kayacağını belirtir. (down,left,right olabilir)
onmouseover="stop()" -> Fare Nesnenin üzerine geldiğinde ne yapılacak
onmouseout="start()" -> Fare Nesnenin üzerinden çıkınca ne yapılacak
style="height: 176px; width:100%" -> Kayan yazı nesnesinin stili
scrollamount="3" -> Kayma Hızını Belirledik
Bu yazımızda bu kadar arkadaşlar...
İyi Çalışmalar dilerim...
Tags
Author
Burak Hamdi TUFAN
I am a software developer experienced 15 years and here to share all my programming experiences. I have worked on so many platforms and programming languages especially C, C#, C++ and Java. I am studing PhD at Kocaeli University on Aviation Technologies. I am building softwares and technologies on aviation.
Comments