标题主要需要配置的3个文件，.js .ejs .json
1、以首页课程组件为例，NcACourse.js
NcACourse.js中的第一部分
this.sdata = {
titleicon: "/res/dsf_styles/themes/nc/newindex/kc.png", //标题图片
titleText: "课程",
titleTextcolor: "",
isshowBar: false, //是否显示菜单
issBarcoloract: "#FF6A00", //菜单选中色
borderstyle: "#fdc8c8 2px dotted", //边框样式
gtitlebg: "#fff", //头部整栏背景
titletxtbgcolor:'#da0000',
titletxtbgl:"/res/dsf_styles/themes/nc/nm/tit-left.png", //标题文字背景
titletxtbgr:"/res/dsf_styles/themes/nc/nm/tit-right.png", //标题文字背景
morebtnbg:"#fff,/res/dsf_styles/themes/nc/nm/more01.png",//更多按钮的背景
moretext:'更多',
isshowChooseBtn: true, //是否显示操作按钮
Btntext: "按钮名称", //操作按钮文本
Btnurl: "", //操作按钮链接
ismoreBtn: true, //是否显示更多按钮
moreBtnUrl: "nc/kck/mhkc/views/kclb.html", //更多按钮链接
moreBtnColor: "", //更多按钮颜色
};NcACourse.js中的第二部分
renderContext(refresh) {
super.renderContext();
let _this = this;
if (this._root._isDesign) { //配置页面
if (this.sdata.titleicon == "") {
this._handlers.jstitleicon.parents(".titimgbox").hide();
} else {
this._handlers.jstitleicon.parents(".titimgbox").show();
this._handlers.jstitleicon.attr("src", dsf.url.getWebPath(this.sdata.titleicon));
}
this._handlers.jstitletext.find("span").text(this.sdata.titleText);
// 文字显示区域
this._handlers.jstitletext.find("span").css({
"color": this.sdata.titleTextcolor,
"background":this.sdata.titletxtbgcolor,
})
if(this.sdata.titletxtbgl == '' || this.sdata.titletxtbgr == ''){//如果没有配置图片就去掉边距
this._handlers.jstitletext.find("span").css('padding',0)
this._handlers.jstitletext.css('padding',0)
}
this._handlers.jstitletext.css({
"background":' url(' + dsf.url.getWebPath(this.sdata.titletxtbgl) + ') no-repeat,'
+'url(' + dsf.url.getWebPath(this.sdata.titletxtbgr) + ') no-repeat 100% 0',
});
this._handlers.jstitlebox.css({
"border": this.sdata.borderstyle,
"background":this.sdata.gtitlebg,
});
let morearr=this.sdata.morebtnbg.split(',');
this._handlers.jsmorebtn.css({
"color": this.sdata.moreBtnColor,
"background": morearr[0] +' url(' + dsf.url.getWebPath(morearr[1]) + ') no-repeat',
"background-size":'100% 100%'
});
}else{ //预览时
if (this.sdata.titleicon == "") {
this._handlers.jstitleicon.parents(".titimgbox").hide();
} else {
this._handlers.jstitleicon.parents(".titimgbox").show();
this._handlers.jstitleicon.attr("src", dsf.url.getWebPath(this.sdata.titleicon));
}
this._handlers.jstitletext.find("span").text(this.sdata.titleText);
// 文字显示区域
this._handlers.jstitletext.find("span").css({
"color": this.sdata.titleTextcolor,
"background":this.sdata.titletxtbgcolor,
})
if(this.sdata.titletxtbgl == '' || this.sdata.titletxtbgr == ''){//如果没有配置图片就去掉边距
this._handlers.jstitletext.find("span").css('padding',0)
this._handlers.jstitletext.css('padding',0)
}
this._handlers.jstitletext.css({
"background":' url(' + dsf.url.getWebPath(this.sdata.titletxtbgl) + ') no-repeat,'
+'url(' + dsf.url.getWebPath(this.sdata.titletxtbgr) + ') no-repeat 100% 0',
});
this._handlers.jstitlebox.css({
"border": this.sdata.borderstyle,
"background":this.sdata.gtitlebg,
});
this.isshowBarfun();
this.getDialogData();
this.isshowChooseBtnfun();
this._handlers.jschoosebtn.html(this.sdata.Btntext);
this.isshowMoreBtnfun();
let morearr=this.sdata.morebtnbg.split(',');
this._handlers.jsmorebtn.css({
"color": this.sdata.moreBtnColor,
"background": morearr[0] +' url(' + dsf.url.getWebPath(morearr[1]) + ') no-repeat',
"background-size":'100% 100%'
});
if (this._root._isDesign) {
this._postData();
} else {
// 兼容
if (this.plancoursedata === undefined) {
this.plancoursedata = {
labelcolor: "#FF6A00", //标签色
hoverbg: "/res/dsf_styles/themes/styleClass/indexhoverbg.png", //移入背景图
btncolor: "#E12617", //移入背景色
};
}
//this.postData();
this.baractNum();
}
}
}其中
this.postData();
是本组件方法，其他组件自行替换
NcACourse.js中的第三部分
// 配置项----------------------------------------------------------
// 是否显示菜单
isshowBarfun() {
let _this = this;
_this.$jsbarbox = _this._handlers["jsbarbox"];
if (this.sdata.isshowBar) {
// 兼容
_this.$jsbarbox.removeClass("none");
_this._handlers.jsbarbox.find("li.act").removeClass("actv");
if (_this.sdata.issBarcoloract != "") {
_this._handlers.jsbarbox.find("li.act").css({
color: _this.sdata.issBarcoloract,
"border-bottom-color": _this.sdata.issBarcoloract,
}); //选中色
} else {
_this._handlers.jsbarbox.find("li.act").addClass("actv");
}
} else {
_this.$jsbarbox.addClass("none");
}
}
//是否显示操作按钮
isshowChooseBtnfun() {
let _this = this;
_this.$jschoosebtn = _this._handlers["jschoosebtn"];
if (this.sdata.isshowChooseBtn) {
_this.$jschoosebtn.removeClass("none");
} else {
_this.$jschoosebtn.addClass("none");
}
_this.$jschoosebtn.click(function() {
let url = dsf.url.getWebPath(_this.sdata.Btnurl);
dsf.openUrl(1, url);
// window.location.href = dsf.url.getAbsolutePath(url);
});
}
//是否显示更多按钮
isshowMoreBtnfun() {
let _this = this;
_this.$jsmorebtn = _this._handlers["jsmorebtn"];
if (this.sdata.ismoreBtn) {
_this.$jsmorebtn.removeClass("none");
} else {
_this.$jsmorebtn.addClass("none");
}
_this._handlers["jsmorebtn"].click(function(evt) {
let userId = dsf.getCookie("userId");
if (!userId) {
window.parent.openLogin();
evt.preventDefault();
}
// else {
// let path = dsf.url.getWebPath(_this.sdata.moreBtnUrl);
// dsf.openUrl(1, path)
// }
});
}
getDialogData() {
let _this = this;
let data = this.$test;
if (data.length > 0) {
_this.sdata.isshowBar = true;
let shtml = "";
for (var i = 0, len = data.length; i < len; i++) {
if (i == 0) {
_this.sdata.moreBtnUrl = data[i].name;
shtml += '<li class="act" urls="' + data[i].name + '">' + data[i].code + "</li>";
} else {
shtml += '<li urls="' + data[i].name + '">' + data[i].code + "</li>";
}
}
_this.$jsbarbox = _this._handlers["jsbarbox"];
_this.$jsbarbox.html(shtml);
_this.$jsbarbox.find("li").click(function() {
$(this)
.addClass("act")
.siblings()
.removeClass("act");
_this.$jsbarbox.find("li.act").removeClass("actv");
if (_this.sdata.issBarcoloract != "") {
_this.$jsbarbox.find("li.act").css({
color: _this.sdata.issBarcoloract,
"border-bottom-color": _this.sdata.issBarcoloract,
}); //选中色
} else {
_this.$jsbarbox.find("li.act").addClass("actv");
}
$(this)
.siblings()
.removeClass("actv");
$(this)
.siblings()
.removeClass("act");
$(this)
.siblings()
.css({
color: "",
"border-bottom-color": "",
}); //选中色
_this.sdata.moreBtnUrl = $(this).attr("urls");
let index = $(this).index();
_this.parms.orderType = index;
if (_this._root._isDesign) {
//_this._postData();
} else {
//_this.postData();
}
});
} else {
_this.sdata.isshowBar = false;
}
_this.isshowBarfun();
}
set detailurlfun(v) {
this.$detailUrl = v;
this.domUpdate();
}
get detailurlfun() {
return this.$detailUrl;
}
set labelcolor(v) {
this.plancoursedata.labelcolor = v;
this.domUpdate();
}
get labelcolor() {
return this.plancoursedata.labelcolor;
}
set btncolor(v) {
this.plancoursedata.btncolor = v;
}
get btncolor() {
return this.plancoursedata.btncolor;
}
set baract(v){
this.$baractnum = v;
this.baractNum()
this.domUpdate();
}
get baract(){
return this.$baractnum;
}
//新增配置项
set gtitheight(v) {
this.sdata.titheight = v;
this.domUpdate();
}
get gtitheight() {
return this.sdata.titheight;
}
set gtitleborder(v) {
this.sdata.borderstyle = v;
this.domUpdate();
}
get gtitleborder() {
return this.sdata.borderstyle;
}
set gtitlebg(v) {
this.sdata.gtitlebg = v;
this.domUpdate();
}
get gtitlebg() {
return this.sdata.gtitlebg;
}
set gtitletxtbgcolor(v) {
this.sdata.titletxtbgcolor = v;
this.domUpdate();
}
get gtitletxtbgcolor() {
return this.sdata.titletxtbgcolor;
}
set gtitletxtbgl(v) {
this.sdata.titletxtbgl = v;
this.domUpdate();
}
get gtitletxtbgl() {
return this.sdata.titletxtbgl;
}
set gtitletxtbgr(v) {
this.sdata.titletxtbgr = v;
this.domUpdate();
}
get gtitletxtbgr() {
return this.sdata.titletxtbgr;
}
set gmorebtnbg(v) {
this.sdata.morebtnbg = v;
this.domUpdate();
}
get gmorebtnbg() {
return this.sdata.morebtnbg;
}
set gmoretext(v) {
this.sdata.moretext = v;
this.domUpdate();
}
get gmoretext() {
return this.sdata.moretext;
}
baractNum(){
let _this = this;
_this.$jsbarbox = _this._handlers["jsbarbox"];
_this.$jsbarbox.find('li:nth-child('+_this.$baractnum+')').click();
}
//配置项----------------------------------------------------------end显示有菜单，getDialogData()会有默认执行的方法，本组件为如图，其他组件自行替换
2、以首页课程组件为例，NcACourse.ejs
<div class="ds_nc_titlebox" handler="jstitlebox">
<div class="hleft">
<div class="titimgbox">
<img handler="jstitleicon" src="/res/dsf_styles/themes/nc/newindex/kc.png" alt="" />
</div>
<div class="tit-text" handler="jstitletext"><span>课程</span></div>
<ul class="barbox jsbarbox" handler="jsbarbox">
<!--<li class="act">推荐</li>
<li>最新</li>
<li>最热</li>-->
</ul>
</div>
<div class="hright">
<div class="choosebtn" handler="jschoosebtn"><%=sdata.Btntext%></div>
<a class="morebtn" target="_self" href="<%= dsf.url.getAbsolutePath(sdata.moreBtnUrl)%>" handler="jsmorebtn">{{sdata.moretext}}</a>
</div>
</div> 
3、以首页课程组件为例，NcACourse.json
[{
"name": "基础属性",
"attributes": [{
"text": "组件标识",
"bindControlAttr": "caption",
"showType": "text"
},
{
"text": "是否可见",
"showType": "boolean",
"bindControlAttr": "visible",
"changeExecFunction": "renderContext"
},
{
"text": "是否失效",
"showType": "boolean",
"bindControlAttr": "disabled",
"changeExecFunction": "renderContext"
},
{
"text": "边框样式",
"bindControlAttr": "gtitleborder",
"showType": "text",
"config":{
"placeholder":"示例（1px solid red）"
}
},
{
"text": "头部整栏背景",
"bindControlAttr": "gtitlebg",
"showType": "text",
"config":{
"placeholder":"示例（#fff）"
}
},
{
"text": "标题文字背景颜色",
"bindControlAttr": "gtitletxtbgcolor",
"showType": "text",
"config":{
"placeholder":"示例（#da0000）"
}
},
{
"text": "标题文字背景左(左右都配置才显示)",
"bindControlAttr": "gtitletxtbgl",
"showType": "text",
"config":{
"placeholder":"示例（/res/.../tit-left.png）"
}
},
{
"text": "标题文字背景右(左右都配置才显示)",
"bindControlAttr": "gtitletxtbgr",
"showType": "text",
"config":{
"placeholder":"示例（/res/.../tit-right.png）"
}
},
{
"text": "标题图片",
"bindControlAttr": "sdata.titleicon",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "标题文本",
"bindControlAttr": "sdata.titleText",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "标题文本颜色",
"bindControlAttr": "sdata.titleTextcolor",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "是否显示菜单(高级属性去配置)",
"bindControlAttr": "sdata.isshowBar",
"showType": "boolean",
"changeExecFunction": "isshowBarfun"
},
{
"text": "菜单选中色",
"bindControlAttr": "sdata.issBarcoloract",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "标签色",
"bindControlAttr": "labelcolor",
"showType": "text"
},
{
"text": "鼠标移入背景图~",
"bindControlAttr": "plancoursedata.hoverbg",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "右边按钮背景色",
"bindControlAttr": "btncolor",
"showType": "text"
},
{
"text": "是否显示操作按钮",
"bindControlAttr": "sdata.isshowChooseBtn",
"showType": "boolean",
"changeExecFunction": "isshowChooseBtnfun"
},
{
"text": "操作按钮文本",
"class": "webRoot_name",
"bindControlAttr": "sdata.Btntext",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "操作按钮url",
"class": "webRoot_name",
"bindControlAttr": "sdata.Btnurl",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "是否显示更多",
"bindControlAttr": "sdata.ismoreBtn",
"showType": "boolean",
"changeExecFunction": "isshowMoreBtnfun"
},
{
"text": "更多按钮的背景",
"bindControlAttr": "gmorebtnbg",
"showType": "text",
"config":{
"placeholder":"示例（#fff,/res/.../more01.png）"
}
},
{
"text": "最右侧按钮文本",
"bindControlAttr": "gmoretext",
"showType": "text",
"config":{
"placeholder":"示例（更多）"
}
},
{
"text": "更多按钮文本颜色",
"class": "webRoot_name2",
"bindControlAttr": "sdata.moreBtnColor",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "更多按钮链接(有菜单时优先使用第一个菜单配置的链接)",
"class": "webRoot_name2",
"bindControlAttr": "sdata.moreBtnUrl",
"showType": "text",
"changeExecFunction": "renderContext"
},
{
"text": "背景设置",
"bindControlAttr": "background",
"showType": "backgroundEditor"
},
{
"text": "点击某一项需跳转的页面路由",
"bindControlAttr": "detailurlfun",
"showType": "text"
},
{
"text": "有菜单的时候让第几个菜单选中（从1开始）",
"bindControlAttr": "baract",
"showType": "text"
}
]
},
{
"name": "高级属性",
"attributes": [{
"text": "菜单名称与链接设置",
"showType": "dialog",
"bindControlAttr": "$test",
"changeExecFunction": "getDialogData",
"config": {
"title": "菜单名称与链接设置",
"url": "/dsfa/pd/views/Ncheadline.html",
"width": "900px",
"height": "600px",
"buttonText": "设置"
}
}]
}
]
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
