Wijmo 更优美的jQuery UI部件集:从wijwizard和wijpager开始

本文演示了如何使用Wijmo的其中两个部件,wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章,请参阅Wijmo 更优美的jQuery UI部件集:发现 Wijmo

在这个快速入门,你将学习如何向一个HTML工程添加众多Wijmo部件中的两个,wijwizard 以及 wijpager。你将从添加并且自定义一个wijwizard部件入手,可以了解到一些独特的功能,然后你将学习如何通过连接到wijpager部件对wijwizard添加分页导航支持。

第一步是创建一个HTML页面,并向你的工程添加依赖项的链接。要做到这一点,你所要做的只是为每一个工程添加到内容传送网络(CDN)的链接:

注意:添加最新依赖项的引用http://www.wijmo.com/downloads.cdn

<!--jQuery 引用-->

   <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>

   <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>

<!--Wijmo 部件的JavaScript-->

   <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js" type="text/javascript"></script>

   <script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js" type="text/javascript"></script>

你还需要添加CSS样式表,可以通过将以下CDN链接添加到你的工程完成:

<!—主题-->

    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />

<!--Wijmo 部件的CSS-->

    <link href="http://cdn.wijmo.com/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了,但是你没有导航,因为你在之前的某步操作中已经把它删除了。你可以通过将wijwizardnavButtons选项设置为“edge”或者“common”将其找回,或者你可以将其和wijpage部件组合以实现分页导航。这里我们会让你这么做,因为你之前没有见过它是如何工作的。

首先,添加一个<div>的HTML元素到工程。你可以将这个<div>元素放置在用于创建wijwizard的<div>元素上面或者下面(你放置它的位置会决定wijpager相对于wijwizard的位置)。但是标记应当如下面所示:

<div id="pager">

</div>

现在向(document).ready 函数添加jQuery。你需要初始化wijpager,设置它的pageCountpageIndex,以及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更新)!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专业duilib使用+业余界面开发

duilib中将xml封装为控件简单示例(简单自定义控件,封装几个基本控件合为1个自定义控件)

31370
来自专栏小程序的道路

小程序生命周期

小程序并不是 HTML5 应用,而是更偏向于传统的 CS 架构,它是基于数据驱动的模式,一切皆组件(视图组件)。下面是小程序与普通 Web App 的对比。 ...

16310
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

27790
来自专栏前端知识分享

Angular中ui-select的使用

最近工作一直很忙,没有时间整理知识,前几天项目中需要用到angular-ui-select,实现下拉框快速过滤效果,今天有时间研究了一下,终于搞明白了。

28060
来自专栏从零开始的linux

bash

显示当前系统的进程数 # pstree init─┬─AliHids───4*[{AliHids}] ├─AliYunDun───8*[{AliYun...

32480
来自专栏逸鹏说道

【开源】1句代码搞定图片批量上传,无需什么代码功底【无语言界限】

开源地址:https://github.com/dunitian/LoTUploader WebUploader基础上的封装改善,一句代码全部实现(样式美化,实...

30890
来自专栏Youngxj

强大的jQuery图片查看器插件使用教程

33850
来自专栏前端杂货铺

iframe编程的一些问题

前几天做一个用iframe显示曲线图的demo,发现对iframe的contentDocument绑定 onclick事件都无效,而在页面中对iframe.co...

35360
来自专栏菜鸟计划

我的HTML总结之表单

表单是Web中实现交互的重要方法,用于收集用户信息并提交给服务器。 ? 表单中的9大控件 <input type="text" name="key" value...

40270
来自专栏IMWeb前端团队

Ques前端组件化体系(一)

Ques是一套组件化系统,解决如何定义、嵌套、扩展、使用组件。 项目地址:https://github.com/miniflycn/Ques 传统开发模式的痛点...

277100

扫码关注云+社区

领取腾讯云代金券