一个组件包含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");?>
通过在模板中预留组件位置,轻松实现界面扩展。