ASP.NET jQuery 和 XML 幻灯片控件

• 下载源代码 - 353 KB
• 查看此项目演示
• 下载最新源代码 - 353 KB

引言

在过去的几年里，图像滑块、幻灯片和广告轮播脚本在网页上变得越来越受欢迎。网络上有成千上万这样的脚本，但很难找到一个符合我要求的。我想要一个足够灵活的脚本，可以让我用作广告轮播、幻灯片或图像轮播，并带有导航控件，并且可以从 XML 文件中提取幻灯片信息。经过一番研究，我找到了来自 Dynamic Drive 的带有导航控件的 jQuery 幻灯片，以及文章 Reading XML with jQuery。我将这些发现以及一篇简短的教程 "jQuery 幻灯片与 XML" 整合到了一起。最近，我决定将其封装到 ASP.NET 用户控件中，以提高代码的可重用性。现在，我可以在页面上拥有此控件的多个实例，并且可以为每个实例自定义宽度和高度、隐藏或显示导航控件的选项、XML 文件源以及其他设置。我整理了一个分步教程，介绍了我如何实现这一点。

检查清单

• Simple Controls Gallery v1.3
• 使用 jQuery 读取 XML
• jquery-1.3.2.min.js

入门

在开始之前，请确保从 Dynamic Drive 下载 Simple Controls Gallery v1.3 的副本、Reading XML with JQuery，以及最新版本的 jQuery JavaScript 库。这是我的项目结构。欢迎下载演示。

整合所有内容

SlideShow.ascx.cs

首先，向项目添加一个 Web 用户控件，并创建公共属性和方法，以便在设计时或以编程方式与控件进行交互。

//slide div
public string WrapperID
{
    get { return this.ClientID + "Div"; }
}

WrapperID 将返回用户控件的唯一 ID。每次我们将 ASP.NET 用户控件拖放到页面上时，它都会自动包含一个唯一标识控件的 ID 属性。ID 值是标签名称和数字的组合。如果用户控件的标签名称是“SlideShow”，WrapperID 将返回 SlideShow1Div、SlideShow2Div……SlideShowNDiv。

private int _width =728;
[DefaultValue(728)]
public int Width
{
    set { this._width = value; } get { return this._width; }
}
//height of the slide
private int _height = 95;
[DefaultValue(95)]
public int Height
{
    set { this._height = value; }  get { return this._height; }
}

添加 Width 和 Height 属性，以便我们调整 div 控件的宽度和高度。

// autoplay true|false 
private bool _autoPlay = true;
[DefaultValue(true)]
public bool AutoPlay
{
    get { return this._autoPlay; }  set { this._autoPlay = value; }
}

// Show Navigation Control true|false
private bool _showNavigation = true;
[DefaultValue(true)]
public bool ShowNavigation
{
    get { return this._showNavigation; } set{ this._showNavigation = value; }
}

private int _delay_btw_slide = 10000;
/// delay between slide in miliseconds 
[DefaultValue(10000)]
public int Delay_btw_slide
{
    set { this._delay_btw_slide = value; }   get { return this._delay_btw_slide; }
}

private int _fadeDuration = 2000;
/// transition duration (milliseconds) 
[DefaultValue(2000)]
public int FadeDuration
{
    set { this._fadeDuration = value; }  get { return this._fadeDuration; }
}
private int _cycles_before_stopping = 99;
/// cycles befote stopping
[DefaultValue(99)]
public int Cycles_before_stopping
{
    set { this._cycles_before_stopping = value; } 
    get { return this._cycles_before_stopping; }
}

// previous button
private string _btnPrevious = "~/images/previous.gif";
[Category("Appearance"), Localizable(true)]
[Description("Previous button"), 
 DefaultValue("~/images/previous.gif"), Bindable(true)]
[Editor("System.Web.UI.Design.ImageUrlEditor, 
         System.Design, Version=2.0.0.0, Culture=neutral, 
PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]    [UrlProperty]
public string BtnPrevious
{
    get { return this._btnPrevious; } set { this._btnPrevious = value;}
}

// Next button
// Play button 
// Pause button

• AutoPlay - true = 自动开始幻灯片播放，无需按播放按钮；反之亦然。
• ShowNavigation - true = 显示导航控件，或 false = 隐藏导航控件。
• Delay_btw_slide - 获取或设置每张幻灯片之间的延迟。
• FadeDuration - 获取或设置每张幻灯片之间的淡入淡出持续时间。
• Cycles_before_stopping - 获取或设置停止旋转之前的旋转次数。如果我们设置为 99，它将旋转 99 次然后停止，直到我们再次点击播放按钮。
• BtnPrevious、BtnNext、BtnPlay、BtnPause - 分别获取或设置“上一个”、“下一个”、“播放”和“暂停”按钮的图像。这些属性接受相对 URL 或绝对 URL 路径指向按钮图像。如果您使用的是相对 URL，请确保将 *images* 文件夹放在应用程序的根目录下。

//xml file
private string _xmlSource = "~/xml/sites.xml";
[UrlProperty]
[Bindable(true)]
[DefaultValue("~/xml/sites.xml")]
public string XMLSource
{
    get { return this._xmlSource; } set { this._xmlSource = value; }
}

//xPath
private string _xPath = "site";
[DefaultValue("site")]
public string xPath
{
    get { return this._xPath; }  set { this._xPath = value; }
}

添加一个属性来获取和设置 XML 源路径。默认路径设置为 *~/xml/sites.xml*。此属性接受指向 XML 文件的相对 URL 或绝对 URL 路径。如果您使用的是相对 URL，请确保将 XML 文件夹放在应用程序的根目录下。然后，添加另一个属性 XPATH，用于导航 XML 文档中的元素和属性。

void CreateScript()
{
    StringBuilder ssScript = new StringBuilder(string.Empty);
    string arrName = "myArray" + this.WrapperID;

    //read XML
    ssScript.Append("var " + arrName+ "= [];");
    ssScript.Append("$(document).ready(function() {");
    ssScript.Append(" $.ajax({");
    ssScript.Append("type: \"GET\",");
    ssScript.Append("url: '" + ResolveUrl(XMLSource) + "',");
    ssScript.Append("cache: true,");
    ssScript.Append("dataType: \"xml\",");
    ssScript.Append("success: function(xml) {");
    ssScript.Append("var count = 0;");
    ssScript.Append("$(xml).find('" + xPath + "').each(function() {");

    ssScript.Append(" var url = $(this).find('url').text();");
    ssScript.Append("var target = $(this).find('target').text();");
    ssScript.Append("var imageURL = $(this).find('imageURL').text();");
    ssScript.Append("var alt = $(this).find('alt').text();");

    ssScript.Append(arrName + "[parseInt(count)] = 
             new Array(imageURL, url, target, alt); ");
    ssScript.Append("count++;");
    ssScript.Append("});");

    //slide-shows
    ssScript.Append(" var mygallery"+this.WrapperID+" = new simpleGallery({");
    ssScript.Append(" wrapperid: '" + this.ClientID + 
                    "_" + this.WrapperID + "',");
    //width/height of gallery in pixels.
    //Should reflect dimensions of the images exactly
    ssScript.Append("dimensions: [" + Width.ToString() + 
                    ","+ Height.ToString()+"],"); 
    ssScript.Append("imagearray: "+arrName+","); //array of images
    ssScript.Append("navimages: ['" + ResolveUrl(BtnPrevious) + "', '" + 
                    ResolveUrl(BtnPlay) + "', '" + ResolveUrl(BtnNext) + 
                    "', '" + ResolveUrl(BtnPause) + "'],");
    ssScript.Append("showpanel: '" + ShowNavigation.ToString().ToLower() + "',");
    ssScript.Append(" autoplay: [" + AutoPlay.ToString().ToLower() + "," + 
                    Delay_btw_slide.ToString() + "," + 
                    Cycles_before_stopping.ToString() + "],"); 
    //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
    ssScript.Append(" persist: true,");
    //transition duration (milliseconds)
    ssScript.Append(" fadeduration:" + FadeDuration.ToString() + ",");
    //event that fires when gallery has initialized/ ready to run
    ssScript.Append(" oninit: function() {");
    ssScript.Append("  },");
    //event that fires after each slide is shown
    ssScript.Append("  onslide: function(curslide, i) {");
    //curslide: returns DOM reference to current
    // slide's DIV (ie: try alert(curslide.innerHTML)
    //i: integer reflecting current image within collection
    //   being shown (0=1st image, 1=2nd etc)
    ssScript.Append("   }");
    ssScript.Append("  })");
    ssScript.Append("  }");
    ssScript.Append("   });");
    ssScript.Append(" });");

        ClientScriptManager jScript = Page.ClientScript;
        jScript.RegisterClientScriptBlock(this.GetType(), 
                Guid.NewGuid().ToString(), ssScript.ToString(), true);
    }

然后，添加一个方法以编程方式渲染 JavaScript。此 JavaScript 的主要目的是将幻灯片信息从 XML 文件读取到数组中并初始化幻灯片属性。此 JavaScript 的关键项是数组变量、HTML div 控件和幻灯片变量。为了在页面上拥有多个幻灯片实例，我们必须确保为提到的关键项分配唯一的 ID 和名称。我们可以利用 WrapperID 属性为每个实例创建唯一的名称和 ID。请注意，正在使用 ResolveUrl 方法，以便浏览器可以解析图像和 XML 文件的 URL。其余代码非常直接；您可以从 Dynamic Drive 下载原始代码进行比较。

void CreateDiv()
{
    System.Web.UI.HtmlControls.HtmlGenericControl ssDivWrapper = 
       new System.Web.UI.HtmlControls.HtmlGenericControl("div");
    ssDivWrapper.ID = this.WrapperID;
    ssDivWrapper.Style.Add("background", "white none repeat scroll 0% 0%");
    ssDivWrapper.Style.Add(HtmlTextWriterStyle.Overflow, "hidden");
    ssDivWrapper.Style.Add(HtmlTextWriterStyle.Position, "relative");
    ssDivWrapper.Style.Add(HtmlTextWriterStyle.Visibility, "visible");
    ssDivWrapper.Style.Add(" -moz-background-clip", "border");
    ssDivWrapper.Style.Add("-moz-background-origin", "padding");
    ssDivWrapper.Style.Add("-moz-background-inline-policy", "continuous");

    this.Controls.Add(ssDivWrapper);
}

CreateDiv 方法将在页面上动态生成 HTML div。

//load the javascript
internal void LoadJScript()
{
    ClientScriptManager script = Page.ClientScript;
    //prevent duplicate script
    if (!script.IsStartupScriptRegistered(this.GetType(), "JQuerySlideShowJS"))
    {
        script.RegisterClientScriptBlock(this.GetType(), "JQuerySlideShowJS",
           "<script src="%22%20+%20ResolveUrl%28%22%7E/" + 
           "SlideShowControl/js/jquery-1.3.2.min.js%22%29%20+" + 
           "%20%22" type="text/javascript"></script>");
    }

    if (!script.IsStartupScriptRegistered(this.GetType(), "SimpleGalleryJS"))
    {
        script.RegisterClientScriptBlock(this.GetType(), "SimpleGalleryJS",
           "<script src="%22%20+%20ResolveUrl%28%22%7E/" + 
           "SlideShowControl/js/simplegallery.js%22%29%20+%20%22" type="text/" + 
           "javascript"></script>");
    }
}

LoadJScript 方法的目的是动态加载 *jquery-1.3.2.min.js* 和 *simplegallery.js*，且不重复。也就是说，如果我们将在页面上拖放 10 个幻灯片控件，它只会将 JavaScript 添加到 ASP.NET 页面一次。这将有助于避免不必要的客户端脚本的组装。

simplegallery.js

我不会在这里发布此 JavaScript 的全部内容，但我会列出我所做的更改。

1. 从 simpleGallery_navpanel 接口中移除了静态图像按钮属性，因为图像按钮将通过 CreateScript 方法动态分配。
2. 修改了脚本以从不同的接口读取图像按钮属性。
3. 添加了逻辑以通过 ShowNavigation 属性来隐藏和显示导航控件。
4. 为图像按钮添加了替代文本。

Using the Code

<uc1:SlideShow ID="SlideShow2" runat="server" />

将用户控件拖放到页面上。这是用户控件的默认设置。

<uc1:SlideShow ID="SlideShow5" runat="server" 
    BtnNext="~/images/nav-arrow-right.gif" 
    BtnPrevious="~/images/nav-arrow-left.gif" 
    AutoPlay="false" />

以上是如何设置图像按钮和 AutoPlay 属性的示例。

<uc1:SlideShow ID="SlideShow7" runat="server" XPath="site500x281"  
    Width="500" Height="281" ShowNavigation="true" 
    XMLSource="~/xml/500x281.xml"/>

上面的示例演示了如何设置 HTML div 控件的宽度和高度。该控件从 *500x821.xml* 文件获取图像信息，并选择 *site500x281* 节点。默认情况下，ShowNavigation 属性设置为 true。

<uc1:SlideShow ID="SlideShow6" runat="server" BtnNext="~/images/nav-arrow-right.gif" 
        BtnPrevious="~/images/nav-arrow-left.gif" 
        XMLSource="~/xml/120x600.xml" XPath="site120x600" 
         Width="120" Height="600" />

<uc1:SlideShow ID="SlideShow1" XPath="site120x60" 
    Width="120" Height="60"
    ShowNavigation="false" 
    runat="server" XMLSource="~/xml/sites2.xml"  />

结论

如果您不确定图像或 XML 文件的相对路径，我建议使用绝对链接。请记住，XML 文件的链接必须在同一域内，不能跨域调用。此外，尽量不要将所有图像信息放在一个 XML 文件中用于多个幻灯片控件。想象一下，如果我们有一个 50KB 大小的 XML 文件，页面上有 10 个幻灯片控件，每个控件都使用相同的 XML 源。这将花费我们 500KB 的带宽并降低加载速度。我希望有人会发现这个教程有用，并与我分享一些关于如何改进它的想法。

在 IE 6.0/7.0/8.0、Google Chrome 和 Firefox 上测试。

参考文献

• 内容页中的控件 ID 命名
• 控件..::.ResolveUrl 方法
• Dynamic Drive
• 如何：以编程方式创建 ASP.NET 用户控件实例
• 如何：设置 ASP.NET 服务器控件属性
• 页面..::.IsStartupScriptRegistered 方法
• 使用 jQuery 读取 XML