KISSY基础篇乄KISSY之HelloWorld

KISSY之HelloWorld

今日任务：使用kissy实现简单的hello World！

一、新建Kissy测试项目

打开STS，File->StaticWeb Project，命名其Project Name即可，本教程命名为kissy，其他默认设置即可，点击Finish。在WebContent里创建css，js和img三个文件夹。之后新建的file中，将.html文件放在WebContent文件夹目录下，将.css文件放在css文件夹目录下，将.js文件放在js文件夹目录下，将图片文件放在img文件夹目录下。

二、引入kissy资源包

将Kissy的资源包拷贝到项目下，并在页面引用。若不适用Gallery组件，在项目应用中只需要将”build”文件夹拷贝到项目相应目录，引用其”seed-min.js”即可。、

三、编写Kissy简单实例—Hello World!

新建”day-2.html”作为测试页面，新建”day-2.js”作为Kissy文件，并在测试页面引入day-2.js文件。

实例一：

在day-2.js文件里加入如下代码：

KISSY.ready(function(S){

alert('Hello World !');

});

右击“day-2.html”->OpenWith ->Web Browser，则显示：

这是KISSY外部代码的基本调用方式，为了保证代码执行时，依赖的DOM结构已经准备好，推荐尽可能的将代码写在通过ready注册的函数里。Ready注册的多个事件是放在一个list里面的，执行的时候，按照先进先出的原则执行。

实例二：

在day-2.html测试页面body里写入如下代码：

在day-2.js文件里加入如下代码：

KISSY.use('dom',function(S,DOM){

S.DOM.html("#test1","Hello World !");

});

页面显示：

这里使用了DOM 的html()方法。

实例三：

在dat-2.html测试页面body里写入如下代码：

<div id="test2" style="display: none;">Hello World ！</div>

在day-2.js文件里加入如下代码：

KISSY.use('node',function(S,Node){

Node.one('#click-me').on('click',function(e){

Node.one('#test2').show();

});

点击“显示内容”前后，页面显示如下：

这里使用了Node模块的方法。

KISSY基础篇乄KISSY之HelloWorld相关推荐

KISSY基础篇乄KISSY之DOM（1）
KISSY之DOM(1) 今日任务:了解学习DOM的基础知识以及学习拆合菜单实例 KISSY的DOM模块的子模块和方法众多,但又很重要,最好的情况是全部熟练掌握,当然一开始学是不可能全部记住DOM的方 ...
KISSY基础篇乄KISSY简介
KISSY简介今日任务:了解学习有关Kissy的一些知识,以便于后续的学习一.相约KISSY,必先了解 KISSY 是一款跨终端.模块化.高性能.使用简单的 JavaScript 框架.除了完备的 ...
KISSY基础篇乄KISSY之Event
KISSY之Event事件今日任务:了解学习Event事件的基础知识 Event 模块是KISSY最重要的模块之一,他包含自定义事件机制.事件对象封装.DOM事件封装.面向多终端的事件行为统一.下辖 ...
KISSY基础篇乄KISSY之Seed
KISSY之Seed 今日任务:了解Kissy的模块载入机制首先恭喜你已经成功使用kissy想世界打了个招呼,不过这只是刚起步,咱们还有很多地方需要学习.在本节咱们就推开kissy的大门,看看房间里 ...
KISSY基础篇乄KISSY之IO前奏
KISSY之IO前奏今日任务:了解学习IO模块之前必备知识. 在学习Kissy的IO之前,咱们先来了解下ajax,http,json等知识,这些是学习IO模块的必备知识.这里只是给出了一些概念性的介 ...
KISSY基础篇乄KISSY之IO（2）
第14天:KISSY之IO(2) 今日任务:创建Maven Project并学习IO模块. 这一节我们主要来看一下IO模块里的一些方法. 一.Maven Project (1)创建mavenproje ...
KISSY基础篇乄KISSY之DOM（2）
KISSY之DOM(2) 今日任务:深入学习DOM知识及进一步完善拆合菜单实例在上一篇的教程中,明河使用KISSY.DOM的常用方法制作了一个拆合菜单,同时也演练到了几个常用方法,比如addClas ...
KISSY基础篇乄KISSY之优化实例
KISSY之优化实例今日任务:拆合菜单代码优化重构这一节我们主要来看一下拆合菜单进行代码优化重构后的效果. 一.测试页面代码 <div id="content"> ...
KISSY基础篇乄KISSY之IO（1）
KISSY之IO(1) 今日任务:了解学习IO模块. IO,即Ajax,只是KISSY中不存在名称为"ajax"的模块,必须使用名字"io". KISSY.us ...

KISSY基础篇乄KISSY之HelloWorld

KISSY之HelloWorld

KISSY基础篇乄KISSY之HelloWorld相关推荐

最新文章

热门文章