本文以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);
测试一下,我们的代码可以很正常的工作.