名称:页面小部件
插件标识:zf_widget
插件路径:./addons/zf_widget
必备的js文件引用
使用方法:
1. 表单部件
在控制器中实例化:
$app = new \\addons\\zf\_widget\\controller\\Form();
$this\->assign('app',$app);
在页面中使用:
{$app->form_input('标题','title','')|raw}
{$app->form_textarea('栏目描述','summary','')|raw}
{$app->upload_pic('封面图','pic','')|raw}
{$app->upload_file('文件','pic','')|raw}
{$app->upload_album('图集','album_list[]',\[\])|raw}
{$app->filesystem_pic('封面图2','pic','')|raw}
{$app->filesystem_album('图集2','album_list\[\]',\[\])|raw}
{$app->filesystem_file('文件2','pic','')|raw}
时间选择
{$app->form_time('时间','ctime','')|raw}
{$app->form_time('时间','ctime',date("Y-m-d H:i:s",$data_res['ctime']) )|raw}
分类select
{$app->form\_select('分类','p_cate',$res\['p\_cate'\],'list'=>$mlist,'id_t'=>'cid')|raw}
ueditor
{$app->form\_ueditor('栏目详情','content','')|raw}
{js href="\_\_STATIC\_\_/style/ueditor/ueditor.config.js" /}
{js href="\_\_STATIC\_\_/style/ueditor/ueditor.all.js" /}
{css href="\_\_STATIC\_\_/style/ueditor/themes/default/css/ueditor.css" }
tinymce
{$app->form\_tinymce('栏目详情','content','')|raw}
var content = tinymce.editors\[0\].getContent() ; //id从0开始
var data = $(".info\_tj input,.info\_tj textarea,.info\_tj select").serialize()+'&content='+content;
wangeditor
{$app->form\_wangeditor('栏目详情','content','')|raw}
md
{$app->form\_meditor('栏目详情','content','')|raw}
unset($data\['content-html-code'\])
2. 图表部件
控制器中实例化
$Echarts = new \\addons\\zf\_widget\\controller\\Echarts();
$this\->assign('Echarts',$Echarts);
// 柱状图
$line\_data = \[\];
$line\_data\['title'\] =\['销量','产量'\];
$line\_data\['xAxis'\] = \[
'type'\=>'category',
'boundaryGap'\=>false,
'data'\=>\["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"\]
\];
$line\_data\['yAxis'\] = \['data'\=>\[\]\];
$line\_data\['series'\] = \[
\['name'\=>'销量','type'\=>'bar','data'\=>\[5, 20, 36, 10, 10, 20\]\],
\['name'\=>'产量','type'\=>'bar','data'\=>\[15, 20, 36, 10, 10, 20\]\],
\];
$line\_data\['legend'\] = \['data'\=>$line\_data\['title'\]\];
$line\_data\['grid'\] = \['left'\=>'3%','right'\=>'4%','bottom'\=>'3%','containLabel'\=>true\];
$line\_data\['tooltip'\] = \['trigger'\=>'axis'\];//功能
//折线图
$stack\_data = \[\];
$stack\_data\['title'\] =\['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'\];
$stack\_data\['xAxis'\] = \[
'data'\=>\['周一', '周二', '周三', '周四', '周五', '周六', '周日'\]
\];
$stack\_data\['yAxis'\] = \['data'\=>\[\],'type'\=>'value'\];
$stack\_data\['series'\] = \[
\['name'\=>'邮件营销','type'\=>'line','stack'\=>'总量','data'\=>\[120, 132, 101, 134, 90, 230, 210\]\],
\['name'\=>'联盟广告','type'\=>'line','stack'\=>'总量','data'\=>\[220, 132, 101, 134, 90, 230, 210\]\],
\['name'\=>'视频广告','type'\=>'line','stack'\=>'总量','data'\=>\[120, 1561, 101, 134, 90, 230, 210\]\],
\['name'\=>'直接访问','type'\=>'line','stack'\=>'总量','data'\=>\[120, 132, 156, 134, 90, 230, 210\]\],
\['name'\=>'搜索引擎','type'\=>'line','stack'\=>'总量','data'\=>\[120, 132, 101, 111, 90, 230, 555\]\],
\];
$stack\_data\['legend'\] = \['data'\=>$stack\_data\['title'\]\];
$stack\_data\['grid'\] = \['left'\=>'3%','right'\=>'4%','bottom'\=>'3%','containLabel'\=>true\];
$stack\_data\['tooltip'\] = \['trigger'\=>'axis'\];//功能
//饼状图
$pie\_data = \[\];
$pie\_data\['title'\] =\['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'\];
$pie\_data\['series'\] = \[
\[
'name'\=>'访问来源',
'type'\=>'pie',
'radius'\=>'55%',
'data'\=>\[
\['value'\=>235,'name'\=>'视频广告'\],
\['value'\=>275,'name'\=>'联盟广告'\],
\['value'\=>310,'name'\=>'邮件营销'\],
\['value'\=>335,'name'\=>'直接访问'\],
\['value'\=>500,'name'\=>'搜索引擎'\],
\]
\],
\];
$pie\_data\['legend'\] = \['data'\=>$pie\_data\['title'\]\];
$pie\_data\['grid'\] = \['left'\=>'3%','right'\=>'4%','bottom'\=>'3%','containLabel'\=>true\];
$pie\_data\['tooltip'\] = \['trigger'\=>'axis'\];//功能
$this\->assign('line\_data',$line\_data);
$this\->assign('stack\_data',$stack\_data);
$this\->assign('pie\_data',$pie\_data);
在页面中使用
{$Echarts->line('用户销量','xl\_aa1',$line\_data)|raw}
{$Echarts->line\_stack('用户销量','xl\_aa2',$stack\_data)|raw}
{$Echarts->pie\_legend('用户销量','xl\_aa3',$pie\_data)|raw}