Layout with Dijit 一文中 BorderContainer 嵌入BorderContainer 的详细解析

最新推荐文章于 2024-02-29 10:18:33 发布
原创 最新推荐文章于 2024-02-29 10:18:33 发布 · 212 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #html #css

这段HTML代码演示了如何使用Dijit库创建一个嵌套的BorderContainer布局。主要包含三个子BorderContainer，分别位于顶部、左侧和右侧，每个区域都有各自的ContentPane组件，用于显示不同内容。页面采用claro主题，并通过dojo解析器和dojo模块实现动态加载。

仔细对照代码，在看看图，必有收获。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Nested BorderContainer</title>
    <link rel="stylesheet" href="css/demo.css" media="screen">
    <link rel="stylesheet" href="css/style.css" media="screen">
    <link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div class="demoLayout" style="height: 650px; width: 950px" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">

    <div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">I am the Center in the 1~First BorderContainer</div>
    
    <div class="demoLayout" style="height: 50%" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region: 'top', splitter: true, design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">I am the center in the 2~second  BorderContainer=first BC 's top </div>
        <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'"> I am the bottom in the 2~second BorderContainer=first BC 's top</div>
    </div>
    
    <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'left'">I am left content Pane in the 1~First BorderContainer</div>
    
    <div class="demoLayout" style="width: 50%" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region: 'right', design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">I am the center in the 3 ~Third BorderContainer=firstBC's Right</div>
        <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left'">I am the left in the 3 ~Third BorderContainer=firstBC's Right</div>
    </div>
    
    <div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: true, region: 'bottom'">I am the bottom content pane in the !~First BorderContainer's Bootom </div>
    
</div>
<!-- load dojo -->
<script src="dojo/dojo.js"></script>
<script>
    require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(parser){
        parser.parse();
    });
</script>
</body>
</html>

dijit-pagination-js:用于分页结果的 Dojo Dijit
06-25
dijit-分页-js 0.2 用于分页的 Dijit 描述 这个 Dojo 小部件在您选择的 DOM 元素中呈现一个分页列表，以便您可以轻松地对结果进行分页。 入门 将 dojo 配置添加到您的 HTML 头中 < script > // host path ...
dstore-and-dijit:与dstore和Dijit同步
05-17
在这个场景中，我们关注的是两个JavaScript库——dstore和Dijit。dstore是一个强大的数据存储库，而Dijit是Dojo Toolkit的一部分，提供了一系列的UI小部件。两者结合，可以方便地实现模型与视图之间的数据同步。 ...
dijit中边框容器BorderContainer
qingqingzijinxin的专栏
08-07 1733
dijit中边框容器BorderContainer
Flex容器拖动（Bordercontainer为例）
weixin_30505043的博客
07-11 138
Bordercontainer的拖放到任意位置。 mxml： 为Bordercontainer添加鼠标按下和弹起事件 <s:BorderContainer id="bdShow" mouseDown="startBdMove(event)" mouseUp="stopBdMove(event)"/> 事件代...
BorderContainer 使用
01-06 1534
今天又看到另外一种展现效果，感觉更炫。     一，定义块组件   <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" fontFamily="微软雅黑" xmlns:mx="library://ns.ado
flutter Container默认边框边线
最新发布
weixin_43837123的博客
02-29 1094
flutter 去除Container默认边框边线，当我在画一个左右中的布局，中间是渐变的一个container，左右是图片的时候，左边出现有一条白色边线，导致不举不衔接；
dojo布局BorderContainer
qingqingzijinxin的专栏
07-19 2259
dojo布局BorderContainer
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'true'" style="background-color: rgb(220, 245, 233); width: 270px;"> <h3>&nbsp&nbsp&nbsp&nbsp&nbsp功能区</h3> </div> <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="background-color: #ffffff; padding: 0;"> </div> </div>如何改良这段代码，使功能区与viewDiv之间平滑过渡
06-09
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:'true', ...
Dojo中文使用手册：快速入门与Dijit小部件解析
使用CDN可以节省服务器资源，并且手册中的Dijit示例可以直接运行。 Dijit库包括各种小部件，例如： 1. 表单元素：复选框、单选框、切换按钮、组合框、下拉过滤选择框、数字选择框、滑尺、文本输入域和文本框（支持...
Dijit开发与表单控件全面解析
### Dijit开发与表单控件全面解析 #### 1. 首个Dijit：HelloWorld及事件关联 在开发Dijit时，要特别注意避免在JavaScript文件中错误定义参数类型，否则可能会花费大量时间进行调试。以HelloWorld Dijit为例，可将...
dojo页面布局BorderContainer
Zzzpiu的博客
10-12 513
DOjo页面布局：主要使用的容器和小部件有 1.BorderContainer(对齐方式容器) 2.ContentPane(面板) 3.AccordionContainer(堆叠容器)结果：使用dojo页面布局将页面划分为五个部分，主要有两种方式：1.上左中右下、2.左上中下右 结果1：当对齐容器的design属性为headline的时候 结果2：当对齐容器的desi...
BorderContainer 背景透明一不小心就解决了！
weixin_34281477的博客
09-22 202
用Group用多，感觉挺方便的，就 经常遇到 addChild, addElement 纠结性，还有图形等等；不过后来遇上 BorderContainer，相应解决好很一些美化方面的问题，它都帮你封装好了，太爽了；突然发发现，它本来就是白色背景的，也没设置 背景透明度的 backgroundAlpha, 查看API，原来里面有秘方：嘿嘿， 看代码就明白了：1<s:BorderCon...
dojo 布局 BorderContainer和ContentPane
weixin_33701617的博客
10-24 265
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = reque...
BorderContainer用法——backgroundImage
fdsafdsafdsafdsafa
12-11 281
BorderContainer中有有一个backgroundImage的属性，不能简单的这样子写： backgroundImage="路径"，应该使用Embed。 使用一些有子属性的属性，用法上有点区别。如： &lt;s:borderStroke&gt; &lt;s:SolidColorStroke color="#EEEEEE" weight="4"/&gt; &lt;/s:borderS...
Flutter Container 设置宽高、背景色、边框、圆角
卜卦的博客
09-08 9744
Container( width: 96, // 宽 height: 96, // 高 decoration: BoxDecoration( color: MyColor.buttonDefaultColor, // 背景色 border: new Border.all(color: Color(0xFFFF0000), width: 0.5),// border borde
Dojo1.11官方教程文档翻译（5.6）Dijit布局
碎梦道
02-13 957
创建动态和交互式的布局是所有图形用户界面的共同挑战。通过HTML和CSS我们已经拥有了创建布局的许多能力。在CSS之外，Dojo挑选了一系列可扩展的widget作为Dijit的一部分——Dojo的UI框架。在这片及教程中，我们将阐述Dijit如何应对常见的布局需求，并了解它如何只用几个灵活的widget创建更加复杂的布局。
Flutter Container去掉边框
鲸落
01-07 3066
一、效果图 1 原图 2 修改后 二、解决 出现如上原因是由于蓝色边框导致的覆盖不全，所以只需要把蓝色容器边框去掉即可 1 例子 Container( width: 100.0, height: 100.0, color: Colors.red, ), 2 修改 Container( width: 100.0, height: 100.0, decoration: BoxDecoration( color: c_FF, border: Border.all(
Dojo学习笔记（九）：Dojo布局——对齐方式容器
weixin_33861800的博客
10-14 460
用以盛放小部件，可以设置这些小部件的排列方式。 1dijit/layout/BorderContainer BorderContainer是一个布局容器，，它将容器内容分为 5 个区域：左 (left/leading), 右 (right/trailing), 上 (top), 下 (bottom), 中 (Center)，如下图所示。...
Flutter的Container
wgefcelgu的专栏
07-11 879
例如，可以使用alignment属性将子部件居中对齐，使用padding属性增加子部件与容器边缘的间距，使用decoration属性添加边框和阴影效果等。Flutter的Container是一种常用的布局容器，用来包裹和定位其他小部件。它提供了对子部件的约束和样式设置，可以帮助开发者组织界面布局，并控制部件在屏幕上的位置和尺寸。上述代码创建了一个宽高为200的蓝色容器，其中包含一个居中对齐的文本部件。你可以根据需求使用Container来实现不同的布局效果和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值