使用ScriptSharp引入已有的jquery插件

本文以Jquery 插件imageZoom为例,针对其提供的API,封装成对应的C# API,然后在ScriptSharp中进行使用.

关于ImageZoom的信息,请参考: http://labs.skengdon.com/imageZoom/?action=demo

 

从网站我们可以看到,该插件的调用代码为:

$('#holder1').imageZoom({

    small: '/images/field700.jpg',

    original: '/images/field.jpg',

    viewpoint: {

        width: 250,

        height: 175

    }

});

　　

封通过后的C# API为:

// ImageZoom.cs
//

using System.Runtime.CompilerServices;
using jQueryApi;

/// <summary>
///JQUERY ZOOMABLE PLUGIN
/// Adds zooming and dragging to an image, whilst also keeping the associated image map in sync with the image. 
/// Zoom with the mouse wheel or programmatically
/// </summary>
[Imported]
public class ImageZoomObject : jQueryObject
{
    [ScriptName("imageZoom")]
    public jQueryObject ImageZoom()
    {
        return null;
    }
    [ScriptName("imageZoom")]
    public jQueryObject ImageZoom(ImageZoomOptions options)
    {
        return null;
    }
}

[Imported]
[ScriptName("Object")]
public sealed class ImageZoomOptions
{
    /// <summary>
    /// 小尺寸图片
    /// </summary>
    public string small;
    /// <summary>
    /// 原始的大图片
    /// </summary>
    public string original;
    /// <summary>
    /// 放大镜的参数
    /// </summary>
    public ViewPoint viewpoint;

    public ImageZoomOptions()
    {
    }

    public ImageZoomOptions(params object[] nameValuePairs)
    {
    }
}

[Imported]
[ScriptName("Object")]
public class ViewPoint
{
    /// <summary>
    /// 宽度
    /// </summary>
    public int width;
    /// <summary>
    /// 高度
    /// </summary>
    public int height;
}

在调用的时候,我们就可以使用如下的C#代码来调用了:

ImageZoomObject imageZoomObject = (ImageZoomObject)jQuery.Select("#holder1");

ImageZoomOptions imageZoomOptions = new ImageZoomOptions();

imageZoomOptions.original = " /images/field.jpg";

imageZoomOptions.small = " /images/field700.jpg";

imageZoomOptions.viewpoint = new ViewPoint();

imageZoomOptions.viewpoint.height = 100;

imageZoomOptions.viewpoint.width = 100;

imageZoomObject.imageZoom(imageZoomOptions);

 

OK,代码完成,我们看一下ScriptSharp给我们具体生成了什么Javascript代码呢:

var imageZoomObject = $('#holder1');

var imageZoomOptions = {};

imageZoomOptions.original = ' /images/field.jpg';

imageZoomOptions.small = ' /images/field700.jpg';

imageZoomOptions.viewpoint = {};

imageZoomOptions.viewpoint.height = 100;

imageZoomOptions.viewpoint.width = 100;

imageZoomObject.imageZoom(imageZoomOptions);

测试一下,我们的代码可以很正常的工作.