正文演示了什么样利用Wijmo的内部三个部件,wijwizard 以及
wijpager。要是你指望看到Wijmo的其他作品,请参阅Wijmo 更赏心悦目的jQuery
UI部件集:发现
Wijmo

在那几个便捷入门,你将学习如何向一个HTML工程添加众多Wijmo部件中的七个,wijwizard
以及
wijpager。你将从充裕还要自定义一个wijwizard部件入手,可以了然到有的奇异的功能,然后您将学习怎么样通过连日到wijpager部件对wijwizard增进分页导航支持。

率先步是创办一个HTML页面,并向你的工程添加凭借项的链接。要到位那或多或少,你所要做的只是为每一个工程添加到内容传送互联网(CDN)的链接:

注意:jQuery,请从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添加到您的页面上就是那般简单。保存你的工程,并在浏览器中打开。它将看起来像下边那样:

jQuery 1

当部件包罗多于一个页面的时候,导航按钮将自动的被添加到部件上。你可以变更,甚至删除控件上展现的领航按钮。假使您想删除导航按钮,只要求将’none’作为参数传递给部件的navButton慎选,如上边的台本:

$("#pages").wijwizard({

navButtons: 'none'

});

 

 

保存你的工程,并刷新浏览器,wijwizard将不再显示导航按钮,如下图所示:

jQuery 2

你还是可以向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标签)。保存该工程,并且刷新浏览器。该工程看起来像是那样:

jQuery 3

现在您抱有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紧邻。结果类似于以下内容:

jQuery 4

点击数字按钮之一,你可以发现已经足以应用wijpager部件对wijwizard开展分页浏览了。

理想的结果,不是啊?使用Wijmo,你总是可以很简单的自定义你的构件。你通过这些高速入门得到的大部文化可以应用到其它Wijmo部件,不过那只是具有你能由此Wijmo完毕效益的冰山一角。

有关Wijmo部件的更详尽的消息,请访问 Wijmo
文档
,在这边,你可以找到每一个单身的部件的牵线和API参考。

万一你想快捷上手Wijmo,请参考 Wijmo
完整的高效早先

有关脚本的越多高档示范,请访问示范页面。

Wijmo下载,请进入Studio for ASP.NET Wijmo 2012
v1正式发表(2012.03.22更新)!

相关文章

网站地图xml地图