使用JxLib定制灵活网页布局Flexible weblayout

简介:


在MapGuide中,灵活网页布局提供了5个模版,每个模版都有各自不同的样式,你可以选择一个你喜欢的使用。但也许你希望能够对这些模版进行定制,或者干脆创建你自己的模版,如果你真有这想法,希望这篇文章能给你一点启发。MapGuide中的灵活网页布局也就是Fusion viewer是基于OpenLayers 和 JxLib的。他的界面布局部分由JxLib来完成,所以你可以参考JxLib的使用来对布局进行修改。

这里我做个很简单的例子,即为Slate模版添加一个panel,下面是效果截图:

 

image

下面开始着手干,用你喜欢的文本编辑器打开Slate的模版文件,缺省在 C:\Program Files\Autodesk\Autodesk Infrastructure Web Server Extension 2013\www\fusion\templates\mapguide\slate\index.html,然后按照下面修改代码:

    panel3 = new Jx.Panel({

        label: OpenLayers.i18n('taskPaneTitle'),

        collapse: true,

        maximize: true,

        contentId: 'TaskPane'

    });

 

    panel4 = new Jx.Panel({

        label: 'mytest',

        collapse : true,

        maximize : true,

        contentId : 'mytest',

        content : 'your content here'

    });

 

    panelman = new Jx.PanelSet({

        parent: splitter.elements[0],

        panels: [panel1, panel2, panel3,panel4]

    });

注意其中黑体的我增加的代码。

这个只是非常简单的例子,如果你想了解更多,还是需要阅读JxLib的相关文档来实现。你可以还会对这个DevTV视频感兴趣:

DevTV: MapGuide Fusion Technology Introduction
A self-paced video tutorial on how to build a web-based mapping application using the Fusion Viewer Technology and MapGuide Enterprise.
View Online | Download

作者: 峻祁连
邮箱:junqilian@163.com 
出处: http://junqilian.cnblogs.com 
转载请保留此信息。





本文转自峻祁连. Moving to Cloud/Mobile博客园博客,原文链接:http://www.cnblogs.com/junqilian/archive/2012/08/23/2651795.html ,如需转载请自行联系原作者
相关文章
|
10月前
|
缓存 前端开发 JavaScript
可扩展 CSS 的演变
可扩展 CSS 的演变
128 0
|
4月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
10月前
|
UED 开发者 容器
【专栏】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
201 4
|
7月前
|
前端开发 容器
【CSS Flexbox 探秘】弹性盒模型:揭秘网页布局的终极神器!
【8月更文挑战第25天】Flexbox 是 CSS3 中的关键特性,为网页设计提供了强大的布局能力。本文通过问答形式全面解析 Flexbox 的核心概念与属性,包括容器与项目属性,并通过示例演示如何使用 Flexbox 实现水平与垂直居中、等间距布局及响应式设计。相较于传统布局方法,Flexbox 更加灵活且简化了样式设置,同时在现代浏览器中拥有良好的支持度。掌握 Flexbox 对于提升网页布局效率至关重要。
109 1
|
7月前
|
前端开发 容器
掌握弹性盒子布局(Flex):打造灵活的网页布局
掌握弹性盒子布局(Flex):打造灵活的网页布局
|
7月前
|
编解码 前端开发 容器
CSS弹性布局:打造响应式与灵活的网页设计
CSS弹性布局:打造响应式与灵活的网页设计
122 0
|
9月前
|
前端开发 开发者 容器
CSS基础-Flexbox布局基础
【6月更文挑战第11天】Flexbox是CSS3的全新布局模式,简化了网页动态布局问题。通过`display: flex`设置容器,调整`flex-direction`、`justify-content`、`align-items`等属性控制项目排列和对齐。适用于响应式布局、均匀分布空间和元素对齐。注意浏览器兼容性、选择合适布局模式及区分对齐与排序属性。通过实例代码学习和实践,掌握Flexbox能有效提升网页布局效率。
74 3
|
前端开发
CSS布局:CSS三大特性、盒子模型
CSS布局:CSS三大特性、盒子模型
149 0
|
10月前
|
前端开发 开发者 容器
【专栏:CSS进阶篇】CSS Flexbox布局:实现灵活的响应式设计
【4月更文挑战第30天】CSS Flexbox是现代网页设计中创建响应式布局的关键工具,它提供了一种一维布局模型,使元素能灵活适应各种屏幕尺寸。通过设置容器的`display`属性为`flex`,开发者可以利用主轴和交叉轴调整元素排列和对齐方式。核心概念包括弹性项、伸缩性、空间分配和对齐。通过实例,如导航栏、卡片布局、图片画廊和响应式表单,展示了Flexbox在实现响应式设计中的应用。尽管需要注意浏览器兼容性,但掌握Flexbox能帮助开发者构建出功能强大且适应性强的界面。
126 0
|
10月前
|
前端开发 定位技术 开发者
构建响应式网页布局:弹性盒模型(Flexbox)全面指南
【2月更文挑战第13天】 在现代前端开发中,构建灵活且响应式的网页布局是至关重要的。传统的浮动和定位技术往往复杂且难以维护,而CSS3引入的弹性盒模型(Flexbox)提供了一种更为高效和直观的方式来创建复杂的布局结构。本文将深入探讨Flexbox的核心概念、关键属性以及如何利用这一强大的工具来设计适应不同屏幕尺寸的用户界面。通过实例演示和最佳实践,我们将掌握如何使用Flexbox提升布局的灵活性和可访问性。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等