alloy-ui 2.0.0 图片轮播

来源：互联网发布：windows清理助手在哪儿编辑：程序博客网时间：2024/06/07 23:42

解压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">//加载AUIAUI().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 0