Dynamic jQuery News Ticker in Asp.net

By Unknown - Friday, September 4, 2015 - No Comments

(Horizontal News Ticker Plugin Using Jquery and css3 in Asp.net) – Đối với các Website tin tức, tin hot, tin mới là những thành phần không thể thiếu với các Website này. Thông thường để thể hiện những thông tin này, người phát triển thường sử dụng dạng tin chạy (News Ticker). Đây là một tính năng nhỏ nhưng rất hữu ích và tiện lợi cho người sử dụng vì nó giúp người xem nắm bắt được những tin mới nhất. . Dưới đây là bài viết hướng dẫn cách sử dụng Plugin jQuery News Ticker để tạo phần tin chạy nằm ngang, và thông tin tiêu đề đường dẫn hoàn toàn do bạn có thể thay đổi.

- B1: Tạo Project trong Microsoft Visual Studio 2010

- B2: Download thư viện jQuery News Ticker tại đây, copy file jquery.ticker.js và site.js vào thư mục Js

- B3: Copy file style.css và ticker-style.css vào thư mục Styles

- B4: Download thư viện ảnh tại đây và copy vào thư mục Images

- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head

<title>Dynamic jQuery News Ticker in Asp.net</title>

</head>

- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

C# Code

<%@ Page Title="Dynamic jQuery News Ticker in Asp.net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DynamicjQueryNewsTicker._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h3>

Dynamic jQuery News Ticker in Asp.net

</h3>

$(function () {

$('#js-news').ticker({

speed: 0.10,

htmlFeed: false,

fadeInSpeed: 600,

titleText: 'Latest News'

});

</script>

<asp:Repeater ID="rptObject" runat="server">

</ItemTemplate>

</asp:Repeater>

</ul>

</asp:Content>

VB.NET Code

<%@ Page Title="Dynamic jQuery News Ticker in Asp.net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DynamicjQueryNewsTicker._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<h3>

Dynamic jQuery News Ticker in Asp.net

</h3>

$(function () {

$('#js-news').ticker({

speed: 0.10,

htmlFeed: false,

fadeInSpeed: 600,

titleText: 'Latest News'

});

</script>

<asp:Repeater ID="rptObject" runat="server">

</ItemTemplate>

</asp:Repeater>

</ul>

</asp:Content>

- B7: Viết Code cho file Default.aspx

C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using Microsoft.VisualBasic;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.IO;

using System.Diagnostics;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace DynamicjQueryNewsTicker

{

public partial class _Default : System.Web.UI.Page

{

#region "Bind Data"

private void BindData()

{

DataTable objBind = new DataTable();

objBind.Columns.Add("Title", typeof(string));

objBind.Columns.Add("URL", typeof(string));

objBind.Rows.Add("Shopping Cart Checkout Process Effects Using CSS3 Morphing", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("jsGrid – Lightweight client-side data grid control jQuery plugin", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("jQuery Confirm – A multipurpose plugin for alert, confirm and dialog box", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("jQuery Mapael – Display Dynamic vector maps", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("Animated Headlines With Interchangeable Words Using CSS", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("Tweene – JavaScript Animation Proxy Library", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("Material Design Snackbars and Toasts with jQuery", "http://www.laptrinhdotnet.com");

objBind.Rows.Add("Pickli – jQuery Carousel List Picker For li Tags With Ajax Support", "http://www.laptrinhdotnet.com");

rptObject.DataSource = objBind;

rptObject.DataBind();

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

BindData();

}

catch

{

}

#endregion

}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Imports System.IO

Namespace DynamicjQueryNewsTicker

Public Class _Default

Inherits System.Web.UI.Page

#Region "Bind Data"

Private Sub BindData()

Dim objBind As New DataTable

With objBind.Columns

.Add("Title", GetType(String))

.Add("URL", GetType(String))

End With

objBind.Rows.Add("Shopping Cart Checkout Process Effects Using CSS3 Morphing", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("jsGrid – Lightweight client-side data grid control jQuery plugin", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("jQuery Confirm – A multipurpose plugin for alert, confirm and dialog box", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("jQuery Mapael – Display Dynamic vector maps", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("Animated Headlines With Interchangeable Words Using CSS", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("Tweene – JavaScript Animation Proxy Library", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("Material Design Snackbars and Toasts with jQuery", "http://www.laptrinhdotnet.com")

objBind.Rows.Add("Pickli – jQuery Carousel List Picker For li Tags With Ajax Support", "http://www.laptrinhdotnet.com")

rptObject.DataSource = objBind

rptObject.DataBind()

End Sub

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

BindData()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Chúc các bạn thành công!

Quang Bình

News Ticker