界面框架初步提交

This commit is contained in:
chiguangxu
2018-02-02 17:58:32 +08:00
parent f45edaddb5
commit 70ede8852f
3858 changed files with 214716 additions and 346632 deletions

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<launchConfiguration type="org.eclipse.ant.AntBuilderLaunchConfigurationType">
<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="false"/>
<stringAttribute key="org.eclipse.ui.externaltools.ATTR_DISABLED_BUILDER" value="org.eclipse.m2e.core.maven2Builder"/>
<mapAttribute key="org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS"/>
<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
</launchConfiguration>

View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<launchConfiguration type="org.eclipse.ant.AntBuilderLaunchConfigurationType">
<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_BUILDER_ENABLED" value="false"/>
<stringAttribute key="org.eclipse.ui.externaltools.ATTR_DISABLED_BUILDER" value="org.eclipse.wst.validation.validationbuilder"/>
<mapAttribute key="org.eclipse.ui.externaltools.ATTR_TOOL_ARGUMENTS"/>
<booleanAttribute key="org.eclipse.ui.externaltools.ATTR_TRIGGERS_CONFIGURED" value="true"/>
</launchConfiguration>

View File

@@ -0,0 +1,11 @@
CHECK_CALL_TEMPLATES=2
CHECK_XPATHS=2
CIRCULAR_REF=2
DUPLICATE_PARAMETER=2
EMPTY_PARAM=1
MISSING_INCLUDE=2
MISSING_PARAM=1
NAME_ATTRIBUTE_EMPTY=2
NAME_ATTRIBUTE_MISSING=2
TEMPLATE_CONFLICT=2
eclipse.preferences.version=1

View File

@@ -51,6 +51,8 @@ public class SysMenu extends BaseEntity<SysMenu>{
private String menuBg;
private Integer isTop;
private List<SysMenu> children = new ArrayList<SysMenu>();
public SysMenu(){
@@ -259,5 +261,15 @@ public class SysMenu extends BaseEntity<SysMenu>{
public void setCode(String code) {
this.code = code;
}
public Integer getIsTop() {
return isTop;
}
public void setIsTop(Integer isTop) {
this.isTop = isTop;
}
}

View File

@@ -1,6 +1,7 @@
package com.nis.util;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
import com.nis.domain.SysMenu;
@@ -21,7 +22,6 @@ public final class TreeUtil {
public List<SysMenu> buildTree(){
List<SysMenu> newMenuList = new ArrayList<SysMenu>();
for (SysMenu menu : menuList) {
if (menu.getParent().getId().equals(1l)) {
if (isBusinessOfAdmin(menu.getName())) {
@@ -35,6 +35,21 @@ public final class TreeUtil {
return newMenuList;
}
public List<SysMenu> buildTreeLeft(){
List<SysMenu> newMenuList = new ArrayList<SysMenu>();
for (SysMenu menu : menuList) {
if (menu.getIsTop().equals(1)) {
if (isBusinessOfAdmin(menu.getName())) {
continue;
}
build(menu);
newMenuList.add(menu);
}
}
return newMenuList;
}
/**
* 过滤admin的业务功能
* @return

View File

@@ -1,6 +1,7 @@
package com.nis.web.controller.configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* IP相关配置控制类
@@ -8,6 +9,31 @@ import org.springframework.stereotype.Controller;
*
*/
@Controller
@RequestMapping("${adminPath}/cfg/ip")
public class IpCfgController {
@RequestMapping(value = {"ipWhiteList"})
public String ipWhiteList() {
return "/cfg/ipWhiteList";
}
@RequestMapping(value = {"ipWhiteForm"})
public String ipWhiteForm() {
return "/cfg/ipWhiteForm";
}
@RequestMapping(value = {"ipBlockList"})
public String ipBlockList() {
return "/cfg/ipBlockList";
}
@RequestMapping(value = {"ipBlockForm"})
public String ipBlockForm() {
return "/cfg/ipBlockForm";
}
}

View File

@@ -0,0 +1,30 @@
package com.nis.web.controller.configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.nis.web.controller.BaseController;
/**
* 测试类
*
*/
@Controller
@RequestMapping("${adminPath}/cfg/request")
public class RequestInfoController extends BaseController{
@RequestMapping(value = {"list"})
public String list() {
return "/cfg/requestList";
}
@RequestMapping(value = {"form"})
public String form() {
return "/cfg/requestForm";
}
}

View File

@@ -22,7 +22,9 @@
a.del_flag,
a.quick_action,
a.menu_bg,
p.name AS "parent.name"
p.name AS "parent.name",
a.is_top
</sql>
<sql id="menuJoins">
@@ -42,7 +44,7 @@
<include refid="menuColumns"/>
FROM sys_menu a
<include refid="menuJoins"/>
WHERE a.del_flag = #{DEL_FLAG_NORMAL}
WHERE a.del_flag = #{DEL_FLAG_NORMAL}
ORDER BY a.sort
</select>
@@ -82,7 +84,8 @@
update_by,
update_date,
remarks,
del_flag
del_flag,
is_top
) VALUES (
#{parent.id},
#{parentIds},
@@ -99,7 +102,8 @@
#{updateBy.id},
#{updateDate},
#{remarks},
#{delFlag}
#{delFlag},
#{isTop}
)
</insert>
@@ -117,7 +121,8 @@
permission = #{permission},
update_by = #{updateBy.id},
update_date = #{updateDate},
remarks = #{remarks}
remarks = #{remarks},
is_top = #{isTop}
WHERE id = #{id}
</update>

View File

@@ -1,5 +1,6 @@
package com.nis.web.security;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@@ -207,6 +208,23 @@ public class UserUtils {
return new TreeUtil(getMenuList()).buildTree();
}
/**
* 按照菜单各级递归排列-左侧菜单
* @return
*/
public static List<SysMenu> getLeftMenuTreeList(){
List<SysMenu> newMenuList = new TreeUtil(getMenuList()).buildTreeLeft();
/* for (SysMenu menu : newMenuList) {
menu.getChildren();
}*/
return newMenuList;
}

View File

@@ -0,0 +1,71 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<h3 class="form-section">基本配置</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">来函函号</label>
<div class="col-md-8">
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">专项任务</label>
<div class="col-md-8">
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
</div>
<!--/span-->
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">分类性质</label>
<div class="col-md-8">
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">标签</label>
<div class="col-md-8">
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
</div>
</div>
<!-- <div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">生效范围</label>
<div class="col-md-8">
<select class="form-control">
<option>Country 1</option>
<option>Country 2</option>
</select>
</div>
</div>
</div>
</div> -->

View File

@@ -0,0 +1,62 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<h3 class="form-section">管控配置</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">源IP地址</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label class="control-label col-md-3">目的IP地址</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">源掩码</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label class="control-label col-md-3">目的掩码</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">源端口</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label class="control-label col-md-3">目的端口</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,24 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<h3 class="form-section">管控配置</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">IP地址</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<!--/span-->
<div class="col-md-6">
<div class="form-group ">
<label class="control-label col-md-3">配置名称</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<!--/span-->
</div>
<!--/row-->

View File

@@ -4,31 +4,57 @@
<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
<script src="${pageContext.request.contextPath }/static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/bootstrap/2.3.1/css_${not empty cookie.theme.value ? cookie.theme.value : 'cerulean'}/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/bootstrap/2.3.1/docs/assets/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/static/bootstrap/2.3.1/docs/assets/js/bootstrap-popover.js" type="text/javascript"></script>
<!--[if lte IE 7]><link href="${pageContext.request.contextPath }/static/bootstrap/2.3.1/awesome/font-awesome-ie7.min.css" type="text/css" rel="stylesheet" /><![endif]-->
<!--[if lte IE 6]><link href="${pageContext.request.contextPath }/static/bootstrap/bsie/css/bootstrap-ie6.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/bootstrap/bsie/js/bootstrap-ie.min.js" type="text/javascript"></script><![endif]-->
<link href="${pageContext.request.contextPath }/static/jquery-select2/3.4/select2.min.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/static/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/common/pricing-tables.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/common/jquery.cookie.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/static/common/mustache.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/common/jeesite.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/common/jeesite.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/jquery-plugin/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-plugin/jquery.autocomplete.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/static/common/unicodes.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/static/global/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/css/bootstrap-switch.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/static/global/plugins/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="${pageContext.request.contextPath}/static/global/css/components.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/css/plugins.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="${pageContext.request.contextPath}/static/layouts/layout/css/layout.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/layouts/layout/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="${pageContext.request.contextPath}/static/layouts/layout/css/custom.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/static/global/plugins/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-validation/1.11.0/jquery.validate.method.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="${pageContext.request.contextPath}/static/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="${pageContext.request.contextPath}/static/layouts/layout/scripts/layout.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
<link href="${pageContext.request.contextPath }/static/jquery-toastr/toastr.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-toastr/toastr.min.js" type="text/javascript"></script>

View File

@@ -0,0 +1,89 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<c:forEach items="${fns:getLeftMenuTreeList()}" var="menu" varStatus="idxStatus">
<ul id="menu_${menu.id }" class="hide accordion page-sidebar-menu page-header-fixed page-sidebar-menu-light"
data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<c:if test="${not empty menu.children }">
<c:forEach items="${menu.children}" var="secondMenu" varStatus="secondStatus">
<li class="nav-item <c:if test="${secondStatus.index==0 }"> active open</c:if>">
<a class="nav-link nav-toggle"
<c:if test="${secondMenu.href != null && secondMenu.href != ''}" var="secondHref">
href="${ctx}/${secondMenu.href }" target="mainFrame" >
</c:if>
<c:if test="${!secondHref }">
href="javascript:;" class="nav-link nav-toggle">
</c:if>
<i class="${secondMenu.icon }"></i>
<span class="title"> ${secondMenu.name } <%-- <spring:message code="${secondMenu.code}"></spring:message> --%></span>
<c:if test="${not empty secondMenu.children }" var="secondClid">
<span class="arrow open"></span>
</c:if>
</a>
<c:if test="${secondClid}">
<ul class="sub-menu">
<c:forEach items="${secondMenu.children}" var="thirdMenu" varStatus="thirdStatus">
<li class="nav-item <c:if test="${not empty thirdMenu.children && thirdStatus.index==0}">active open</c:if>">
<a class="nav-link nav-toggle"
<c:if test="${thirdMenu.href != null && thirdMenu.href != ''}" var="thirdHref">
href="${ctx}/${thirdMenu.href }" target="mainFrame" >
</c:if>
<c:if test="${!thirdHref }">
href="javascript:;" class="nav-link nav-toggle">
</c:if>
<span class="title">${thirdMenu.name } <%-- <spring:message code="${thirdMenu.code}"></spring:message> --%></span>
<c:if test="${not empty thirdMenu.children }" var="thiredClid">
<span class="arrow open"></span>
</c:if>
</a>
<c:if test="${thiredClid}">
<ul class="sub-menu">
<c:forEach items="${thirdMenu.children}" var="fourthMenu">
<li class="nav-item">
<a href="${ctx}/${fourthMenu.href }" target="mainFrame" class="nav-link ">
${fourthMenu.name } <%-- <spring:message code="${fourthMenu.code}"></spring:message> --%>
<!-- <span class="badge badge-danger">1</span> -->
</a>
</li>
</c:forEach>
</ul>
</c:if>
</li>
</c:forEach>
</ul>
</c:if>
</li>
</c:forEach>
</c:if>
</ul>
</c:forEach>

View File

@@ -70,6 +70,14 @@
<example>${fns:getMenuTreeList()}</example>
</function>
<function>
<description>获取当前用户的左侧菜单树对象列表</description>
<name>getLeftMenuTreeList</name>
<function-class>com.nis.web.security.UserUtils</function-class>
<function-signature>java.util.List getLeftMenuTreeList()</function-signature>
<example>${fns:getLeftMenuTreeList()}</example>
</function>
<function>
<description>获取当前用户的区域对象列表</description>
<name>getAreaList</name>

View File

@@ -0,0 +1,633 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="tabmode" value="${empty cookie.tabmode.value ? '1' : cookie.tabmode.value}"/>
<c:set var="workNotifyRemindInterval" value="${fns:getStringProperty('work.notify.remind.interval','')}"/>
<c:if test="${tabmode eq '1'}">
<link rel="Stylesheet" href="${pageContext.request.contextPath}/static/jerichotab/css/jquery.jerichotab.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jerichotab/js/jquery.jerichotab.js"></script>
</c:if>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/mvc_frame.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${fns:getStringProperty('productName','NIS')}</title>
<style type="text/css">
h3{color:#ffffff;margin:30px 0px 0px 10px;}
</style>
</head>
<body>
<div id="main">
<!-- header -->
<div id="header" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="topleft">
<a href="${pageContext.request.contextPath}/" target="_parent">
<h3>National Firewall System</h3></a>
</div>
<ul class="topnav">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${menu.parent.id eq 1 && menu.isShow eq 1}">
<c:if test="${menu.href != null && menu.href != ''}" var="leafNodeFlag">
<li>
<a href="${ctx}${menu.href}" id="${menu.id}" target="mainFrame" class="${idxStatus.index eq 0 ? 'selected' : ''}">
<img src="${ctxStatic}/images/${menu.icon}.png" title="<spring:message code="${menu.code}"></spring:message>" />
<h2><%-- ${menu.name } --%><spring:message code="${menu.code}"></spring:message></h2>
</a>
</li>
</c:if>
<c:if test="${!leafNodeFlag }">
<li>
<a href="javascript:void(0);" id="${menu.id}" class="${idxStatus.index eq 0 ? 'selected' : ''}">
<img src="${ctxStatic}/images/${menu.icon}.png" title="<spring:message code="${menu.code}"></spring:message>" />
<h2><%-- ${menu.name} --%>
<spring:message code="${menu.code}"></spring:message>
</h2>
</a>
</li>
</c:if>
</c:if>
</c:forEach>
</ul>
<div class="topright">
<ul>
<li><a href="${pageContext.request.contextPath}/" title="访问网站主页"><i class="icon-home"></i><spring:message code="home"></spring:message></a></li>
<li><a href="#"><i class="icon-question-sign"></i> <spring:message code="help"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/logout" title="退出登录"><i class="icon-signout"></i> <spring:message code="exit"></spring:message></a></li>
</ul>
<div class="user">
<ul class="nav pull-right">
<li id="userInfo" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="个人信息"><i class="icon-user"></i> <spring:message code="hi"></spring:message>,${fns:getUser().name}&nbsp;<span id="notifyNum" class="label label-info hide"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="${ctx}/sys/user/info" target="mainFrame"><i class="icon-user"></i>&nbsp; <spring:message code="userInfo"></spring:message></a></li>
<li><a href="${ctx}/sys/user/modifyPwd" target="mainFrame"><i class="icon-lock"></i>&nbsp; <spring:message code="updatePwd"></spring:message></a></li>
<li><a href="${ctx}oa/oaNotify/self" target="mainFrame"><i class="icon-bell"></i>&nbsp; <spring:message code="notify"></spring:message> <span id="notifyNum2" class="label label-info hide"></span></a></li>
</ul>
</li>
<li id="themeSwitch" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="主题切换"><i class="icon-th-large"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<c:forEach items="${fns:getDictList('SYS_THEME')}" var="dict">
<li <c:if test="${cookie.theme.value eq dict.itemCode}">class='active'</c:if>>
<a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.itemCode}?url='+location.href">${dict.itemValue}</a>
</li>
</c:forEach>
<li><a href="javascript:cookie('tabmode','${tabmode eq '1' ? '0' : '1'}');location=location.href">${tabmode eq '1' ? '关闭' : '开启'}页签模式</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=en">英语</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=zh_CN">中文</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=ru">俄文</a></li>
</ul>
<!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
</li>
<li><a href="javascript:void(0);" class="tip-bottom" title="显示/隐藏快捷菜单"><i id="show-hide-option" class="icon-eye-open"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- main content -->
<div class="container-fluid">
<div id="content" class="row-fluid">
<div id="left">
<!-- sidebar -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<div id="menu-${menu.id }" class="accordion ${idxStatus.index eq 0 ? '' : 'hide'}">
<div class="lefttop"><span></span><%-- ${menu.name } --%>
<spring:message code="${menu.code}"></spring:message></div>
<dl class="leftmenu">
<%-- <dd><div id="menu-0-0" class="title"><i class="icon-check" ></i>
<a id="menu-81-70" data-id="70" data-name="国际化" href="${pageContext.request.contextPath}/something" target="mainFrame" jerichotabindex="0">示例</a>
</div>
</dd> --%>
<c:forEach items="${menu.children}" var="secondMenu">
<dd>
<div id="menu-${menu.id }-${secondMenu.id}" class="title">
<img src="${ctxStatic}/images/${secondMenu.icon}.png" title="${secondMenu.name }"/>
<%-- <span class="${secondMenu.icon } icon-white"></span> --%>
<%-- ${secondMenu.name} --%>
<spring:message code="${secondMenu.code}"></spring:message>
</div>
<ul class="menuson">
<c:forEach items="${secondMenu.children}" var="thirdMenu" varStatus="thirdIdxStatus">
<c:if test="${thirdMenu.href != null && thirdMenu.href != '' }">
<li>
<span class="${not empty thirdMenu.icon?thirdMenu.icon:'icon-hide'} icon-white"></span>
<a id="menu-${menu.id }-${secondMenu.id}-${thirdMenu.id}" data-id="${thirdMenu.id}" data-name="${menu.name }-${secondMenu.name}-${thirdMenu.name}"
href="${ctx}${thirdMenu.href}" target="mainFrame">
<%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<i></i></a>
</li>
</c:if>
</c:forEach>
</ul>
</dd>
</c:forEach>
</dl>
</div>
</c:if>
</c:forEach>
</div>
<div id="openClose" class="close">&nbsp;</div>
<div id="right">
<div class="quick-actions_homepage">
<div id="quickMenu">
<ul class="quick-actions">
<!-- <li class="bg_lb"> <a href="javascript:void(0);" onclick="go_home()"> <i class="icon-check"></i> 待办事项</a> </li> -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<c:forEach items="${menu.children}" var="secondMenu">
<c:if test="${not empty secondMenu.href and secondMenu.quickAction ne 0}">
<c:if test="${secondMenu.quickAction==1}">
<li class="${secondMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')"> <i class="${secondMenu.icon }"></i>
<%-- ${secondMenu.name } --%>
<spring:message code="${secondMenu.code}"></spring:message>
<c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${secondMenu.quickAction==2}">
<li class="${secondMenu.menuBg } span3"> <a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')">
<i class="${secondMenu.icon }"></i>
<%-- ${secondMenu.name } --%>
<spring:message code="${secondMenu.code}"></spring:message>
<c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if></a> </li>
</c:if>
</c:if>
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${not empty thirdMenu.href and thirdMenu.quickAction ne 0}">
<c:if test="${thirdMenu.quickAction==1}">
<li class="${thirdMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')">
<i class="${thirdMenu.icon }"></i><%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${thirdMenu.quickAction==2}">
<li class="${thirdMenu.menuBg } span3">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')"> <i class="${thirdMenu.icon }"></i>
<%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
</c:if>
</c:forEach>
</c:forEach>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<%-- <div class="place">
<span><i class="icon-home"></i> </span>
<ul class="placeul">
<li><a href="${pageContext.request.contextPath}/" >首页</a></li>
<li><a href="javascript:void(0);" >首页</a></li>
</ul>
</div> --%>
<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%">
浏览器不支持嵌入式框架或配置为不显示嵌入式框架。
</iframe>
</div>
</div>
<div id="footer" class="row-fluid">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} ${fns:getStringProperty('productName','NIS')} - Powered By <a href="${pageContext.request.contextPath }" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0')}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
App.init();
});
function page_turn(ids) {
var ids = ids.split("_");
$("#"+ids[0]).click();
var $secondMenu = $("#menu-"+ids[0]+"-"+ids[1]).siblings(".menuson");
if ($secondMenu.is(':hidden')){
$("#menu-"+ids[0]+"-"+ids[1]).click();
}
var $thirdMenu = $("#menu-"+ids[0]+"-"+ids[1]+"-"+ids[2]);
if (!$thirdMenu.parent().hasClass("active")) {
$thirdMenu.children("i").click();
}
}
var App = function() {
var leftWidth = 190; // 左侧窗口大小
var tabTitleHeight = 33; // 页签的高度
var htmlObj = $("html"), mainObj = $("#main");
var headerObj = $("#header"), footerObj = $("#footer");
var centerObj = $("#left, #openClose, #right");
var frameObj = $("#right iframe");
var quickObj = $("#right .quick-actions_homepage");
var handleResponsiveOnResize = function(){
$("#left").width(leftWidth);
$("#openClose").click(function(){
if($(this).hasClass("close")){
$(this).removeClass("close").addClass("open");
$("#left").animate({width:0,opacity:"hide"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-5},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
)
} else {
$(this).removeClass("open").addClass("close");
$("#left").animate({width:leftWidth,opacity:"show"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-leftWidth-9},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
);
}
});
if(!Array.prototype.map){
Array.prototype.map=function(e,d){
var a=[],b=0;
for(var c=0,f=this.length;c<f;c++){
if(c in this){
a[b++]=e.call(d,this[c],c,this)
}
}
return a;
}
}
$(window).resize(function(){wSize()});
wSize();
}
<c:if test="${tabmode eq '1'}">
var openCloseClickCallBack = function(b){
$.fn.jerichoTab.resize();
}
</c:if>
var getWindowSize = function(){
return["Height","Width"].map(function(a){
return window["inner"+a]||document.compatMode==="CSS1Compat"&&document.documentElement["client"+a]||document.body["client"+a]});
}
//主界面自适应大小
var wSize = function(){
var minHeight = 500, minWidth = 980;
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":strs[1] < minWidth ? "auto" : "hidden", "overflow-y":strs[0] < minHeight ? "auto" : "hidden"});
mainObj.css("width",strs[1] < minWidth ? minWidth - 10 : "auto");
centerObj.height((strs[0] < minHeight ? minHeight : strs[0]) - headerObj.height() - footerObj.height() - (strs[1] < minWidth ? 42 : 28));
$("#openClose").height($("#openClose").height() - 5);
frameObj.height($("#right").height()-quickObj.height());
<c:if test="${tabmode eq '1'}">
$(".jericho_tab iframe").height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
$('#jerichotab_contentholder').height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
</c:if>
wSizeWidth();
}
var wSizeWidth = function (){
if (!$("#openClose").is(":hidden")){
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
}else{
$("#right").width("100%");
}
}
var sidebar_init = function() {
menu_action_init();
system_menu_default_page();
}
//系统进入默认首页界面
var system_menu_default_page = function() {
var $topMenuFirst = $(".topnav li a:first").click();
var menuId = "#menu-" + $topMenuFirst.attr("id");
// 初始化点击第一个二级菜单
if ($(menuId + " dd:first .menuson").is(":hidden")){
$(menuId + " dd:first .title").click();
}
// 初始化点击第一个三级菜单
if (!$(menuId + " dd:first .menuson li:first").hasClass("active")){
var liobject = $(menuId + " dd:first .menuson li:first a i");
liobject.click();
}
}
//菜单选择触发事件
var menu_action_init = function() {
//顶部导航切换
$(".topnav li a").click(function(){
// 一级菜单焦点
$(".topnav li a.selected").removeClass("selected")
$(this).addClass("selected");
// 顶部为直接链接,左侧区域隐藏
if ($(this).attr("target") == "mainFrame"){
$("#left,#openClose").hide();
wSizeWidth();
<c:if test="${tabmode eq '1'}"> // 隐藏页签
$(".jericho_tab").hide();
$("#mainFrame").show();
</c:if>
return true;
}
// 左侧区域显示
$("#left,#openClose").show();
if(!$("#openClose").hasClass("close")){
$("#openClose").click();
}
// 显示二级菜单
var menuId = "#menu-" + $(this).attr("id");
//默认加载所有菜单
if ($(menuId).length){
$("#left>.accordion").addClass("hide");
$(menuId).removeClass("hide");
} else {
// 获取二级菜单数据
$.get($(this).attr("data-href"), function(data){
if (data.indexOf("id=\"loginForm\"") != -1){
alert('未登录或登录超时。请重新登录,谢谢!');
top.location = "${pageContext.request.contextPath}/";
return false;
}
});
}
// 大小宽度调整
wSizeWidth();
return false;
})
//快捷菜单显示隐藏动作
$("#show-hide-option").click(function(event){
var disp = $("#quickMenu").css("display");
if(!disp || disp == "block" ) {
$("#quickMenu").slideUp(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-close");
wSize();
});
}else {
$("#quickMenu").slideDown(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-open");
wSize();
});
}
event.preventDefault();
});
// 二级标题
$('.leftmenu .title').click(function(){
menu_header_active($(this));
});
// 展现三级
$(".menuson>li>a").click(function(){
$(".menuson li.active").removeClass("active");
$(this).parent().addClass("active");
var href = $(this).attr("data-href");
if($(href).length > 0){
$(href).toggle().parent().toggle();
return false;
}
//breadcrumb($(this));
<c:if test="${tabmode eq '1'}"> //打开显示页签
return App.addTab($(this),true);
</c:if>
});
// 鼠标移动到边界自动弹出左侧菜单
$("#openClose").mouseover(function(){
if($(this).hasClass("open")){
$(this).click();
}
});
}
//生成当前位置栏目
var breadcrumb = function($this) {
var names = $this.attr("data-name").split("-");
var breadHtml = '<li><a href="${pageContext.request.contextPath}/" >首页</a></li>';
for (i=0; i<names.length; i++) {
breadHtml += '<li><a href="javascript:void(0);" >'+names[i]+'</a></li>';
}
$('.placeul').html(breadHtml);
}
//左侧菜单标题点击时触发事件
var menu_header_active = function($this){
var $ul = $this.next('ul');
$('dd').find('.menuson').slideUp();
if($ul.is(':visible')){
$this.next('.menuson').slideUp();
}else{
$this.next('.menuson').slideDown();
}
}
return {
init:function(){
handleResponsiveOnResize();
// 链接去掉虚框
$("#left a").bind("focus",function() {
if(this.blur) {this.blur()};
});
<c:if test="${tabmode eq '1'}"> //初始化页签
$.fn.initJerichoTab({
renderTo: '#right', uniqueId: 'jerichotab',
contentCss: { 'height': $('#right').height() - quickObj.height() - tabTitleHeight },
tabs: [], loadOnce: true, tabWidth: 110, titleHeight: tabTitleHeight, quickActionMenu: "#right .quick-actions_homepage"
});
</c:if>
sidebar_init();
<c:if test="${tabmode eq '1'}"> //下拉菜单以选项卡方式打开
$("#userInfo .dropdown-menu a").mouseup(function(){
return App.addTab($(this), true);
});
</c:if>
},
addTab:function($this,refresh) {
$(".jericho_tab").show();
$("#mainFrame").hide();
$.fn.jerichoTab.addTab({
tabFirer: $this,
title: $this.text(),
closeable: true,
data: {
dataType: 'iframe',
dataLink: $this.attr('href')
}
}).loadData(refresh);
return false;
}
};
}();
</script>
</body>
</html>

View File

@@ -0,0 +1,80 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<h3 class="page-title">
Managed Datatables <small>managed datatable samples</small>
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>IP管控新增 </div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
<a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
<a href="javascript:;" class="reload" data-original-title="" title=""> </a>
<a href="javascript:;" class="remove" data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form action="#" class="form-horizontal">
<div class="form-body">
<%@include file="/WEB-INF/include/form/ipInfo.jsp" %>
<!-- <div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-3">IP地址</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label class="control-label col-md-3">配置名称</label>
<div class="col-md-8">
<input class="form-control" type="text">
</div>
</div>
</div>
</div>
-->
<%@include file="/WEB-INF/include/form/basicInfo.jsp" %>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn green">保存</button>
<button type="button" class="btn default">Cancel</button>
</div>
</div>
</div>
<div class="col-md-6"> </div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,165 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default">&nbsp;刷新&nbsp;</button>
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/cfg/ip/ipBlockForm'">&nbsp;新增&nbsp;</button>
</div>
<h3 class="page-title">
IP管控详情
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>IP管控详情
</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title=""
title=""> </a> <a href="#portlet-config" data-toggle="modal"
class="config" data-original-title="" title=""> </a> <a
href="javascript:;" class="reload" data-original-title=""
title=""> </a> <a href="javascript:;" class="remove"
data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="row" >
<div class="col-md-12">
<select>
<option>标题</option>
<option>来函函号</option>
<option>任务</option>
</select> &nbsp; <input> &nbsp; <select>
<option>来函时间</option>
<option>操作时间</option>
</select> &nbsp; <input>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-edit"></i> 搜索
</button>
&nbsp;&nbsp; 排序: <select>
<option>默认排序</option>
<option>按来函时间顺序</option>
<option>按来函时间倒序</option>
<option>按操作时间顺序</option>
<option>按操作时间倒序</option>
</select>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>来函函号</th>
<th>来函单位</th>
<th>来函时间</th>
<th>任务</th>
<th>操作员</th>
<th>操作时间</th>
<th>标题</th>
<th>内容</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>2</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>3</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>4</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>5</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,62 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<h3 class="page-title">
Managed Datatables <small>managed datatable samples</small>
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>IP管控白名单-新增 </div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title="" title=""> </a>
<a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title=""> </a>
<a href="javascript:;" class="reload" data-original-title="" title=""> </a>
<a href="javascript:;" class="remove" data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form action="#" class="form-horizontal">
<div class="form-body">
<%@include file="/WEB-INF/include/form/ip6T.jsp" %>
<%@include file="/WEB-INF/include/form/basicInfo.jsp" %>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn green">保存</button>
<button type="button" class="btn default">Cancel</button>
</div>
</div>
</div>
<div class="col-md-6"> </div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,165 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default">&nbsp;刷新&nbsp;</button>
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/cfg/ip/ipWhiteForm'">&nbsp;新增&nbsp;</button>
</div>
<h3 class="page-title">
IP管控白名单详情
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>IP管控白名单
</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title=""
title=""> </a> <a href="#portlet-config" data-toggle="modal"
class="config" data-original-title="" title=""> </a> <a
href="javascript:;" class="reload" data-original-title=""
title=""> </a> <a href="javascript:;" class="remove"
data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="row" >
<div class="col-md-12">
<select>
<option>标题</option>
<option>来函函号</option>
<option>任务</option>
</select> &nbsp; <input> &nbsp; <select>
<option>来函时间</option>
<option>操作时间</option>
</select> &nbsp; <input>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-edit"></i> 搜索
</button>
&nbsp;&nbsp; 排序: <select>
<option>默认排序</option>
<option>按来函时间顺序</option>
<option>按来函时间倒序</option>
<option>按操作时间顺序</option>
<option>按操作时间倒序</option>
</select>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>来函函号</th>
<th>来函单位</th>
<th>来函时间</th>
<th>任务</th>
<th>操作员</th>
<th>操作时间</th>
<th>标题</th>
<th>内容</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>2</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>3</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>4</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>5</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,96 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<h3 class="page-title">
Managed Datatables <small>managed datatable samples</small>
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>Form Actions On Bottom </div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a>
<a href="#portlet-config" data-toggle="modal" class="config"> </a>
<a href="javascript:;" class="reload"> </a>
<a href="javascript:;" class="remove"> </a>
</div>
</div>
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form action="#" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-md-3 control-label">函号:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">来函单位:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">来函时间:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">标题:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">专项:</label>
<div class="col-md-4">
<div class="input-icon right">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">描述:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group last">
<label class="col-md-3 control-label">内容:</label>
<div class="col-md-4">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn btn-circle green">提交</button>
<button type="button" class="btn btn-circle grey-salsa btn-outline">Cancel</button>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -0,0 +1,167 @@
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<html>
<head>
<title>来函信息</title>
</head>
<body>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default">&nbsp;刷新&nbsp;</button>
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/cfg/request/form'">&nbsp;新增来函&nbsp;</button>
</div>
<h3 class="page-title">
Managed Datatables <small>managed datatable samples</small>
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>来函函号
</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title=""
title=""> </a> <a href="#portlet-config" data-toggle="modal"
class="config" data-original-title="" title=""> </a> <a
href="javascript:;" class="reload" data-original-title=""
title=""> </a> <a href="javascript:;" class="remove"
data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="row" >
<div class="col-md-12">
状态:<select class="select2">
<option>未审核</option>
<option>审核通过</option>
</select>
<select>
<option>标题</option>
<option>来函函号</option>
<option>任务</option>
</select> &nbsp; <input> &nbsp; <select>
<option>来函时间</option>
<option>操作时间</option>
</select> &nbsp; <input>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-edit"></i> 搜索
</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>序号</th>
<th>来函函号</th>
<th>来函单位</th>
<th>来函时间</th>
<th>状态</th>
<th>任务</th>
<th>操作员</th>
<th>操作时间</th>
<th>标题</th>
<th>内容</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td><span class="label label-sm label-success"> 通过
</span></td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>2</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td><span class="label label-sm label-success"> 通过
</span></td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>3</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td><span class="label label-sm label-success"> 通过
</span></td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>4</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td><span class="label label-sm label-success"> 通过
</span></td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>5</td>
<td>20181720函号</td>
<td>来函单位 </d>
<td>2018-01-06 21:57:03</td>
<td><span class="label label-sm label-success"> 通过
</span></td>
<td>七五专项</td>
<td>Admin</td>
<td>2018-01-06 21:57:03</td>
<td>标题</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -1,633 +1,331 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="tabmode" value="${empty cookie.tabmode.value ? '1' : cookie.tabmode.value}"/>
<c:set var="workNotifyRemindInterval" value="${fns:getStringProperty('work.notify.remind.interval','')}"/>
<c:if test="${tabmode eq '1'}">
<link rel="Stylesheet" href="${pageContext.request.contextPath}/static/jerichotab/css/jquery.jerichotab.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jerichotab/js/jquery.jerichotab.js"></script>
</c:if>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/mvc_frame.ico"/>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/pages/img/logo.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${fns:getStringProperty('productName','NIS')}</title>
<style type="text/css">
h3{color:#ffffff;margin:30px 0px 0px 10px;}
</style>
<script src="${pageContext.request.contextPath}/static/pages/scripts/home.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<!-- header -->
<div id="header" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="topleft">
<a href="${pageContext.request.contextPath}/" target="_parent">
<h3>National Firewall System</h3></a>
</div>
<ul class="topnav">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${menu.parent.id eq 1 && menu.isShow eq 1}">
<c:if test="${menu.href != null && menu.href != ''}" var="leafNodeFlag">
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
<!-- BEGIN HEADER -->
<div class="page-header navbar navbar-fixed-top">
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner ">
<!-- BEGIN LOGO -->
<div class="page-logo">
<a href="index.html"> <img
src="${pageContext.request.contextPath}/static/layouts/layout/img/logo.png"
alt="logo" class="logo-default" />
</a>
</div>
<!-- END LOGO -->
<!-- BEGIN MEGA MENU -->
<div class="hor-menu hidden-sm hidden-xs">
<ul class="nav navbar-nav mega-menu">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${menu.isTop eq 1 && menu.isShow eq 1}">
<li>
<a href="${ctx}${menu.href}" id="${menu.id}" target="mainFrame" class="${idxStatus.index eq 0 ? 'selected' : ''}">
<img src="${ctxStatic}/images/${menu.icon}.png" title="<spring:message code="${menu.code}"></spring:message>" />
<h2><%-- ${menu.name } --%><spring:message code="${menu.code}"></spring:message></h2>
</a>
<c:choose>
<c:when test="${not empty menu.children and menu.children[0].isTop eq 1 }">
<a href="javascript:;" id="${menu.id}" data-hover="megamenu-dropdown" data-close-others="true">
${menu.name }<%-- <spring:message code="${menu.code}"></spring:message> --%>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<c:forEach items="${menu.children}" var="secondMenu" varStatus="secondStatus">
<c:if test="${secondMenu.isTop eq 1 && secondMenu.isShow eq 1}">
<c:if test="${secondStatus.index==2}">
<li class="divider"></li>
</c:if>
<li>
<a href="javascript:;" id="${secondMenu.id}">
<i class="fa ${secondMenu.icon }"></i>&nbsp;${secondMenu.name }<%-- <spring:message code="${secondMenu.code}"></spring:message> --%>
</a>
</li>
</c:if>
</c:forEach>
</ul>
</c:when>
<c:otherwise>
<a href="javascript:;" id="${menu.id}">
${menu.name }<%-- <spring:message code="${menu.code}"></spring:message> --%>
</a>
</c:otherwise>
</c:choose>
</li>
</c:if>
<c:if test="${!leafNodeFlag }">
<li>
<a href="javascript:void(0);" id="${menu.id}" class="${idxStatus.index eq 0 ? 'selected' : ''}">
<img src="${ctxStatic}/images/${menu.icon}.png" title="<spring:message code="${menu.code}"></spring:message>" />
<h2><%-- ${menu.name} --%>
<spring:message code="${menu.code}"></spring:message>
</h2>
</a>
</li>
</c:if>
</c:if>
</c:forEach>
</ul>
<div class="topright">
<ul>
<li><a href="${pageContext.request.contextPath}/" title="访问网站主页"><i class="icon-home"></i><spring:message code="home"></spring:message></a></li>
<li><a href="#"><i class="icon-question-sign"></i> <spring:message code="help"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/logout" title="退出登录"><i class="icon-signout"></i> <spring:message code="exit"></spring:message></a></li>
</ul>
<div class="user">
<ul class="nav pull-right">
<li id="userInfo" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="个人信息"><i class="icon-user"></i> <spring:message code="hi"></spring:message>,${fns:getUser().name}&nbsp;<span id="notifyNum" class="label label-info hide"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="${ctx}/sys/user/info" target="mainFrame"><i class="icon-user"></i>&nbsp; <spring:message code="userInfo"></spring:message></a></li>
<li><a href="${ctx}/sys/user/modifyPwd" target="mainFrame"><i class="icon-lock"></i>&nbsp; <spring:message code="updatePwd"></spring:message></a></li>
<li><a href="${ctx}oa/oaNotify/self" target="mainFrame"><i class="icon-bell"></i>&nbsp; <spring:message code="notify"></spring:message> <span id="notifyNum2" class="label label-info hide"></span></a></li>
</ul>
</li>
<li id="themeSwitch" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="主题切换"><i class="icon-th-large"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<c:forEach items="${fns:getDictList('SYS_THEME')}" var="dict">
<li <c:if test="${cookie.theme.value eq dict.itemCode}">class='active'</c:if>>
<a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.itemCode}?url='+location.href">${dict.itemValue}</a>
</li>
</c:forEach>
<li><a href="javascript:cookie('tabmode','${tabmode eq '1' ? '0' : '1'}');location=location.href">${tabmode eq '1' ? '关闭' : '开启'}页签模式</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=en">英语</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=zh_CN">中文</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=ru">俄文</a></li>
</ul>
<!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
</li>
<li><a href="javascript:void(0);" class="tip-bottom" title="显示/隐藏快捷菜单"><i id="show-hide-option" class="icon-eye-open"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- main content -->
<div class="container-fluid">
<div id="content" class="row-fluid">
<div id="left">
<!-- sidebar -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<div id="menu-${menu.id }" class="accordion ${idxStatus.index eq 0 ? '' : 'hide'}">
<div class="lefttop"><span></span><%-- ${menu.name } --%>
<spring:message code="${menu.code}"></spring:message></div>
<dl class="leftmenu">
<%-- <dd><div id="menu-0-0" class="title"><i class="icon-check" ></i>
<a id="menu-81-70" data-id="70" data-name="国际化" href="${pageContext.request.contextPath}/something" target="mainFrame" jerichotabindex="0">示例</a>
</div>
</dd> --%>
<c:forEach items="${menu.children}" var="secondMenu">
<dd>
<div id="menu-${menu.id }-${secondMenu.id}" class="title">
<img src="${ctxStatic}/images/${secondMenu.icon}.png" title="${secondMenu.name }"/>
<%-- <span class="${secondMenu.icon } icon-white"></span> --%>
<%-- ${secondMenu.name} --%>
<spring:message code="${secondMenu.code}"></spring:message>
</div>
<ul class="menuson">
<c:forEach items="${secondMenu.children}" var="thirdMenu" varStatus="thirdIdxStatus">
<c:if test="${thirdMenu.href != null && thirdMenu.href != '' }">
<li>
<span class="${not empty thirdMenu.icon?thirdMenu.icon:'icon-hide'} icon-white"></span>
<a id="menu-${menu.id }-${secondMenu.id}-${thirdMenu.id}" data-id="${thirdMenu.id}" data-name="${menu.name }-${secondMenu.name}-${thirdMenu.name}"
href="${ctx}${thirdMenu.href}" target="mainFrame">
<%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<i></i></a>
</li>
</c:if>
</c:forEach>
</ul>
</dd>
</c:forEach>
</dl>
</div>
</c:if>
</c:if>
</c:forEach>
</div>
<div id="openClose" class="close">&nbsp;</div>
<div id="right">
<div class="quick-actions_homepage">
<div id="quickMenu">
<ul class="quick-actions">
<!-- <li class="bg_lb"> <a href="javascript:void(0);" onclick="go_home()"> <i class="icon-check"></i> 待办事项</a> </li> -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<c:forEach items="${menu.children}" var="secondMenu">
<c:if test="${not empty secondMenu.href and secondMenu.quickAction ne 0}">
<c:if test="${secondMenu.quickAction==1}">
<li class="${secondMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')"> <i class="${secondMenu.icon }"></i>
<%-- ${secondMenu.name } --%>
<spring:message code="${secondMenu.code}"></spring:message>
<c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${secondMenu.quickAction==2}">
<li class="${secondMenu.menuBg } span3"> <a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')">
<i class="${secondMenu.icon }"></i>
<%-- ${secondMenu.name } --%>
<spring:message code="${secondMenu.code}"></spring:message>
<c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if></a> </li>
</c:if>
</c:if>
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${not empty thirdMenu.href and thirdMenu.quickAction ne 0}">
<c:if test="${thirdMenu.quickAction==1}">
<li class="${thirdMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')">
<i class="${thirdMenu.icon }"></i><%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${thirdMenu.quickAction==2}">
<li class="${thirdMenu.menuBg } span3">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')"> <i class="${thirdMenu.icon }"></i>
<%-- ${thirdMenu.name } --%>
<spring:message code="${thirdMenu.code}"></spring:message>
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
</c:if>
</c:forEach>
</c:forEach>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<%-- <div class="place">
<span><i class="icon-home"></i> </span>
<ul class="placeul">
<li><a href="${pageContext.request.contextPath}/" >首页</a></li>
<li><a href="javascript:void(0);" >首页</a></li>
</ul>
</div> --%>
<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%">
浏览器不支持嵌入式框架或配置为不显示嵌入式框架。
</iframe>
</div>
</div>
<div id="footer" class="row-fluid">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} ${fns:getStringProperty('productName','NIS')} - Powered By <a href="${pageContext.request.contextPath }" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0')}
</div>
</div>
</div>
</ul>
<!-- <ul class="nav navbar-nav mega-menu">
<li><a
href="javascript:;" id="1"> 来函登记</a></li>
<script type="text/javascript">
$(document).ready(function(){
App.init();
});
function page_turn(ids) {
var ids = ids.split("_");
$("#"+ids[0]).click();
var $secondMenu = $("#menu-"+ids[0]+"-"+ids[1]).siblings(".menuson");
if ($secondMenu.is(':hidden')){
$("#menu-"+ids[0]+"-"+ids[1]).click();
}
var $thirdMenu = $("#menu-"+ids[0]+"-"+ids[1]+"-"+ids[2]);
if (!$thirdMenu.parent().hasClass("active")) {
$thirdMenu.children("i").click();
}
}
var App = function() {
var leftWidth = 190; // 左侧窗口大小
var tabTitleHeight = 33; // 页签的高度
var htmlObj = $("html"), mainObj = $("#main");
var headerObj = $("#header"), footerObj = $("#footer");
var centerObj = $("#left, #openClose, #right");
var frameObj = $("#right iframe");
var quickObj = $("#right .quick-actions_homepage");
var handleResponsiveOnResize = function(){
$("#left").width(leftWidth);
$("#openClose").click(function(){
if($(this).hasClass("close")){
$(this).removeClass("close").addClass("open");
$("#left").animate({width:0,opacity:"hide"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-5},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
)
} else {
$(this).removeClass("open").addClass("close");
$("#left").animate({width:leftWidth,opacity:"show"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-leftWidth-9},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
);
}
});
if(!Array.prototype.map){
Array.prototype.map=function(e,d){
var a=[],b=0;
for(var c=0,f=this.length;c<f;c++){
if(c in this){
a[b++]=e.call(d,this[c],c,this)
}
}
return a;
}
}
$(window).resize(function(){wSize()});
wSize();
}
<c:if test="${tabmode eq '1'}">
var openCloseClickCallBack = function(b){
$.fn.jerichoTab.resize();
}
</c:if>
var getWindowSize = function(){
return["Height","Width"].map(function(a){
return window["inner"+a]||document.compatMode==="CSS1Compat"&&document.documentElement["client"+a]||document.body["client"+a]});
}
//主界面自适应大小
var wSize = function(){
var minHeight = 500, minWidth = 980;
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":strs[1] < minWidth ? "auto" : "hidden", "overflow-y":strs[0] < minHeight ? "auto" : "hidden"});
mainObj.css("width",strs[1] < minWidth ? minWidth - 10 : "auto");
centerObj.height((strs[0] < minHeight ? minHeight : strs[0]) - headerObj.height() - footerObj.height() - (strs[1] < minWidth ? 42 : 28));
$("#openClose").height($("#openClose").height() - 5);
frameObj.height($("#right").height()-quickObj.height());
<c:if test="${tabmode eq '1'}">
$(".jericho_tab iframe").height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
$('#jerichotab_contentholder').height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
</c:if>
wSizeWidth();
}
var wSizeWidth = function (){
if (!$("#openClose").is(":hidden")){
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
}else{
$("#right").width("100%");
}
}
var sidebar_init = function() {
menu_action_init();
system_menu_default_page();
}
//系统进入默认首页界面
var system_menu_default_page = function() {
var $topMenuFirst = $(".topnav li a:first").click();
var menuId = "#menu-" + $topMenuFirst.attr("id");
// 初始化点击第一个二级菜单
if ($(menuId + " dd:first .menuson").is(":hidden")){
$(menuId + " dd:first .title").click();
}
// 初始化点击第一个三级菜单
if (!$(menuId + " dd:first .menuson li:first").hasClass("active")){
var liobject = $(menuId + " dd:first .menuson li:first a i");
liobject.click();
}
}
//菜单选择触发事件
var menu_action_init = function() {
//顶部导航切换
$(".topnav li a").click(function(){
// 一级菜单焦点
$(".topnav li a.selected").removeClass("selected")
$(this).addClass("selected");
// 顶部为直接链接,左侧区域隐藏
if ($(this).attr("target") == "mainFrame"){
$("#left,#openClose").hide();
wSizeWidth();
<c:if test="${tabmode eq '1'}"> // 隐藏页签
$(".jericho_tab").hide();
$("#mainFrame").show();
</c:if>
return true;
}
// 左侧区域显示
$("#left,#openClose").show();
if(!$("#openClose").hasClass("close")){
$("#openClose").click();
}
// 显示二级菜单
var menuId = "#menu-" + $(this).attr("id");
//默认加载所有菜单
if ($(menuId).length){
$("#left>.accordion").addClass("hide");
$(menuId).removeClass("hide");
} else {
// 获取二级菜单数据
$.get($(this).attr("data-href"), function(data){
if (data.indexOf("id=\"loginForm\"") != -1){
alert('未登录或登录超时。请重新登录,谢谢!');
top.location = "${pageContext.request.contextPath}/";
return false;
}
});
}
// 大小宽度调整
wSizeWidth();
return false;
})
//快捷菜单显示隐藏动作
$("#show-hide-option").click(function(event){
var disp = $("#quickMenu").css("display");
if(!disp || disp == "block" ) {
$("#quickMenu").slideUp(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-close");
wSize();
});
}else {
$("#quickMenu").slideDown(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-open");
wSize();
});
}
event.preventDefault();
});
// 二级标题
$('.leftmenu .title').click(function(){
menu_header_active($(this));
});
// 展现三级
$(".menuson>li>a").click(function(){
$(".menuson li.active").removeClass("active");
$(this).parent().addClass("active");
var href = $(this).attr("data-href");
if($(href).length > 0){
$(href).toggle().parent().toggle();
return false;
}
//breadcrumb($(this));
<c:if test="${tabmode eq '1'}"> //打开显示页签
return App.addTab($(this),true);
</c:if>
});
// 鼠标移动到边界自动弹出左侧菜单
$("#openClose").mouseover(function(){
if($(this).hasClass("open")){
$(this).click();
}
});
}
//生成当前位置栏目
var breadcrumb = function($this) {
var names = $this.attr("data-name").split("-");
var breadHtml = '<li><a href="${pageContext.request.contextPath}/" >首页</a></li>';
for (i=0; i<names.length; i++) {
breadHtml += '<li><a href="javascript:void(0);" >'+names[i]+'</a></li>';
}
$('.placeul').html(breadHtml);
}
//左侧菜单标题点击时触发事件
var menu_header_active = function($this){
var $ul = $this.next('ul');
$('dd').find('.menuson').slideUp();
if($ul.is(':visible')){
$this.next('.menuson').slideUp();
}else{
$this.next('.menuson').slideDown();
}
}
return {
init:function(){
handleResponsiveOnResize();
// 链接去掉虚框
$("#left a").bind("focus",function() {
if(this.blur) {this.blur()};
});
<c:if test="${tabmode eq '1'}"> //初始化页签
$.fn.initJerichoTab({
renderTo: '#right', uniqueId: 'jerichotab',
contentCss: { 'height': $('#right').height() - quickObj.height() - tabTitleHeight },
tabs: [], loadOnce: true, tabWidth: 110, titleHeight: tabTitleHeight, quickActionMenu: "#right .quick-actions_homepage"
});
</c:if>
sidebar_init();
<c:if test="${tabmode eq '1'}"> //下拉菜单以选项卡方式打开
$("#userInfo .dropdown-menu a").mouseup(function(){
return App.addTab($(this), true);
});
</c:if>
<li><a href="javascript:;"
data-hover="megamenu-dropdown" data-close-others="true"> 配置管理
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li><a href="javascript:;" id="2"> <i class="fa fa-bookmark-o"></i>
文本常规管控
</a></li>
<li><a href="javascript:;" id="4">
<i class="fa fa-puzzle-piece"></i> 文本常规监测
</a></li>
<li class="divider"></li>
<li><a href="javascript:;" id="3">
<i class="fa fa-user"></i> 文本增强管控
</a></li>
<li><a href="javascript:;" id="5">
<i class="fa fa-gift"></i> 文本增强监测
</a></li>
</ul></li>
<li><a href="javascript:;"
data-hover="megamenu-dropdown" data-close-others="true"> 审核管理
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li><a href="javascript:;" id="2"> <i class="fa fa-bookmark-o"></i>
文本常规管控
</a></li>
<li><a href="javascript:;" id="4">
<i class="fa fa-puzzle-piece"></i> 文本常规监测
</a></li>
<li class="divider"></li>
<li><a href="javascript:;" id="3">
<i class="fa fa-user"></i> 文本增强管控
</a></li>
<li><a href="javascript:;" id="5">
<i class="fa fa-gift"></i> 文本增强监测
</a></li>
</ul></li>
<li><a href="javascript:;"
data-hover="megamenu-dropdown" data-close-others="true"> 审计管理
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li><a href="javascript:;" id="2"> <i class="fa fa-bookmark-o"></i>
文本常规管控
</a></li>
<li><a href="javascript:;" id="4">
<i class="fa fa-puzzle-piece"></i> 文本常规监测
</a></li>
<li class="divider"></li>
<li><a href="javascript:;" id="3">
<i class="fa fa-user"></i> 文本增强管控
</a></li>
<li><a href="javascript:;" id="5">
<i class="fa fa-gift"></i> 文本增强监测
</a></li>
</ul></li>
<li><a href="javascript:;"
data-hover="megamenu-dropdown" data-close-others="true"> 日志检索
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-left">
<li><a href="javascript:;" id="2"> <i class="fa fa-bookmark-o"></i>
文本常规管控
</a></li>
<li><a href="javascript:;" id="4">
<i class="fa fa-puzzle-piece"></i> 文本常规监测
</a></li>
<li class="divider"></li>
<li><a href="javascript:;" id="3">
<i class="fa fa-user"></i> 文本增强管控
</a></li>
<li><a href="javascript:;" id="5">
<i class="fa fa-gift"></i> 文本增强监测
</a></li>
</ul></li>
<li><a href="javascript:;" id="6"> 基本配置</a></li>
<li><a href="javascript:;" id="7"> 系统配置</a></li>
</ul>
-->
</div>
<!-- END MEGA MENU -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<li class="dropdown dropdown-user" id="language">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" >
<i class="fa fa-language"></i><span class="username username-hide-on-mobile"> &nbsp;简体中文&nbsp; </span>
</a>
<ul class="dropdown-menu">
<li class="hide"><a href="${pageContext.request.contextPath}/language?language=zh_CN">&nbsp;简体中文&nbsp;</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=en">&nbsp;English&nbsp;</a></li>
<li><a href="${pageContext.request.contextPath}/language?language=ru">&nbsp;русский язык&nbsp;</a></li>
</ul>
</li>
<!-- BEGIN USER LOGIN DROPDOWN -->
<li class="dropdown dropdown-user"><a href="javascript:;"
class="dropdown-toggle" data-toggle="dropdown"
data-hover="dropdown" data-close-others="true"> <img alt=""
class="img-circle"
src="${pageContext.request.contextPath}/static/pages/img/avatar.png" />
<span class="username username-hide-on-mobile">
${fns:getUser().name}</span> <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li><a href="${ctx}/sys/user/info" target="mainFrame"><i class="icon-user"></i>&nbsp; <spring:message code="userInfo"></spring:message></a></li>
<li><a href="${ctx}/sys/user/modifyPwd" target="mainFrame"><i class="icon-lock"></i>&nbsp; <spring:message code="updatePwd"></spring:message></a></li>
<li><a href="${pageContext.request.contextPath }/logout"
title="退出登录"><i class="icon-key"></i> <spring:message
code="exit"></spring:message></a></li>
</ul></li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END HEADER INNER -->
</div>
<!-- END HEADER -->
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix"></div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar navbar-collapse collapse">
<ul
class="page-sidebar-menu page-header-fixed page-sidebar-menu-light"
data-keep-expanded="false" data-auto-scroll="true"
data-slide-speed="200" style="padding-top: 0px">
<li class="sidebar-toggler-wrapper hide">
<div class="sidebar-toggler">
<span></span>
</div>
</li>
<li class="sidebar-search-wrapper">
<form class="sidebar-search " action="page_general_search_3.html"
method="POST">
<a href="javascript:;" class="remove"> <i class="icon-close"></i>
</a>
<div class="input-group">
<input class="form-control" placeholder="Search..." type="text">
<span class="input-group-btn"> <a href="javascript:;"
class="btn submit"> <i class="icon-magnifier"></i>
</a>
</span>
</div>
</form>
</li>
</ul>
<%@include file="/WEB-INF/include/left_menu.jsp" %>
<!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
</div>
<!-- END SIDEBAR -->
<div class="page-content-wrapper">
<div class="page-content">
<div class="page-bar">
<ul class="page-breadcrumb">
<li><a href="index.html">Home</a> <i class="fa fa-circle"></i>
</li>
<li><a href="#">Tables</a> <i class="fa fa-circle"></i></li>
<li><span>Datatables</span></li>
</ul>
</div>
<iframe id="mainFrame" name="mainFrame" width="100%" onload="home.setIframeHeight(this)" src="${pageContext.request.contextPath }/nis/index" frameborder="0" srcolling="no">
浏览器不支持嵌入式框架或配置为不显示嵌入式框架。
</iframe>
</div>
<!-- END CONTENT BODY -->
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="page-footer">
<div class="page-footer-inner">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} ${fns:getStringProperty('productName','NIS')} - Powered By <a href="${pageContext.request.contextPath }" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0')}
</div>
<div class="scroll-to-top">
<i class="icon-arrow-up"></i>
</div>
</div>
<!-- END FOOTER -->
},
addTab:function($this,refresh) {
$(".jericho_tab").show();
$("#mainFrame").hide();
$.fn.jerichoTab.addTab({
tabFirer: $this,
title: $this.text(),
closeable: true,
data: {
dataType: 'iframe',
dataLink: $this.attr('href')
}
}).loadData(refresh);
return false;
}
};
}();
</script>
</body>
</html>

View File

@@ -1,647 +0,0 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<c:set var="tabmode" value="${empty cookie.tabmode.value ? '1' : cookie.tabmode.value}"/>
<c:set var="workNotifyRemindInterval" value="${fns:getStringProperty('work.notify.remind.interval','')}"/>
<c:if test="${tabmode eq '1'}">
<link rel="Stylesheet" href="${pageContext.request.contextPath}/static/jerichotab/css/jquery.jerichotab.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/static/jerichotab/js/jquery.jerichotab.js"></script>
</c:if>
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/mvc_frame.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${fns:getStringProperty('productName','NIS')}</title>
<style type="text/css">
#main {padding:0;margin:0;}
#main .container-fluid{padding:0 4px 0 4px;}
#header {margin:0 0 2px;position:static;}
#header li {font-size:14px;_font-size:13px;}
#header .brand {font-family:"Microsoft Yahei","微软雅黑",Helvetica, Arial, sans-serif, "宋体";font-size:26px;padding-left:33px;}
#footer {margin:8px 0 0 0;padding:3px 0 0 0;font-size:11px;text-align:center;border-top:2px solid #0663A2;}
#footer, #footer a {color:#999;} #left{overflow-x:hidden;overflow-y:auto;}
#left .collapse{position:static;}
.accordion-heading .accordion-toggle .icon-chevron-left{
margin-right:3px;
display:inline;
font-weight:300;
float:right;
display:inline;
padding-top:2px;
}
.accordion-heading .accordion-toggle .icon-chevron-down{
height:auto;
margin-right:3px;
display:inline;
font-weight:300;
float:right;
display:inline;
padding-top:2px;
}
#userControl {
background-image: url(${ctxStatic}/images/bs_bannerright.jpg);
background-repeat: no-repeat;
}
#userControl>li>a{/*color:#fff;*/text-shadow:none;}
#userControl>li>a:hover, #user #userControl>li.open>a{background:transparent;}
.header-left {
display: block;
float: left;
margin-left: 1px;
text-shadow: 0 1px 0 #ffffff;
width: 608px;
height:87px;
background-image: url(${ctxStatic}/images/bs_bannerleft.jpg);
background-repeat: no-repeat;
}
.nav-collapse {
width:100%;
height:87px;
background-image: url(${ctxStatic}/images/bs_bannercenter.jpg);
background-repeat: repeat;
}
#content {
background: none repeat scroll 0 0 #eeeeee;
margin-right: 0;
position: relative;
min-height:100%;
width: auto;
}
</style>
</head>
<body>
<div id="main">
<!-- header -->
<div id="header" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="header-left">
<%-- <span id="productName"> ${fns:getStringProperty('productName','NIS')}</span> --%>
</div>
<ul id="userControl" class="nav pull-right">
<li class="divider-vertical hidden-phone hidden-tablet"></li>
<li><a href="${pageContext.request.contextPath}/" title="访问网站主页"><i class="icon-home"></i></a></li>
<li id="userInfo" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="个人信息">您好,${fns:getUser().name}&nbsp;<span id="notifyNum" class="label label-info hide"></span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="${ctx}/sys/user/info" target="mainFrame"><i class="icon-user"></i>&nbsp; 个人信息</a></li>
<li><a href="${ctx}/sys/user/modifyPwd" target="mainFrame"><i class="icon-lock"></i>&nbsp; 修改密码</a></li>
<li><a href="${ctx}oa/oaNotify/self" target="mainFrame"><i class="icon-bell"></i>&nbsp; 我的通知 <span id="notifyNum2" class="label label-info hide"></span></a></li>
</ul>
</li>
<li id="themeSwitch" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="主题切换"><i class="icon-th-large"></i>&nbsp;<b class="caret"></b></a>
<ul class="dropdown-menu">
<c:forEach items="${fns:getDictList('SYS_THEME')}" var="dict">
<li <c:if test="${cookie.theme.value eq dict.itemCode}">class='active'</c:if>>
<a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.itemCode}?url='+location.href">${dict.itemValue}</a>
</li>
</c:forEach>
<li><a href="javascript:cookie('tabmode','${tabmode eq '1' ? '0' : '1'}');location=location.href">${tabmode eq '1' ? '关闭' : '开启'}页签模式</a></li>
</ul>
<!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
</li>
<li class="divider-vertical hidden-phone hidden-tablet"></li>
<li><a href="javascript:void(0);" class="tip-bottom" title="显示/隐藏快捷菜单"><i id="show-hide-option" class="icon-eye-open"></i></a></li>
<li><a href="${pageContext.request.contextPath }/logout" title="退出登录"><i class="icon-signout"></i>&nbsp;退出</a></li>
<li>&nbsp;</li>
</ul>
<div class="nav-collapse">
<ul id="menu" class="nav" style="*white-space:nowrap;float:none;">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${menu.parent.id eq 1 && menu.isShow eq 1}">
<li class="menu ${idxStatus.index eq 0 ? 'active' : ''}">
<c:if test="${menu.href != null && menu.href != ''}" var="leafNodeFlag">
<a class="menu" href="${ctx}${menu.href}" data-id="${menu.id}" target="mainFrame"><i class="${menu.icon } icon-white"></i> ${menu.name }</a>
</c:if>
<c:if test="${!leafNodeFlag }">
<a class="menu" href="javascript:void(0);" data-href="" data-id="${menu.id}"><i class="${menu.icon } icon-white"></i> ${menu.name}</a>
</c:if>
</li>
</c:if>
</c:forEach>
<li>
<a href="documentation.html"><i class="icon-book icon-white"></i> 帮助</a>
</li>
</ul>
</div>
</div>
</div>
<!-- main content -->
<div class="container-fluid">
<div id="content" class="row-fluid">
<div id="left">
<!-- sidebar -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<div id="menu-${menu.id }" class="accordion">
<c:forEach items="${menu.children}" var="secondMenu">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#collapse_${secondMenu.id}" data-parent="#menu-${menu.id }" data-toggle="collapse" class="accordion-toggle">
${secondMenu.name} <i class="icon-chevron-left"></i>
</a>
</div>
<div class="accordion-body collapse" id="collapse_${secondMenu.id}">
<div class="accordion-inner">
<ul class="nav nav-list">
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${thirdMenu.href != null && thirdMenu.href != '' }">
<li>
<a href="${ctx}${thirdMenu.href}" data-id="${thirdMenu.id}" target="mainFrame"><i class="${not empty thirdMenu.icon?thirdMenu.icon:'icon-hide'} icon-white"></i> ${thirdMenu.name }</a>
<ul style="margin:0;padding-right:0;" class="nav nav-list hide"></ul>
</li>
</c:if>
<!--
<li class="divider"></li>
-->
</c:forEach>
</ul>
</div>
</div>
</div>
</c:forEach>
</div>
</c:if>
</c:forEach>
</div>
<div id="openClose" class="close">&nbsp;</div>
<div id="right">
<div class="quick-actions_homepage">
<div id="quickMenu">
<ul class="quick-actions">
<!-- <li class="bg_lb"> <a href="javascript:void(0);" onclick="go_home()"> <i class="icon-check"></i> 待办事项</a> </li> -->
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${not empty menu.children }">
<c:forEach items="${menu.children}" var="secondMenu">
<c:if test="${not empty secondMenu.href and secondMenu.quickAction ne 0}">
<c:if test="${secondMenu.quickAction==1}">
<li class="${secondMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')"> <i class="${secondMenu.icon }"></i> ${secondMenu.name }
<c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${secondMenu.quickAction==2}">
<li class="${secondMenu.menuBg } span3"> <a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}')">
<i class="${secondMenu.icon }"></i> ${secondMenu.name } <c:if test="${secondMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if></a> </li>
</c:if>
</c:if>
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${not empty thirdMenu.href and thirdMenu.quickAction ne 0}">
<c:if test="${thirdMenu.quickAction==1}">
<li class="${thirdMenu.menuBg }">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')"> <i class="${thirdMenu.icon }"></i> ${thirdMenu.name }
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
<c:if test="${thirdMenu.quickAction==2}">
<li class="${thirdMenu.menuBg } span3">
<a href="javascript:void(0);" onclick="page_turn('${menu.id}'+'_'+'${secondMenu.id}'+'_'+'${thirdMenu.id}')"> <i class="${thirdMenu.icon }"></i> ${thirdMenu.name }
<c:if test="${thirdMenu.name eq '待办事项'}"><span id="notifyWorkedOption" class="label label-important hide"></span></c:if>
</a>
</li>
</c:if>
</c:if>
</c:forEach>
</c:forEach>
</c:if>
</c:forEach>
</ul>
</div>
</div>
<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%">
浏览器不支持嵌入式框架或配置为不显示嵌入式框架。
</iframe>
</div>
</div>
<div id="footer" class="row-fluid">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} ${fns:getStringProperty('productName','NIS')} - Powered By <a href="${pageContext.request.contextPath }" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0')}
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
App.init();
});
function page_turn(ids) {
var ids = ids.split("_");
$("#menu a.menu").filter("[data-id='"+ids[0]+"']").click();
var $secondMenu = $("#left .accordion-heading a").filter("[href='#collapse_"+ids[1]+"']");
if (!$($secondMenu.attr("href")).hasClass('in')){
$secondMenu.click();
}
var $thirdMenu = $($secondMenu.attr("href")).find(".accordion-inner > ul > li > a ").filter("[data-id='"+ids[2]+"']");
$thirdMenu.children("i").click();
}
var App = function() {
var leftWidth = 160; // 左侧窗口大小
var tabTitleHeight = 33; // 页签的高度
var htmlObj = $("html"), mainObj = $("#main");
var headerObj = $("#header"), footerObj = $("#footer");
var centerObj = $("#left, #openClose, #right");
var frameObj = $("#right iframe");
var quickObj = $("#right .quick-actions_homepage");
var handleResponsiveOnResize = function(){
$("#left").width(leftWidth);
$("#openClose").click(function(){
if($(this).hasClass("close")){
$(this).removeClass("close").addClass("open");
$("#left").animate({width:0,opacity:"hide"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-5},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
)
} else {
$(this).removeClass("open").addClass("close");
$("#left").animate({width:leftWidth,opacity:"show"});
$("#right").animate({width:$("#content").width()-$("#openClose").width()-leftWidth-9},function(){
if(typeof openCloseClickCallBack=="function"){
openCloseClickCallBack(true);
}
wSize();
}
);
}
});
if(!Array.prototype.map){
Array.prototype.map=function(e,d){
var a=[],b=0;
for(var c=0,f=this.length;c<f;c++){
if(c in this){
a[b++]=e.call(d,this[c],c,this)
}
}
return a;
}
}
$(window).resize(function(){wSize()});
wSize();
}
<c:if test="${tabmode eq '1'}">
var openCloseClickCallBack = function(b){
$.fn.jerichoTab.resize();
}
</c:if>
var getWindowSize = function(){
return["Height","Width"].map(function(a){
return window["inner"+a]||document.compatMode==="CSS1Compat"&&document.documentElement["client"+a]||document.body["client"+a]});
}
//主界面自适应大小
var wSize = function(){
var minHeight = 500, minWidth = 980;
var strs = getWindowSize().toString().split(",");
htmlObj.css({"overflow-x":strs[1] < minWidth ? "auto" : "hidden", "overflow-y":strs[0] < minHeight ? "auto" : "hidden"});
mainObj.css("width",strs[1] < minWidth ? minWidth - 10 : "auto");
centerObj.height((strs[0] < minHeight ? minHeight : strs[0]) - headerObj.height() - footerObj.height() - (strs[1] < minWidth ? 42 : 28));
$("#openClose").height($("#openClose").height() - 5);
frameObj.height($("#right").height()-quickObj.height());
<c:if test="${tabmode eq '1'}">
$(".jericho_tab iframe").height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
$('#jerichotab_contentholder').height(0).height($("#right").height() - tabTitleHeight - quickObj.height());
</c:if>
wSizeWidth();
}
var wSizeWidth = function (){
if (!$("#openClose").is(":hidden")){
var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
}else{
$("#right").width("100%");
}
}
var sidebar_init = function() {
menu_action_init();
system_menu_default_page();
}
//系统进入默认首页界面
var system_menu_default_page = function() {
var $topMenuFirst = $("#menu a.menu:first i").click();
var menuId = "#menu-" + $topMenuFirst.parent().attr("data-id");
// 初始化点击第一个二级菜单
if (!$(menuId + " .accordion-body:first").hasClass('in')){
$(menuId + " .accordion-heading:first a").click();
}
if (!$(menuId + " .accordion-body li:first ul:first").is(":visible")){
var iobject = $(menuId + " .accordion-body a:first i");
var aObject = $(menuId + " .accordion-body li:first a");
$(menuId + " .accordion-body a:first i").click();
}
// 初始化点击第一个三级菜单
$(menuId + " .accordion-body li:first li:first a:first").click();
}
//菜单选择触发事件
var menu_action_init = function() {
// 绑定菜单单击事件
$("#menu a.menu").click(function(){
// 一级菜单焦点
$("#menu li.menu").removeClass("active");
$(this).parent().addClass("active");
// 左侧区域隐藏
if ($(this).attr("target") == "mainFrame"){
$("#left,#openClose").hide();
wSizeWidth();
<c:if test="${tabmode eq '1'}"> // 隐藏页签
$(".jericho_tab").hide();
$("#mainFrame").show();
</c:if>
return true;
}
// 左侧区域显示
$("#left,#openClose").show();
if(!$("#openClose").hasClass("close")){
$("#openClose").click();
}
// 显示二级菜单
var menuId = "#menu-" + $(this).attr("data-id");
//默认加载所有菜单
if ($(menuId).length){
$("#left .accordion").hide();
$(menuId).show();
} else {
// 获取二级菜单数据
$.get($(this).attr("data-href"), function(data){
if (data.indexOf("id=\"loginForm\"") != -1){
alert('未登录或登录超时。请重新登录,谢谢!');
top.location = "${pageContext.request.contextPath}/";
return false;
}
});
}
// 大小宽度调整
wSizeWidth();
return false;
});
//快捷菜单显示隐藏动作
$("#show-hide-option").click(function(event){
var disp = $("#quickMenu").css("display");
if(!disp || disp == "block" ) {
$("#quickMenu").slideUp(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-close");
wSize();
});
}else {
$("#quickMenu").slideDown(200,function(){
$("#show-hide-option").removeClass().addClass("icon-eye-open");
wSize();
});
}
event.preventDefault();
});
// 二级标题
$("#left .accordion-heading a").click(function(){
menu_header_active($(this));
});
// 二级内容
$("#left .accordion-body a").click(function(){
var $sub_li = $("#left .accordion-body li");
$sub_li.removeClass("active");
$sub_li.children("i").removeClass("icon-white");
$(this).parent().addClass("active");
$(this).children("i").addClass("icon-white");
});
// 展现三级
$("#left .accordion-inner a").click(function(){
var href = $(this).attr("data-href");
if($(href).length > 0){
$(href).toggle().parent().toggle();
return false;
}
<c:if test="${tabmode eq '1'}"> //打开显示页签
return App.addTab($(this));
</c:if>
});
// 鼠标移动到边界自动弹出左侧菜单
$("#openClose").mouseover(function(){
if($(this).hasClass("open")){
$(this).click();
}
});
}
//左侧菜单标题点击时触发事件
var menu_header_active = function($this){
var $flag = $this.children("i");
if($flag.hasClass("icon-chevron-down")){
$flag.removeClass('icon-chevron-down').addClass('icon-chevron-left');
return;
}
var thisAccordion = $('#left');
thisAccordion.find('.accordion-heading a').children("i").removeClass('icon-chevron-down').addClass('icon-chevron-left');
$flag.removeClass('icon-chevron-left').addClass('icon-chevron-down');
}
return {
init:function(){
handleResponsiveOnResize();
// 链接去掉虚框
$("#left a").bind("focus",function() {
if(this.blur) {this.blur()};
});
<c:if test="${tabmode eq '1'}"> //初始化页签
$.fn.initJerichoTab({
renderTo: '#right', uniqueId: 'jerichotab',
contentCss: { 'height': $('#right').height() - quickObj.height() - tabTitleHeight },
tabs: [], loadOnce: true, tabWidth: 110, titleHeight: tabTitleHeight, quickActionMenu: "#right .quick-actions_homepage"
});
</c:if>
sidebar_init();
<c:if test="${tabmode eq '1'}"> //下拉菜单以选项卡方式打开
$("#userInfo .dropdown-menu a").mouseup(function(){
return App.addTab($(this), true);
});
</c:if>
App.getNotifyNum();
<c:if test="${workNotifyRemindInterval ne '' && workNotifyRemindInterval ne '0'}">
setInterval(App.getNotifyNum, '${workNotifyRemindInterval}');
</c:if>
},
addTab:function($this,refresh) {
$(".jericho_tab").show();
$("#mainFrame").hide();
$.fn.jerichoTab.addTab({
tabFirer: $this,
title: $this.text(),
closeable: true,
data: {
dataType: 'iframe',
dataLink: $this.attr('href')
}
}).loadData(refresh);
return false;
},
getNotifyNum:function(){
$.get("${ctx}/sys/user/getToDoTaskNum?updateSession=0&t="+new Date().getTime(),function(data){
var num = parseFloat(data);
if (num > 0){
$("#notifyWorkedOption").show().html(num);
}else{
$("#notifyWorkedOption").hide()
}
});
}
};
}();
</script>
</body>
</html>

View File

@@ -1,472 +0,0 @@
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${fns:getStringProperty('productName','NIS')}</title>
<style type="text/css">
#footer {margin:8px 0 0 0;padding:3px 0 0 0;font-size:11px;text-align:center;border-top:2px solid #0663A2;}
#footer, #footer a {color:#999;}
</style>
</head>
<body>
<div id="loading_layer" style="display:none"><img src="${pageContext.request.contextPath }/static/img/ajax_loader.gif" alt="" /></div>
<div class="style_switcher">
<div class="sepH_c">
<p>Colors:</p>
<div class="clearfix">
<a href="javascript:void(0)" class="style_item jQclr blue_theme style_active" title="blue">blue</a>
<a href="javascript:void(0)" class="style_item jQclr dark_theme" title="dark">dark</a>
<a href="javascript:void(0)" class="style_item jQclr green_theme" title="green">green</a>
<a href="javascript:void(0)" class="style_item jQclr brown_theme" title="brown">brown</a>
<a href="javascript:void(0)" class="style_item jQclr eastern_blue_theme" title="eastern_blue">eastern blue</a>
<a href="javascript:void(0)" class="style_item jQclr tamarillo_theme" title="tamarillo">tamarillo</a>
</div>
</div>
<div class="sepH_c">
<p>Backgrounds:</p>
<div class="clearfix">
<span class="style_item jQptrn style_active ptrn_def" title=""></span>
<span class="ssw_ptrn_a style_item jQptrn" title="ptrn_a"></span>
<span class="ssw_ptrn_b style_item jQptrn" title="ptrn_b"></span>
<span class="ssw_ptrn_c style_item jQptrn" title="ptrn_c"></span>
<span class="ssw_ptrn_d style_item jQptrn" title="ptrn_d"></span>
<span class="ssw_ptrn_e style_item jQptrn" title="ptrn_e"></span>
</div>
</div>
<div class="sepH_c">
<p>Layout:</p>
<div class="clearfix">
<label class="radio inline"><input type="radio" name="ssw_layout" id="ssw_layout_fluid" value="" checked /> Fluid</label>
<label class="radio inline"><input type="radio" name="ssw_layout" id="ssw_layout_fixed" value="gebo-fixed" /> Fixed</label>
</div>
</div>
<div class="sepH_c">
<p>Sidebar position:</p>
<div class="clearfix">
<label class="radio inline"><input type="radio" name="ssw_sidebar" id="ssw_sidebar_left" value="" checked /> Left</label>
<label class="radio inline"><input type="radio" name="ssw_sidebar" id="ssw_sidebar_right" value="sidebar_right" /> Right</label>
</div>
</div>
<div class="sepH_c">
<p>Show top menu on:</p>
<div class="clearfix">
<label class="radio inline"><input type="radio" name="ssw_menu" id="ssw_menu_click" value="" checked /> Click</label>
<label class="radio inline"><input type="radio" name="ssw_menu" id="ssw_menu_hover" value="menu_hover" /> Hover</label>
</div>
</div>
<div class="gh_button-group">
<a href="#" id="showCss" class="btn btn-primary btn-mini">Show CSS</a>
<a href="#" id="resetDefault" class="btn btn-mini">Reset</a>
</div>
<div class="hide">
<ul id="ssw_styles">
<li class="small ssw_mbColor sepH_a" style="display:none">body {<span class="ssw_mColor sepH_a" style="display:none"> color: #<span></span>;</span> <span class="ssw_bColor" style="display:none">background-color: #<span></span> </span>}</li>
<li class="small ssw_lColor sepH_a" style="display:none">a { color: #<span></span> }</li>
</ul>
</div>
</div>
<div id="maincontainer" class="clearfix">
<!-- header -->
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="dashboard.html"><i class="icon-home icon-white"></i> Gebo Admin</a>
<ul class="nav user_menu pull-right">
<li class="hidden-phone hidden-tablet">
<div class="nb_boxes clearfix">
<a data-toggle="modal" data-backdrop="static" href="#myMail" class="label ttip_b" title="New messages">25 <i class="splashy-mail_light"></i></a>
<a data-toggle="modal" data-backdrop="static" href="#myTasks" class="label ttip_b" title="New tasks">10 <i class="splashy-calendar_week"></i></a>
</div>
</li>
<li class="divider-vertical hidden-phone hidden-tablet"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle nav_condensed" data-toggle="dropdown"><i class="flag-gb"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0)"><i class="flag-de"></i> Deutsch</a></li>
<li><a href="javascript:void(0)"><i class="flag-fr"></i> Français</a></li>
<li><a href="javascript:void(0)"><i class="flag-es"></i> Español</a></li>
<li><a href="javascript:void(0)"><i class="flag-ru"></i> Pусский</a></li>
</ul>
</li>
<li class="divider-vertical hidden-phone hidden-tablet"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="${pageContext.request.contextPath }/static/img/user_avatar.png" alt="" class="user_avatar" /> Johny Smith <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="user_profile.html">My Profile</a></li>
<li><a href="javascrip:void(0)">Another action</a></li>
<li class="divider"></li>
<li><a href="${pageContext.request.contextPath }/logout">Log Out</a></li>
</ul>
</li>
</ul>
<ul class="nav" id="mobile-nav">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<c:if test="${empty menu.children}" var="subMenuFlag">
<c:if test="${menu.isLeaf eq 1}">
<li>
<a href="${pageContext.request.contextPath }/${menu.menuUrl}" data-id="${menu.id}" target="mainFrame"><i class="${menu.menuClass } icon-white"></i> ${menu.menuName }</a>
</li>
</c:if>
</c:if>
<c:if test="${!subMenuFlag}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" data-id="${menu.id}" href="javascript:void(0);"><i class="${menu.menuClass}"></i> ${menu.menuName } <b class="caret"></b></a>
<ul class="dropdown-menu">
<c:forEach items="${menu.children}" var="secondMenu">
<!-- 二级菜单 -->
<c:if test="${empty secondMenu.children}" var="secondMenuFlag">
<li><a href="${pageContext.request.contextPath }/${secondMenu.menuUrl}" data-id="${secondMenu.id}" target="mainFrame">${secondMenu.menuName }</a></li>
</c:if>
<c:if test="${!secondMenuFlag}">
<li class="dropdown">
<a href="javascript:void(0);" data-id="${secondMenu.id}">${secondMenu.menuName } <b class="caret-right"></b></a>
<ul class="dropdown-menu">
<!-- 第三级别菜单 -->
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${thirdMenu.isLeaf == 1}">
<li><a href="${pageContext.request.contextPath }/${thirdMenu.menuUrl}" data-id="${thirdMenu.id}" target="mainFrame">${thirdMenu.menuName }</a></li>
</c:if>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
</ul>
</li>
</c:if>
</c:forEach>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="icon-th icon-white"></i> Components <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="alerts_btns.html">Alerts & Buttons</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="notifications.html">Notifications</a></li>
<li><a href="tables.html">Tables</a></li>
<li><a href="tables_more.html">Tables (more examples)</a></li>
<li><a href="tabs_accordion.html">Tabs & Accordion</a></li>
<li><a href="tooltips.html">Tooltips, Popovers</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="widgets.html">Widget boxes</a></li>
<li class="dropdown">
<a href="#">Sub menu <b class="caret-right"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Sub menu 1.1</a></li>
<li><a href="#">Sub menu 1.2</a></li>
<li><a href="#">Sub menu 1.3</a></li>
<li>
<a href="#">Sub menu 1.4 <b class="caret-right"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Sub menu 1.4.1</a></li>
<li><a href="#">Sub menu 1.4.2</a></li>
<li><a href="#">Sub menu 1.4.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="documentation.html"><i class="icon-book icon-white"></i> Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="modal hide fade" id="myMail">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>New messages</h3>
</div>
<div class="modal-body">
<div class="alert alert-info">In this table jquery plugin turns a table row into a clickable link.</div>
<table class="table table-condensed table-striped" data-provides="rowlink">
<thead>
<tr>
<th>Sender</th>
<th>Subject</th>
<th>Date</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Declan Pamphlett</td>
<td><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></td>
<td>23/05/2012</td>
<td>25KB</td>
</tr>
<tr>
<td>Erin Church</td>
<td><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></td>
<td>24/05/2012</td>
<td>15KB</td>
</tr>
<tr>
<td>Koby Auld</td>
<td><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></td>
<td>25/05/2012</td>
<td>28KB</td>
</tr>
<tr>
<td>Anthony Pound</td>
<td><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a></td>
<td>25/05/2012</td>
<td>33KB</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="btn">Go to mailbox</a>
</div>
</div>
<div class="modal hide fade" id="myTasks">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>New Tasks</h3>
</div>
<div class="modal-body">
<div class="alert alert-info">In this table jquery plugin turns a table row into a clickable link.</div>
<table class="table table-condensed table-striped" data-provides="rowlink">
<thead>
<tr>
<th>id</th>
<th>Summary</th>
<th>Updated</th>
<th>Priority</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>P-23</td>
<td><a href="javascript:void(0)">Admin should not break if URL&hellip;</a></td>
<td>23/05/2012</td>
<td class="tac"><span class="label label-important">High</span></td>
<td>Open</td>
</tr>
<tr>
<td>P-18</td>
<td><a href="javascript:void(0)">Displaying submenus in custom&hellip;</a></td>
<td>22/05/2012</td>
<td class="tac"><span class="label label-warning">Medium</span></td>
<td>Reopen</td>
</tr>
<tr>
<td>P-25</td>
<td><a href="javascript:void(0)">Featured image on post types&hellip;</a></td>
<td>22/05/2012</td>
<td class="tac"><span class="label label-success">Low</span></td>
<td>Updated</td>
</tr>
<tr>
<td>P-10</td>
<td><a href="javascript:void(0)">Multiple feed fixes and&hellip;</a></td>
<td>17/05/2012</td>
<td class="tac"><span class="label label-warning">Medium</span></td>
<td>Open</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<a href="javascript:void(0)" class="btn">Go to task manager</a>
</div>
</div>
</header>
<!-- main content -->
<div id="contentwrapper" class="">
<div class="main_content">
<iframe id="mainFrame" name="mainFrame" src="" style="overflow:visible;" scrolling="yes" frameborder="no" width="100%" height="650">
浏览器不支持嵌入式框架或配置为不显示嵌入式框架。
</iframe>
</div>
<!-- sidebar -->
<a href="javascript:void(0)" class="sidebar_switch on_switch ttip_r" title="Hide Sidebar">Sidebar switch</a>
<div class="sidebar">
<div class="antiScroll">
<div class="antiscroll-inner">
<div class="antiscroll-content">
<div class="sidebar_inner">
<form action="search_page.html" class="input-append" method="post" >
<input autocomplete="off" name="query" class="search_query input-medium" size="16" type="text" placeholder="Search..." /><button type="submit" class="btn"><i class="icon-search"></i></button>
</form>
<div id="side_accordion" class="accordion">
<c:forEach items="${fns:getMenuTreeList()}" var="menu" varStatus="idxStatus">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#collapse_${menu.id}" data-parent="#side_accordion" data-toggle="collapse" class="accordion-toggle">
<i class="${menu.menuClass }"></i> ${menu.menuName}
</a>
</div>
<div class="accordion-body collapse" id="collapse_${menu.id}">
<div class="accordion-inner">
<ul class="nav nav-list">
<c:if test="${empty menu.children}" var="subMenuFlag">
<c:if test="${menu.isLeaf eq 1}">
<li>
<a href="${pageContext.request.contextPath }/${menu.menuUrl}" data-id="${menu.id}" target="mainFrame"><i class="${menu.menuClass }"></i> ${menu.menuName }</a>
</li>
</c:if>
</c:if>
<c:if test="${!subMenuFlag}">
<c:forEach items="${menu.children}" var="secondMenu">
<!-- 二级菜单 -->
<c:if test="${empty secondMenu.children}" var="secondMenuFlag">
<li><a href="${pageContext.request.contextPath }/${secondMenu.menuUrl}" data-id="${secondMenu.id}" target="mainFrame">${secondMenu.menuName }</a></li>
<li class="divider"></li>
</c:if>
<c:if test="${!secondMenuFlag}">
<li class="nav-header">${secondMenu.menuName }</li>
<!-- 第三级别菜单 -->
<c:forEach items="${secondMenu.children}" var="thirdMenu">
<c:if test="${thirdMenu.isLeaf == 1}">
<li><a href="${pageContext.request.contextPath }/${thirdMenu.menuUrl}" data-id="${thirdMenu.id}" target="mainFrame">${thirdMenu.menuName }</a></li>
</c:if>
</c:forEach>
<li class="divider"></li>
</c:if>
</c:forEach>
</c:if>
</ul>
</div>
</div>
</div>
</c:forEach>
<div class="accordion-group">
<div class="accordion-heading">
<a href="#collapseFour" data-parent="#side_accordion" data-toggle="collapse" class="accordion-toggle">
<i class="icon-cog"></i> Configuration
</a>
</div>
<div class="accordion-body collapse" id="collapseFour">
<div class="accordion-inner">
<ul class="nav nav-list">
<li class="nav-header">People</li>
<li class="active"><a href="javascript:void(0)">Account Settings</a></li>
<li><a href="javascript:void(0)">IP Adress Blocking</a></li>
<li class="nav-header">System</li>
<li><a href="javascript:void(0)">Site information</a></li>
<li><a href="javascript:void(0)">Actions</a></li>
<li><a href="javascript:void(0)">Cron</a></li>
<li class="divider"></li>
<li><a href="javascript:void(0)">Help</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="sidebar_info">
<ul class="unstyled">
<li>
<span class="act act-warning">65</span>
<strong>New comments</strong>
</li>
<li>
<span class="act act-success">10</span>
<strong>New articles</strong>
</li>
<li>
<span class="act act-danger">85</span>
<strong>New registrations</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer" class="row-fluid">
Copyright &copy; <a href="http://jeesite.com" target="_blank">JeeSite</a>
</div>
</div>
</body>
</html>

View File

@@ -9,7 +9,11 @@
<%@include file="/WEB-INF/include/header.jsp" %>
<sitemesh:write property="head"/>
</head>
<body>
<body >
<input id="metaId" type="hidden" value="<sitemesh:write property="body.id" />"/>
<input id="metaClass" type="hidden" value="<sitemesh:write property="body.class" />"/>
<sitemesh:write property="body"/>
</body>
</html>

View File

@@ -3,79 +3,120 @@
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/mvc_frame.ico"/>
<script src="${pageContext.request.contextPath }/static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath }/static/common/login.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/static/common/cloud.js" type="text/javascript"></script>
<title>${fns:getStringProperty('productName','NIS')}-登录平台</title>
</head>
<body>
<div id="mainBody">
<div id="cloud1" class="cloud"></div>
<div id="cloud2" class="cloud"></div>
</div>
<div class="loginbody">
<span class="systemlogo"></span>
<form id="loginForm" class="form-signin" action="${pageContext.request.contextPath }/login" method="post">
<div class="loginbox loginbox2">
<ul>
<li><input id="username" name="username" type="text" class="loginuser required" value="${username}" placeholder="请填写登录账号"/></li>
<li><input type="password" class="loginpwd required" id="password" name="password" placeholder="请填写登录密码"/></li>
<c:if test="${not empty isValidateCodeLogin or isValidateCodeLogin==true}">
<li class="yzm ${ (empty isValidateCodeLogin or isValidateCodeLogin==false) ?'hide':'' }">
<span><input id="captcha" name="captcha" class="required" type="text" placeholder="验证码"/></span><cite><img alt="未获取验证码" src="${pageContext.request.contextPath}/captcha-image" id="captacha_image" class="mid"/></cite>
</li>
</c:if>
<li><input type="submit" class="loginbtn" value="登录"/>
<label><input id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} type="checkbox" />记住我(公共场所慎用)</label>
</li>
</ul>
<div class="bottom">
<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
<label id="loginError" class="error">${message}</label>
</div>
</div>
</div>
</form>
</div>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<div class="loginbm">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} <a href="${pageContext.request.contextPath}">${fns:getStringProperty('productName','NIS')}</a> - Powered By <a href="${pageContext.request.contextPath}" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0.0')}
</div>
<script src="${pageContext.request.contextPath}/static/flash/zoom.min.js" type="text/javascript"></script>
<head>
<meta charset="utf-8" />
<title>Login</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="${pageContext.request.contextPath}/static/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="${pageContext.request.contextPath}/static/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="${pageContext.request.contextPath}/static/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN PAGE LEVEL STYLES -->
<link href="${pageContext.request.contextPath}/static/pages/css/login.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" /> </head>
<!-- END HEAD -->
<body class="">
<div class="page-login">
<div class="page-logo">
<img src="${pageContext.request.contextPath}/static/pages/img/logo.png" alt="logo" />
</div>
<div class="page-body">
<div class="login-head"> Login </div>
<div class="login-body">
<div class="pull-left login-avatar-block">
<img src="${pageContext.request.contextPath}/static/pages/img/photo.jpg" class="login-avatar"> </div>
<form id="loginForm" class="login-form pull-left" action="${pageContext.request.contextPath }/login" method="post">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control placeholder-no-fix " value="${username}" placeholder="请填写登录账号"/>
</div>
<div class="form-group">
<input type="password" class="form-control placeholder-no-fix " id="password" name="password" placeholder="请填写登录密码"/>
</div>
<%-- <c:if test="${not empty isValidateCodeLogin or isValidateCodeLogin==true}">
<li class="yzm ${ (empty isValidateCodeLogin or isValidateCodeLogin==false) ?'hide':'' }">
<span><input id="captcha" name="captcha" class="required" type="text" placeholder="验证码"/></span><cite><img alt="未获取验证码" src="${pageContext.request.contextPath}/captcha-image" id="captacha_image" class="mid"/></cite>
</li>
</c:if>
<li><input type="submit" class="loginbtn" value="登录"/>
<label><input id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''} type="checkbox" />记住我(公共场所慎用)</label>
</li> --%>
<div class="form-actions">
<button type="submit" class="btn red uppercase">Login</button>
</div>
</form>
</div>
<div class="login-bottom">
<a href="">Not Amanda Smith?</a>
</div>
</div>
<p>
<div id="messageBox" class="alert alert-danger ${empty message ? 'hide' : ''}">
<span class="label label-danger">ERROR:&nbsp;&nbsp;</span>
<label id="loginError" class="error">${message}</label>
</div>
</p>
</div>
<div class="page-footer-custom">
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} <a href="${pageContext.request.contextPath}">${fns:getStringProperty('productName','NIS')}</a> - Powered By <a href="${pageContext.request.contextPath}" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0.0')}
</div>
<!--[if lt IE 9]>
<script src="${pageContext.request.contextPath}/static/global/plugins/respond.min.js"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/excanvas.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/static/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="${pageContext.request.contextPath}/static/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<!-- END THEME LAYOUT SCRIPTS -->
<script type="text/javascript">
$(document).ready(function(){
$('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
$(window).resize(function(){
$('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
})
$("#captacha_image").on("click",function(){
$(this).hide().attr("src","${pageContext.request.contextPath }/captcha-image?"+ Math.floor(Math.random()*100))
.fadeIn();
});
$("#loginForm").validate({
rules: {
username: { required: true},
@@ -103,6 +144,6 @@
});
</script>
</body>
</body>
</html>

View File

@@ -1,141 +0,0 @@
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/mvc_frame.ico"/>
<%@include file="/WEB-INF/include/header.jsp" %>
<title>登录平台</title>
<style type="text/css">
html,body,table{
text-align:center;
witdh:100%;
height:100%;
}
.icon{
background-image:url(${pageContext.request.contextPath }/static/images/u0.jpg);
background-repeat: no-repeat;
background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='${pageContext.request.contextPath }/static/images/u0.jpg',sizingMethod='scale');
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.form-signin-heading{font-family:"Microsoft Yahei","微软雅黑",Helvetica, Arial, sans-serif, "宋体";font-size:36px;margin-bottom:20px;color:#0663a2;}
.form-signin{position:relative;text-align:left;width:300px;padding:25px 29px 29px;margin:0 auto 20px;background-color:#fff;border:1px solid #e5e5e5;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);-moz-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05);}
.form-signin .checkbox{margin-bottom:10px;color:#0663a2;} .form-signin .input-label{font-size:16px;line-height:23px;color:#333333;}
.form-signin .input-block-level{
font-size:16px;
height:auto;
min-height:20px;
margin-bottom:15px;
padding:7px;
*width:283px;
*padding-bottom:0;
_padding:7px 7px 9px 7px;
}
.form-signin .btn.btn-large{font-size:16px;} .form-signin #themeSwitch{position:absolute;right:15px;bottom:10px;}
.form-signin div.validateCode {padding-bottom:15px;} .mid{vertical-align:middle;}
.header{height:80px;padding-top:20px;} .alert{position:relative;width:300px;margin:0 auto;*padding-bottom:0px;}
label.error{background:none;width:270px;font-weight:normal;color:inherit;margin:0;}
#captacha_image {
cursor:pointer;
}
</style>
</head>
<body class="icon">
<div class="header">
<div id="messageBox" class="alert alert-error ${empty message ? 'hide' : ''}">
<label id="loginError" class="error">${message}</label>
</div>
</div>
<h1 class="form-signin-heading">${fns:getStringProperty('productName','NIS')}</h1>
<form id="loginForm" class="form-signin" action="${pageContext.request.contextPath }/login" method="post">
<label class="input-label" for="username">登录名</label>
<input type="text" id="username" name="username" class="input-block-level required" value="${username}" placeholder="请填写登录账号"/>
<label class="input-label" for="password">密码</label>
<input type="password" id="password" name="password" class="input-block-level required" placeholder="请填写登录密码"/>
<c:if test="${not empty isValidateCodeLogin or isValidateCodeLogin==true}">
<div class="formRow ${ (empty isValidateCodeLogin or isValidateCodeLogin==false) ?'hide':'' }">
<label class="input-label mid" for="captcha">验证码</label>
<input type="text" id="captcha" name="captcha" maxlength="5" class="txt required" style="font-weight:bold;width:60px;margin-bottom:0;"/>
<img alt="未获取验证码" src="${pageContext.request.contextPath}/captcha-image" id="captacha_image" class="mid"/>
</div>
</c:if>
<%--
<label for="mobile" title="手机登录"><input type="checkbox" id="mobileLogin" name="mobileLogin" ${mobileLogin ? 'checked' : ''}/></label> --%>
<input class="btn btn-large btn-primary" type="submit" value="登 录"/>&nbsp;&nbsp;
<label for="rememberMe" title="下次不需要再登录"><input type="checkbox" id="rememberMe" name="rememberMe" ${rememberMe ? 'checked' : ''}/> 记住我(公共场所慎用)</label>
<div id="themeSwitch" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">${fns:getDictLabel('SYS_THEME', cookie.theme.value,'默认主题')}<b class="caret"></b></a>
<ul class="dropdown-menu">
<c:forEach items="${fns:getDictList('SYS_THEME')}" var="dict">
<li <c:if test="${cookie.theme.value eq dict.itemCode}">class='active'</c:if>><a href="#" onclick="location='${pageContext.request.contextPath}/theme/${dict.itemCode}?url='+location.href">${dict.itemValue}</a></li>
</c:forEach>
</ul>
<!--[if lte IE 6]><script type="text/javascript">$('#themeSwitch').hide();</script><![endif]-->
</div>
</form>
<div class="footer">
<span>为了您有更好的体验建议采用IE10以上浏览器!</span> <br>
Copyright &copy; 2015-${fns:getStringProperty('copyrightYear','2015')} <a href="${pageContext.request.contextPath}">${fns:getStringProperty('productName','NIS')}</a> - Powered By <a href="${pageContext.request.contextPath}" target="_blank">NIS</a> ${fns:getStringProperty('version','1.0.0')}
</div>
<script src="${pageContext.request.contextPath}/static/flash/zoom.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#captacha_image").on("click",function(){
$(this).hide().attr("src","${pageContext.request.contextPath }/captcha-image?"+ Math.floor(Math.random()*100))
.fadeIn();
});
$("#loginForm").validate({
rules: {
username: { required: true},
password: { required: true},
captcha: {remote: "${pageContext.request.contextPath}/validateCode"}
},
messages: {
username: {required: "请填写用户名."},password: {required: "请填写密码."},
captcha: {remote: "验证码不正确.", required: "请填写验证码."}
},
errorLabelContainer: "#messageBox",
errorPlacement: function(error, element) {
error.appendTo($("#loginError").parent());
}
});
// 如果在框架或在对话框中,则弹出提示并跳转到首页
if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
alert('未登录或登录超时。请重新登录,谢谢!');
top.location = "${pageContext.request.contextPath }";
}
});
</script>
</body>
</html>

View File

@@ -25,78 +25,140 @@
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="${ctx}/sys/menu/">菜单列表</a></li>
<li class="active"><a href="${ctx}/sys/menu/form?id=${menu.id}&parent.id=${menu.parent.id}">菜单<shiro:hasPermission name="sys:menu:edit">${not empty menu.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="sys:menu:edit">查看</shiro:lacksPermission></a></li>
</ul><br/>
<form:form id="inputForm" modelAttribute="menu" action="${ctx}/sys/menu/saveOrUpdate" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="control-group">
<label class="control-label">上级菜单:</label>
<div class="controls">
<sys:treeselect id="menu" name="parent.id" value="${menu.parent.id}" labelName="parent.name" labelValue="${menu.parent.name}"
title="菜单" url="/sys/menu/treeData" extId="${menu.id}" cssClass="required"/>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default" onclick="history.go(-1)">&nbsp;返回&nbsp;</button>
</div>
<h3 class="page-title">
菜单管理
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>菜单<shiro:hasPermission name="sys:menu:edit">${not empty menu.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="sys:menu:edit">查看</shiro:lacksPermission></div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a>
<a href="#portlet-config" data-toggle="modal" class="config"> </a>
<a href="javascript:;" class="reload"> </a>
<a href="javascript:;" class="remove"> </a>
</div>
</div>
<div class="portlet-body form">
<div class="form-body">
<!-- BEGIN FORM-->
<form:form id="inputForm" modelAttribute="menu" action="${ctx}/sys/menu/saveOrUpdate" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="form-group">
<label class="col-md-3 control-label">上级菜单:</label>
<div class="col-md-4">
<sys:treeselect id="menu" name="parent.id" value="${menu.parent.id}" labelName="parent.name" labelValue="${menu.parent.name}"
title="菜单" url="/sys/menu/treeData" extId="${menu.id}" cssClass="required form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"><font color="red">*</font> 名称:</label>
<div class="col-md-4">
<form:input path="name" htmlEscape="false" maxlength="50" class="required form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">链接:</label>
<div class="col-md-4">
<form:input path="href" htmlEscape="false" maxlength="2000" class="form-control"/>
<span class="help-inline">点击菜单跳转的页面</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">目标:</label>
<div class="col-md-4">
<form:input path="target" htmlEscape="false" maxlength="10" class="form-control"/>
<span class="help-inline">链接地址打开的目标窗口默认mainFrame</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">是否顶部导航菜单:</label>
<div class="col-md-4">
<form:radiobutton path="isTop" value="1" />是
<form:radiobutton path="isTop" value="0" checked="true"/>否
<span class="help-inline">该菜单或操作是否顶部导航菜单</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">图标:</label>
<div class="col-md-4">
<sys:iconselect id="icon" name="icon" value="${menu.icon}"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">排序:</label>
<div class="col-md-4">
<form:input path="sort" htmlEscape="false" maxlength="50" class="required digits form-control"/>
<span class="help-inline">排列顺序,升序。</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">可见:</label>
<div class="col-md-4">
<form:radiobuttons path="isShow" items="${fns:getDictList('SYS_SHOW_HIDE')}" itemLabel="itemValue" itemValue="itemCode" htmlEscape="false" class="required"/>
<span class="help-inline">该菜单或操作是否显示到系统菜单中</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">权限标识:</label>
<div class="col-md-4">
<form:input path="permission" htmlEscape="false" maxlength="100" class="form-control"/>
<span class="help-inline">控制器中定义的权限标识,如:@RequiresPermissions("权限标识")</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">备注:</label>
<div class="col-md-4">
<form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200" class="form-control"/>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<shiro:hasPermission name="sys:menu:edit"><button type="submit" class="btn btn-circle blue">&nbsp;&nbsp;保存&nbsp;&nbsp;</button></shiro:hasPermission>
<button type="button" class="btn btn-circle grey-salsa btn-outline" onclick="history.go(-1)">Cancel</button>
</div>
</div>
</div>
</form:form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">名称:</label>
<div class="controls">
<form:input path="name" htmlEscape="false" maxlength="50" class="required input-xlarge"/>
<span class="help-inline"><font color="red">*</font> </span>
</div>
</div>
<div class="control-group">
<label class="control-label">链接:</label>
<div class="controls">
<form:input path="href" htmlEscape="false" maxlength="2000" class="input-xxlarge"/>
<span class="help-inline">点击菜单跳转的页面</span>
</div>
</div>
<div class="control-group">
<label class="control-label">目标:</label>
<div class="controls">
<form:input path="target" htmlEscape="false" maxlength="10" class="input-small"/>
<span class="help-inline">链接地址打开的目标窗口默认mainFrame</span>
</div>
</div>
<div class="control-group">
<label class="control-label">图标:</label>
<div class="controls">
<sys:iconselect id="icon" name="icon" value="${menu.icon}"/>
</div>
</div>
<div class="control-group">
<label class="control-label">排序:</label>
<div class="controls">
<form:input path="sort" htmlEscape="false" maxlength="50" class="required digits input-small"/>
<span class="help-inline">排列顺序,升序。</span>
</div>
</div>
<div class="control-group">
<label class="control-label">可见:</label>
<div class="controls">
<form:radiobuttons path="isShow" items="${fns:getDictList('SYS_SHOW_HIDE')}" itemLabel="itemValue" itemValue="itemCode" htmlEscape="false" class="required"/>
<span class="help-inline">该菜单或操作是否显示到系统菜单中</span>
</div>
</div>
<div class="control-group">
<label class="control-label">权限标识:</label>
<div class="controls">
<form:input path="permission" htmlEscape="false" maxlength="100" class="input-xxlarge"/>
<span class="help-inline">控制器中定义的权限标识,如:@RequiresPermissions("权限标识")</span>
</div>
</div>
<div class="control-group">
<label class="control-label">备注:</label>
<div class="controls">
<form:textarea path="remarks" htmlEscape="false" rows="3" maxlength="200" class="input-xxlarge"/>
</div>
</div>
<div class="form-actions">
<shiro:hasPermission name="sys:menu:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
</div>
</form:form>
</div>
</div>
</body>
</html>

View File

@@ -4,8 +4,9 @@
<head>
<title>菜单管理</title>
<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
<link href="${ctxStatic}/global/plugins/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/global/plugins/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#treeTable").treeTable({expandLevel : 3}).show();
@@ -18,39 +19,85 @@
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/sys/menu/">菜单列表</a></li>
<shiro:hasPermission name="sys:menu:edit"><li><a href="${ctx}/sys/menu/form">菜单添加</a></li></shiro:hasPermission>
</ul>
<sys:message content="${message}"/>
<form id="listForm" method="post">
<table id="treeTable" class="table table-striped table-bordered table-condensed hide">
<thead><tr><th>名称</th><th>链接</th><th style="text-align:center;">排序</th><th>可见</th><th>权限标识</th><shiro:hasPermission name="sys:menu:edit"><th>操作</th></shiro:hasPermission></tr></thead>
<tbody><c:forEach items="${list}" var="menu">
<tr id="${menu.id}" pId="${menu.parent.id ne 1?menu.parent.id:0}">
<td nowrap><i class="icon-${not empty menu.icon?menu.icon:' hide'}"></i><a href="${ctx}/sys/menu/form?id=${menu.id}">${menu.name}</a></td>
<td title="${menu.href}">${fns:abbr(menu.href,30)}</td>
<td style="text-align:center;">
<shiro:hasPermission name="sys:menu:edit">
<input type="hidden" name="ids" value="${menu.id}"/>
<input name="sorts" type="text" value="${menu.sort}" style="width:50px;margin:0;padding:0;text-align:center;">
</shiro:hasPermission><shiro:lacksPermission name="sys:menu:edit">
${menu.sort}
</shiro:lacksPermission>
</td>
<td>${menu.isShow eq '1'?'显示':'隐藏'}</td>
<td title="${menu.permission}">${fns:abbr(menu.permission,30)}</td>
<shiro:hasPermission name="sys:menu:edit"><td nowrap>
<a href="${ctx}/sys/menu/form?id=${menu.id}">修改</a>
<a href="${ctx}/sys/menu/delete?id=${menu.id}" onclick="return confirmx('要删除该菜单及所有子菜单项吗?', this.href)">删除</a>
<a href="${ctx}/sys/menu/form?parent.id=${menu.id}">添加下级菜单</a>
</td></shiro:hasPermission>
</tr>
</c:forEach></tbody>
</table>
<shiro:hasPermission name="sys:menu:edit"><div class="form-actions pagination-left">
<input id="btnSubmit" class="btn btn-primary" type="button" value="保存排序" onclick="updateSort();"/>
</div></shiro:hasPermission>
</form>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default">&nbsp;刷新&nbsp;</button>
<shiro:hasPermission name="sys:menu:edit"><button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/sys/menu/form'">&nbsp;新增菜单&nbsp;</button></shiro:hasPermission>
</div>
<h3 class="page-title">
菜单管理
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>菜单列表
</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title=""
title=""> </a> <a href="#portlet-config" data-toggle="modal"
class="config" data-original-title="" title=""> </a> <a
href="javascript:;" class="reload" data-original-title=""
title=""> </a> <a href="javascript:;" class="remove"
data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="row" >
<div class="col-md-12">
<sys:message content="${message}"/>
<form id="listForm" method="post">
<table id="treeTable" class="table table-striped table-bordered table-condensed">
<thead><tr><th>名称</th><th>链接</th><th style="text-align:center;">排序</th><th>可见</th><th>权限标识</th><shiro:hasPermission name="sys:menu:edit"><th>操作</th></shiro:hasPermission></tr></thead>
<tbody><c:forEach items="${list}" var="menu">
<tr id="${menu.id}" pId="${menu.parent.id ne 1?menu.parent.id:0}">
<td nowrap><i class="icon-${not empty menu.icon?menu.icon:' hide'}"></i><a href="${ctx}/sys/menu/form?id=${menu.id}">${menu.name}</a></td>
<td title="${menu.href}">${fns:abbr(menu.href,30)}</td>
<td style="text-align:center;">
<shiro:hasPermission name="sys:menu:edit">
<input type="hidden" name="ids" value="${menu.id}"/>
<input name="sorts" type="text" value="${menu.sort}" style="width:50px;margin:0;padding:0;text-align:center;">
</shiro:hasPermission><shiro:lacksPermission name="sys:menu:edit">
${menu.sort}
</shiro:lacksPermission>
</td>
<td>${menu.isShow eq '1'?'显示':'隐藏'}</td>
<td title="${menu.permission}">${fns:abbr(menu.permission,30)}</td>
<shiro:hasPermission name="sys:menu:edit"><td nowrap>
<a href="${ctx}/sys/menu/form?id=${menu.id}">修改</a>
<a href="${ctx}/sys/menu/delete?id=${menu.id}" onclick="return confirmx('要删除该菜单及所有子菜单项吗?', this.href)">删除</a>
<a href="${ctx}/sys/menu/form?parent.id=${menu.id}">添加下级菜单</a>
</td></shiro:hasPermission>
</tr>
</c:forEach></tbody>
</table>
<shiro:hasPermission name="sys:menu:edit"><div class="form-actions pagination-left">
<input id="btnSubmit" class="btn btn-primary" type="button" value="保存排序" onclick="updateSort();"/>
</div></shiro:hasPermission>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -4,8 +4,10 @@
<head>
<title>角色管理</title>
<link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<link href="${pageContext.request.contextPath}/static/global/plugins/jquery-ztree/3.5.12/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/static/global/plugins/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#name").focus();
@@ -65,66 +67,119 @@
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li><a href="${ctx}/sys/role/">角色列表</a></li>
<li class="active"><a href="${ctx}/sys/role/form?id=${role.id}">角色<shiro:hasPermission name="sys:role:edit">${not empty role.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="sys:role:edit">查看</shiro:lacksPermission></a></li>
</ul><br/>
<form:form id="inputForm" modelAttribute="sysRole" action="${ctx}/sys/role/saveOrUpdate" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<div class="control-group">
<label class="control-label">角色名称:</label>
<div class="controls">
<input id="oldName" name="oldName" type="hidden" value="${role.name}">
<form:input path="name" htmlEscape="false" maxlength="50" class="required"/>
<span class="help-inline"><font color="red">*</font> </span>
</div>
</div>
<div class="control-group">
<label class="control-label">角色类型:</label>
<div class="controls"><%--
<form:input path="roleType" htmlEscape="false" maxlength="50" class="required"/>
<span class="help-inline" title="activiti有3种预定义的组类型security-role、assignment、user 如果使用Activiti Explorer需要security-role才能看到manage页签需要assignment才能claim任务">
工作流组用户组类型security-role管理员、assignment可进行任务分配、user普通用户</span> --%>
<form:select path="roleType" class="input-medium">
<form:option value="assignment">任务分配</form:option>
<form:option value="security-role">管理角色</form:option>
<form:option value="user">普通角色</form:option>
</form:select>
<span class="help-inline" title="activiti有3种预定义的组类型security-role、assignment、user 如果使用Activiti Explorer需要security-role才能看到manage页签需要assignment才能claim任务">
工作流组用户组类型任务分配assignment、管理角色security-role、普通角色user</span>
</div>
</div>
<button type="button" class="btn btn-default" onclick="history.go(-1)">&nbsp;返回&nbsp;</button>
</div>
<div class="control-group">
<label class="control-label">数据范围:</label>
<div class="controls">
<form:select path="dataScope" class="input-medium">
<form:options items="${fns:getDictList('SYS_DATA_SCOPE')}" itemLabel="itemValue" itemValue="itemCode" htmlEscape="false"/>
</form:select>
<span class="help-inline">特殊情况下,设置为“按明细设置”,可进行跨机构授权</span>
<h3 class="page-title">
菜单管理
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>角色<shiro:hasPermission name="sys:role:edit">${not empty role.id?'修改':'添加'}</shiro:hasPermission><shiro:lacksPermission name="sys:role:edit">查看</shiro:lacksPermission></div>
<div class="tools">
<a href="javascript:;" class="collapse"> </a>
<a href="#portlet-config" data-toggle="modal" class="config"> </a>
<a href="javascript:;" class="reload"> </a>
<a href="javascript:;" class="remove"> </a>
</div>
</div>
<div class="portlet-body form">
<div class="form-body">
<!-- BEGIN FORM-->
<form:form id="inputForm" modelAttribute="sysRole" action="${ctx}/sys/role/saveOrUpdate" method="post" class="form-horizontal">
<form:hidden path="id"/>
<sys:message content="${message}"/>
<div class="form-group">
<label class="col-md-3 control-label">角色名称:</label>
<div class="col-md-4">
<input id="oldName" name="oldName" type="hidden" value="${role.name}">
<form:input path="name" htmlEscape="false" maxlength="50" class="required form-control"/>
<span class="help-inline"><font color="red">*</font> </span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">角色类型:</label>
<div class="col-md-4"><%--
<form:input path="roleType" htmlEscape="false" maxlength="50" class="required"/>
<span class="help-inline" title="activiti有3种预定义的组类型security-role、assignment、user 如果使用Activiti Explorer需要security-role才能看到manage页签需要assignment才能claim任务">
工作流组用户组类型security-role管理员、assignment可进行任务分配、user普通用户</span> --%>
<form:select path="roleType" class="form-control">
<form:option value="assignment">任务分配</form:option>
<form:option value="security-role">管理角色</form:option>
<form:option value="user">普通角色</form:option>
</form:select>
<span class="help-inline" title="activiti有3种预定义的组类型security-role、assignment、user 如果使用Activiti Explorer需要security-role才能看到manage页签需要assignment才能claim任务">
工作流组用户组类型任务分配assignment、管理角色security-role、普通角色user</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">数据范围:</label>
<div class="col-md-4">
<form:select path="dataScope" class="form-control">
<form:options items="${fns:getDictList('SYS_DATA_SCOPE')}" itemLabel="itemValue" itemValue="itemCode" htmlEscape="false"/>
</form:select>
<span class="help-inline">特殊情况下,设置为“按明细设置”,可进行跨机构授权</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">角色授权:</label>
<div class="col-md-4">
<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
<form:hidden path="menuIds"/>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">备注:</label>
<div class="col-md-4">
<form:textarea path="remark" htmlEscape="false" rows="3" maxlength="200" class="form-control"/>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<shiro:hasPermission name="sys:role:edit"><button type="submit" class="btn btn-circle blue">&nbsp;&nbsp;保存&nbsp;&nbsp;</button></shiro:hasPermission>
<button type="button" class="btn btn-circle grey-salsa btn-outline" onclick="history.go(-1)">Cancel</button>
</div>
</div>
</div>
</form:form>
<!-- END FORM-->
</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">角色授权:</label>
<div class="controls">
<div id="menuTree" class="ztree" style="margin-top:3px;float:left;"></div>
<form:hidden path="menuIds"/>
</div>
</div>
<div class="control-group">
<label class="control-label">备注:</label>
<div class="controls">
<form:textarea path="remark" htmlEscape="false" rows="3" maxlength="200" class="input-xlarge"/>
</div>
</div>
<div class="form-actions">
<shiro:hasPermission name="sys:role:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
</div>
</form:form>
</div>
</div>
</body>
</html>

View File

@@ -5,25 +5,80 @@
<title>角色管理</title>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/sys/role/">角色列表</a></li>
<shiro:hasPermission name="sys:role:edit"><li><a href="${ctx}/sys/role/form">角色添加</a></li></shiro:hasPermission>
<div class="page-content">
<div class="theme-panel hidden-xs hidden-sm">
<button type="button" class="btn btn-default">&nbsp;刷新&nbsp;</button>
<shiro:hasPermission name="sys:role:edit">
<button type="button" class="btn btn-primary"
onClick="javascript:window.location='${ctx}/sys/role/form'">&nbsp;新增角色&nbsp;</button>
</shiro:hasPermission>
</ul>
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<tr><th>角色名称</th><th>数据范围</th><th>描述</th><shiro:hasPermission name="sys:role:edit"><th>操作</th></shiro:hasPermission></tr>
<c:forEach items="${list}" var="role">
<tr>
<td><a href="form?id=${role.id}">${role.name}</a></td>
<td>${fns:getDictLabel('SYS_DATA_SCOPE',role.dataScope,'无')}</td>
<td title="${role.remark}">${fns:abbr(role.remark,30)}</td>
<shiro:hasPermission name="sys:role:edit"><td>
<a href="${ctx}/sys/role/assign?id=${role.id}">分配</a>
<a href="${ctx}/sys/role/form?id=${role.id}">修改</a>
<a href="${ctx}/sys/role/delete?id=${role.id}" onclick="return confirmx('确认要删除该角色吗?', this.href)">删除</a>
</td></shiro:hasPermission>
</tr>
</c:forEach>
</table>
</div>
<h3 class="page-title">
角色管理
</h3>
<div class="row">
<div class="col-md-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-cogs"></i>角色列表
</div>
<div class="tools">
<a href="javascript:;" class="collapse" data-original-title=""
title=""> </a> <a href="#portlet-config" data-toggle="modal"
class="config" data-original-title="" title=""> </a> <a
href="javascript:;" class="reload" data-original-title=""
title=""> </a> <a href="javascript:;" class="remove"
data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body">
<div class="row" >
<div class="col-md-12">
<sys:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
<tr><th>角色名称</th><th>数据范围</th><th>描述</th><shiro:hasPermission name="sys:role:edit"><th>操作</th></shiro:hasPermission></tr>
<c:forEach items="${list}" var="role">
<tr>
<td><a href="form?id=${role.id}">${role.name}</a></td>
<td>${fns:getDictLabel('SYS_DATA_SCOPE',role.dataScope,'无')}</td>
<td title="${role.remark}">${fns:abbr(role.remark,30)}</td>
<shiro:hasPermission name="sys:role:edit"><td>
<a href="${ctx}/sys/role/assign?id=${role.id}">分配</a>
<a href="${ctx}/sys/role/form?id=${role.id}">修改</a>
<a href="${ctx}/sys/role/delete?id=${role.id}" onclick="return confirmx('确认要删除该角色吗?', this.href)">删除</a>
</td></shiro:hasPermission>
</tr>
</c:forEach>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@@ -1,255 +0,0 @@
@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td,img { padding: 0; margin: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; }
ol,ul,li { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0; }
/*-- All --*/
html{ min-width:1000px; }
body{ color:#333;font:12px/20px Arial,"Microsoft YaHei","宋体",sans-serif; text-align:center; background:#fff; }
a{ color:#333; text-decoration:none; outline:none;}
a:hover {color:#f00; text-decoration:underline; }
table { border-collapse: collapse; border-spacing: 0; empty-cells:show; }
table td,table th{ border:#ddd solid 1px; padding: 5px 0; }
table th{ background:#39A4DC; color:#fff; }
table .new td{ color:#f60; font-weight:bold; }
/* css三角形 */
.arrow,.arrow s { position:relative; display:block; font-size: 0; line-height: 0; width: 0; height: 0; border-color:transparent; border-style:dashed; border-width:5px; }
.arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }
.arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }
.arrowR:hover{ border-left-color:#f60; }
.arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }
.arrowL s{ border-right-color:#fff; position:absolute; right:-7px; top:-5px; }
.arrowL:hover{ border-right-color:#f60; }
.arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }
.arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }
.arrowT:hover{ border-bottom-color:#f60; }
.arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }
.arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottom:-3px; }
.arrowB:hover{ border-top-color:#f60; }
/* css圆形 */
.circle{ line-height:100%; overflow:hidden; font-family:Tahoma,Helvetica; font-size:18px; color:#aaa; }
.circle:hover{ color:#f60; }
/* 顶部导航条 */
#header{ width:100%; left:0; top:0; position:fixed; z-index:10; height:32px; line-height:32px; color:#fff; text-align:left; overflow:hidden; }
#header .headerBg{ width:100%; height:32px; left:0; top:0; position:absolute; z-index:0; background:#000; filter:alpha(opacity=70);opacity:0.7; }
#header a{ color:#fff; }
#header #logo{ position:relative; z-index:1; display:inline-block; *display:inline; zoom:1; font-size:14px; margin-right:5px; padding-left:10px; }
#header .nav{ position:relative; z-index:2; float:right; padding-right:10px; }
#header .nav a{ padding:0 10px; }
#header .nav a.imp{ color:#ff0; }
#header .title{ position:relative; z-index:1; height:32px; overflow:hidden; }
#content{ margin:0 auto; padding:62px 30px 30px 30px; position:relative; text-align:left; z-index:0; }
#footer{ height:34px; line-height:34px; text-align:center; }
/* 首页 - index.html ---------------------------------------------- */
.indBtn{ text-align:center; display:none; }
.indBtn a{ vertical-align:middle; margin:15px 15px 0 0; display:inline-block; *display:inline; zoom:1; padding:14px 22px 3px 22px; line-height:26px;
color:#bede9a; font-size:14px;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
background:#89c941;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#89c941), to(#72b238));
background: -webkit-linear-gradient(#89c941, #72b238);
background: -moz-linear-gradient(#89c941, #72b238);
background: -ms-linear-gradient(#89c941, #72b238);
background: -o-linear-gradient(#89c941, #72b238);
background: linear-gradient(#89c941, #72b238);
-pie-background: linear-gradient(#89c941, #72b238);
-webkit-box-shadow: #39591c 2px 2px 3px;
-moz-box-shadow: #39591c 2px 2px 3px;
box-shadow: #39591c 2px 2px 3px;
}
.indBtn a em{ font-size:30px; display:block; color:#fff; }
.indIntro a:hover{ text-decoration:none; margin:11px 15px 0 0; }
.indTips{ position:fixed; _position:absolute; width:14px; right:0; top:90px; background:#333; padding:5px; line-height:18px; color:#fff; cursor:pointer;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
}
.indTips a{ color:#fff; text-decoration:none; }
#indTips1{ display:none; }
#ind2{ display:none; }
#ind2 .topic{ font-size:60px; height:120px; line-height:120px; }
/* 参数 - param.html ---------------------------------------------- */
.paramPage .param{ width:100%; margin-bottom:20px; background:#fff; }
.paramPage .param th{ text-align:center; }
.paramPage .param td{ text-align:left; padding:5px 2px; }
.paramPage .param .intro{ text-align:left; }
.paramPage .param .link{ color:#39A4DC; text-decoration:underline; }
.paramPage .param .t b{ color:#f60; }
.paramPage .param i{ color:#f60; }
.paramPage .param .on td{ background:#ffffaa; }
/*.paramPage .param tr.n td{ color:#999; }*/
.paramPage .intro a{ text-decoration:underline; }
.paramPage .notice{ overflow:hidden; text-align:left; padding-bottom:10px; }
.paramPage .notice li{ width:120px; height:30px; line-height:30px; text-align:center; float:left; margin-right:10px; color:#fff; background:#666; cursor:pointer; }
.paramPage .notice .on{ background:#f60; }
/* 联系作者 ---------------------------------------------- */
#content .contact{ display:none; color:#f60; margin-bottom:20px; }
/* 案例 - demo.html ---------------------------------------------- */
.demoBox{ padding:0 20px 60px 20px; background:#f2f2f2; border-bottom:3px dotted #ccc; }
.demoBox .hd{ padding:40px 10px 0 10px; }
.demoBox .hd h3{ font-size:30px; font-weight:bold; color:#39A4DC; line-height:60px; }
.demoBox .hd h3 span{ color:#ccc; font-style:italic; font-size:60px; }
.demoBox .bd{ padding:20px; overflow:hidden; zoom:1; }
.demoBox .bd .iframeWrap{ overflow:hidden; float:left; }
.demoBox iframe{ width:100%; height:100%; vertical-align:middle; }
.demoBox .botTit{ height:22px; line-height:22px; overflow:hidden; background:#eee; text-align:right; padding:5px 0; overflow:hidden; display:none;
}
.demoBox .botTit em{ float:left; font-weight:bold; padding-left:10px; }
.demoBox .botTit span a{ display:block; float:right; height:20px; line-height:20px; padding:0 5px; background:#f60; margin-right:10px; color:#fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; display:none; }
.demoBox .botTit span a:hover{ text-decoration:none; background:#f60; }
.params{ width:580px; height:100%; margin-left:20px; float:left; _display:inline; background:#fff; padding-bottom:10px; border:1px solid #ddd; }
.params table{ background:#fff; }
.params table .tit td{ padding: 5px 10px; background:#39A4DC; color:#fff; }
.params table td{ border:1px solid #fff; }
.params table .n{ width: 153px; text-align:right; }
.params table .new{ color:#f00; }
.params table i{ color:#999; }
.params p{ padding:10px 0 0 10px; }
.params .curJsCode{ color:#f60; display:block; font-family:SimSun; }
.rightNav{ position:fixed; width:140px; right:0; top:100px; _position:absolute; text-align:left; cursor:pointer; background-image:url(about:blank); }
.rightNav a{ display:block; position:relative; height:30px; line-height:30px; margin-bottom:2px; background:#fff; padding-right:10px; width:130px; overflow:hidden; cursor:pointer; right:-110px; }
.rightNav a:hover{ text-decoration:none; color:#39A4DC; }
.rightNav a:hover em{ background:#00b700}
.rightNav a em{ display:block; float:left; width:30px; background:#39A4DC; color:#fff; font-size:16px; text-align:center; margin-right:10px;}
.rightNav a.new em{ background:#f60; }
.demoBox .iframeWrap{ width:452px; }
.demoBox .iframeWrap iframe{ width:452px; height:232px; background:url(images/loading.gif) center center no-repeat; }
#picScroll-left iframe{ height:174px; }
#picScroll-top iframe{ height:415px; }
#picMarquee-left iframe{ height:172px; }
#picMarquee-top iframe{ height:415px; }
#txtScroll-left iframe{ height:80px; }
#txtScroll-top iframe{ height:182px; }
#txtMarquee-left iframe{ height:107px; }
#txtMarquee-top iframe{ height:184px; }
#sideMenu iframe{ height:227px; }
/* 隐藏代码盒子 */
#displayBox{ z-index:10; display:none; position:fixed; _position:absolute; width:1000px; height:500px; left:50%; top:60px; margin-left:-500px; background:#fff;
border:5px solid #eee;
-webkit-box-shadow: #333 0 0 8px;
-moz-box-shadow: #333 0 0 8px;
box-shadow: #333 0 0 8px; }
#displayBox .hd{ height:30px; line-height:30px; background:#eee; padding:0 10px; position:relative;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F7F7F7), to(#eee));
background: -webkit-linear-gradient(#F7F7F7, #eee);
background: -moz-linear-gradient(#F7F7F7, #eee);
background: -ms-linear-gradient(#F7F7F7, #eee);
background: -o-linear-gradient(#F7F7F7, #eee);
background: linear-gradient(#F7F7F7, #eee);
}
#displayBox .hd h3{ font-weight:bold; color:#39A4DC; }
#displayBox .hd a{ display:block; position:absolute; right:10px; top:7px; width:20px; height:16px; line-height:16px; text-align:center; background:#f60; color:#fff; cursor:pointer; }
#displayBox .hd a:hover{ text-decoration:none; }
#displayBox .bd{ padding:10px 0; background:#fff; }
#displayBox textarea{ width:458px; height:230px; padding:10px; border:1px solid #ccc; display:block; }
#displayBox .bd p{ padding-top:10px; }
#displayBox iframe{ width:1000px; height:440px; margin:0 auto; }
/* 扩展效果 ---------------------------------------------- */
.authorWord{ margin-bottom:25px; text-align:left; background:#fff; }
.authorWord h3{ padding:0 20px; height:30px; font:normal 14px/30px "Microsoft YaHei"; overflow:hidden; cursor:pointer; border-bottom:1px dotted #ccc; }
.authorWord h3 .arrow{ float:right; border-top-color:#fff; margin-top:11px; }
.authorWord .con{ padding:10px 20px; line-height:22px; }
.authorWord .con p{ margin-bottom:5px }
.authorWord a{ color:#f60; text-decoration:underline; }
.demoList{ overflow:hidden; padding-top:10px; }
.demoList li{
position:relative; cursor:pointer; float:left; width:160px; text-align:center; margin:0 30px 30px 0;
padding:4px 4px 0 4px; background:#e3e3e3; color:#000;
}
.demoList li img{ display:block; width:160px; height:120px; background:url(images/loading.gif) center center no-repeat; }
.demoList li h3{ height:28px; line-height:28px; }
.demoList li.new i{ display:block; position:absolute; top:4px; right:4px; z-index:1; width:31px; height:31px; background:url(images/new.png) 0 0 no-repeat; }
.demoList li.on{
background:#666; color:#fff;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-o-transform: translateY(-10px);
-webkit-transition-duration:0.3s;
-o-transition-duration:0.3s;
-moz-transition-duration:0.3s;
}
.demoBoxEven{ background:#fff; }
.demoBoxEven .demoList li{ }
.demoBoxEven .demoList li.on{ background:#666; color:#fff; }
/* 如何使用 ---------------------------------------------- */
.usePageDl{ width:1000px; }
.usePageDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.usePageDl dt h2 a{ color:#f60; text-decoration:underline; }
.usePageDl dt p{ padding:5px 0 10px 33px; }
.usePageDl dt p b{ color:#f60; }
.usePageDl dd{ margin-bottom:50px; }
.usePage .demoBox{ padding:0; }
.usePage .demoBox .bd .iframeWrap{ background:none; }
/* 下载页面 ----------------------------------------------- */
.downLoadDl{ width:1000px; }
.downLoadDl dt h2{ font:normal 22px/150% "Microsoft YaHei"; _font-weight:bold; color:#39A4DC; }
.downLoadDl dt h2 a{ font-size:12px; color:#333; margin-left:20px; text-decoration:underline; }
.downLoadDl dd{ margin-bottom:50px; padding:10px 0; }
.dBtn{ cursor:pointer; display:block; height:30px; line-height:30px; width:100px; text-align:center; font-size:16px; background:#6ddb00; color:#fff; _font-weight:bold;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
-webkit-box-shadow: #666 1px 1px 2px;
-moz-box-shadow: #666 1px 1px 2px;
box-shadow: #666 1px 1px 2px;
}
.dBtn:hover{ text-decoration:none; background:#65ca00; color:#fff; margin-left:2px; }
.pBtn{ background:#FFA241; font-size:12px; }
.pBtn:hover{ background:#ff8635; }
.pBtn i{ font-family:Arial; _font-weight:bold; font-size:20px; }
.downPage .inculde{ margin-top:20px; padding:10px; border:1px dotted #eee; background:#f3f3f3;}
.downPage .inculde li{ color:#666; }
.downPage .inculde em{ font-weight:bold; color:#333; }
.downPage .inculde h3{ font-size:14px; font-weight:bold; color:#c00; padding-bottom:10px }
.downPage .inculde a{ color:#39A4DC; text-decoration:underline; margin:0 2px; }
#whyPay p,#howPay p{ text-indent:20px; margin-bottom:10px }
.pay{ overflow:hidden; padding-bottom:5px; vertical-align:top; }
.pay .pBtn{ float:left; }
.pay p{ margin-left:120px; }
.pay p span{ color:#c00; }
.downPage .imp{ color:#c00; font-size:14px; }
/* 颜色代码
#39A4DC 浅蓝色
*/

File diff suppressed because it is too large Load Diff

View File

@@ -1,94 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery标签切换效果,Tab切换效果">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - Tab切换效果</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left; }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px; zoom:1; }
.slideTxtBox .bd li{ height:24px; line-height:24px; }
.slideTxtBox .bd li .date{ float:right; color:#999; }
/* 下面是前/后按钮代码,如果不需要删除即可 */
.slideTxtBox .arrow{ position:absolute; right:10px; top:0; }
.slideTxtBox .arrow a{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat; }
.slideTxtBox .arrow .next{ background-position:0 -50px; }
.slideTxtBox .arrow .prevStop{ background-position:-60px 0; }
.slideTxtBox .arrow .nextStop{ background-position:-60px -50px; }
</style>
<div class="slideTxtBox">
<div class="hd">
<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
<span class="arrow"><a class="next"></a><a class="prev"></a></span>
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="bd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
<script type="text/javascript">jQuery(".slideTxtBox").slide();</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,71 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字无缝滚动特效-上</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtMarquee-top{ width:450px; overflow:hidden; position:relative; border:1px solid #ccc; }
.txtMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.txtMarquee-top .hd .next{ background-position:0 -140px; }
.txtMarquee-top .hd .prevStop{ background-position:-60px -100px; }
.txtMarquee-top .hd .nextStop{ background-position:-60px -140px; }
.txtMarquee-top .bd{ padding:15px; }
.txtMarquee-top .infoList li{ height:24px; line-height:24px; }
.txtMarquee-top .infoList li .date{ float:right; color:#999; }
</style>
<div class="txtMarquee-top">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,116 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 导航效果</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.nav{ padding:0 20px; height:34px; line-height:34px; background:#39A4DC; position:relative; z-index:1; }
.nav a{ color:#fff; }
.nav .nLi{ float:left; position:relative; display:inline; }
.nav .nLi h3{ float:left; }
.nav .nLi h3 a{ display:block; padding:0 20px; font-size:14px; font-weight:bold; }
.nav .sub{ display:none; width:100px; left:0; top:34px; position:absolute; background:#4E4E4E; line-height:26px; padding:5px 0; }
.nav .sub li{ zoom:1; }
.nav .sub a{ display:block; padding:0 10px; }
.nav .sub a:hover{ background:#6d6d6d; color:#fff; }
.nav .on h3 a{ background:#4E4E4E; color:#fff; }
</style>
<ul id="nav" class="nav clearfix">
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">新闻</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi on">
<!-- 假设当前频道为“预告片”手动或后台程序添加titOnClassName类名默认是'on'相当于设置参数defaultIndex:1。若同时设置参数returnDefault:true则鼠标移走后0.3秒返回当前频道 -->
<h3><a href="http://www.SuperSlide2.com" target="_blank">预告片</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi ">
<h3><a href="http://www.SuperSlide2.com" target="_blank">影评</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">资料库</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
</ul>
<div class="intro" style="padding:10px">
假设当前频道为“预告片”,</br>
手动或后台程序添加titOnClassName类名默认是'on'相当于设置参数defaultIndex:2。</br>
若同时设置参数returnDefault:true则鼠标移走后返回当前频道。
</div>
<script id="jsID" type="text/javascript">
jQuery("#nav").slide({
type:"menu",// 效果类型,针对菜单/导航而引入的参数默认slide
titCell:".nLi", //鼠标触发对象
targetCell:".sub", //titCell里面包含的要显示/消失的对象
effect:"slideDown", //targetCell下拉效果
delayTime:300 , //效果时间
triggerTime:0, //鼠标延迟触发时间默认150
returnDefault:true //鼠标移走后返回默认状态例如默认频道是“预告片”鼠标移走后会返回“预告片”默认false
});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,88 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,targetCell基础示例">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - targetCell基础示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.sideMenu{ border:1px solid #ddd; }
.sideMenu h3{ height:32px; line-height:32px; padding-left:10px; border-top:1px solid #e3e3e3; background:#f4f4f4; cursor:pointer;
font:normal 14px/32px "Microsoft YaHei";
}
.sideMenu h3 em{ float:right; display:block; width:40px; height:32px; background:url(images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
.sideMenu h3.on em{ background-position:16px -57px; }
.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }
</style>
<div class="sideMenu" style="margin:0 auto">
<h3><em></em>书签切换系列</h3>
<ul>
<li>淘宝首页右侧公告</li>
<li>京东首页产品切换</li>
<li>苏宁易购首页品牌切换</li>
<li>1号店双重切换</li>
<li>腾讯健康频道切换</li>
</ul>
<h3 class="on"><em></em>幻灯片/焦点图系列</h3>
<!-- 假设当前频道为“幻灯片/焦点图系列”手动或后台程序添加titOnClassName类名默认是'on'相当于设置参数defaultIndex:1。若设置参数returnDefault:true则鼠标移出.sideMen0.3秒可以返回当前频道 -->
<ul>
<li>淘宝首页焦点图</li>
<li>腾讯娱乐频道焦点图</li>
<li>腾讯电影频道焦点图</li>
<li>网易游戏频道焦点图</li>
<li>易迅首页焦点图</li>
</ul>
<h3><em></em>带按钮切换</h3>
<ul>
<li>淘宝首页今日活动</li>
<li>豆瓣读书频道</li>
<li>天猫首页品牌切换</li>
<li>格瓦拉首页活动进行中</li>
<li>腾讯博客图片滚动</li>
</ul>
</div><!-- sideMenu End -->
<script type="text/javascript">
jQuery(".sideMenu").slide({
titCell:"h3", //鼠标触发对象
targetCell:"ul", //与titCell一一对应第n个titCell控制第n个targetCell的显示隐藏
effect:"slideDown", //targetCell下拉效果
delayTime:300 , //效果时间
triggerTime:150, //鼠标延迟触发时间默认150
defaultPlay:true,//默认是否执行效果默认true
returnDefault:true //鼠标从.sideMen移走后返回默认状态默认false
});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,74 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery焦点图/幻灯片">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 焦点图/幻灯片</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.slideBox{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:450px; height:230px; display:block; }
/* 下面是前/后按钮代码,如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5; }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
</style>
<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="bd">
<ul>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></li>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></li>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,93 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picScroll-left{ width:450px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picScroll-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("images/arrow.png") no-repeat;}
.picScroll-left .hd .next{ background-position:0 -50px; }
.picScroll-left .hd .prevStop{ background-position:-60px 0; }
.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.picScroll-left .hd ul li.on{ background-position:0 0; }
.picScroll-left .bd{ padding:10px; }
.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picScroll-left .bd ul li .pic{ text-align:center; }
.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picScroll-left .bd ul li .pic a:hover img{ border-color:#999; }
.picScroll-left .bd ul li .title{ line-height:24px; }
</style>
<div class="picScroll-left">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,93 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片上滚动特效-上</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picScroll-top{ margin:0 auto; width:210px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picScroll-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picScroll-top .hd .prev,.picScroll-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("images/arrow.png") 0 -100px no-repeat;}
.picScroll-top .hd .next{ background-position:0 -140px; }
.picScroll-top .hd .prevStop{ background-position:-60px -100px; }
.picScroll-top .hd .nextStop{ background-position:-60px -140px; }
.picScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-top .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.picScroll-top .hd ul li.on{ background-position:0 0; }
.picScroll-top .bd{ padding:10px; }
.picScroll-top .bd ul{ overflow:hidden; zoom:1; }
.picScroll-top .bd ul li{ text-align:center; zoom:1; }
.picScroll-top .bd ul li .pic{ text-align:center; }
.picScroll-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picScroll-top .bd ul li .pic a:hover img{ border-color:#999; }
.picScroll-top .bd ul li .title{ line-height:24px; }
</style>
<div class="picScroll-top">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:3,trigger:"click"});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,88 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片无缝滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picMarquee-left{ width:450px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") no-repeat;}
.picMarquee-left .hd .next{ background-position:0 -50px; }
.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }
.picMarquee-left .bd{ padding:10px; }
.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picMarquee-left .bd ul li .pic{ text-align:center; }
.picMarquee-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999; }
.picMarquee-left .bd ul li .title{ line-height:24px; }
</style>
<div class="picMarquee-left">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:3,interTime:50});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,88 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片无缝滚动特效-上</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picMarquee-top{ margin:0 auto; width:210px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picMarquee-top .hd .prev,.picMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.picMarquee-top .hd .next{ background-position:0 -140px; }
.picMarquee-top .hd .prevStop{ background-position:-60px -100px; }
.picMarquee-top .hd .nextStop{ background-position:-60px -140px; }
.picMarquee-top .bd{ padding:10px; }
.picMarquee-top .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-top .bd ul li{ text-align:center; zoom:1; }
.picMarquee-top .bd ul li .pic{ text-align:center; }
.picMarquee-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picMarquee-top .bd ul li .pic a:hover img{ border-color:#999; }
.picMarquee-top .bd ul li .title{ line-height:24px; }
</style>
<div class="picMarquee-top">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:3,interTime:50});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,71 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtScroll-left{ width:450px; position:relative; border:1px solid #ccc; }
.txtScroll-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden; cursor:pointer; background:url("images/arrow.png") no-repeat;}
.txtScroll-left .hd .next{ background-position:0 -50px; }
.txtScroll-left .hd .prevStop{ background-position:-60px 0; }
.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }
.txtScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
.txtScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.txtScroll-left .hd ul li.on{ background-position:0 0; }
.txtScroll-left .bd{ padding:10px; width:430px; overflow:hidden; }
.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
.txtScroll-left .bd ul li{ margin-right:20px; float:left; height:24px; line-height:24px; text-align:left; _display:inline;}
.txtScroll-left .bd ul li span{ color:#999; }
</style>
<div class="txtScroll-left">
<div class="hd">
<a class="next"></a>
<ul class="num"><li>1</li><li>2</li><li>3</li></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="infoList">
<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,scroll:2,vis:2,trigger:"click"});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,74 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字滚动特效-上</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtScroll-top{ width:450px; overflow:hidden; position:relative; border:1px solid #ccc; }
.txtScroll-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtScroll-top .hd .prev,.txtScroll-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("images/icoUp.gif") no-repeat;}
.txtScroll-top .hd .next{ background:url("images/icoDown.gif") no-repeat; }
.txtScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
.txtScroll-top .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.txtScroll-top .hd ul li.on{ background-position:0 0; }
.txtScroll-top .bd{ padding:15px; }
.txtScroll-top .infoList li{ height:24px; line-height:24px; }
.txtScroll-top .infoList li .date{ float:right; color:#999; }
</style>
<div class="txtScroll-top">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"top",autoPlay:true,vis:5});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,68 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字无缝滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtMarquee-left{ width:450px; position:relative; border:1px solid #ccc; }
.txtMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtMarquee-left .hd .prev,.txtMarquee-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden; cursor:pointer; background:url("images/icoLeft.gif") no-repeat;}
.txtMarquee-left .hd .next{ background:url("images/icoRight.gif") no-repeat; }
.txtMarquee-left .bd{ padding:10px; }
.txtMarquee-left .bd .tempWrap{ width:425px !important; }/* 用 !important覆盖SuperSlide自动生成的宽度这样就可以手动控制可视宽度。 */
.txtMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.txtMarquee-left .bd ul li{ margin-right:20px; float:left; height:24px; line-height:24px; text-align:left; _display:inline; width:auto !important; }/* 用 width:auto !important 覆盖SuperSlide自动生成的宽度解决文字不衔接问题 */
.txtMarquee-left .bd ul li span{ color:#999; }
</style>
<div class="txtMarquee-left">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="infoList">
<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:2,interTime:50});
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,163 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,SuperSlide多行滚动,jQuery多行滚动,javascript多行滚动">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 多行滚动示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.multipleLine{ overflow:hidden; position:relative; width:450px; border:1px solid #ccc; }
.multipleLine .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.multipleLine .hd .prev,.multipleLine .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("images/icoUp.gif") no-repeat;}
.multipleLine .hd .next{ background:url("images/icoDown.gif") no-repeat; }
.multipleLine .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.multipleLine .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.multipleLine .hd ul li.on{ background-position:0 0; }
.multipleLine .bd{ padding:10px; height:240px; overflow:hidden; }
.multipleLine .bd ul{ overflow:hidden; zoom:1; margin-bottom:10px; }
.multipleLine .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.multipleLine .bd ul li .pic{ text-align:center; }
.multipleLine .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.multipleLine .bd ul li .pic a:hover img{ border-color:#999; }
.multipleLine .bd ul li .title{ line-height:24px; }
</style>
<div class="multipleLine" style="margin:0 auto">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<div class="ulWrap">
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
</ul>
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
</ul>
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
</ul>
</div><!-- ulWrap End -->
</div><!-- bd End -->
</div><!-- multipleLine End -->
<script type="text/javascript">
/*
多行/多列的滚动解决思路在于把每次滚动的n个li放到1个ul里面然后用SuperSlide每次滚动1个ul相当于每次滚动n个li
*/
jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});
</script>
<div class="js">
<p>多行/多列的滚动解决思路在于把每次滚动的n个li放到1个ul里面然后用SuperSlide每次滚动1个ul相当于每次滚动n个li</p>
<textarea>本例js调用jQuery(".multipleLine").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"top",autoPlay:true});</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

View File

@@ -1,156 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,SuperSlide多列滚动,jQuery多列滚动,javascript多列滚动">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 多列滚动示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.multipleColumn{ overflow:hidden; position:relative; width:870px; border:1px solid #ccc; }
.multipleColumn .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.multipleColumn .hd .prev,.multipleColumn .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("images/icoLeft.gif") no-repeat;}
.multipleColumn .hd .next{ background:url("images/icoRight.gif") no-repeat; }
.multipleColumn .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.multipleColumn .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
.multipleColumn .hd ul li.on{ background-position:0 0; }
.multipleColumn .bd{ padding:10px; overflow:hidden; }
.multipleColumn .bd ul{ overflow:hidden; zoom:1; width:284px; float:left; _display:inline; }
.multipleColumn .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.multipleColumn .bd ul li .pic{ text-align:center; }
.multipleColumn .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.multipleColumn .bd ul li .pic a:hover img{ border-color:#999; }
.multipleColumn .bd ul li .title{ line-height:24px; }
</style>
<div class="multipleColumn" style="margin:0 auto">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<div class="ulWrap">
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
</ul>
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
</ul>
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
</ul>
<ul><!-- 把每次滚动的n个li放到1个ul里面 -->
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
</ul>
</div><!-- ulWrap End -->
</div><!-- bd End -->
</div><!-- multipleColumn End -->
<script type="text/javascript">
/*
多行/多列的滚动解决思路在于把每次滚动的n个li放到1个ul里面然后用SuperSlide每次滚动1个ul相当于每次滚动n个li
*/
jQuery(".multipleColumn").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3});
</script>
<div class="js">
<p>多行/多列的滚动解决思路在于把每次滚动的n个li放到1个ul里面然后用SuperSlide每次滚动1个ul相当于每次滚动n个li</p>
<textarea>本例js调用jQuery(".multipleColumn").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3});</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

View File

@@ -1,81 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,targetCell基础示例">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - targetCell基础示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.sideMen{ width:400px; border:1px solid #ddd; }
.sideMen h3{ height:32px; line-height:32px; padding-left:10px; border-top:1px solid #e3e3e3; background:#f4f4f4;
font:normal 14px/32px "Microsoft YaHei";
}
.sideMen h3 em{ float:right; display:block; width:40px; height:32px; background:url(images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
.sideMen h3 em.on{ background-position:16px -57px; }
.sideMen ul{ padding:8px 25px; color:#999; }
</style>
<div class="sideMen" style="margin:0 auto">
<h3><em></em>书签切换系列</h3>
<ul>
<li>淘宝首页右侧公告</li>
<li>京东首页产品切换</li>
<li>苏宁易购首页品牌切换</li>
<li>1号店双重切换</li>
<li>腾讯健康频道切换</li>
</ul>
<h3><em></em>幻灯片/焦点图系列</h3>
<ul>
<li>淘宝首页焦点图</li>
<li>腾讯娱乐频道焦点图</li>
<li>腾讯电影频道焦点图</li>
<li>网易游戏频道焦点图</li>
<li>易迅首页焦点图</li>
</ul>
<h3><em></em>带按钮切换</h3>
<ul>
<li>淘宝首页今日活动</li>
<li>豆瓣读书频道</li>
<li>天猫首页品牌切换</li>
<li>格瓦拉首页活动进行中</li>
<li>腾讯博客图片滚动</li>
</ul>
</div><!-- sideMen End -->
<script type="text/javascript">
jQuery(".sideMen").slide({titCell:"h3 em",targetCell:"ul",trigger:"click"});
</script>
<div class="js">
<p>本例js调用</p>
<textarea>jQuery(".sideMen").slide({titCell:"h3 em",targetCell:"ul",trigger:"click"});</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

View File

@@ -1,166 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,SuperSlide组合应用基础示例">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - SuperSlide组合应用基础示例</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.slideGroup{ width:510px; border:1px solid #ddd; text-align:left; }
.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideGroup .parHd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative; }
.slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
.slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4; }
.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60; }
.slideGroup .parBd ul{ overflow:hidden; zoom:1; }
.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.slideGroup .parBd ul li .pic{ text-align:center; }
.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.slideGroup .parBd ul li .pic a:hover img{ border-color:#999; }
.slideGroup .parBd ul li .title{ line-height:24px; }
</style>
<div class="slideGroup" style="margin:0 auto">
<div class="parHd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="parBd">
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
</div><!-- parBd End -->
</div>
<script type="text/javascript">
/*
SuperSlide组合注意
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用
2、注意书写顺序通常先写内层js调用再写外层js调用
*/
/* 内层图片滚动切换 */
jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});
/* 外层tab切换 */
jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
</script>
<div class="js">
<p>SuperSlide组合注意</br>
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用</br>
2、注意书写顺序通常先写内层js调用再写外层js调用</p>
<textarea>本例js调用
/* 内层图片滚动切换 */
jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});
/* 外层tab切换 */
jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 KiB

View File

@@ -1,178 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide-同一页面使用多个效果">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide-同一页面使用多个效果</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; padding:20px; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
h1{ font:normal 20px/200% "Microsoft YaHei"; _font-weight:bold; padding-bottom:10px; }
h2{ font:normal 14px/200% "Microsoft YaHei"; _font-weight:bold; padding-bottom:10px; color:#c00; }
/* 本例子css */
/* 焦点图效果 */
.picBtnTop{ width:500px; height:214px; border:1px solid #ccc; padding:5px; position:relative; overflow:hidden; zoom:1; }
.picBtnTop .hd{ width:98px; height:214px; position:absolute; right:5px; overflow:hidden; }
.picBtnTop .hd ul li{ width:93px; text-align:center; padding:0 0 5px 5px; }
.picBtnTop .hd ul li img{ width:85px; height:60px; border:4px solid #ddd; cursor:pointer; vertical-align:bottom; }
.picBtnTop .hd ul li.on{ background:url("images/icoleft.gif") no-repeat 0 28px; }
.picBtnTop .hd ul li.on img{ border-color:#f60; }
.picBtnTop .bd{ width:400px; height:214px; position:relative; }
.picBtnTop .bd li{ position:relative; zoom:1; vertical-align:middle;}
.picBtnTop .bd li .pic{ position:relative; z-index:0; }
.picBtnTop .bd li .pic img{ width:400px; height:214px; vertical-align:bottom; }
.picBtnTop .bd li .bg{ width:400px; height:30px; position:absolute; left:0; bottom:0; z-index:1; background:#000; filter:alpha(opacity=60);opacity:0.6; }
.picBtnTop .bd li .title{ width:400px; height:30px; line-height:30px; left:0; bottom:0; position:absolute; z-index:2; }
.picBtnTop .bd li .title a{ color:#fff; padding-left:15px; }
#demo1,#demo2{ margin-bottom:20px; }
/* tab选项切换效果 */
.slideTxtBox{ width:510px; border:1px solid #ddd; text-align:left; }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px; zoom:1; }
.slideTxtBox .bd li{ height:24px; line-height:24px; }
.slideTxtBox .bd li .date{ float:right; color:#999; }
</style>
<body>
<h1>下面3个示例演示了如何在同一个页面使用多个SuperSlide效果</h1>
<h2>下面2个示例演示如何在同一页面使用多个相同效果</h2>
<!-- 同一效果多次调用你只需要各自指定一个不重复的ID然后根据需要设置参数即可 -->
<!-- 不同id=demo1 相同class="picBtnTop" -->
<div id="demo1" class="picBtnTop">
<div class="hd">
<ul>
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="">效果图1</a></div>
</li>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="">效果图2</a></div>
</li>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="">效果图3</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//唯一不同jQuery("#demo1")
jQuery("#demo1").slide({ mainCell:".bd ul",effect:"top",autoPlay:true,triggerTime:0 });</script>
<!-- 不同id=demo2 相同class="picBtnTop" -->
<div id="demo2" class="picBtnTop">
<div class="hd">
<ul>
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
</ul>
</div>
<div class="bd">
<ul>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="">效果图1</a></div>
</li>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="">效果图2</a></div>
</li>
<li>
<div class="bg"></div>
<div class="pic"><a href=""><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="">效果图3</a></div>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
//唯一不同jQuery("#demo2")
jQuery("#demo2").slide({ mainCell:".bd ul",effect:"top",autoPlay:true,triggerTime:0 });</script>
<h2>下面1个示例演示如何在同一页面使用其它效果</h2>
<div class="slideTxtBox">
<div class="hd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="bd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
<script type="text/javascript">jQuery(".slideTxtBox").slide();</script>
</body>
</html>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

View File

@@ -1,196 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,双重Tabslide组合">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 双重Tabslide组合</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.outBox{ width:450px; border:1px solid #ddd; text-align:left; }
.outBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.outBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.outBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.outBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.inBox{ padding:15px 15px 0 15px; }
.inBox .inHd{ height:24px; line-height:24px; border-bottom:1px solid #ccc; padding:0 10px; }
.inBox .inHd ul{ overflow:hidden; zoom:1; }
.inBox .inHd ul li{ height:24px; width:60px; text-align:center; float:left; cursor:pointer; }
.inBox .inHd ul li.on{ background:#ccc; color:#fff; }
.inBox .inBd ul{ padding:15px; zoom:1; overflow:hidden; }
.inBox .inBd li{ height:24px; line-height:24px; overflow:hidden; zoom:1; }
.inBox .inBd li .date{ float:right; color:#999; }
</style>
<div class="outBox" style="margin:0 auto">
<div class="hd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="bd">
<!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目一</li><li>栏目二</li><li>栏目三</li></ul>
</div>
<div class="inBd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
<!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目三</li><li>栏目四</li><li>栏目五</li></ul>
</div>
<div class="inBd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
<!-- inBox S -->
<div class="inBox">
<div class="inHd">
<ul><li>栏目六</li><li>栏目七</li><li>栏目八</li></ul>
</div>
<div class="inBd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
</div><!-- bd E -->
</div>
<script type="text/javascript">
/*
SuperSlide组合注意
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用
2、注意书写顺序通常先写内层js调用再写外层js调用
*/
/* 内层inBox渐显切换注意titCell、mainCell等不能与外层相同 */
jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd" });
/* 外层outBox左滚动切换 */
jQuery(".outBox").slide({ effect:"left" });
</script>
<div class="js">
<p>SuperSlide组合注意</br>
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用</br>
2、注意书写顺序通常先写内层js调用再写外层js调用</p>
<textarea>
/* 内层inBox渐显切换注意titCell、mainCell等不能与外层相同 */
jQuery(".inBox").slide({ titCell:".inHd li",mainCell:".inBd" });
/* 外层outBox左滚动切换 */
jQuery(".outBox").slide({ effect:"left" });
</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

View File

@@ -1,166 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,Tab+无缝滚动slide组合">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - Tab+无缝滚动slide组合</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.slideGroup{ width:510px; border:1px solid #ddd; text-align:left; }
.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideGroup .parHd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative; }
.slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
.slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4; }
.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60; }
.slideGroup .parBd ul{ overflow:hidden; zoom:1; }
.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.slideGroup .parBd ul li .pic{ text-align:center; }
.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.slideGroup .parBd ul li .pic a:hover img{ border-color:#999; }
.slideGroup .parBd ul li .title{ line-height:24px; }
</style>
<div class="slideGroup" style="margin:0 auto">
<div class="parHd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="parBd">
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
</div><!-- parBd End -->
</div>
<script type="text/javascript">
/*
SuperSlide组合注意
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用
2、注意书写顺序通常先写内层js调用再写外层js调用
*/
/* 内层图片无缝滚动 */
jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftMarquee",interTime:50,autoPlay:true,trigger:"click"});
/* 外层tab切换 */
jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
</script>
<div class="js">
<p>SuperSlide组合注意</br>
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同除非特殊应用</br>
2、注意书写顺序通常先写内层js调用再写外层js调用</p>
<textarea>本例js调用
/* 内层图片无缝滚动 */
jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftMarquee",interTime:50,autoPlay:true,trigger:"click"});
/* 外层tab切换 */
jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});
</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.0 KiB

View File

@@ -1,79 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,图片导航焦点图">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片导航焦点图</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script><script type="text/javascript" src="../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.picFocus{ margin:0 auto; width:467px; border:1px solid #ccc; padding:5px; position:relative; overflow:hidden; zoom:1; }
.picFocus .hd{ width:100%; padding-top:5px; overflow:hidden; }
.picFocus .hd ul{ margin-right:-5px; overflow:hidden; zoom:1; }
.picFocus .hd ul li{ padding-top:5px; float:left; text-align:center; }
.picFocus .hd ul li img{ width:109px; height:65px; border:2px solid #ddd; cursor:pointer; margin-right:5px; }
.picFocus .hd ul li.on{ background:url("images/icoUp.gif") no-repeat center 0; }
.picFocus .hd ul li.on img{ border-color:#f60; }
.picFocus .bd li{ vertical-align:middle; }
.picFocus .bd img{ width:467px; height:230px; display:block; }
</style>
<div class="picFocus">
<div class="bd">
<ul>
<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic1.jpg" /></a></li>
<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic2.jpg" /></a></li>
<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic3.jpg" /></a></li>
<li><a target="_blank" href="www.SuperSlide2.com"><img src="images/pic4.jpg" /></a></li>
</ul>
</div>
<div class="hd">
<ul>
<li><img src="images/pic1.jpg" /></li>
<li><img src="images/pic2.jpg" /></li>
<li><img src="images/pic3.jpg" /></li>
<li><img src="images/pic4.jpg" /></li>
</ul>
</div>
</div>
<script type="text/javascript">jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</script>
<div class="js">
<p>js调用</p>
<textarea>jQuery(".picFocus").slide({ mainCell:".bd ul",effect:"left",autoPlay:true });</textarea>
</div>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

View File

@@ -1,98 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery标签切换效果,Tab切换效果">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - Tab切换效果</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left; }
.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideTxtBox .bd ul{ padding:15px; zoom:1; }
.slideTxtBox .bd li{ height:24px; line-height:24px; }
.slideTxtBox .bd li .date{ float:right; color:#999; }
/* 下面是前/后按钮代码,如果不需要删除即可 */
.slideTxtBox .arrow{ position:absolute; right:10px; top:0; }
.slideTxtBox .arrow a{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat; }
.slideTxtBox .arrow .next{ background-position:0 -50px; }
.slideTxtBox .arrow .prevStop{ background-position:-60px 0; }
.slideTxtBox .arrow .nextStop{ background-position:-60px -50px; }
</style>
<div class="slideTxtBox">
<div class="hd">
<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
<span class="arrow"><a class="next"></a><a class="prev"></a></span>
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="bd">
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">耶鲁小子教你备考SAT</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">【推荐】名校英语方法曝光!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012高考“考点”大曝光!!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">涨价仍爆棚假日旅游冰火两重天</a></li>
</ul>
<ul>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">2012世界大学排名新鲜出炉</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">即刻预约今年最后一场教育展</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a></li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".slideTxtBox").slide( { effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],pnLoop:ary[6] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,72 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字无缝滚动特效-上</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtMarquee-top{ overflow:hidden; position:relative; border:1px solid #ccc; }
.txtMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtMarquee-top .hd .prev,.txtMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.txtMarquee-top .hd .next{ background-position:0 -140px; }
.txtMarquee-top .hd .prevStop{ background-position:-60px -100px; }
.txtMarquee-top .hd .nextStop{ background-position:-60px -140px; }
.txtMarquee-top .bd{ padding:15px; }
.txtMarquee-top .infoList li{ height:24px; line-height:24px; }
.txtMarquee-top .infoList li .date{ float:right; color:#999; }
</style>
<div class="txtMarquee-top">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".txtMarquee-top").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,106 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 导航效果</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.nav{ padding:0 20px; height:34px; line-height:34px; background:#39A4DC; position:relative; z-index:1; }
.nav a{ color:#fff; }
.nav .nLi{ float:left; position:relative; display:inline; }
.nav .nLi h3{ float:left; }
.nav .nLi h3 a{ display:block; padding:0 20px; font-size:14px; font-weight:bold; }
.nav .sub{ display:none; width:100px; left:0; top:34px; position:absolute; background:#4E4E4E; line-height:26px; padding:5px 0; }
.nav .sub li{ zoom:1; }
.nav .sub a{ display:block; padding:0 10px; }
.nav .sub a:hover{ background:#6d6d6d; color:#fff; }
.nav .on h3 a{ background:#4E4E4E; color:#fff; }
</style>
<ul id="nav" class="nav clearfix">
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">首页</a></h3>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">新闻</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">预告片</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi ">
<h3><a href="http://www.SuperSlide2.com" target="_blank">影评</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
<li class="nLi">
<h3><a href="http://www.SuperSlide2.com" target="_blank">资料库</a></h3>
<ul class="sub">
<li><a href="#">新闻首页</a></li>
<li><a href="#">新闻人物</a></li>
<li><a href="#">新闻电视</a></li>
<li><a href="#">新闻图片</a></li>
<li><a href="#">新闻视频</a></li>
<li><a href="# ">新闻专题</a></li>
</ul>
</li>
</ul>
<div class="intro" style="padding:10px">
假设当前频道为“预告片”,</br>
手动或后台程序添加titOnClassName类名默认是'on'相当于设置参数defaultIndex:2。</br>
若同时设置参数returnDefault:true则鼠标移走后返回当前频道。
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub",effect:ary[1], delayTime:ary[2] , triggerTime:ary[3], defaultPlay:ary[4],returnDefault:ary[5],easing:ary[6] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,77 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,targetCell基础示例">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - targetCell基础示例</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:50px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.sideMenu{ border:1px solid #ddd; }
.sideMenu h3{ height:32px; line-height:32px; padding-left:10px; border-top:1px solid #e3e3e3; background:#f4f4f4; cursor:pointer;
font:normal 14px/32px "Microsoft YaHei";
}
.sideMenu h3 em{ float:right; display:block; width:40px; height:32px; background:url(../images/icoAdd.png) 16px 12px no-repeat; cursor:pointer; }
.sideMenu h3.on em{ background-position:16px -57px; }
.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }
</style>
<div class="sideMenu" style="margin:0 auto">
<h3><em></em>书签切换系列</h3>
<ul>
<li>淘宝首页右侧公告</li>
<li>京东首页产品切换</li>
<li>苏宁易购首页品牌切换</li>
<li>1号店双重切换</li>
<li>腾讯健康频道切换</li>
</ul>
<h3><em></em>幻灯片/焦点图系列</h3>
<ul>
<li>淘宝首页焦点图</li>
<li>腾讯娱乐频道焦点图</li>
<li>腾讯电影频道焦点图</li>
<li>网易游戏频道焦点图</li>
<li>易迅首页焦点图</li>
</ul>
<h3><em></em>带按钮切换</h3>
<ul>
<li>淘宝首页今日活动</li>
<li>豆瓣读书频道</li>
<li>天猫首页品牌切换</li>
<li>格瓦拉首页活动进行中</li>
<li>腾讯博客图片滚动</li>
</ul>
</div><!-- sideMenu End -->
<script type="text/javascript">
var ary = location.href.split("&");
jQuery(".sideMenu").slide({ titCell:"h3", targetCell:"ul", effect:ary[1], delayTime:ary[2] , trigger:ary[3], triggerTime:ary[4], defaultPlay:ary[5], returnDefault:ary[6],easing:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,75 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery焦点图/幻灯片">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 焦点图/幻灯片</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.slideBox{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:450px; height:230px; display:block; }
/* 下面是前/后按钮代码,如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5; }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
</style>
<div id="slideBox" class="slideBox">
<div class="hd">
<ul><li>1</li><li>2</li><li>3</li></ul>
</div>
<div class="bd">
<ul>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></li>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></li>
<li><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,94 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片滚动特效-左</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picScroll-left{ overflow:hidden; position:relative; border:1px solid #ccc; }
.picScroll-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat;}
.picScroll-left .hd .next{ background-position:0 -50px; }
.picScroll-left .hd .prevStop{ background-position:-60px 0; }
.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
.picScroll-left .hd ul li.on{ background-position:0 0; }
.picScroll-left .bd{ padding:10px; }
.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picScroll-left .bd ul li .pic{ text-align:center; }
.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picScroll-left .bd ul li .pic a:hover img{ border-color:#999; }
.picScroll-left .bd ul li .title{ line-height:24px; }
</style>
<div class="picScroll-left">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".picScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,94 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片滚动特效,javascript图片滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片上滚动特效-上</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picScroll-top{ margin:0 auto; width:210px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picScroll-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picScroll-top .hd .prev,.picScroll-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.picScroll-top .hd .next{ background-position:0 -140px; }
.picScroll-top .hd .prevStop{ background-position:-60px -100px; }
.picScroll-top .hd .nextStop{ background-position:-60px -140px; }
.picScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-top .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
.picScroll-top .hd ul li.on{ background-position:0 0; }
.picScroll-top .bd{ padding:10px; }
.picScroll-top .bd ul{ overflow:hidden; zoom:1; }
.picScroll-top .bd ul li{ text-align:center; zoom:1; }
.picScroll-top .bd ul li .pic{ text-align:center; }
.picScroll-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picScroll-top .bd ul li .pic a:hover img{ border-color:#999; }
.picScroll-top .bd ul li .title{ line-height:24px; }
</style>
<div class="picScroll-top">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".picScroll-top").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,90 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片无缝滚动特效-左</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picMarquee-left{ overflow:hidden; position:relative; border:1px solid #ccc; }
.picMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") no-repeat;}
.picMarquee-left .hd .next{ background-position:0 -50px; }
.picMarquee-left .hd .prevStop{ background-position:-60px 0; }
.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }
.picMarquee-left .bd{ padding:10px; }
.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picMarquee-left .bd ul li .pic{ text-align:center; }
.picMarquee-left .bd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999; }
.picMarquee-left .bd ul li .title{ line-height:24px; }
</style>
<div class="picMarquee-left">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".picMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,89 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery图片无缝滚动特效,javascript图片无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 图片无缝滚动特效-上</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.picMarquee-top{ margin:0 auto; width:210px; overflow:hidden; position:relative; border:1px solid #ccc; }
.picMarquee-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.picMarquee-top .hd .prev,.picMarquee-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.picMarquee-top .hd .next{ background-position:0 -140px; }
.picMarquee-top .hd .prevStop{ background-position:-60px -100px; }
.picMarquee-top .hd .nextStop{ background-position:-60px -140px; }
.picMarquee-top .bd{ padding:10px; }
.picMarquee-top .bd ul{ overflow:hidden; zoom:1; }
.picMarquee-top .bd ul li{ text-align:center; zoom:1; }
.picMarquee-top .bd ul li .pic{ text-align:center; }
.picMarquee-top .bd ul li .pic img{ width:180px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.picMarquee-top .bd ul li .pic a:hover img{ border-color:#999; }
.picMarquee-top .bd ul li .title{ line-height:24px; }
</style>
<div class="picMarquee-top">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic1.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic2.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic3.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic4.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic5.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
</li>
<li>
<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="../images/pic6.jpg" /></a></div>
<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
</li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".picMarquee-top").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4] ,pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,72 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字滚动特效-左</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtScroll-left{ position:relative; border:1px solid #ccc; }
.txtScroll-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden; cursor:pointer; background:url("../images/arrow.png") no-repeat;}
.txtScroll-left .hd .next{ background-position:0 -50px; }
.txtScroll-left .hd .prevStop{ background-position:-60px 0; }
.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }
.txtScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
.txtScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
.txtScroll-left .hd ul li.on{ background-position:0 0; }
.txtScroll-left .bd{ padding:10px; width:430px; overflow:hidden; }
.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }
.txtScroll-left .bd ul li{ margin-right:20px; float:left; height:24px; line-height:24px; text-align:left; _display:inline;}
.txtScroll-left .bd ul li span{ color:#999; }
</style>
<div class="txtScroll-left">
<div class="hd">
<a class="next"></a>
<ul class="num"><li>1</li><li>2</li><li>3</li></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="infoList">
<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".txtScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,77 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字滚动特效,javascript文字滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字滚动特效-上</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtScroll-top{ overflow:hidden; position:relative; border:1px solid #ccc; }
.txtScroll-top .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtScroll-top .hd .prev,.txtScroll-top .hd .next{ display:block; width:9px; height:5px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;
cursor:pointer; background:url("../images/arrow.png") 0 -100px no-repeat;}
.txtScroll-top .hd .next{ background-position:0 -140px; }
.txtScroll-top .hd .prevStop{ background-position:-60px -100px; }
.txtScroll-top .hd .nextStop{ background-position:-60px -140px; }
.txtScroll-top .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; }
.txtScroll-top .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("../images/icoCircle.gif") 0 -9px no-repeat; }
.txtScroll-top .hd ul li.on{ background-position:0 0; }
.txtScroll-top .bd{ padding:15px; }
.txtScroll-top .infoList li{ height:24px; line-height:24px; }
.txtScroll-top .infoList li .date{ float:right; color:#999; }
</style>
<div class="txtScroll-top">
<div class="hd">
<a class="next"></a>
<ul></ul>
<a class="prev"></a>
<span class="pageState"></span>
</div>
<div class="bd">
<ul class="infoList">
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">口语:会说中文就能说英语!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">农场摘菜不如在线学外语好玩</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">数理化老师竟也看学习资料?</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学英语送ipad2,45天突破听说</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">学外语,上北外!</a></li>
<li><span class="date">2011-11-11</span><a href="http://www.SuperSlide2.com" target="_blank">那些无法理解的荒唐事</a></li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".txtScroll-top").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

View File

@@ -1,71 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="Keywords" content="SuperSlide,jQuery文字无缝滚动特效,javascript文字无缝滚动特效">
<meta name="Description" content="SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”等等只需要一个SuperSlide即可解决还可以多个SuperSlide组合创造更多效果">
<title>SuperSlide - 文字无缝滚动特效-左</title>
<script type="text/javascript" src="../../jquery1.42.min.js"></script><script type="text/javascript" src="../../jquery.SuperSlide.2.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px ; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
/* 本例子css */
.txtMarquee-left{ position:relative; border:1px solid #ccc; }
.txtMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }
.txtMarquee-left .hd .prev,.txtMarquee-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden; cursor:pointer; cursor:pointer; background:url("../images/arrow.png") no-repeat;}
.txtMarquee-left .hd .next{ background-position:0 -50px; }
.txtMarquee-left .hd .prevStop{ background-position:-60px 0; }
.txtMarquee-left .hd .nextStop{ background-position:-60px -50px; }
.txtMarquee-left .bd{ padding:10px; }
.txtMarquee-left .bd .tempWrap{ width:425px !important; }/* 用 !important覆盖SuperSlide自动生成的宽度这样就可以手动控制可视宽度。 */
.txtMarquee-left .bd ul{ overflow:hidden; zoom:1; }
.txtMarquee-left .bd ul li{ margin-right:20px; float:left; height:24px; line-height:24px; text-align:left; _display:inline; width:auto !important; }/* 用 width:auto !important 覆盖SuperSlide自动生成的宽度解决文字不衔接问题 */
.txtMarquee-left .bd ul li span{ color:#999; }
</style>
<div class="txtMarquee-left">
<div class="hd">
<a class="next"></a>
<a class="prev"></a>
</div>
<div class="bd">
<ul class="infoList">
<li><a href="http://www.SuperSlide2.com" target="_blank">中国打破了世界软件巨头规则</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">施强:高端专业语言教学</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">新加坡留学,国际双语课程</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">高考后留学日本名校随你选</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">教育培训行业优势资源推介</a><span>[11-11]</span></li>
<li><a href="http://www.SuperSlide2.com" target="_blank">女友坚持警局完婚不抛弃</a><span>[11-11]</span></li>
</ul>
</div>
</div>
<script id="jsID" type="text/javascript">
var ary = location.href.split("&");
jQuery(".txtMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });
</script>
</body>
</html>
<script type="text/javascript">
//百度统计代码
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fa630f96b6a9dd549675d26373853f7f1' type='text/javascript'%3E%3C/script%3E"));
</script>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 325 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 325 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 396 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 176 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 B

Some files were not shown because too many files have changed in this diff Show More