DoraCMS广告模块优化
DoraCMS 后台是有广告模块的,下面简要介绍一下DoraCMS的广告模块可以做什么: 1、友情链接. 2、简单的文本链接. 3、图片广告
DoraCMS 后台是有广告模块的,下面简要介绍一下DoraCMS的广告模块可以做什么:
1、友情链接
2、简单的文本链接
3、图片广告
以上的内容都可以在后台添加
但是怎么展示呢,展示功能之前就做了,今天做了进一步优化,以面向对象的方式介绍一下图片广告的展示:
前端的图片广告展示,默认使用了bootstrap的一个叫 Carousel 的插件,是什么样的呢:
它具备了幻灯片的基础功能,可以轮播并可以随意切换。DoraCMS目前使用它作为前端展现广告的方式。它的结构是这样的:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
下面看一下js是怎样实现的:
'use strict'; /*滑动组件 * adsId 广告id * containerId 自定义广告容器ID * showPoint 是否显示小圆点 默认false * */ function initSlides(jsonData){ var jsonData = jsonData || {}; jsonData.adsId = jsonData.adsId || ''; jsonData.containerId = jsonData.containerId || ''; jsonData.showPoint = jsonData.showPoint || false; if(jsonData.adsId && jsonData.containerId){ this.init(jsonData); } } initSlides.prototype = { init : function(jsonData){ $.ajax({ url:"/content/requestAds/ads/item?uid="+jsonData.adsId, type:"get", dataType:"json", success:function(data){ if(!data){ return; } if(data.type === "1"){ var imgContent = data.content; var imgList = imgContent.replace(/},/g,"};").split(";"); adsTemp(imgList,jsonData); }else{ var contentObj = JSON.parse(data.content); var txtHtml = ""; txtHtml += "<a href='"+contentObj.link+"' target='_blank'><i class='fa fa-tags'></i>"+contentObj.title+"</a>"; $("#"+jsonData.containerId).html(txtHtml); } } }); } }; function adsTemp(imgList,jsonData){ var imgIcons = ""; var imgItems = ""; for(var i=0;i<imgList.length;i++){ var item = JSON.parse(imgList[i]); if(i==0){ imgIcons += "<li data-target='#carousel-example-generic' data-slide-to='0' class='active'></li>"; imgItems += "<div class='item active'><a href='"+item.link+"' target='"+item.target+"'><img width='"+item.width+"' height='"+item.height+"' src='"+item.sImg+"' alt='"+item.discription+"'></a></div>"; } else{ imgIcons += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"'></li>"; imgItems += "<div class='item'><a href='"+item.link+"' target='"+item.target+"'><img width='"+item.width+"' height='"+item.height+"' src='"+item.sImg+"' alt='"+item.discription+"'></a></div>"; } } var adsHtml = ` <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> ${jsonData.showPoint ? imgIcons : ''} </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> ${imgItems} </div> <!-- Controls --> <a class="left carousel-control ${imgList.length == 1 ? 'hide' : ''}" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control ${imgList.length == 1 ? 'hide' : ''}" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> `; $("#"+jsonData.containerId).html(adsHtml); }
在需要添加广告的位置加入代码:
<div id="expressAds1"></div>
在页面初始化时加入代码:
$(function(){ new initSlides({ adsId : 'Vkbq3feZg', containerId : 'expressAds1' }) })
这里提供三个参数:
1、adsId 传入新增广告的key,可以在后台查看
2、containerId 传入需要插入广告位置的id,自定义即可
3、如果需要小圆点显示出来,设置 showPoint 属性为 true
其实重写的目的也是为了熟悉一下es6的语法,突然感觉,某些地方(特别是在html拼接)用es6的语法更加直观,省了很多麻烦,以上实现思路是这样的:通过调用接口获取广告相关信息,填入到组装好的html中,当然中间针对不同参数也进行了特别处理。比如,针对单图片是不需要滑动的,去掉了左右的切换图标等,实现效果:
很赞哦! ( 0
)
相关文章
- [转]让你的 Node.js 应用跑得更快的 10 个技巧
- Node.js API实例——Node.js 控制台
- Node.js 入门
- nodeJs基础教程系列(3)——建立githubs项目
- nodeJs基础教程系列(1)——安装Node.js
- nodeJs基础教程系列(6)——Promise 模式的Q库
- Atom 更为先进的文本代码编辑器 - 由 Github 打造的下一代编程开发利器
- bootstrap 3.3 模态框垂直居中问题
- js字符串操作
- js鼠标滑轮滚动事件绑定(兼容主流浏览器)
- 视频:Windows 安装FTP服务 (基于Windows2008 IIS配置FTP站点 )
- 屌丝为什么找不到女朋友