当前位置: 首页 > PbootCMS教程 > PbootCMS高级应用技巧:用扩展标签自制地图x,y轴坐标定位

PbootCMS高级应用技巧:用扩展标签自制地图x,y轴坐标定位

365源码商城 / 2022-01-14
[] [] []

最近做了一个项目,在地图上需要标出每个城市镇区并且可以点击进内容页,最方便的方法是用绝对定位(absolute)。

先看下效果图吧:

 

 

如图上所示,每个镇区就是对应后台的一篇文章内容,那要准确定位这些位置最方便的方法当然是使用绝对定位了,也就是css中position:absolute

 

x轴坐标值也就是css中的left,y轴坐标值就是top,于是对pbootcms做了一个简单的二次开发,也就是用扩展标签自己创建了一个标签专门用于调出内容字段的x,y值。

 

下面看具体代码:

// 测试扩展单个标签
    private function test()
    {
        $this->content = str_replace('{pboot:userip}', get_user_ip(), $this->content);
    }
    
// 分割字符串为数组  复制该函数代码
private function fenge()
{
    $pattern = '/\{fenge\s?\(([^\}]+)\)\}/';
    if (preg_match($pattern, $this->content, $matches)){
        $this->content = preg_replace_callback(
            $pattern,
            function($matches){
                $arr = explode(",",$matches[1]);
                $x = $arr[0].'rem';
                $y = $arr[1].'rem';
                $str_point = "style=left:{$x};top:{$y}";
                return $str_point;
            },$this->content);
    }
}

 

将以上代码复制到/apps/home/controller/ExtLabelController.php 文件里

具体的实现方法:

 

1、在后台->全局配置->模型字段->扩展字段新增,添加一个字段dingwei定位,

2、在发布文章时这个字段就填写x,y轴坐标,如图:单位是rem不用写

 

 

前端模板调用代码如下:

 

<div class="item_list" {fenge([list:ext_dingwei])}>
	//此处省略代码
</div>

 

 

 

以上就是PbootCMS扩展标签的高级应用技巧了,更多PbootCMS教程请继续关注小郭博客!推荐一个pbootcms建站交流qq群:1050398557

 

本文链接:http://www.365ymw.com/article-1740.html 转载请保留出处,谢谢!

中查找“PbootCMS高级应用技巧:用扩展标签自制地图x,y轴坐标定位”更多相关内容

用户评论

暂时还没有任何用户评论
用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha

浏览历史

免责条款 | 隐私保护 | 联系我们 | 公司简介 | 报价单 | 积分商城 | 留言板
Copyright © 2010-2022 365ymw.com All Rights Reserved. 365源码商城 流量统计:
免责声明:部分图片素材及板块内容来自网络,如有侵犯您的权益,请联系我们,站长会立即处理!