移动BOS控件介绍-HTML片段
HTML片段说明
HTML片段可用于通过自行编写html和JavaScript代码来实现页面和交互逻辑，让页面不局限于组件，你可以自行通过编写代码来实现你想要的页面和效果。
效果展示
流程助手里使用HTML片段实现的单据联查效果。
控件属性
属性名 | 属性ID | 类型 | 默认值 | 说明 |
ID | ID | String |
| HTML片段ID,可以用于jquery找元素或者设置样式,也可以使用mbos('对应ID')设置控件属性 |
类型 | type | String | HTML片段 | 无 |
HTML源码 | HTML片段 | String | 无 | HTML源码用于在里面编写html和JavaScript代码 |
控件演示实例
1. 添加HTML片段控件后点击HTML源码的设置按钮
2. 你可在编辑代码里编写自己的代码
为了演示你可以在里面填写如下演示代码观看效果：
<!DOCTYPE html>
<html>
<head>
<style>
.bd3 {
position: relative;
width: 100%;
height: auto;
background: #FFFFFF;
margin-top: 12px;
}
.word1 {
width: 64px;
height: 24px;
overflow-wrap: break-word;
color: rgba(33, 33, 33, 1);
font-size: 16px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 24px;
text-align: left;
}
.word2 {
width: 303px;
height: 24px;
display: block;
overflow-wrap: break-word;
color: rgba(33, 33, 33, 1);
font-size: 16px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 24px;
text-align: left;
}
.txt1 {
height: 20px;
overflow-wrap: break-word;
color: rgba(153, 153, 153, 1);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: right;
margin: 2px 0 0 208px;
}
.flexdiv {
display: flex;
justify-content: space-between;
align-items: center;
height: 48px;
}
.countDiv {
width: 25%;
}
.blackDiv {
padding-bottom: 10px;
}
.infoDiv {
background-color: rgb(248, 249, 250);
margin-left: 12px;
margin-right: 12px;
padding-left: 12px;
margin-bottom: 10px;
}
.bottomflexdiv {
display: flex;
justify-content: space-between;
align-items: center;
height: 48px;
}
.bottomstyle {
color: #ffc107;
border-color: #ffc107;
padding: .25rem .5rem;
border-radius: .2rem;
background-color: #FAFAFA;
border: 1px solid #ffc107;
}
.bottomstyle:hover {
background-color: #ffc107;
color: #000000;
}
.imageDiv {
margin-left: 6px;
}
.newline{
word-wrap:break-word;
word-break:break-all;
overflow: hidden;
}
</style>
<script>
$(document).ready(function() {
//当前单据
$("#currentName").text(billAlias);
$("#currentId").text(number);
//上游单据
var upSize = upList.length;
console.info("上游大小："+upSize);
$("#upcount").text("共"+upSize+"项");
for(var i=0;i<upList.length;i++){
var uptemp = upList[i];
console.info("上游v："+uptemp);
var upHtmlStart = '<div class="infoDiv"><span class="word2">'+uptemp.billName+
'</span><div class="bottomflexdiv"><div class="newline"><span class="
text-black-50 fontSize">'+uptemp.billCodeName+'</span></div><div class="
countDiv"><button type="button" class="
bottomstyle" id="'+uptemp.billId+'">查看单据</button></div></div></div>';
$("#upPage").append(upHtmlStart);
}
//上游单据为空则不显示
if(upSize<=0){
$("#upBlock").hide();
}
//下游单据
var downSize = downList.length;
console.info("下游大小："+downSize);
$("#downcount").text("共"+downSize+"项");
for(var i=0;i<downList.length;i++){
var downtemp = downList[i];
console.info("下游v："+downtemp);
var downHtml = '<div class="infoDiv"><span class="word2">'+downtemp.billName+
'</span><div class="bottomflexdiv"><div class="newline"><span class="
text-black-50 fontSize">'+downtemp.billCodeName+'</span></div><div class="
countDiv"><button type="button" class="
bottomstyle" id="'+downtemp.billId+'">查看单据</button></div></div></div>';
$("#downPage").append(downHtml);
}
//下游单据为空则不显示
if(downSize<=0){
$("#downBlock").hide();
}
//点击按钮时通过url跳转
$("button").click(function (e) {
var bill_Id = e.target.id;
console.info("url："+window.location.href);
console.info("bill_Id："+bill_Id);
//当前url
var originUrl = window.location.href;
var array = originUrl.split("?");
var originParam = array[1].split("&");
var param = "";
for(var i=0;i<originParam.length;i++){
console.info("originParam："+originParam[i]);
if(originParam[i].indexOf("eid=") != -1){
param=param+originParam[i]+"&";
}
if(originParam[i].indexOf("path=") != -1){
param=param+originParam[i]+"&";
}
if(originPar移动BOS控件介绍-HTML片段
HTML片段说明HTML片段可用于通过自行编写html和JavaScript代码来实现页面和交互逻辑，让页面不局限于组件，你可以自行通过编写代码来实现你...
点击下载文档文档为doc格式
声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
上一篇
已经是第一篇
下一篇
