联系客服
15985840591

skymvc之组件化功能UIcompent实现详解

分享 未结 0 2
白茶大师
白茶大师 VIP3 2018年06月13日

一个组件包含UI,数据配置,组件调用。

通过UI组件我们可以轻松实现,在任意页面扩展内容。

我们以常用的左右图来说,这是三张图片,wap端布局常用。

image.png

UI格式

<div class="md-abc">
	<div class="md-abc-a"><a href="{$a['link']}"><img class="md-abc-img" src="{$a['img']}" /></a></div>
	<div class="md-abc-bc md-abc-r">
		<div class="md-b"><a href="{$b['link']}"><img class="md-abc-img"  src="{$b['img']}" /></a></div>
		<div class="md-c"><a href="{$c['link']}"><img class="md-abc-img"  src="{$c['img']}" /></a></div>
	</div>
	
</div>

JSON数据配置

<?php
$data['a']=array(
     "label"=>"图A",
	 "img"=>"http://img.deitui.com/?w=200&h=400&text=AAAA",
	 "link"=>"http://www.deitui.com/",
	 "title"=>"ABC图片测试",
	 "note"=>"图片宽高1:2"
);
$data['b']=array(
 	"label"=>"图B",
	 "img"=>"http://img.deitui.com/?w=200&h=200&text=BBBB",
	 "link"=>"http://www.deitui.com/",
	 "title"=>"ABC图片测试",
	  "note"=>"图片宽高1:2"
);
$data['c']=array(
	 "label"=>"图C",
	 "img"=>"http://img.deitui.com/?w=200&h=200&text=CCCC",
	 "link"=>"http://www.deitui.com/",
	 "title"=>"ABC图片测试",
	  "note"=>"图片宽高1:2"
);
echo base64_encode(json_encode($data));
?>

组合生成HTML

extract($_POST['jsondata']);
$tpl=$uc['content'];		 
$tpl=str_replace('"','\"',$tpl);
eval("\$content = \"$tpl\";");


模板调用

<?php M("shop_uicompent")->get("tag");?>

通过在模板中预留组件位置,轻松实现界面扩展。

回帖
  • 消灭零回复
 

回贴周榜

本周热议
没有相关数据
layui

微信扫码关注 得推网 公众号