图片 1

内容

 1
什么是Wijmo?

 2 jQuery
语法

 3 jQuery
选择器

     3.1 jQuery
元素选取器

     3.2 jQuery
属性拔取器

     3.3 jQuery CSS
选择器

 4
文件准备功效

 5 jQuery
选项

 6
怎么着引用Wijmo

 7 创立你的第三个jQuery
工程

 

什么是 Wijmo?

Wijmo 是一个依照jQuery UI的UI部件的套件。Wijmo
部件对客户端Web开发进展了优化,并且丰富利用了jQuery的有力能力以高达美好的习性和易用性。所有的Wijmo
部件都布署了超过二十个主旨,并且援助了ThemeRoller。

本指南将介绍jQuery的概念,然后让你起来你的第二个Wijmo
项目。通过那种办法,你可以尤其的朝思暮想大家的以身作则库,越发旗帜显然的回味到Wijmo能为你带来什么。

 

jQuery 语法

jQuery
语法的设计目标是让开发人员能够轻松的接纳一个仍然两个DOM元素,然后对中选的一个或者七个因素举办操作。基本的语法如下所示:

$(selector).action()

 

$ 表示使用了 jQuery; (selector) 查询一个或者两个DOM元素;同时 .action()
在要素上推行动作。

jQuery 语法示例:

$(this).hide() 隐藏当前元素。

$(“p”).hide() 隐藏所有段落。

$(“p.wow”).hide() 隐藏所有“wow”类型的段子。

$(“#wow”).hide() 隐藏一个ID为“wow”的要素。

 

jQuery 选择器

在发轫使用jQuery以前,你要求通晓jQuery 拔取器的着力概念。 jQuery
选拔器利用了CSS的语法,从而使得开发人士可以规范的挑选一个因素并修改其出示效果。通过使用这个选取器,你可以经过品质名称,标签名称,ID标识符,甚至按照内容接纳特定的DOM元素或者元素组。不一致档次的接纳器列举如下:

 

jQuery 元素接纳器

在 jQuery 中,你可以选拔CSS拔取器来摘取特定的DOM元素,例如:

$(this) 选拔当前的DOM元素。

$(“div”) 选用具有的<div> 元素。

$(“.super”) 选用具有的“super”类型的要素。

$(“div.super”) 选拔具有“super”类型的<div>元素。

$(“#wow”) 选取第四个有着“wow”标识符的元素。

$(“div#wow”) 选取第三个具有“wow”标识符的 <div> 元素。

 

jQuery 属性选拔器

万一您想经过质量接纳元素,而不是通过DOM对象,你可以使用XPATH表明式来选拔具有一定属性的因素。例如:

$(“[href]”) 选取具有href属性的保有因素。

$(“[href=”#”]”) 采用具有href属性值等于“#”的富有因素。

$(“[href!=”#”]”) 选拔具有href属性不对等“#”的有着因素。

 

jQuery CSS 选择器

若是您想更改一个DOM元素的CSS属性,你能够选用CSS选用器。例如,上面的jQuery
脚本改变所有所有<div>元素的背景象为革命:

$(“div”).css(“background-color”,”red”);

 

文本准备功能

为了预防在文档完全加载以前运行jQuery 代码,所有的jQuery函数应当放置在
$(document).ready函数中间。例如:

$(document).ready(function(){  

// 在文件准备完成后做一些事情。

});

 

只要你喜欢,可以行使一个裁减版本的$(document).ready 函数代替。例如:

$(function() {

//在文件准备完成后做一些事情。

});

 

享有位于 $(document).ready
函数内的步履将会在DOM加载时加载,并且会在页面内容加载此前形成。

 

jQuery 选项

jQuery 选项是用作参数传递给一个部件的粗略属性。每一个Wijmo
部件具有一个拔取的默许配置;当然,会有一部分情形,你愿意覆盖那些定制部件的属性的默认值。举一个事例,让我们只要,wijprogressbar
部件的maxValue
选项的默许值为100,不过你指望那些值变成85。将maxValue选项从其默许值修改为85就像是向wijprogressbar
传递一个参数一样简单:

$(‘#progressbar’).wijprogressbar({

    maxValue: 85

});

 

因此将maxValue选项设置为85,wijprogressbar
部件的取值范围将变成从0到85,其minValue属性默许值为0。尽管您想改变minValue选项为25,只需在maxValue参数前面添加一个逗号,然后书写新的minValue参数值:

$(‘#progressbar’).wijprogressbar({

    maxValue: 85,

    minValue: 25

});

 

你可以由此参数向部件传递更加多的选项值,只必要有限支撑将他们用逗号分隔。

 

怎样引用Wijmo

您可以通过运用内容传送互联网(CDN)轻松的将Wijmo加载到您的web页面。CDN使得应用外部库以及配备到最终用户的经过变得更为方便火速。CDN是遍布世界各市的微处理器网络。理想的景色下,固然你在美利坚联邦合众国,并且你拜访一个施用了CDN的web页面,你会从架设在美利哥的服务器主机获取你所急需的内容。如若您身处孔雀之国或者中国,即便是访问同一个页面,内容也会来自于最相仿你所在地方的服务器。当web浏览器加载内容时,它们日常会检查是还是不是早已有所一份该公文的缓存。通过应用CDN,你可以从中收益。假如某个用户已经通过同一个CDN访问过一个站点,他们将在他们的机器上保留一份文件的缓存版本。你所访问的页面会加载的更快,因为帮助内容无需再度下载。

Wijmo 从最开始就帮衬了CDN。你可以在这里

http://wijmo.com/downloads/cdn/找到CDN的页面。加载Wijmo到你的页面所需要的标志看起来好像上面的语法:

<!--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>

<!—主题-->

<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" />

<!--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>

 

在上述标记语法中,你应当注意到了,有一对.js文件标记为*.min.js。这个文件已经被精简并压缩,换句话说,所有不须求的字符都已经被删除以便网页加载的快慢更快。你可能同时注意到,没有到独门的.js文件的引用。所有部件的JavaScript已经被统一成一个文书,比如说,wijmo-complete.2.0.0.min.js
。若是您期望链接到单独的.js文件,请参见每一个部件的Dependencies主题。

 

开创你的首先个Wijmo工程

现行您早已控制了jQuery的基本点概念,已经可以先河征集创设你的率先个工程。在此示例工程,你将学习添加一个Wijmo部件,wijcalendar,到你的工程,然后定制一些选项。

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

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

 

请将下边的号子放置在HTML文档的主导,以创立wijcalendar HTML 对象:

<div id="calendar1" style="position:relative;left:40px;top:40px;"></div>

 

现行,你须求经过向<head>标记中添加以下脚本以起首化wijcalendar部件:

<script type="text/javascript">

    $(function () {

        $("#calendar1").wijcalendar();

});

</script>

 

翻看完整的 wijcalendar
标记示例

页面以询问最后的号子语言的效应。

该wijcalendar
具有选项设置的预约义的配置,所以在您开始化已毕后得以立时使用。假诺您现在经过浏览器打开你的工程,你将发现一个效应一体化的日历部件,如下图所示:

图片 2

 

然而假使该工程希望制定今日此前以及随后的多少个月的日期不出示在日历上,应当怎样做啊?分明删除它们不是一个睿智抉择。所有你必要做的就是将它看做一个参数传递给日历部件,将showOterMonthDays选项设置为false:

$("#calendar1").wijcalendar({

    showOtherMonthDays: false

});

 

在web浏览器中开拓你的工程,可以观察任何月份的天不再出现在日历上,它看起来似乎那样:

图片 3

 

你能够向一个构件传递三个参数。借使你须求那样做,只须要在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立异)! 

相关文章

网站地图xml地图