使用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);

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

转载于:https://www.cnblogs.com/laojia/archive/2011/10/07/2200564.html