欢迎光临北屯市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

PBOOTCMS自定义多图细解,添加多图标题效果

时间:2020-01-12   来源:北屯市网站建设

本文根据官方群中网友上传的二次开发文件整理资料所得,上传人为紫雨。

本文仅为提供一下修改方法和调用测试。方便大家使用。

此功能一共修改了两处文件:

apps/admin/view/default/contentcontent.html
apps/admin/view/default/contentextfield.html


修改:content.html

1:引入JS:<script type="text/javascript" src="{APP_THEME_DIR}/js/jquery.dragsort-0.5.2.min.js"></script>

2:在大概280行左右,下拉的IF语句结束后添加如下代码,这里主要是为新增文章的时候添加多图上传自定义字段:

			                	 {if($value->type==10)}<!-- 多图 -->
			                	 <div class="layui-form-item">
			                     <label class="layui-form-label">多图</label>
			                     <div class="layui-input-inline">
			                     	<input type="text" name="[value->name]" id="pics_[value->name]" placeholder="请上传轮播多图"  class="layui-input">
			                     </div>
			                     <button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
								 	 <i class="layui-icon">&#xe67c;</i>上传多图
								 </button>
								 <div id="pics_[value->name]_box" class="pic addedit"><dl></dl> <!-- 规避空内容拖动bug --></div>
			                	</div>

			                	<script type="text/javascript">
$("#pics_[value->name]_box").dragsort({
	dragSelector: "dl",
	dragBetween: false,
	dragEnd: saveOrder_[value->name],
	placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});

function saveOrder_[value->name]() {
	var data = $("#pics_[value->name]_box dl dt img").map(function() {
		return $(this).data("url");
	}).get();
	$("input[name=[value->name]]").val(data.join(","))
};
</script>
			                	{/if}
			                	

3: 在大概280行左右,下拉的IF语句结束后添加如下代码,这里主要是为修改文章的时候添加多图上传自定义字段:

			                	 {if($value->type==10)}<!-- 多图 -->
			                	 <div class="layui-form-item">
			                     <label class="layui-form-label">[value->description]</label>
			                     <div class="layui-input-inline">
			                     	<input type="text" name="[value->name]" id="pics_[value->name]" value="{$content->{$value->name}}" placeholder="请上传轮播多图"  class="layui-input">
			                     </div>
			                     <button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
								 	 <i class="layui-icon">&#xe67c;</i>上传多图
								 </button>
								 <div id="pics_[value->name]_box" class="pic addedit">
								 	 <dl></dl> <!-- 规避空内容拖动bug -->
								 	 {php}$name=$value->name; {/php}
									 {php}
									    if([$content]->$name){
		                					$pics=explode(',',[$content]->$name);
		                				}else{
		                					$pics = array();
		                				}
		                				foreach ($pics as $value) {
		                					echo "<dl><dt><img src='".SITE_DIR.$value."' data-url='".$value."'></dt><dd>删除</dd></dl></dl>";
	          							}
	         						 {/php}
         						 </div>
			                </div>
<script type="text/javascript">
$("#pics_{php}echo $name;{/php}_box").dragsort({
	dragSelector: "dl",
	dragBetween: false,
	dragEnd: saveOrder_{php}echo $name;{/php},
	placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});

function saveOrder_{php}echo $name;{/php}() {
	var data = $("#pics_{php}echo $name;{/php}_box dl dt img").map(function() {
		return $(this).data("url");
	}).get();
	$("input[name={php}echo $name;{/php}]").val(data.join(","))
};
</script>
			                {/if}



然后修改:extfield.html

1:大概40多行的位置,增加一个TYPE为10的多图扩展:

{if($value->type==10)}多图上传{/if}

2:第100行左右字段类型中添加多图上传的类型

<option value="10">多图上传</option>

3:第190行左右添加

<option value="10" {if([$extfield->type]==10)}selected{/if}>多图上传</option>


至此,修改结束。可以后台测试并添加多图。

QQ截图20200112051045.jpg



但是现在问题来了。后台我们虽然添加了,数据也有了。但是PB并没有对扩展字段进行多字符串的解析。那么在前台要如何才能调用呢。在数据库中我们可以看到,他的格式为:

/static/upload/image/20200112/1578774353308471.png,/static/upload/image/20200112/1578774354491186.png,/static/upload/image/20200112/1578774354992829.png,/static/upload/image/20200112/1578774354615149.png,/static/upload/image/20200112/1578774354674052.png

这样的字符串。


PB本身解析多图的是:

{pboot:pics num=3 id={content:id}}
	<img src='[pics:src]'>
{/pboot:pics}


但是由于新加的是扩展字段,所以这个代码已经不适用了。

但是既然是字符串,我们就可以用JS进行拆解。

 <script language="javascript"> 
str="{content:ext_newpics}"; //这是一字符串 
var strs= new Array(); //定义一数组 
strs=str.split(","); //字符分割 
for (i=0;i<strs.length ;i++ ) 
{ 
document.write('<img src='+strs[i]+'>'); //分割后的字符输出 
} 
</script>


同样,我们可以用这个方法来实现多图加标题。

 <script language="javascript"> 
str="{content:pics}"; //这是一字符串 
str2="{content:ext_newpics}"; //这是一字符串 
var strs= new Array(); //定义一数组 
var strs2= new Array(); //定义一数组 
strs=str.split(","); //字符分割 
strs2=str2.split(","); //字符分割 
for (i=0;i<strs.length ;i++ ) 
{ 
document.write('<div class="myimg"><img src='+strs[i]+' >'+'<br/>'+strs2[i]+'</div>' ); //分割后的字符输出 
} 
</script>


<style type="text/css">
  .content{display: inline-block;}
   .myimg{width:200px; float:left; height:250px; margin-right:10px; display: block;}
   .myimg img{width:100%; height: 200px;}
</style>

QQ截图20200112052708.jpg

本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top