首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

dijit控件入门(1)

2012-11-23 
dijit控件入门(一)dijit是dojo的一套UI控件,可以显示一些控件,下面是form简单的控件入门?%@ page languag

dijit控件入门(一)

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 resolveddojo.ready(function(){//alert("dojo.ready(function(){})");});</script></head><!-- 使用了主题,按钮等一些控件才会有样式 --><body 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

<%@ 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.Button");    dojo.require("dijit.Menu");    dojo.require("dijit.Dialog");    dojo.require("dijit.form.TextBox");        dojo.addOnLoad(function() {        var menu = new dijit.Menu({            style: "display: none;"        });        var menuItem1 = new dijit.MenuItem({            label: "Save",            iconClass: "dijitEditorIcon dijitEditorIconSave",            onClick: function() {                alert('save');            }        });        menu.addChild(menuItem1);        var menuItem2 = new dijit.MenuItem({            label: "Cut",            iconClass: "dijitEditorIcon dijitEditorIconCut",            onClick: function() {                alert('cut');            }        });        menu.addChild(menuItem2);        var button = new dijit.form.DropDownButton({            label: "hello!",            name: "programmatic2",            dropDown: menu,            id: "progButton"        });        dojo.byId("dropdownButtonContainer").appendChild(button.domNode);    });</script></head><body id="name" name="name">        <br>        <label for="hobby">            Hobby:        </label>        <input dojoType="dijit.form.TextBox" id="hobby" name="hobby">        <br>        <button dojoType="dijit.form.Button" type="submit">            Save        </button>    </div></div></body></html>

?

热点排行