web前端之dojo实际应用及开发五:丰富的用户界面(附有源码)
2016-12-03 16:19
621 查看
web前端之dojo实际应用及开发五:丰富的用户界面(附有源码)
现在我们就使用dojo的Dijit工具包来丰富用户界面:那Dijit的界面组件有哪些呢?日历、调色板、对话框(模态(modal)或非模态)、富文本编辑器、内嵌编辑器、菜单栏和上下文菜单、进度条、折叠菜单和面板、工具栏、工具提示、树等组件。DojoX 扩展库还提供了一系列额外的组件,包括网格、图表、视频播放器、灯箱效果等。那么现在就让我们来进行学习吧:
基本 Dijit 模板:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>基本Dijit模板</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); //Add Dijit components you are using here using dojo.require dojo.addOnLoad(function(){ //JavaScript content here }); </script> </body> </html>
djConfig=”parseOnLoad: true” 属性,告诉 Dojo 它要使用 HTML 解析器,并寻找带有 dojoType 属性的 HTML 元素。为 “dijit.dijit” 添加了一个 dojo.require 声明,优化 Dijit 的加载。定义了模板之后,后续就可以在应用程序内使用 Dijit 组件了。
Dijit 日历、调色框、下拉组件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>基本Dijit模板</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); //Add Dijit components you are using here using dojo.require dojo.require("dijit._Calendar");//调用日历 dojo.require("dijit.TitlePane");//调用下拉 dojo.require("dijit.ColorPalette");//调用调色框 dojo.addOnLoad(function(){ //JavaScript content here }); </script> <div dojoType="dijit._Calendar"></div><!-- 日历 --> <div dojoType="dijit.TitlePane" title="Color Picker"><!-- 下拉框 --> <div dojoType="dijit.ColorPalette"></div><!-- 调色框 --> </div> </body> </html>
在dojo.require(“dijit.dijit”);后面必须添加dojo.require(“dijit._Calendar”);dojo.require(“dijit.TitlePane”);dojo.require(“dijit.ColorPalette”);才能导入dijit工具。并用dojoType=”dijit._Calendar”等来分别调用,两者缺一不可,必须要一样。
dijit工具改进版:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Dijit模板进行改进</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); //Add Dijit components you are using here using dojo.require dojo.require("dijit._Calendar");//调用日历 dojo.require("dijit.TitlePane");//调用下拉 dojo.require("dijit.ColorPalette");//调用调色框 dojo.addOnLoad(function(){ //JavaScript content here }); </script> <div dojoType="dijit._Calendar"></div><!-- 日历 --> <div dojoType="dijit.TitlePane" title="Color Picker"><!-- 下拉框 --> <div dojoType="dijit.ColorPalette"> <script type="dojo/method" event="onChange" args="evt"> //定义应将此代码绑定到哪个事件,使用 args 属性将所有参数传递给函数。 alert(this.value); </script> </div><!-- 调色框 --> </div> </body> </html>
点击调色板相应的颜色,就会得出其对应的颜色属性。script type=”dojo/method” event=”onChange” args=”evt” ;type必须是:”dojo/method”,event:你学要进行的是什么事件,args:将所有参数传递给函数。
使用JavaScript处理dijit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>JavaScript改进Dijit模板</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); dojo.require("dijit.Calendar");//调用日历 dojo.addOnLoad(function(){ var calendar=new dijit.Calendar({},"myCalendar"); }); </script> <div id="myCalendar"></div> </body> </html>
dojo.addOnLoad(function(){}里面添加new dijit.Calendar({},myCalendar);
其中新建的new dijit.Calendar();第一个参数为空,第二个是ID名称。第一个的{}里面为对应的参数。
JavaScript进行内容的嵌套:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>JavaScript改进Dijit模板</title> <link rel="stylesheet" type="text/css" href="../dojoroot/dijit/themes/claro/claro.css"> <style type="text/css"> body,html{ font-family: helvetica,arial,sans-serif; font-size: 90% } </style> </head> <body class="claro"> <script src="../dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <script type="text/javascript"> dojo.require("dijit.dijit"); //Add Dijit components you are using here using dojo.require dojo.require("dijit.TitlePane");//调用下拉 dojo.require("dijit.ColorPalette");//调用调色框 dojo.addOnLoad(function(){ /* var colorPalette=new dijit.ColorPalette({ onChange:function(evt){ alert(this.value); } });*/ //也可以以下这种方式: var colorPalette=new dijit.ColorPalette({}); dojo.connect(colorPalette,"onChange",null,function(evt){ alert(this.value); }); var titlePane=new dijit.TitlePane({ content:colorPalette ,title:"123" },"myTitlePane"); }); </script> <div id="myTitlePane"></div> </body> </html>
dojo.connect 可以添加事件处理程序,详情
其余的组件可以通过官网API进行查看
相关学习:
web前端之dojo实际应用及开发六:页面布局(附有源码)
web前端之dojo实际应用及开发五:丰富的用户界面(附有源码)
web前端之dojo实际应用及开发四:面向对象开发[关键](附有源码)
web前端之dojo实际应用及开发三:dojo.xhr* 增强 Ajax(附有源码)
web前端之dojo实际应用及开发二:事件处理(附有源码)
web前端之dojo实际应用及开发一:开始dojo(附有源码)
web前端之Dojo与jQuery综合比较分析
web前端之dojo(用javascript语言实现的开源DHTML工具包)
相关文章推荐
- web前端之dojo实际应用及开发三:dojo.xhr* 增强 Ajax(附有源码)
- web前端之dojo实际应用及开发六:页面布局(附有源码)
- web前端之dojo实际应用及开发一:开始dojo(附有源码)
- web前端之dojo实际应用及开发四:面向对象开发[关键](附有源码)
- web前端之dojo实际应用及开发二:事件处理(附有源码)
- WEB开发中Spring AOP实际应用一例
- 【双旦献礼】Portal-Basic Java Web 应用开发框架 v3.0.1 正式发布(源码、示例及文档)
- 【原创翻译】认识MVC设计模式:web应用开发的基础(实际编码篇)
- Portal-Basic Java Web 应用开发框架 v3.0.1 正式发布(源码、示例及文档)
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- Portal-Basic Java Web 应用开发框架 v2.6.2 发布(源码、示例及文档)
- 【双旦献礼】Portal-Basic Java Web 应用开发框架 v3.0.1 正式发布(源码、示例及文档)
- Portal-Basic Java Web 应用开发框架 v2.6.2 发布(源码、示例及文档)
- 第一个Web前端开发项目:天气应用
- Qt WebKit可以做什么(三)——开发包含丰富web内容的本地应用
- 【双旦献礼】Portal-Basic Java Web 应用开发框架 v3.0.1 正式发布(源码、示例及文档)
- Portal-Basic Java Web 应用开发框架(v2.5.4 - 源码、示例及文档可在 Google Code 下载)
- Portal-Basic Java Web 应用开发框架(源码、示例及文档)
- Portal-Basic Java Web 应用开发框架(源码、示例及文档)
- 框架应用开发【★更新★】Portal-Basic Java Web 开发框架 v3.1.1 正式发布(源码、示例及文档)-java教程