SAPUI5中的拆分器控制
我正在尝试实现SAPUI5拆分器按钮/控件，它接受一个标签和一个类似链接的按钮。与添加技能时的链接类似，文本将与“删除”按钮一起显示。如果要删除文本，只需单击“删除”按钮，它就会删除（这是在“链接中”中发生的情况） 我也想使用SAP splitter控件实现同样的功能，但我面临一些布局问题。我已经尝试了很多来解决这个问题，但没有运气 这是我的密码 在代码中，总共有三个拆分器。名为osplitter的主拆分器，在其addFirstPaneContent中保存0…n个子脚本 问题是，它总是以垂直对齐方式显示拆分按钮，而不是像链接中那样以水平对齐方式显示拆分按钮。我还将布局更改为水平，但仍以垂直对齐方式显示 有什么建议吗SAPUI5中的拆分器控制,sapui5,Sapui5,我正在尝试实现SAPUI5拆分器按钮/控件，它接受一个标签和一个类似链接的按钮。与添加技能时的链接类似，文本将与“删除”按钮一起显示。如果要删除文本，只需单击“删除”按钮，它就会删除（这是在“链接中”中发生的情况） 我也想使用SAP splitter控件实现同样的功能，但我面临一些布局问题。我已经尝试了很多来解决这个问题，但没有运气 这是我的密码 在代码中，总共有三个拆分器。名为osplitter的主拆分器，在其addFirstPaneContent中保存0…n个子脚本 问题是，它总是以垂直对齐
var splitterLabel = new Label({
text : 'Splitter ',
width: '80px'
});
var oSplitterH = new sap.ui.commons.Splitter("splitterH");
oSplitterH.setSplitterOrientation(sap.ui.commons.Orientation.Horizontal);
oSplitterH.setSplitterPosition("200%%");
oSplitterH.setMinSizeFirstPane("20%");
oSplitterH.setMinSizeSecondPane("30%");
oSplitterH.setWidth("200%");
//adding Labels to both panes
var oSplitter2 = new sap.ui.commons.Splitter("splitterH12");
oSplitter2.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter2.setSplitterPosition("10%");
oSplitter2.setMinSizeFirstPane("10%");
oSplitter2.setMinSizeSecondPane("10%");
oSplitter2.setWidth("20%");
var oLabel2 = new sap.ui.commons.Label({text: "Part1"});
oSplitter2.addFirstPaneContent(oLabel2);
var oLabel2 = new sap.ui.commons.Label({text: "Part2"});
oSplitter2.addFirstPaneContent(oLabel2);
var oSplitter3 = new sap.ui.commons.Splitter("splitterH13");
oSplitter3.setSplitterOrientation(sap.ui.commons.Orientation.Vertical);
oSplitter3.setSplitterPosition("10%");
oSplitter3.setMinSizeFirstPane("10%");
oSplitter3.setMinSizeSecondPane("10%");
oSplitter3.setWidth("20%");
var oLabe123 = new sap.ui.commons.Label({text: "Part3"});
oSplitter3.addFirstPaneContent(oLabe123);
var oLabe1234 = new sap.ui.commons.Label({text: "Part4"});
oSplitter3.addFirstPaneContent(oLabe1234);
oSplitterH.addFirstPaneContent(oSplitter2);
oSplitterH.addFirstPaneContent(oSplitter3);
createProfileMatrix.createRow(splitterLabel, oSplitterH, null, null);
以下代码可能对您有所帮助 index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="main.css"/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("sapui5samples");
var view = sap.ui.view({id:"idlinkedIn-label1", viewName:"sapui5samples.linkedIn-label", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="list"></div>
</body>
</html>
var-oLayout；
sap.ui.jsview（“sapui5samples.linkedIn标签”{
getControllerName:函数（）{
返回“sapui5samples.linkedIn标签”；
},
createContent:函数（oController）{
//使用建议列表（列表扩展器）创建一个简单的搜索字段
//可见）
var oSearch=new sap.ui.commons.SearchField（“suggestSearch1”{
enableListSuggest：正确，
星条旗：1，
搜索：功能（oEvent）{
var techName=oEvent.getParameter（“查询”）；
addTechnology（techName）；
},
建议：doSuggest
});
//按钮，用于添加技术（如果该技术未在可用列表中列出）
//技术
var oButton=new sap.ui.commons.Button({
文本：“添加”，
工具提示：“添加技术”，
按：函数（）{
var tech=sap.ui.getCore（）.byId（“suggestSearch1”）.getValue（）；
电子科技(科技);；
}
});
//创建一个简单的水平布局
var oLayout=new sap.ui.commons.layout.HorizontalLayout({
内容：[oSearch，oButton]
});
//将其附加到页面中的某个元素
oLayout.placeAt（“内容”）；
oLayout=newsap.ui.commons.layout.HorizontalLayout（“目标”）；
oLayout.addStyleClass（“技术区”）；
//将其附加到页面中的某个元素
oLayout.placeAt（“列表”）；
}
});
//帮助函数处理搜索字段的建议事件
var doSuggest=功能（oEvent）{
var sVal=oEvent.getParameter（“值”）；
var aSuggestions=filterTechnologies（sVal）；//查找技术
var oSearchControl=sap.ui.getCore（）.byId（oEvent.getParameter（“id”）；
oSearchControl.suggest（sVal，aSuggestions）；//将找到的建议设置为
//搜索控件
};
var technologies=[“Java”、“.Net”、“PHP”、“SAPUI5”、“JQuery”、“HTML5”、”]；
technologies.sort（）；
jQuery.sap.require（“jQuery.sap.strings”）；//加载要使用的插件
//'jQuery.sap.startsWithIgnoreCase'
//帮助功能根据给定前缀筛选技术
var过滤器技术=功能（sPrefix）{
var aResult=[]；
对于（var i=0；i .tech-area{
border:1px solid gray;
border-radius: 5px;
width:500px;
height:300px;
left:0;
top:50;
position:relative;
overflow:scroll;
}
var oLayout;
sap.ui.jsview("sapui5samples.linkedIn-label", {
getControllerName : function() {
return "sapui5samples.linkedIn-label";
},
createContent : function(oController) {
// create a simple SearchField with suggestion list (list expander
// visible)
var oSearch = new sap.ui.commons.SearchField("suggestSearch1", {
enableListSuggest : true,
startSuggestion : 1,
search : function(oEvent) {
var techName = oEvent.getParameter("query");
addTechnology(techName);
},
suggest : doSuggest
});
// Button for adding the technology if it is not listed in the available
// technologies
var oButton = new sap.ui.commons.Button({
text : "Add",
tooltip : "Add Technology",
press : function() {
var tech = sap.ui.getCore().byId("suggestSearch1").getValue();
addTechnology(tech);
}
});
// create a simple horizontal layout
var oLayout = new sap.ui.commons.layout.HorizontalLayout({
content : [ oSearch, oButton ]
});
// attach it to some element in the page
oLayout.placeAt("content");
oLayout = new sap.ui.commons.layout.HorizontalLayout("target");
oLayout.addStyleClass("tech-area");
// attach it to some element in the page
oLayout.placeAt("list");
}
});
// Help function to handle the suggest events of the search field
var doSuggest = function(oEvent) {
var sVal = oEvent.getParameter("value");
var aSuggestions = filterTechnologies(sVal); // Find the technologies
var oSearchControl = sap.ui.getCore().byId(oEvent.getParameter("id"));
oSearchControl.suggest(sVal, aSuggestions); // Set the found suggestions on
// the search control
};
var technologies = [ "Java", ".Net", "PHP", "SAPUI5", "JQuery", "HTML5", "" ];
technologies.sort();
jQuery.sap.require("jquery.sap.strings"); // Load the plugin to use
// 'jQuery.sap.startsWithIgnoreCase'
// Help function to filter the technologies according to the given prefix
var filterTechnologies = function(sPrefix) {
var aResult = [];
for (var i = 0; i < technologies.length; i++) {
if (!sPrefix || sPrefix.length == 0
|| jQuery.sap.startsWithIgnoreCase(technologies[i], sPrefix)) {
aResult.push(technologies[i]);
}
}
return aResult;
};
var count = 0;
var arr = [];
// function for add the item to horizontal layout
var addTechnology = function(techName) {
var elementIndex = arr.indexOf(techName);
// conditional statement for adding the tech to the list
if (elementIndex === -1) {
count++;
// create a horizontal Splitter
var oSplitterV = new sap.ui.commons.Splitter({
width : "120px",
height : "30px",
showScrollBars : false,
splitterBarVisible : false
});
oSplitterV.setSplitterOrientation(sap.ui.commons.Orientation.vertical);
oSplitterV.setSplitterPosition("60%");
oSplitterV.setMinSizeFirstPane("60%");
oSplitterV.setMinSizeSecondPane("40%");
// label with dynamic Id
var oLabel1 = new sap.ui.commons.Label("tCount" + count, {
text : techName,
tooltip : techName
});
oSplitterV.addFirstPaneContent(oLabel1);
var oLabel2 = new sap.ui.commons.Button({
icon : "img/delete.png",
press : function() {
removeElement(techName);
oSplitterV.destroy();
}
});
oSplitterV.addSecondPaneContent(oLabel2);
sap.ui.getCore().byId("target").addContent(oSplitterV);
// Adding the tech to the parent array
arr.push(techName);
// Emptying the search box
sap.ui.getCore().byId("suggestSearch1").setValue("");
} else {
sap.ui.commons.MessageBox.alert(techName
+ " is already added to the list");
}
}
// function for removing removed element from parent array
var removeElement = function(addedTech) {
// Find and remove item from an array
var i = arr.indexOf(addedTech);
if (i != -1) {
arr.splice(i, 1);
}
}