dijit控件入门(三)

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

 

<%@ 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>checkbox_radio</title>
<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.CheckBox");
dojo.require("dijit.form.RadioButton");
dojo.require("dijit.form.Form");

dojo.ready(
	function(){
		alert(document.getElementsByName("hb")[0].checked);
		}
);
</script>
</head>
<body class="claro">

<form data-dojo-type="dijit.form.Form" data-dojo-props='encType:"multipart/form-data", action:"../DojoAjax", method:"",onSubmit:function(){ return false; },'>

多选按钮
<br>
<input data-dojo-type="dijit.form.CheckBox" data-dojo-props="name:'hb',checked:true,readOnly:true"/><label for="hb">checkbox1 设置了只读,不能操作</label>
<input data-dojo-type="dijit.form.CheckBox" data-dojo-props="name:'hb'"/><label for="hb">checkbox2</label>
<input data-dojo-type="dijit.form.CheckBox" data-dojo-props="name:'hb'"/><label for="hb">checkbox3</label>

<p>
单选按钮
<br>
<input id="radio1" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name:'hb_radio',value:'hb_radio1'"><label for="radio1">label1</label>
<input id="radio2" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name:'hb_radio',value:'hb_radio2'"><label for="radio2">label1</label>
<input id="radio3" data-dojo-type="dijit.form.RadioButton" data-dojo-props="name:'hb_radio',value:'hb_radio3'"><label for="radio3">label1</label>
<button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){}">获取单选按钮的值</button>

<button id="submit2" data-dojo-type="dijit.form.Button" data-dojo-props='type:"submit"'>Submit</button>
<button id="reset2" data-dojo-type="dijit.form.Button" data-dojo-props='type:"reset"'>Reset</button>

</form>

</body>
</html>

 

<%@ 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>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">

dojo.require("dijit.Editor");
dojo.require("dijit.form.Button");

function getValue(){
	//得到编辑器里面的结果
	var temp = dijit.byId("editor1").getValue();
	alert(temp);
}

function reset(){

	dijit.byId("editor1").set("value","");
}
</script>
</head>
<body class="claro">

<div data-dojo-type="dijit.Editor" id="editor1">uuuuuu</div>
<div data-dojo-type="dijit.form.Button" id="button1" data-dojo-props="onClick:getValue">得到结果</div>
<div data-dojo-type="dijit.form.Button" id="button2" data-dojo-props="onClick:reset">清除</div>


</body>
</html>

 

 

<%@ 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>Insert title here</title>
<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.FilteringSelect");
   
</script>
</head>
<body class="claro">
<!-- 如果页面中有两个ID值是一样的,则不能同时生成FilteringSelect控件 -->
<select name="players" id="play" data-dojo-type="dijit.form.FilteringSelect" autoComplete="true" pageSize="10">  
        <option value="">Select an Arsenal Player</option>  
        <option value="Arshavin" selected="selected">Andrey Arshavin</option>  
        <option value="Vermaelen">Thomas Vermaelen</option>  
        <!– more OPTION elements here –>  
</select> 
<p>
<select name="players" id="players" dojoType="dijit.form.FilteringSelect" autoComplete="true" pageSize="10">  
        <option value="">Select an Arsenal Player</option>  
        <option value="Arshavin" selected="selected">Andrey Arshavin</option>  
        <option value="Vermaelen">Thomas Vermaelen</option>  
        <!– more OPTION elements here –>  
</select> 
</body>
</html>

 

<%@ 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>Insert title here</title>
<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.dijit"); // optimize: load dijit layer
dojo.require("dijit.form.Textarea");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.parser");

</script>
</head>
<body class="claro">

<textarea id="blank" data-dojo-type="dijit.form.Textarea" ></textarea>

</body>
</html>

 

 

dijit控件入门(一)

dijit是dojo的一套UI控件,可以显示一些控件,下面是form简单的控件入门   dijit ui @import "../dojo/dojo/resourc...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:06
  • 524

dijit控件(三)

slider Dialog Widget Dojo Tests dojo.require("dijit.dijit"); // optimize: ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:08
  • 318

dijit/Tree 部件美化

说到美化,无非就是图标、样式等等方面的内容,下面就将就如何替换dijit/Tree部件中的图标: 1.准备样式: .organ_icon {background: url("../images/w...
  • Burongwawa520
  • Burongwawa520
  • 2016年03月07日 17:35
  • 799

Dojo 输入数值 dijit.form.NumberSpinner

输入整数,可以设定最大值与最小值。 但是不知道如何判定是否合法。
  • lmn13
  • lmn13
  • 2010年06月07日 19:51
  • 1041

dojo小例子(35)带校验功能SimpleTextarea

//////////////////////// // 带校验功能的SimpleTextarea /////////////////////// define(["dojo/_base/declare...
  • earthhour
  • earthhour
  • 2015年09月05日 10:25
  • 592

dijit控件布局

tab标签布局 Insert title here dojo.require('doh.runner'); dojo.require("dijit...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:07
  • 205

dijit.form.NumberTextBox常用操作

只能输入任意长度整数
  • earthhour
  • earthhour
  • 2014年05月05日 13:22
  • 1376

AngularJS介绍

AngularJS   AngularJS是web应用的下一个巨头。   AngularJS如果为创建web应用而设计,那它就是HTML的套路了。具有数据绑定, MVW, MVVM, MV...
  • xiaoyu90520
  • xiaoyu90520
  • 2015年09月08日 14:46
  • 1260

dijit控件(二)

学习dijit.form.Select控件 dijit.form.Select test dojo.require("dijit.form.Select"); d...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:06
  • 349

dijit.Dialog样例及其原型关系

Dojo中dijit.Dialog对话框控件由于其良好的设计和封装,得到了很多人的喜爱。而通过继承dijit.Dialog类,我们也可以设计出内在逻辑复杂,功能各异的各种自定义对话框。 本文通过分析...
  • eengel
  • eengel
  • 2011年01月17日 14:41
  • 3284
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件入门(三)
举报原因:
原因补充:

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