(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
- 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
<head id="Head1" runat="server">
<title>Dynamic jQuery News Ticker in Asp.net</title>
<link href="~/Styles/Site.css"rel="stylesheet"type="text/css"/>
<link href="Styles/style.css?v=2011-04-25"rel="stylesheet"type="text/css"/>
<link href="Styles/ticker-style.css"rel="stylesheet"type="text/css"/>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="Js/jquery.ticker.js"type="text/javascript"></script>
<script src="Js/site.js"type="text/javascript"></script>
</head>
- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code
<%@ PageTitle="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>
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
htmlFeed: false,
fadeInSpeed: 600,
titleText: 'Latest News'
});
});
</script>
<ul id="js-news"class="js-hidden">
<asp:Repeater ID="rptObject"runat="server">
<ItemTemplate>
<liclass="news-item"><a href='<%# Eval("URL")%>'><%# Eval("Title")%></a></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</asp:Content>VB.NET Code
<%@ PageTitle="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>
<script type="text/javascript">
$(function () {
$('#js-news').ticker({
speed: 0.10,
htmlFeed: false,
fadeInSpeed: 600,
titleText: 'Latest News'
});
});
</script>
<ul id="js-news"class="js-hidden">
<asp:Repeater ID="rptObject"runat="server">
<ItemTemplate>
<liclass="news-item"><a href='<%# Eval("URL")%>'><%# Eval("Title")%></a></li>
</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 voidBindData()
{
DataTable objBind = newDataTable();
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 voidPage_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 SubBindData()
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 SubPage_Load(ByVal sender AsObject, 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
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment