不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)

标签: 不得不爱 开源 wijmo | 发表时间:2012-10-25 09:40 | 作者:
出处:http://www.iteye.com

由于我写这个系列文章的目的是让大家快速、简单的制作绚丽的 jQuery 站点。所以写本文分两部分:

第一,ITEYE里有许许多多的大牛。但是也有一些刚刚入门的朋友。大牛们可以忽略掉前面的部分内容,直接查看 Theme 展示。刚刚入门的朋友可以细致的查看前面关于 介绍一些 jQuery 的基础知识,还有如何引用 Wijmo 资源文件的内容。

第二,上篇文章中讲到 Wijmo 内置了多种 Theme,为了满足大牛们的胃口,所以给出了 Wijmo 的 30 种 Theme 演示,并且提供了源码下载: 点我下载

上一章 《不得不爱开源 Wijmo jQuery 插件集【附演示和源码】【开篇】 》 ,我向大家介绍了开源Wijmo jQuery 控件集的主要插件集的功能、主题样式。在这里感谢ITEYE里的朋友的支持。还有一些朋友给我提出了意见以及文章里的不足,在这里表示诚挚的感谢!

 

下面我们开始介绍 jQuery 的一些基础知识。

首先奉上 jQuery 学习宝典: http://www.w3school.com.cn/jquery/index.asp 。看到这个,你笑了。熟悉的不能再熟悉了。-_~

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

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

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

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

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

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

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

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

开源Wijmo jQuery 控件集【 点击查看30种Theme演示和源码

PS:由于ITEYE不能贴iframe以及贴图片的方式稍显怪异,所以就劳烦各位大牛点击以上的链接查看好了...十分抱歉

 

 

点击 下载 源码: 点击下载

在下一篇文章中我们即将进入《不得不爱 开源Wijmo jQuery 控件集》系列文章中的首个插件 Wijmo Menu 的介绍,包括功能、API、示例及源码,敬请期待。

 

 

附录Wijmo 资源站点共享:

开源 Wijmo jQuery 中文官方网站: http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

开源 Wijmo jQuery 讨论社区:  http://gcdn.grapecity.com/index.aspx

 

在这里 十分感谢大家的支持,有了你们的支持,我会更加努力!



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [不得不爱 开源 wijmo] 推荐:

不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)

- - ITeye博客
由于我写这个系列文章的目的是让大家快速、简单的制作绚丽的 jQuery 站点. 第一,ITEYE里有许许多多的大牛. 大牛们可以忽略掉前面的部分内容,直接查看 Theme 展示. 刚刚入门的朋友可以细致的查看前面关于 介绍一些 jQuery 的基础知识,还有如何引用 Wijmo 资源文件的内容. 第二,上篇文章中讲到 Wijmo 内置了多种 Theme,为了满足大牛们的胃口,所以给出了 Wijmo 的 30 种 Theme 演示,并且提供了源码下载:.

Google开源LevelDB

- 酿泉 - Solidot
Google宣布在BSD许可证下开源其键值存储引擎LevelDB. LevelDB C++库可用于多种不同环境,如被浏览器用于存储最近访问的网页缓存,或者被操作系统使用去储存安装的软件包和依赖包清单,或被应用程序用于存储用户设置. Google称,即将发布的新版Chrome浏览器,就包含了基于LevelDB的IndexedDB HTML5 API实现.

再论开源

- - 谢益辉
几年前我写过一些关于开源的 想法,如今再来看开源,我觉得问题已经不在说教上,而是在趋势上. 倒退十年或更久,那时候程序员相对还比较稀缺,软件闭源开发出来之后别人模仿的成本高,而这些年计算机教育的普及让码农数量变得越来越多,更多人懂编程了,模仿的成本大幅下降. 写软件作为谋生的目的已经在弱化,更多的是为了自己的实际需求,或社区名声:你不开源.

SoftEther VPN开源

- - Solidot
日本筑波大学的全球分布式公共VPN中继服务器软件SoftEther VPN正式在GPLv2许可证下开源,源代码托管在Github、SourceForge和Google Code上. SoftEther VPN是VPN Gate的底层VPN引擎,在开源之后用户将可以编译出自己定制的二进制包. SoftEther VPN提供了一种分布式的免费公共VPN中继服务,服务器由志愿者托管,因此很少能提供长时间的VPN连接,但代理服务器的不断变化也增加了封杀难度.

Facebook 开源 Detectron

- - 最新更新 – Solidot
Facebook 在 Apache 2.0 许可证下 开源了它的目标识别平台 Detectron, 源代码托管在 GitHub 上. Detectron 用 Python 开发,基于 Caffe2 深度学习框架. Facebook 同时公开了超过 70 个预先训练的模型. Detectron 项目始于 2016 年,实现了一系列最新的目标识别算法如 Mask R-CNN,该软件平台在社交巨人的视觉感知系统的进步上扮演了重要角色.

ios代码开源

- - CSDN博客移动开发推荐文章
本人从10年开始搞ios开发,从菜鸟到现在的入门,期间遇到了许多困难,也总结了一些东西,本着开源精神,希望大家共同成长的目的把这个工程开源出来.. 这个工程是从11年到13年之前完成的.主要是我平时用到的一些基础功能模块.其中有其他开源的代码和我自己写的一些.代码结构基本乱,12年以后的代码结构还可以,不是很乱,之前水平有限,如果不怎么样就别喷我了.

Azul开源Zing Jvm

- - InfoQ cn
4月末,继Zing 5.2 之后,. Azul Systems宣布他们将无停顿(pauseless )的 Zing JVM提供给开源软件开发者和项目,以供开发和测试. Azul Systems 工程部副总裁和合作创始人Shyam Pillalamarri向InfoQ说明道:. 我们的部署很大一部分基于开源组件,所以我们认为:“假设我们不能将一些有价值的东西免费提供给开源项目贡献者,他们将一直受限于从Java虚拟机(JVM)视角所看到的内容”,他们将不会考虑额外的用例,或者选择其他能解决了所有内存或扩展性问题、类似Zing的系统.

Java开源建站工具

- Amom - 阮一峰的网络日志
美国程序员Jon Scott Stevens,公布了他的创业公司所使用的开发工具清单. 他的语言平台是Java,开发项目是一个网站(还未上线). 所用到的工具都是开源的,可以免费得到. 在目前的创业者之中,用Java作为网站开发语言的人似乎很少. 这当然不是没有原因的,Java看上去确实不像是最便捷的网站开发工具,给人的感觉是用起来麻烦又费事.

开源Python UI框架:Kivy

- xin - 秀码趣 - ShowMuch.com
Kivy是一个可用以快速创建新颖用户界面应用的开源Python库,比如可以用它来创建多点触摸的应用程序,它具备跨平台特性,目前发行有Windows、MacOS、Linux以及Android版本. 作为一个开源框架,Kivy具备以下特性:A.百分百免费使用;B.基于 LGPL3协议 开源,对商业化应用友好;C.跨平台,支持Windows、MacOS、Linux以及Android;D.允许在不同的平台上运行同一套代码;E.稳定以及有完善的API文档;F.通过OpenGL ES 2.0对硬件进行加速;G.自然支持大部分的输入协议或者输入设备;H.基于Python的简单API……等等.

Java开源建站工具

- Alex - 博客园新闻频道
  美国程序员Jon Scott Stevens,公布了他的创业公司所使用的开发工具清单.   他的语言平台是Java,开发项目是一个网站(还未上线). 所用到的工具都是开源的,可以免费得到.   在目前的创业者之中,用Java作为网站开发语言的人似乎很少. 这当然不是没有原因的,Java看上去确实不像是最便捷的网站开发工具,给人的感觉是用起来麻烦又费事.