SUI-渲染一个简单的页面

最新推荐文章于 2024-05-14 09:42:08 发布

最新推荐文章于 2024-05-14 09:42:08 发布 · 387 阅读

文章标签：

#JSI #JavaScript #EXT #XHTML #HTML #ViewUI

SUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种基于SUI框架的网页按钮实现方法，通过在HTML中引入SUI的命名空间，并结合JavaScript进行页面元素的渲染，实现了点击按钮弹出提示框的功能。文章详细展示了从环境搭建到功能实现的全过程。

1、在html节点内加入sui的命名空间
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://www.toany.net/ui" >

2、导入JSI
<script charset="UTF-8" type="text/javascript" src="boot.js"></script>

3、使用JSI导入SUI


$import("sui.*");

4、初始化SUI.Engine


SUI.Engine.initialize();

5、渲染指定节点


SUI.Engine.render(document.body);


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://www.toany.net/ui" >
<head>
	<title>Hello SUI</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
		<script charset="UTF-8" type="text/javascript" src="boot.js"></script>

		<link rel="stylesheet" type="text/css" href="javascripts/org/ext/v2_1/resources/css/ext-all.css" />
		<script charset="UTF-8" type="text/javascript" src="javascripts/org/ext/v2_1/adapter/ext/ext-base.js"></script>
		<script charset="UTF-8" type="text/javascript" src="javascripts/org/ext/v2_1/ext-all-debug.js"></script>
		<script>
				$import("sui.*");
		</script>
		<script>       
				function body_load(){
					Ext.BLANK_IMAGE_URL = 'javascripts/org/ext/v2_1/resources/images/defaults.gif'
					SUI.Engine.initialize();
					SUI.Engine.render(document.body);
				}
				window.onload = body_load;
		</script>
</head>
<body>
	<ui:button id="extButton" text="Click me!" onclick="alert('Hello,SUI')" ></ui:button>
</body>
</html>