jQuery技术

Wijmo 更优美的jQuery UI部件集:发现 Wijmo(2)

字号+ 作者:H5之家 来源:H5之家 2016-05-10 17:00 我要评论( )

在以上标记语法中,你应当注意到了,有一些.js文件标记为*.min.js。这些文件已经被精简并压缩,换句话说,所有不必要的字符都已经被删除以便网页加载的速度更快。你也许同时注意到,没有到独立的.js文件的引用。所

在以上标记语法中,你应当注意到了,有一些.js文件标记为*.min.js。这些文件已经被精简并压缩,换句话说,所有不必要的字符都已经被删除以便网页加载的速度更快。你也许同时注意到,没有到独立的.js文件的引用。所有部件的JavaScript已经被合并成一个文件,比如说,wijmo-complete.2.0.0.min.js 。如果你希望链接到单独的.js文件,请参考每一个部件的Dependencies主题。

 

创建你的第一个Wijmo工程

现在你已经掌握了jQuery的主要概念,已经可以开始招收创建你的第一个工程。在此示例工程,你将学习添加一个Wijmo部件,wijcalendar,到你的工程,然后定制一些选项。

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

注意:: 请从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样式表,同样可以在<head>标签内部添加到CDN的链接:

<!—主题--> <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" type="text/css" title="rocket-jqueryui" /> <!--Wijmo 部件的CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css" type="text/css" />

 

请将下面的标记放置在HTML文档的主体,以创建wijcalendar HTML 对象:

<div></div>

 

现在,你需要通过向<head>标记中添加以下脚本以初始化wijcalendar部件:

<script type="text/javascript"> $(function () { $("#calendar1").wijcalendar(); }); </script>

 

查看完整的 wijcalendar 标记示例 页面以了解最终的标记语言的效果。

该wijcalendar 具有选项设置的预定义的配置,所以在你初始化完成后可以立即使用。如果你现在通过浏览器打开你的工程,你将发现一个功能完整的日历部件,如下图所示:

image

 

但是如果该工程希望制定今天之前以及随后的几个月的日期不显示在日历上,应当如何做呢?显然删除它们不是一个明智选择。所有你需要做的就是将它作为一个参数传递给日历部件,将showOterMonthDays选项设置为false:

$("#calendar1").wijcalendar({ showOtherMonthDays: false });

 

在web浏览器中打开你的工程,可以看到其他月份的天不再出现在日历上,它看起来就像这样:

image

 

你可以向一个部件传递多个参数。如果你需要这么做,只需要在showOtherMonthDays: false之后添加一个逗号,并将新的参数放置在它的后面。下面的示例演示了如何除了showOtherMonthDays 选项之外将displayDate设置作为参数传递:

$("#calendar1").wijcalendar({ showOtherMonthDays: false, displayDate: new Date('2010/08/25') });

 

添加并定制一个Wijmo部件就是这么简单。然而,这个例子仅从表面揭示了通过Wijmo部件你能做什么。

关于Wijmo部件的更详细的信息,请访问 Wijmo 文档,在那里,你可以找到每一个独立的部件的介绍和API参考。

如果你想快速上手Wijmo,请参考 Wijmo 完整的快速开始。

有关脚本的更多高级示例,请访问演示页面。

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)

    Wijmo 更优美的jQuery UI部件集:活动日历控件(Event Calendar)

    2015-10-23 14:35

网友点评
-