Cấp bậc tác giả:

DOTNET

Hướng dẫn làm Slide từ XML và Jquery

Được viết bởi webmaster ngày 30/06/2013 lúc 02:52 PM
Hướng dẫn cách sử dụng Load XML kết hợp với Jquery làm chuyển động hình ảnh với các vị trí theo hình được sắp xếp có chủ ý
  • 0
  • 2210
Tải tệp tin: Click ở đây

Hướng dẫn làm Slide từ XML và Jquery


Hướng dẫn cách sử dụng Load XML kết hợp với Jquery làm chuyển động hình ảnh với các vị trí theo hình được sắp xếp có chủ ý
Bước 1: Tạo CSS
#slider {
    width: 410px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

body
{
    font-family:Arial, Times New Roman, Tahoma;
    font-size:10px;
}

#sliderContent {
    width: 720px;
    position: absolute;
    top: 0;
    margin-left: 0;
}


.sliderImage {
    float: left;
    position: relative;
    display: none;
}

.sliderImage span {
    position: absolute;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.clear {
    clear: both;
}

.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 280px;
}
.right {
    right: 0;
    bottom: 0;
    width: 90px !important;
    height: 290px;
}


.cssTitle
{
    font-size:16px;
    line-height:normal;
}


.cssTitle a
{
    text-decoration:none;
    color:#fff;
}

.cssTitle a:hover
{
    text-decoration:underline;
}
Bước 2: Tạo file XML
<newslist>
  <news>
    <title>Obama chần chừ khi hôn nữ sinh Pháp </title>
    <desc>Tổng thống Mỹ Barack Obama chỉ chìa má cho một nữ sinh hôn sau khi được người đồng nhiệm Pháp khích lệ.</desc>
    <link>/</link>
    <imgurl>/img/1.jpg</imgurl>
  </news>
  <news>
    <title>Thảm họa động đất nhìn từ trên cao </title>
    <desc>Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết. Động đất tại Italy</desc>
    <link>/</link>
    <imgurl>/img/2.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/3.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/4.jpg</imgurl>
  </news>
  <news>
    <title>Israel thử hệ thống đánh chặn tên lửa Iran </title>
    <desc>
      Hàng nghìn ngôi nhà cổ ở thành phố L'Aquila, miền trung Italy, biến thành đống đổ nát sau cơn địa chấn kinh hoàng xảy ra hồi đầu tuần khiến hơn 200 người chết.
      > Động đất tại Italy
    </desc>
    <link>/</link>
    <imgurl>/img/5.jpg</imgurl>
  </news>
  
</newslist>
Bước 3: Tạo file xsl
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  
  <xsl:template match="/newslist">
    <div id="slider">
      <ul id="sliderContent">
        <xsl:apply-templates select="news"></xsl:apply-templates>
        <div class="clear sliderImage"></div>
      </ul>
    </div>
  </xsl:template>

  <xsl:template match="news">
    <li style="display: none;" class="sliderImage">
      <img width="410" height="300"><xsl:attribute name="src"><xsl:value-of select="imgurl"/></xsl:attribute></img>
      <span style="display: none;">
        <xsl:if test="position()=1"><xsl:attribute name="class">top</xsl:attribute></xsl:if>
        <xsl:if test="position()=2"><xsl:attribute name="class">left</xsl:attribute></xsl:if>
        <xsl:if test="position()=3"><xsl:attribute name="class">bottom</xsl:attribute></xsl:if>
        <xsl:if test="position()=4"><xsl:attribute name="class">right</xsl:attribute></xsl:if>
        <h1 class="cssTitle">
          <a>
            <xsl:attribute name="href"><xsl:value-of select="link"/></xsl:attribute>
            <xsl:value-of select="title"/>
          </a>
        </h1>
        <xsl:value-of select="desc"/>
      </span>
    </li>
  </xsl:template>
</xsl:stylesheet>
Bước 4: Tạo file ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="s3Slide._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Slide - DOTNET GROUP</title>
    <link href="default.css" rel="stylesheet" type="text/css" media="screen">
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/s3Slider.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider').s3Slider({
                timeOut: 4000
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Xml ID="xmlTrans" runat="server"></asp:Xml>
    </form>
</body>
</html>
Bước 5: Trong File CS viết dòng code này
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Xml;
using System.Xml.Xsl;

namespace s3Slide
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            XmlDocument doc = new XmlDocument();
            doc.Load(Server.MapPath("/contents.xml"));

            XslTransform trans = new XslTransform();
            trans.Load(Server.MapPath("/slide.xsl"));

            xmlTrans.Document = doc;
            xmlTrans.Transform = trans;
            xmlTrans.DataBind();
        }
    }
}
Thực hiện chạy Demo!

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML