07/05/2015 18

ASP.NET ile Kayan Yazı Yapımı - Marquee

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 <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...

  <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.

  <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 <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

Share this Post



Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment.

Comments

    There is no comment. Be the owner of first comment...