sap更改主题_SAP主题个性化修改(一)搜索页面
搜索页面修改主题后的效果如图:
这次用的是基于bluecrystal主题创建的页面。分析dom树结构,有利于页面布局和色调的修改。
当我们掌握了页面的大体结构,我们可以针对不同的元素进行个性化的定制,这时就可以充分发挥CSS功力,让页面大变身了。
让我们先来看看搜索页面的基本结构。
body调用urBdyStd、urBdyStdNoMrg两个样式,看过上篇文章后可以发现,这两个属于标准命名规则,从字面上就能知道基本的含义。
页面整体的背景图片是通过一个div.urCanvasBgImage 设置的,默认是没有背景图,不显示。
页面所有内容包裹在一个table>tbody>tr>td>div中,这些都没有定义class属性;这个div里面包裹了两个div。
一、第一个div
第一个div和父div都是宽高100%,其里包裹了一个table(同样是宽高100%),它有两个样式urMatrixLayout、urHtmlTableReset,这也是除了body以外的首个应用了class的元素了,这两个样式只是定义了字体的字号、字重、风格、对齐方式等。tbody.urLinStd(没有样式)里面包裹了3个没有任何属性的tr元素,同时tr里面各自包裹了一个td.lsContainerCell.lsContainerCellVAlign--top.urLayoutPadless,几个class里面只有urLayoutPadless定义了padding:0的样式。
1、第一个tr > td(pageHeader)
table.urMatrixLayout.urHtmlTableReset > tbody.urLinStd > tr > td.lsContainerCell.lsContainerCellVAlign--top.urLayoutPadless > div.urPgHSmall.sapLSStandalonePH
第一个tr可以理解为页头部分,主要显示了logo、页面标题和信息提示区域。唯一的td里面包裹了一个div.urPgHSmall.sapLSStandalonePH,这个div里面包裹4个div。
① 第一个div(title标题——主体,flex布局)
div.lsPageHeaderTitle--content.lsPageHeaderTitle--design-small.sapLSStandalonePHHeader。里面包含3个div
(页头的logo) div.lsPageHeaderTitle--onlyLogo 里面包裹一个span.lsPageHeaderTitle--logo-container.lsPageHeaderTitle--logo-standalone > img.lsPageHeaderTitle--logo-image
(页头文字) div.lsPageHeaderTitle--text.lsPageHeaderTitle--text-small > div.lsPageHeaderTitle--text-overflow
(页头信息提示区域,包含2个div)div.lsPageHeaderTitle--rightItems.lsPageHeaderTitle--rightItems-messageArea
div.lsPageHeader_MessageArea (信息数提示区)。
包裹几层div后,是一个这样的结构:div.lsHTMLContainer.sapLsFPMMessageArea > div > table.urMatrixLayout.urHtmlTableReset > tbody.urLinStd > tr > td.lsContainerCell.urLayoutPadless > div.lsMA,这里面是实体内容,分成2个div,一个是通知数标,一个是通知内容浮动框。
div.lsMANotifier(通知数标)里面结构为 table > tbody > tr > td *2 > div,第一个div.lsMANotifierIcon ,通过字体图标显示通知图标;第二个div.lsMANotifierCounter里面显示数字;
div.lsMACenter(通知内容浮动框),这个div应该是js控制的,上面会有一些行内样式控制位置大小等;这个div下除了两个div是相关内容的容器,剩下4个div是为了调节浮动框大小而设置的;
div.lsPageHeader--endArea(包裹了一个空的div)
②③后两个div
div.lsPageHeader--item.urPgHITrans,此主题下面默认是个空的div。
2、第二个tr > td
第二个tr > td 里面是一个table.lsHTMLContainer, 整个表单的查询条件和查询列表内容都是在这个table里面。
再深入往下,table.lsHTMLContainer > tbody > tr > td > div.urScrl.urBorderBox,这个div定义了overflow:auto,应该是整个表单的滚动区域。
继续往下 div. urBorderBox > div > table.urFontStd.urHtmlTableReset 这个table里面有2个tr 分别是搜索条件和搜索结果了。
① td.lsContainerCell.lsGLCTopVAlign.lsContainerCellVAlign--top > table.lsPanel.urHtmlTableReset,里面有2个tr。
tr.lsHeaderArea--header 搜索条件标题行,它的点击可以展开或收起它下面对应的tr内容。这个tr里面包裹了一个td.lsHdArTbar2.lsHdArRight2Exp > table.lsHeaderArea__state--expanded,里面一层层展开会发现,包括一个折叠按钮和title文字。
tr > td.lsCnArFaceEmph.lsCnArBrdBox.lsPnCntPadStd > div.urBorderBox.urLayoutPadless > div.urBorderBox.urLayoutRPad > table.lsHTMLContainer > tbody > tr > td > div.urBorderBox.urLayoutLRNoPad > table.lsPanel.urHtmlTableReset 这里显示搜索条件项,之下又分了2个tr。
tr.lsHeaderArea--header 这里与上层结构的标题行相类似,它同样有折叠按钮,可以将下方tr展开收起。它包裹一个td.lsHdArTbar2.lsHdArLight > table.lsHeaderArea__state--expanded,里面有两个td,一个是方向图标,一个是以保存的搜索。
tr > td.lsCnArFaceTrans.lsCnArBrdNone.lsPnCntPadNone > div > table.urMatrixLayout.urHtmlTableReset > tbody.urLinStd > tr 这里面除了前两行和最后一行是功能按钮,其余的每行就是一个搜索条件。
②td.lsContainerCell.lsGLCTopVAlign lsContainerCellVAlign--top > table.lsHTMLContainer > tbody > tr > td > div.urBorderBox.urLayoutPadless > table.urSTCS urST3WhlBrdH.urST3WhlNoTit.urST5SelColUiGeneric.urHtmlTableReset 这个table里面包含了thead 和几个tbody。
thead > tr > th.urST4Toolbar 放置表格工具栏,其下面结构是个table,里面的有左右两个td,分别放置左侧的功能按钮和右侧的个性化设置;
tbody 接下来的一个tbody里面分成两行,第一行放置表头,第二行放置列表行。
其余的tbody看不出来有什么用处,可能是遗留或者预留的位置。里面应该还有个配置分页的。
二、第二个div默认没有实质内容
三、页面中的其他元素
页面跳转时loading的动画,是放在页尾的一个div.lsLoadARoot中,里面包裹的一个div.lsLoadImg 设置了背景图片。
页面最后是页面中引用的SAPWeb、SAPGUI图形的symbol集合,分别集中在一个div>svg的结构中,div设置display:none的属性。
页面中还有一些打印、动画的元素,这里就省略不记了。
以上就是搜索页面的大体结构了,要进行个性化定制,还需要多多实践了。
文章来自于网络,如果侵犯了您的权益,请联系站长删除!