alloy-ui 2.0.0 图片轮播

最新推荐文章于 2024-03-15 09:30:09 发布

荒--

最新推荐文章于 2024-03-15 09:30:09 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/wangqing84411433/article/details/78187402

版权

解压alloy-2.0.0文件之后，demos文件夹下有很多事例，build文件夹中为编译后的事例

本案例以图片轮播为案例：

alloy-2.0.0\demos\carousel 文件夹下的index.html为显示页面，查看源码可以找到需要引用的代码，下面为Portlet如何引用

=================================================================

创建一个Portlet，在JSP文件中引入代码：

JSP

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />
<%
	String basePath = renderRequest.getContextPath();
%>

<script type="text/javascript">
	//加载AUI
	AUI().use('node', 'module2', 'module3',function (A) {
	    //将节点内容打印到控制台  
		console.log(A.one("#example").html());
	});

</script>
<html>
	   <h1>AlloyUI - Carousel图片轮播</h1>
    <div id="demo">
        <div style="background: url(<%=basePath%>/assets/article0.png); width: 940px; height: 253px;" class="carousel-item carousel-item-active"></div>
        <div style="background: url(<%=basePath%>/assets/article1.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article2.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article3.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article0.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article1.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article2.png); width: 940px; height: 253px;" class="carousel-item"></div>
        <div style="background: url(<%=basePath%>/assets/article3.png); width: 940px; height: 253px;" class="carousel-item"></div>
    </div>
    <script>
	    AUI().use('aui-carousel', function(A) {
	        new A.Carousel({
	            intervalTime: 1,//播放频率,越小越快
	            contentBox: '#demo',
	            activeIndex: 0,
	            height: 254,
	            width: 940
	        }).render();
	
	    });
    </script>
</html>

只需要修改路径（通过getContentPath方法获取），不需要源码中的以下引入，因为Liferay中内部已经引入过了

<link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
<script src="../../build/aui/aui.js"></script>

----------------------------------------------------------------

Portlet中显示如下：

荒--

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫