Wijmo 更优美的jQuery UI部件集：从wijwizard和wijpager开始
本文演示了如何使用Wijmo的其中两个部件， wijwizard 以及 wijpager 。如果你期望看到Wijmo的其他文章，请参阅 Wijmo 更优美的jQuery UI部件集：发现 Wijmo 。
在这个快速入门，你将学习如何向一个HTML工程添加众多Wijmo部件中的两个， wijwizard 以及 wijpager 。你将从添加并且自定义一个 wijwizard 部件入手，可以了解到一些独特的功能，然后你将学习如何通过连接到 wijpager 部件对 wijwizard 添加分页导航支持。
第一步是创建一个HTML页面，并向你的工程添加依赖项的链接。要做到这一点，你所要做的只是为每一个工程添加到内容传送网络（CDN）的链接：
注意： 请从CDN添加最新依赖项的引用 http://HdhCmsTestwijmo测试数据/downloads.cdn 。
<!--jQuery 引用--> <script src="http://ajax.aspnetcdn测试数据/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn测试数据/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script> <!--Wijmo 部件的JavaScript--> <script src="http://cdn.wijmo测试数据/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo测试数据/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script>
你还需要添加CSS样式表，可以通过将以下CDN链接添加到你的工程完成：
<!—主题-->
<link href="http://cdn.wijmo测试数据/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />
<!--Wijmo 部件的CSS-->
<link href="http://cdn.wijmo测试数据/jquery.wijmo-complete.all.2.0.0.min.css" rel="stylesheet" type="text/css" />
你要在这个快速开始中做的第一件事情就是创建一个不包含任何Header，具有三个页的基本 wijwizard 部件。通过将以下标记放置在HTML页面的主体内开始我们创建 wijwizard HTML元素的工作：
<div id="pages"> <div>Page 1</div> <div>Page 2</div> <div>Page 3</div> </div>
<div> HTML元素是你将用来创建部件的内容。同时<div>元素的标识符被设置成“pages”，你将在接下来通过jQuery访问这个元素以完成对部件的初始化。
请注意，为了向部件添加页，你所要做的只是将文本放置在一对<div>标签中间。如果你愿意，同样也可以将一对<p>标签嵌套在一对<div>标签中间。
现在我们完成一个可工作的部件唯一需要做的事情就是，初始化这个 wijwizard 部件。请将以下脚本放置在<head>和</head>标签中间以初始化该部件：
<script id="scriptInit" type="text/javascript">
$(document).ready( function () {
$( "#pages" ).wijwizard();
});
</script>
将一个可以工作的wijwizard添加到你的页面上就是这么简单。保存你的工程，并在浏览器中打开。它将看起来像下面这样：
当部件包含多于一个页面的时候，导航按钮将自动的被添加到部件上。你可以更改，甚至删除控件上显示的导航按钮。如果你想删除导航按钮，只需要将’none’作为参数传递给部件的 navButton 选项，如下面的脚本：
$("#pages" ).wijwizard({
navButtons: 'none'
});
保存你的工程，并刷新浏览器， wijwizard 将不再显示导航按钮，如下图所示：
你还可以向 wijwizard 添加header。这个过程很简单：你所要做的是创建一个具有三个列表项的列表（有序或者无序），之后为每一个项目添加一个header标签以及一些文字。如下所示：
< ol >
< li >
< h1 > Header 1 </ h1 >
</ li >
< li >
< h1 > Header 2 </ h1 >
</ li >
< li >
< h1 > Header 3 </ h1 >
</ li >
</ ol >
以上标记应当放置在<div id="pages">和</div>标记之间（不要删除嵌套的DIV标签）。保存该工程，并且刷新浏览器。该工程看起来像是这样：
现在你拥有header了，但是你没有导航，因为你在之前的某步操作中已经把它删除了。你可以通过将 wijwizard 的 navButtons 选项设置为“edge”或者“common”将其找回，或者你可以将其和 wijpage 部件组合以实现分页导航。这里我们会让你这么做，因为你之前没有见过它是如何工作的。
首先，添加一个<div>的HTML元素到工程。你可以将这个<div>元素放置在用于创建 wijwizard 的<div>元素上面或者下面（你放置它的位置会决定 wijpager 相对于 wijwizard 的位置）。但是标记应当如下面所示：
< div id ="pager" > </ div >
现在向 (document).ready 函数添加jQuery。你需要初始化wijpager，设置它的 pageCount ， pageIndex ，以及 mode 属性，同时添加一个函数处理它的 pageIndexChanged 事件。要做到这一点，向 (document).ready 函数添加以下脚本：
$("#pager" ).wijpager({
pageCount: $( "#pages").wijwizard('count' ),
pageIndex: $( "#pages").wijwizard('option', 'activeIndex' ),
mode: "numeric" ,
pageIndexChanged: function () {
var pageIndex = $("#pager").wijpager("option", "pageIndex" );
$( "#pages" ).wijwizard({ activeIndex: pageIndex });
}
});
现在请刷新你的浏览器，此时可以观察到 wijpager 出现在 wijwizard 附近。结果类似于以下内容：
点击数字按钮之一，你可以发现已经可以使用 wijpager 部件对 wijwizard 进行分页浏览了。
漂亮的结果，不是吗？使用Wijmo，你总是可以很容易的自定义你的部件。你通过这个快速入门获得的大多数知识可以应用到其他Wijmo部件，但是这只是所有你能通过Wijmo实现功能的冰山一角。
关于Wijmo部件的更详细的信息，请访问 Wijmo 文档 ，在那里，你可以找到每一个独立的部件的介绍和API参考。
如果你想快速上手Wijmo，请参考 Wijmo 完整的快速开始 。
有关脚本的更多高级示例，请访问 演示页面。
Wijmo下载，请进入 Studio for ASP.NET Wijmo 2012 v1正式发布（2012.03.22更新）!
葡萄城控件产品网站： http://HdhCmsTestgcpowertools测试数据.cn/
葡萄城技术支持论坛： http://gcdn.grapecity测试数据/
分类: Web技术
作者： Leo_wl
出处： http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于Wijmo 更优美的jQuery UI部件集：从wijwizard和wijpager开始的详细内容...