标签：class .ajax for ref center context 开始 als hid
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@include file="../template/platResource.jsp"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> .layout{ display: block; width: 50%; height: 50%; float: left; text-align: center; overflow: hidden; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing: border-box; } </style> </head> <body> <div id="pager" class="easyui-layout" data-options="fit:true,border:false"> <div data-options="region:‘center‘,border:false,fit:true"> <div class="bodyCont p0"> <div id="leftBtn" class="leftBtn"></div> <div id="rightBtn" class="rightBtn"></div> <div id="childW" class="pt10" style="position: relative;overflow: hidden;"> <div id="childbox" style="height:100%;position: absolute; left: 0;"></div> </div> </div> </div> </div> <script> var childData; var childWH=0; var childWW=0; var currentIndex=0; var WindowNum=0; function setHeight(){ var screenH=$(window).height(); var screenW=$(window).width()-20; childWH=screenH-20; childWW=screenW; $("#childW").height(childWH); $("#childW").width(screenW); } $(window).resize(function(){ setHeight(); setResize(); }); $(function(){ $.ajax({ type:"post", dataType:"json", url:"${pageContext.request.contextPath}/plat/PlatChildWindow/getChildWindowParam.do", success: function(data) { console.log(data); childData = data setHeight(); setWindow(); } }); }); function setWindow(){var screenW=$(‘.bodyCont‘).width();//得到屏幕的的宽度 WindowNum=Math.ceil(childData.length/4);//每个屏幕放四个子窗口 var firstNum=0; var childbox=document.getElementById("childbox");//获取外层容器 childbox.style.width=WindowNum*screenW+"px"; if (WindowNum==0||WindowNum==1){ $("#leftBtn").hide(); $("#rightBtn").hide(); }else{ $("#leftBtn").show(); $("#rightBtn").show(); } if (currentIndex==0) {//索引为0时，left为0 $("#childbox").css("left",0); } for(var i=0;i<WindowNum; i++){ firstNum=i*4; var childDiv=document.createElement("div");//创建分屏容器 childDiv.id="childW_"+i; childDiv.index=i; childDiv.style.width=screenW+"px"; childDiv.style.height=childWH+"px"; childDiv.style.position="absolute"; childDiv.style.left=i*screenW+i*18+"px"; var pp=document.createElement("div");//创建分屏中的easyui portal pp.id="pp_"+i; var fCol=document.createElement("div");//portal分两列，这是第一列 fCol.className="layout"; fCol.style.paddintTop=10+"px"; fCol.style.paddingRight=10+"px"; var sCol=document.createElement("div");//portal分两列，这是第二列 sCol.className="layout"; sCol.style.paddintTop=10+"px"; fCol.style.paddingRight=10+"px"; pp.appendChild(fCol); pp.appendChild(sCol); childDiv.appendChild(pp); childbox.appendChild(childDiv); } for(var i=0;i<WindowNum; i++){//每个屏分别加载自己的窗口 var firstNum=i*4;//firstName将会被做为数据里的索引，不同屏索引开始的值也不一样 $("#pp_"+i).portal({ border:false, height:600, fit:true }); add(firstNum,i); } } $("#rightBtn").unbind().click(function(){ var screenW=$(‘.bodyCont‘).width()+18;//得到屏幕的的宽度 if(!$("#childbox").is(":animated")){ if(currentIndex==WindowNum-1){//向左移动到达最后一页返回第一页，索引从零开始 currentIndex=0; $("#childbox").animate({left:0},1000); }else{ currentIndex++; $("#childbox").animate({left:-currentIndex*screenW+"px"},1000); } } }) $("#leftBtn").unbind().click(function(){ var screenW=$(‘.bodyCont‘).width()+18;//得到屏幕的的宽度 $("#leftBtn").show(); $("#rightBtn").show(); if(!$("#childbox").is(":animated")){ if(currentIndex==0){//向右移动到达第一页返回最后一页，索引为最后一页的索引 currentIndex=WindowNum-1; $("#childbox").animate({left:-currentIndex*screenW+"px"},1000); }else{ currentIndex--; $("#childbox").animate({left:-currentIndex*screenW+"px"},1000); } } }) //添加自动播放 var timer=setInterval(function(){ $("#rightBtn").click(); },10000); $("#childbox").bind({ mouseover:function(){ clearInterval(timer); }, mouseout:function(){ timer=setInterval(function(){ $("#rightBtn").click(); },10000); } }) function setResize(){ $("#childbox").html(""); $(".bodyCont").width(childWW); setWindow(); } function add(firstNum,i){ for (var j=firstNum;j<firstNum+4;j++){ var p = $(‘<div/>‘).appendTo(‘body‘); p.panel({ title:childData[j].windName, content:‘<div style="height:99%;"><iframe frameborder="0" scrolling="no" width="100%" height="100%" src=‘+childData[j].url+‘></iframe></div>‘, height:childWH/2, style:{paddingBottom:10}, closable:true, collapsible:true }); if (j%2==0) {//偶数加载在第一列 $(‘#pp_‘+i).portal(‘add‘, { panel:p, columnIndex:0 }); }else{//奇数加载在第二列 $(‘#pp_‘+i).portal(‘add‘, { panel:p, columnIndex:1 }); } } $(‘#pp_‘+i).portal(‘resize‘); } </script> </body> </html>
标签：class .ajax for ref center context 开始 als hid
原文地址：http://www.cnblogs.com/bxslovewxs/p/7895388.html
