dijit控件入门(一)

原创 2013年12月04日 10:06:50

dijit是dojo的一套UI控件,可以显示一些控件,下面是form简单的控件入门

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dijit ui</title>
<style type="text/css">
			@import "../dojo/dojo/resources/dojo.css";
			@import "../dojo/dijit/themes/tundra/tundra.css";
</style>			
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Menu");
dojo.require("dijit.form.ToggleButton");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.DateTextBox");
//dojo.require("dijit.form.NumberTextBoxMixin");
/**
 * 搞清楚怎么使用byNode()方法的使用
 */
function test_button(){
	alert(dijit.byId("hb").value);//根据dijit.byId()获取dijit对象
	alert(dojo.byId("hb2").value);//根据dojo.byId()得到的是DOM节点对象
	
}

function test_function(){
	//dijit.byNode()方法是将DOM对象(必须是dijit对象,可能使用query查询的没有ID这个属性)转换为dijit对象,
	alert(dijit.byNode(dojo.query(".hb111111111")[0]).get("value"));
}

//dojo.addOnLoad(test_button);

//dojo.ready() registers a function to run when the Dom is ready and all outstanding require() and dojo.require() calls have resolved
dojo.ready(function(){
	//alert("dojo.ready(function(){})");
});
</script>
</head>
<!-- 使用了主题,按钮等一些控件才会有样式 -->
<body class="claro">
	<div>
		 注意onclick事件的JSON属性值是——onClick,注意大小写 <br>
		<input  data-dojo-type="dijit.form.Button" data-dojo-props="label:'测试按钮',id:'hb',value:'abc',onClick:test_function "/>
		<input  id ="hb2" value="12" type="text">
		<button onclick="test_button()" style="display:none">测试display</button>
	</div>
	<p>
	<div>
		dijit.form.TextBox对象学习了<br>
		<br>让TextBox对象显示出值,并且让他不可用<br>
		<input data-dojo-type="dijit.form.TextBox" data-dojo-props="label:'用户名',disabled:'disabled',value:'values'"/>
		<br>
		设置允许输入的最大长度10,显示title属性<br>
		<input data-dojo-type="dijit.form.TextBox" data-dojo-props="maxLength:10,title:'title'" />
		<br>
		设置只读属性10<br>
		<!-- class属性一定要用单引号包括起来,否则会出问的 -->
		<input data-dojo-type="dijit.form.TextBox" data-dojo-props="value:'read-only','class':'hb111111111',readOnly:'readOnly'" />
	</div>
	
	<p>
	<div>
		dijit.form.NumberTextBox<br>
		<input data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="label:'label'">
	</div>
	
	<div>
		dijit.form.TimeTextBox<br>
		<input data-dojo-type="dijit.form.TimeTextBox" data-dojo-props="label:'label'">
	</div>
	<div>
		dijit.form.DateTextBox<br>
		<input data-dojo-type="dijit.form.DateTextBox" data-dojo-props="label:'label'">
	</div>
</body>
</html>

 

 控件dijit.form.DropDownButton

 

认识Dojo中的界面控件:Dijit

Dojo框架区别于其他Ajax框架的一个显著特征就是它的界面控件系统:Dijit。Dijit是Dojo中界面控件的总称,他们使用灵活而且易于理解。每个Dijit控件都是由Dojo类以及控件中使用的图片...

浅析dojo.connect的几种用法(一)——关联事件,不仅仅是DOM Event

介绍       每个流行的工具包中,总有一些异常出彩的闪光点。dojo.connect就是dojo工具包中,与JavaScript事件机制相关的重磅功能。       在JavaScript的使用场...
  • eengel
  • eengel
  • 2011年05月13日 09:56
  • 8471

认识Dojo中的界面控件:Dijit

Dojo框架区别于其他Ajax框架的一个显著特征就是它的界面控件系统:Dijit。Dijit是Dojo中界面控件的总称,他们使用灵活而且易于理解。每个Dijit控件都是由Dojo类以及控件中使用的图片...

ReportStudio入门教程(八十五) - 设置日期控件(DatePrompt)的值

在网上见到过一些文章写设置日期

UWP入门(八)--几个简单的控件

每天看几个,要不聊几天我就可以看完啦,加油!看效果1. CheckBox ...

<Unity3D>Unity3D入门篇——第三讲 GUI控件(一)

Unity为大家提供了一套很完整的图形化界面引擎,包括窗口、文本框、拖动条等。下面将为大家介绍主要的基本控件。 一、Label控件        Label控件(标签控件)以文本的形式...

VS2010/MFC编程入门之七(对话框:创建对话框类和添加控件变量)

前两讲中鸡啄米为大家讲解了如何创建对话框资源。创建好对话框资源后要做的就是生成对话框类了。鸡啄米再声明下,生成对话框类主要包括新建对话框类、添加控件变量和控件的消息处理函数等。        因...

arcgis api for js入门开发系列十 自定义Navigation控件样式风格(含源代码)

arcgis api for js默认的Navigation控件样式风格如下图:   这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢;自己...

android自定义控件(二) 入门,继承View

转载请注明地址:http://blog.csdn.net/ethan_xue/article/details/7313788 ps: 可根据apidemo里LableView,list4,list6学...

<Unity3D>Unity3D入门篇——第六讲 GUI控件(四)

八、Slider控件                Slider控件(滑动条控件)由滑块和滑动条构成的。例如,我们调节音量大小的控件就是滑动条控件。根据方向,我们可以将滑动条控件分为水平滑动条(H...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件入门(一)
举报原因:
原因补充:

(最多只允许输入30个字)