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

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

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

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

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");?>

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