» » » Dynamic Responsive jQuery Content Slider Plugin in Asp.net

(Dynamic  jQuery Content Slider Plugin in Asp.net) – Slider Pro là một plugin jQuery chuyên nghiệp cho phép bạn hiển thị nội dung và hình ảnh. Plugin này rất phù hợp với các trang tin tức để xây dựng phần tin mới hoặc tin hot. Bài viết dưới đây sẽ hướng dẫn các bạn cách sử dụng Slider Pro kết hợp với Control Repeater để tạo Content Slider đẹp và chuyên nghiệp.


Nghe những bài hát đỉnh nhất về Thấy cô giáo - Nghe trên Youtube


Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



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

- B2: Download thư viện Slider Pro tại đây,  copy file jquery.sliderPro.js, jquery.sliderPro.min.js,  jquery-1.11.0.min.js  vào thư mục Js

- B3: Copy file slider-pro.min.css vào thư mục Styles

- B4: Mở file Site.css và nhập đoạn Code phía dưới
.slider-pro {
    font-family: 'Open Sans',Arial;
}

#slider .sp-thumbnail-image-container{
       width: 100px;
       height: 80px;
       overflow: hidden;
       float: left;
}

#slider .sp-thumbnail-image{
       height: 100%;
}

#slider .sp-thumbnail-text{
       width: 170px;
    float: right;
    padding: 8px;
    background-color: #F0F0F0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#slider .sp-thumbnail-title{
       margin-bottom: 5px;
       text-transform: uppercase;
       color: #333;
}

#slider .sp-thumbnail-description{
       font-size: 14px;
       color: #333;
}

@media (max-width: 500px) {
       #slider .sp-thumbnail{
              text-align: center;
       }

       #slider .sp-thumbnail-image-container{
              display: none;
       }

       #slider .sp-thumbnail-text{
              width: 120px;
       }

       #slider .sp-thumbnail-title{
              font-size: 12px;
              text-transform: uppercase;
       }

       #slider .sp-thumbnail-description{
              display: none;
       }
}

- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head runat="server">
    <title>jQuery Content Slider Plugin in Asp.net Repeater</title>
    <link rel="stylesheet"href="Styles/Site.css"type="text/css"/>
    <link rel="stylesheet"type="text/css"href="Styles/slider-pro.min.css"media="screen"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600'rel='stylesheet'type='text/css' />
    <script type="text/javascript"src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript"src="js/jquery.sliderPro.min.js"></script>
    <asp:ContentPlaceHolderID="HeadContent"runat="server">
    </asp:ContentPlaceHolder>
</head>

- B6: Mở file Default.aspx dưới dạng HTML và  nhập mã HTML
<%@ PageTitle="jQuery Content Slider Plugin in Asp.net Repeater" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryContentSliderPlugin._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
        $(document).ready(function ($) {
            $('#slider').sliderPro({
                width: 670,
                height: 500,
                orientation: 'vertical',
                loop: false,
                arrows: true,
                buttons: false,
                thumbnailsPosition: 'right',
                thumbnailPointer: true,
                thumbnailWidth: 290,
                breakpoints: {
                    800: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 270,
                        thumbnailHeight: 100
                    },
                    500: {
                        thumbnailsPosition: 'bottom',
                        thumbnailWidth: 120,
                        thumbnailHeight: 50
                    }
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="slider" class="slider-pro">
        <div class="sp-slides">
            <asp:Repeater ID="rptSliders"OnItemDataBound="rptSliders_ItemDataBound"runat="server">
                <ItemTemplate>
                    <divclass="sp-slide">
                        <img id="imgblank" runat="server" class="sp-image" src="images/blank.gif" alt="" />
                        <div class="sp-caption"><%#Eval("Title")%></div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <div class="sp-thumbnails">
            <asp:Repeater ID="rptThumbnails"runat="server">
                <ItemTemplate>
                    <divclass="sp-thumbnail">
                        <div class="sp-thumbnail-image-container">
                            <img alt="" class="sp-thumbnail-image"src='<%# Eval("ImageName_Thumbnail")%>' />
                                   </div>
                        <div class="sp-thumbnail-text">
                            <div class="sp-thumbnail-title"><%# Eval("Caption")%></div>
                            <div class="sp-thumbnail-description"><%# Eval("Description")%></div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
</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.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace jQueryContentSliderPlugin
{
    public partial class _Default : System.Web.UI.Page
    {
        #region"Bind Data"

        private voidBindData()
        {
            DataTable objBind = newDataTable();
            var oColumns = objBind.Columns;
            oColumns.Add("Caption", typeof(string));
            oColumns.Add("data-src", typeof(string));
            oColumns.Add("data-retina", typeof(string));
            oColumns.Add("ImageName_Thumbnail", typeof(string));
            oColumns.Add("Title", typeof(string));
            oColumns.Add("Description", typeof(string));

            objBind.Rows.Add("Title 1", "http://bqworks.com/slider-pro/images/image1_medium.jpg", "http://bqworks.com/slider-pro/images/image1_large.jpg", "http://bqworks.com/slider-pro/images/image1_thumbnail.jpg", "Caption 1", "Styles for Description in Slider1");
            objBind.Rows.Add("Title 2", "http://bqworks.com/slider-pro/images/image2_medium.jpg", "http://bqworks.com/slider-pro/images/image2_large.jpg", "http://bqworks.com/slider-pro/images/image2_thumbnail.jpg", "Caption 2", "Styles for Description in Slider2");

            objBind.Rows.Add("Title 3", "http://bqworks.com/slider-pro/images/image3_medium.jpg", "http://bqworks.com/slider-pro/images/image3_large.jpg", "http://bqworks.com/slider-pro/images/image3_thumbnail.jpg", "Caption 3", "Styles for Description in Slider3");
            objBind.Rows.Add("Title 4", "http://bqworks.com/slider-pro/images/image4_medium.jpg", "http://bqworks.com/slider-pro/images/image4_large.jpg", "http://bqworks.com/slider-pro/images/image4_thumbnail.jpg", "Caption 4", "Styles for Description in Slider4");

            objBind.Rows.Add("Title 5", "http://bqworks.com/slider-pro/images/image5_medium.jpg", "http://bqworks.com/slider-pro/images/image5_large.jpg", "http://bqworks.com/slider-pro/images/image5_thumbnail.jpg", "Caption 5", "Styles for Description in Slider5");
            objBind.Rows.Add("Title 6", "http://bqworks.com/slider-pro/images/image6_medium.jpg", "http://bqworks.com/slider-pro/images/image6_large.jpg", "http://bqworks.com/slider-pro/images/image6_thumbnail.jpg", "Caption 6", "Styles for Description in Slider6");

            objBind.Rows.Add("Title 7", "http://bqworks.com/slider-pro/images/image7_medium.jpg", "http://bqworks.com/slider-pro/images/image7_large.jpg", "http://bqworks.com/slider-pro/images/image7_thumbnail.jpg", "Caption 7", "Styles for Description in Slider7");
            objBind.Rows.Add("Title 8", "http://bqworks.com/slider-pro/images/image8_medium.jpg", "http://bqworks.com/slider-pro/images/image8_large.jpg", "http://bqworks.com/slider-pro/images/image8_thumbnail.jpg", "Caption 8", "Styles for Description in Slider8");

            rptSliders.DataSource = objBind;
            rptSliders.DataBind();
            rptThumbnails.DataSource = objBind;
            rptThumbnails.DataBind();
        }

        #endregion

        #region"Repeater Methods"

        protected voidrptSliders_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgse)
        {
            if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)
            {
                string data_src = DataBinder.Eval(e.Item.DataItem, "data-src").ToString();
                string data_retina = DataBinder.Eval(e.Item.DataItem, "data-retina").ToString();

                HtmlImage imgblank = (HtmlImage)e.Item.FindControl("imgblank");
                if (imgblank != null)
                {
                    imgblank.Attributes.Add("data-src", data_src);
                    imgblank.Attributes.Add("data-retina", data_retina);
                }
            }
        }

        #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

Namespace jQueryContentSliderPlugin

    Public Class _Default
        Inherits System.Web.UI.Page

#Region "Bind Data"

        Private SubBindData()
            Dim objBind As New DataTable
            With objBind.Columns
                .Add("Caption", GetType(String))
                .Add("data-src", GetType(String))
                .Add("data-retina", GetType(String))
                .Add("ImageName_Thumbnail", GetType(String))
                .Add("Title", GetType(String))
                .Add("Description", GetType(String))
            End With

            objBind.Rows.Add("Title 1", "http://bqworks.com/slider-pro/images/image1_medium.jpg", "http://bqworks.com/slider-pro/images/image1_large.jpg", "http://bqworks.com/slider-pro/images/image1_thumbnail.jpg", "Caption 1", "Styles for Description in Slider1")
            objBind.Rows.Add("Title 2", "http://bqworks.com/slider-pro/images/image2_medium.jpg", "http://bqworks.com/slider-pro/images/image2_large.jpg", "http://bqworks.com/slider-pro/images/image2_thumbnail.jpg", "Caption 2", "Styles for Description in Slider2")

            objBind.Rows.Add("Title 3", "http://bqworks.com/slider-pro/images/image3_medium.jpg", "http://bqworks.com/slider-pro/images/image3_large.jpg", "http://bqworks.com/slider-pro/images/image3_thumbnail.jpg", "Caption 3", "Styles for Description in Slider3")
            objBind.Rows.Add("Title 4", "http://bqworks.com/slider-pro/images/image4_medium.jpg", "http://bqworks.com/slider-pro/images/image4_large.jpg", "http://bqworks.com/slider-pro/images/image4_thumbnail.jpg", "Caption 4", "Styles for Description in Slider4")

            objBind.Rows.Add("Title 5", "http://bqworks.com/slider-pro/images/image5_medium.jpg", "http://bqworks.com/slider-pro/images/image5_large.jpg", "http://bqworks.com/slider-pro/images/image5_thumbnail.jpg", "Caption 5", "Styles for Description in Slider5")
            objBind.Rows.Add("Title 6", "http://bqworks.com/slider-pro/images/image6_medium.jpg", "http://bqworks.com/slider-pro/images/image6_large.jpg", "http://bqworks.com/slider-pro/images/image6_thumbnail.jpg", "Caption 6", "Styles for Description in Slider6")

            objBind.Rows.Add("Title 7", "http://bqworks.com/slider-pro/images/image7_medium.jpg", "http://bqworks.com/slider-pro/images/image7_large.jpg", "http://bqworks.com/slider-pro/images/image7_thumbnail.jpg", "Caption 7", "Styles for Description in Slider7")
            objBind.Rows.Add("Title 8", "http://bqworks.com/slider-pro/images/image8_medium.jpg", "http://bqworks.com/slider-pro/images/image8_large.jpg", "http://bqworks.com/slider-pro/images/image8_thumbnail.jpg", "Caption 8", "Styles for Description in Slider8")

            rptSliders.DataSource = objBind
            rptSliders.DataBind()
            rptThumbnails.DataSource = objBind
            rptThumbnails.DataBind()
        End Sub

#End Region

#Region "Repeater Methods"

        Private SubrptSliders_ItemDataBound(ByVal sender As Object, ByVal e AsSystem.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptSliders.ItemDataBound
            If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then
                Dim data_src AsString = DataBinder.Eval(e.Item.DataItem, "data-src")
                Dim data_retina AsString = DataBinder.Eval(e.Item.DataItem, "data-retina")

                Dim imgblank AsHtmlControls.HtmlImage = DirectCast(e.Item.FindControl("imgblank"), HtmlControls.HtmlImage)
                If Notimgblank Is NothingThen
                    imgblank.Attributes.Add("data-src", data_src)
                    imgblank.Attributes.Add("data-retina", data_retina)
                End If
            End If
        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

End Namespace

Code Example C#, Code Example VB.NET
Code Example C#, Code Example VB.NET



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

Quang Bình
7:32:00 PM
Gia Khang
,

0 comments Blogger 0 Facebook

Post a Comment

Subscribe to: Post Comments ( Atom )
 
lập trình đốt nét © 2013. All Rights Reserved. Powered by Blogger
Top