简单模块标题一般有文字和图片两种方式,文字除了标题还可以加更多链接,利用common.less可以把样式共用,每开发一次模板,只要把这标题做一次就可以了,非常方便。
<group title="模块标题"> <section title="标题设置" folded="false"> <param description="" formType="range" label="标题显示模式:" name="title_module" ptype="text"> <option value="1" selected="selected">文字模式</option> <option value="2">自定义图片模式</option> <option value="0">×不显示</option> </param> </section> <section title="文字模式" folded="false"> <param description="" formType="text" label="标题文字:" name="title" ptype="text">分类推荐</param> <param description="" formType="text" label="更多文字:" name="title_more" ptype="text">more+</param> <param description="" formType="text" label="更多链接:" name="more_link" ptype="text">#</param> </section> <section title="自定义图片模式" folded="false"> <param description="宽度950,高度不限" formType="text" label="图片地址:" name="title_img" ptype="text"></param> </section> </group>
common.less
.title1{ height:30px;line-height:30px;padding-left:14px;font-size:14px;overflow:hidden;position:relative;background:#e4e3e8;margin-bottom:10px; .more{position:absolute;right:10px;display:block;line-height:30px;top:0;color:#000;text-decoration:none;} }
对应模块内css
.moduletitle{.title1;}
PHP代码:
//模块标题 $title_module= $_MODULE['title_module']; //标题模式 $title= $_MODULE['title']; //标题文字 $title_more =$_MODULE['title_more']; //更多文字 $more_link=$_MODULE['more_link']; //更多链接 $title_img=$_MODULE['title_img']; //自定义图片 if($title_module==1){ //文字模式 echo '<div class="moduletitle">'.$title.'<a class="more" href="'.$more_link.'">'.$title_more.'</a></div>'; }elseif($title_module==2){ //自定义图片模式 $title_pic=$title_img ? $title_img : '../../assets/images/titlepic.jpg'; echo '<div class="title_pic"><img src="'.$title_pic.'" /></div>'; }else{ //不显示 echo ''; }