第一个dojo例子

最新推荐文章于 2021-08-06 10:57:24 发布
最新推荐文章于 2021-08-06 10:57:24 发布
阅读量111 收藏
点赞数
分类专栏： dojo 文章标签： Dojo CSS JavaScript QQ HTML ViewUI 
<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>注册案例</title>
        <style type="text/css">
        @import "scripts/dojo/resources/dojo.css";

        @import "scripts/dijit/themes/tundra/tundra.css";

        .dijitInputFieldFocused {
            border: solid 2px #FFDF00;
        }
        </style>

        <script type="text/javascript" djConfig="parseOnLoad: true"
            src="scripts/dojo/dojo.js"></script>
            
        <script type="text/javascript">
            dojo.require("dijit.form.Button");
            dojo.require("dijit.form.TextBox");
            //日历
            dojo.require("dijit.form.DateTextBox");
            //单选按钮和多选按钮
            dojo.require("dijit.form.CheckBox");
            //下拉列表
            dojo.require("dijit.form.FilteringSelect");
            //数字选项
            dojo.require("dijit.form.NumberSpinner");
            //验证
            dojo.require("dijit.form.ValidationTextBox");
               dojo.require("dojox.validate.regexp");
            //解析器
            dojo.require("dojo.parser");
        </script>
    </head>

    <body class="tundra">
        <form id="registForm" method="post">
            <table>
                <tr>
                    <td>
                        <label for="username">
                            用户名
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TextBox" type="text" id="username" name="username"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="password">
                            密码
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.TextBox" type="password" id="password" name="password"/>
                    </td>
                </tr>
                <!-- 单项选择按钮 -->
                <tr>
                    <td>
                        <label for="sex1">
                            性别
                        </label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.RadioButton" type="radio" name="sex"
                            id="sex1" value="男" checked="checked"/>
                        <label for="sex1">
                            男
                        </label>
                        <input dojoType="dijit.form.RadioButton" type="radio" name="sex"
                            id="sex2" value="女" />
                        <label for="sex2">
                            女
                        </label>
                        <input dojoType="dijit.form.RadioButton" type="radio" name="sex"
                            id="sex3" value="保密" />
                        <label for="sex3">
                            保密
                        </label>
                    </td>
                </tr>
                <!-- 年龄 -->
                <tr>
                    <td>
                        <label for="age">年龄</label>
                    </td>
                    <td>
                        <input dojoType="dijit.form.NumberSpinner"
                            value="18"
                            class="medium"
                            constraints="{max:100,places:0}"
                            name="age"
                            id="age"
                            required="true">
                    </td>
                </tr>
                <!-- 日历 -->
                <tr>
                    <td>
                        <label for="birthday">
                            出生日期
                        </label>
                    </td>
                    <td>
                        <input id="birthday" value="1900-01-01" name="birthday"
                        dojoType="dijit.form.DateTextBox"
                        constraints="{min:'1900-01-01',max:'today',formatLength:'long'}"
                        required="true"
                        trim="true">
                    </td>
                </tr>
                <!-- 多项选择按钮 -->
                <tr>
                    <td>
                        <label for="interest1">
                            兴趣
                        </label>
                    </td>
                    <td>
                        <input type="checkbox" dojoType="dijit.form.CheckBox"
                            name="interest" id="interest1" value="电脑">
                        <label for="interest1">
                            上网
                        </label>
                        <input type="checkbox" dojoType="dijit.form.CheckBox"
                            name="interest" id="interest２" value="游泳">
                        <label for="interest２">
                            游泳
                        </label>
                        <input type="checkbox" dojoType="dijit.form.CheckBox"
                            name="interest" id="interest３" value="网球">
                        <label for="interest３">
                            网球
                        </label>
                        <input type="checkbox" dojoType="dijit.form.CheckBox"
                            name="interest" id="interest４" value="看书">
                        <label for="interest４">
                            看书
                        </label>
                    </td>
                </tr>
                <!-- 下拉列表 -->
                <tr>
                    <td>
                        <label for="nationality">
                            国籍
                        </label>
                    </td>
                    <td>
                        <select dojoType=dijit.form.FilteringSelect name="nationality"
                            id="nationality" hasDownArrow="true">
                            <option value="chinese">chinese</option>
                            <option value="USA">USA</option>
                            <option value="English">English</option>
                        </select>
                    </td>
                </tr>
                <!-- email -->
                <tr>
                    <td>
                        <label>E-mail</label>
                    </td>
                    <td>
                        <input id="email" type="text" name="email" class="long" value="youname@qq.com"
                            dojoType="dijit.form.ValidationTextBox"
                            regExpGen="dojox.regexp.emailAddress"
                            trim="true"
                            required="true"
                            invalidMessage="E-mail地址是非法的。" />
                    </td>
                </tr>
            </table>
        </form>
        <button dojoType="dijit.form.Button">
                        提交
            <script type="dojo/method" event="onClick">
                        function registCallBack(data,params){
                            dojo.byId("showData").innerHTML = data;
                        }
                        function registError(data,params){
                            dojo.byId("showData").innerHTML = '服务器错误';
                        }
                        dojo.xhrPost({
                            url:'./regist.do',
                            load:registCallBack,
                            error:registError,
                            form:'registForm',
                            encoding:'utf-8'
                        });
            </script>
        </button>
        <div id="showData"></div>
    </body>
</html>
 
zhanghebing
关注
专栏目录
Dojo 学习笔记入门篇 First Dojo Example
12-09
我们的第一个例子是一个简单的登录页面。当用户输入正确的信息时，会显示“Right！”，否则显示“Wrong！Please try it again！”。 HTML结构如下： ```html <!DOCTYPE ...
推荐dojo学习笔记
10-30
尽管从0.3版开始，Dojo支持在加载后进行配置，但仍然强烈建议将设置`djConfig`的代码放在第一段`<script>`标签内。这样可以确保所有的配置选项能够在加载Dojo时立即生效，从而提高性能和效率。 ##### 完整的`...
dojo小例子（13）给Select指定id及label
earthhour的专栏
04-27 1749
用store为select提供数据时，store中的数据必须带有id和
DOJO的一个例子
lick4050312的专栏
08-04 5231
DOJO的第一个例子：http://www.w3.org/TR/html4/loose.dtd">FUN WITH DIGIT @import "dojo/dijit/themes/tundra/tundra.css" @import "dojo/dojo/resources/dojo.css" h3{   margin : 10 px;   color : red; } label,inpu
dojo小例子（21）grid新增记录放在第一行
earthhour的专栏
07-14 1263
grid新增记录有很多种方式，store.newItem(myNewItem);
dojo调用php,dojo学习第一天 Tab选项卡 实现_dojo
weixin_36212459的博客
04-01 123
其实不然，用《精通Dojo》里的话来说就是"Dojo不只是一个程序库，而是一个工具包"，它比其他所有的JS库的插件更全面更广阔。它包含大约40个用户界面控件、1个图形框架、cometd支持、1个打包系统，还有其他的一些东西。从dojo官方网站 上下载最新版1.6，解压下来，它有三个文件夹分别是：1. dojo: 是Dojo基础，你要做的其它事情都是在它的基础上，类似于jquery.js文件，但比它...
2020-08-07Dojo官方教程-例子图片
只会写HelloWorld的专栏
08-07 171
dojo官方网站的例子都是在线的，基本上都打不开，用的是Google的CDN啥的，反正我在办公室也访问不了。 我自己搭建了开发环境，例子出来了，图片就和大家分享一下，加快大家的学习进度。 学习这个dojo，主要是为了做Arcgis 的web开发，懂的人就知道我在说什么。 第一个例子的代码图片是： 执行出来的结果是： ...
于洋的dojo2学习笔记(3.第一个dojo的应用组件)
牛软程序员的专栏
10-10 636
参考文档 https://dojo.io/tutorials/002_creating_an_application/ 目标 今天学习一些原理的部分: 了解最简单的 Dojo 2 应用程序的结构及每一部分的作用。 但不会全面讨论 Dojo 2 应用程序的每一个可能的组成部分。  主 HTML 文档 下载好demo文档之后,我们看看002_creating_an_application\...
dojo query 实现Ajax,Dojo Query 详解
weixin_39836898的博客
08-06 323
Dojo Query 简介在 Web 开发中，我们经常需要根据一定的条件查询并获取某些 HTML 元素的引用，然后对这些元素进行操作以改变它们的属性、外观等。在标准的 JavaScript 语言中，可以通过 document.getElementById, document.getElementsByTagName, document.getElementsByClassName 等函数对 DOM...
Dojo学习笔记
huangbaokang的博客
10-21 484
hello world入门 dojo.addOnLoad(function() { dojo.create( "div", { "innerHTML": "Hello, Huangbaokang!" }, dojo.body() ); }); 可以使用cdn等方式引入，或者本地引入，远程域名引...
dojo小例子（20）动态加载的Select增加一个option空白项
earthhour的专栏
07-07 3569
有时我们希望下拉菜单带有提示项，比如默认第一项是“--请选择--”；或者“--全部--”表示包含下拉菜单中的所有条件。 有两种实现方式： 1、修改store，在其中添加数据； 2、修改options，在其中添加option 第一种方式： var json = new JsonRest({target: url}); json.query().then(function(items){
麻雀虽小五脏俱全 Dojo自定义控件应用
12-09
现在Javascript框架、控件库有很多，jQuery、Ext、prototype、MooTools、Dojo等等，这些都是在Google上搜索“javascript+framework”列在第一页的。其中，除了MooTools，其它的都有所了解，但只在项目中用过Ext和...
CPPC++_低成本实现Wooting键盘的Rapid trigger功能不必为几个按键购买整个键盘人人都能做Wouo.zip
11-12
CPPC++_低成本实现Wooting键盘的Rapid trigger功能不必为几个按键购买整个键盘人人都能做Wouo
CPPC++_可能是世界上最快的协同程序库.zip
11-12
CPPC++_可能是世界上最快的协同程序库
ConsulHelper，.Net微服务基础框架，已支持.NetCore，具备服务发现、健康检查、服务分级、分布式配置.zip
11-12
ConsulHelper，.Net微服务基础框架，已支持.NetCore，具备服务发现、健康检查、服务分级、分布式配置、版本控制
各种三维模型（gltf，glb格式）
11-12
有卫星、警车、消防车、Cesium飞机、Cesium无人机等等。具体图片如下文章：https://blog.csdn.net/weixin_44857463/article/details/143721670?sharetype=blogdetail&sharerId=143721670&sharerefer=PC&sharesource=weixin_44857463&spm=1011.2480.3001.8118
yii2.0+admin后台以及rbac权限.zip
11-12
yii2.0+admin后台以及rbac权限
SpringBlade3.0架构核心工具包.zip
11-12
SpringBlade3.0架构核心工具包，SpringBlade是一个由商业级项目升级优化而来的SpringCloud分布
python各种项目代码.zip
最新发布
11-12
python各种项目代码
简单易懂的dojo入门教程
使用Dojo的第一步通常是引入dojo.js主文件，并通过`dojo.require()`来加载所需的模块。例如，如果你想要使用Dojo的DOM操作，你可能需要这样写： ```javascript <script src="path/to/dojo/dojo.js" djConfig=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值