816 lines
28 KiB
PHTML
Executable File
816 lines
28 KiB
PHTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>使用教程</title>
|
||
{include file='include/head-nas' /}
|
||
<style type="text/css">
|
||
/* 滚动条宽度 */
|
||
::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
|
||
/* 滚动条滑块 */
|
||
::-webkit-scrollbar-thumb {
|
||
background: #ccc;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 滚动条滑块在滚动时 */
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #555;
|
||
}
|
||
|
||
/* 滚动条轨道 */
|
||
::-webkit-scrollbar-track {
|
||
background: #f1f1f1;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 特定元素的滚动条样式（例如，类名为 .scrollable 的 div） */
|
||
.scrollable::-webkit-scrollbar {
|
||
width: 5px;
|
||
}
|
||
|
||
.scrollable::-webkit-scrollbar-thumb {
|
||
background: #007bff;
|
||
}
|
||
|
||
.scrollable::-webkit-scrollbar-track {
|
||
background: #f8f9fa;
|
||
}
|
||
input:focus {
|
||
outline: none;
|
||
}
|
||
.narsjswdPag {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
background: #f5f5f5;
|
||
}
|
||
.narsjswdPag .nars-jswd-search {
|
||
width: 100%;
|
||
height: 22.5rem;
|
||
background-repeat: no-repeat;
|
||
background-image: 100% 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv {
|
||
margin: 0 20.3125rem;
|
||
padding: 1.25rem 2rem;
|
||
width: 75rem;
|
||
background: #fff;
|
||
border-radius: 2rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv .nars-jswd-search-inpt {
|
||
font-size: 1rem;
|
||
border: none;
|
||
flex: 1;
|
||
}
|
||
.narsjswdPag .nars-jswd-search .narsjswd-searchdiv .narsjswd-searchico {
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
.narsjswdPag .narsjswd-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
justify-content: center;
|
||
margin-top: 3rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left {
|
||
width: 17.5rem;
|
||
height: 58.5625rem;
|
||
background: #fff;
|
||
margin-right: 1.5rem;
|
||
border-radius: 0.375rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .jswdleft-ct {
|
||
padding: 1rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 58.5625rem;
|
||
/*overflow: hidden;*/
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 {
|
||
width: 15.5rem;
|
||
min-height: 3rem;
|
||
/*overflow: hidden;*/
|
||
overflow-y: auto;
|
||
border: 1px solid #e8e8e9;
|
||
border-bottom: none;
|
||
cursor: pointer;
|
||
margin-bottom: 0.625rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle {
|
||
width: 100%;
|
||
height: 3rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
color: #262626;
|
||
font-size: 1rem;
|
||
align-items: center;
|
||
border-bottom: 1px solid #e8e8e9;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle .title {
|
||
margin-left: 1.5rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .thetitle .narsjswd-upico {
|
||
width: 0.875rem;
|
||
height: 0.875rem;
|
||
margin-right: 0.875rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 {
|
||
min-height: 3rem;
|
||
border-bottom: 1px solid #e8e8e9;
|
||
padding-left: 1rem;
|
||
padding-right: 1rem;
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct {
|
||
width: 100%;
|
||
height: auto;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid #e8e8e9;
|
||
padding: 1rem 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain .thenav2title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
font-size: 0.875rem;
|
||
color: #262626;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .nav2-ctmain .narsjswd-openico {
|
||
width: 0.75rem;
|
||
height: 0.75rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .narsjswdleft-nav-3 {
|
||
padding: 0 1.5rem;
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct .narsjswdleft-nav-3 .jswdleft-nav3-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
font-size: 0.875rem;
|
||
color: #717171;
|
||
padding-top: 0.875rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .narsjswdleft-nav-2 .jswdleft-nav2-ct:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1 .jswdnav-checkbox {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-radius: 2px 2px 2px 2px;
|
||
border: 1px solid #9f9f9f;
|
||
margin-right: 0.5rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-left .narsjswdleft-nav-1:last-child {
|
||
border-bottom: 1px solid #e8e8e9;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right {
|
||
width: 71rem;
|
||
min-height: 48.5625rem;
|
||
border-radius: 0.375rem;
|
||
background: #fff;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo {
|
||
margin: 2.8125rem 3rem;
|
||
color: #333335;
|
||
font-size: 1rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo .jswdtitle {
|
||
font-size: 1.5rem;
|
||
/*border-bottom: 1px solid #E6E6E6;*/
|
||
line-height: 3.125rem;
|
||
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo .jswd-content {
|
||
padding-bottom: 1.5rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdInfo p {
|
||
line-height: 1.75rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist {
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
margin: 1.8125rem 2.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 1.5625rem;
|
||
border-bottom: 1px solid #E6E6E6;
|
||
margin-bottom: 1.5rem;
|
||
cursor: pointer;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-title {
|
||
font-size: 1.125rem;
|
||
line-height: 1.75rem;
|
||
padding-bottom: 0.5rem;
|
||
color: #1d1d1f;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-dec {
|
||
width: 100%;
|
||
color: #333335;
|
||
font-size: 0.875rem;
|
||
line-height: 1.375rem;
|
||
padding-bottom: 1.5625rem;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
width: 100%;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswdtag {
|
||
border-radius: 2px;
|
||
border: 1px solid #00C5DD;
|
||
font-size: 0.75rem;
|
||
padding: 0.3125rem 0.625rem;
|
||
margin-right: 0.5rem;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp1 {
|
||
color: #00C5DD;
|
||
border: 1px solid #00C5DD;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp2 {
|
||
color: #056EFC;
|
||
border: 1px solid #056EFC;
|
||
}
|
||
.narsjswdPag .narsjswd-content .narsjswd-ct-right .narsjswdlist .narsjswdlist-item .jswditem-tags .jswd-tp3 {
|
||
color: #01A3FC;
|
||
border: 1px solid #01A3FC;
|
||
}
|
||
.narsjswdPag .naersjswd-fy {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 2rem;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
margin-top: 2rem;
|
||
margin-bottom: 10rem;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jsed-left-bt {
|
||
width: 1.875rem;
|
||
height: 1.875rem;
|
||
background: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jsed-left-bt .narsfy-ico {
|
||
width: 0.4375rem;
|
||
height: 0.75rem;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jswd-nums {
|
||
margin: 0 0.625rem;
|
||
width: auto;
|
||
height: 1.875rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit {
|
||
cursor: pointer;
|
||
width: 1.875rem;
|
||
height: 1.875rem;
|
||
background: #fff;
|
||
color: #6E6E73;
|
||
font-size: 0.875rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-right: 0.625rem;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit:last-child {
|
||
margin-right: 0;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .jswd-nums .jswdnumit-active {
|
||
background: #004BFA;
|
||
color: #fff;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .swdfy-jump {
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
color: #6E6E73;
|
||
font-size: 0.875rem;
|
||
margin-left: 2rem;
|
||
}
|
||
.narsjswdPag .naersjswd-fy .swdfy-jump .jumpinput {
|
||
width: 2.5rem;
|
||
height: 1.875rem;
|
||
background: #fff;
|
||
padding: 0 0.625rem;
|
||
margin: 0 8px;
|
||
text-align: center;
|
||
border: none;
|
||
}
|
||
.empty-data {
|
||
width: 5rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 顶部导航 -->
|
||
{include file='include/top-header-nas'/}
|
||
<!-- 技术文档-->
|
||
<div class="narsjswdPag">
|
||
<!--顶部搜索 -->
|
||
<div class="nars-jswd-search"
|
||
style="background: url(__PUBLIC__/web/images/nas/guide/nars-jswd-bg.png);background-repeat: no-repeat;background-size: 100%">
|
||
<div class="narsjswd-searchdiv">
|
||
<input class="nars-jswd-search-inpt" name="keywords" autocomplete="off" placeholder="搜索帮助" />
|
||
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-searchico.png" class="narsjswd-searchico" />
|
||
</div>
|
||
</div>
|
||
<!--页面内容（左边下拉菜单 右边内容）-->
|
||
<div class="narsjswd-content">
|
||
<!-- 下拉菜单 -->
|
||
<div class="narsjswd-ct-left">
|
||
<div class="jswdleft-ct">
|
||
<!--一级菜单-->
|
||
<div class="narsjswdleft-nav-1" style="max-height: 346px;">
|
||
<div class="thetitle themodel">
|
||
<span class="title">型号</span>
|
||
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
|
||
</div>
|
||
<!-- 二级菜单 -->
|
||
<div class="narsjswdleft-nav-2">
|
||
{volist name='product_series' id='vo'}
|
||
<div class="jswdleft-nav2-ct">
|
||
<div class="nav2-ctmain">
|
||
<div class="thenav2title">
|
||
<input type="checkbox" class="jswdnav-checkbox" name="series" autocomplete="off" value="{$vo.id}"/>
|
||
<span>{$vo.name}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
<!--一级菜单-->
|
||
<div class="narsjswdleft-nav-1" style="max-height: 346px;">
|
||
<div class="thetitle">
|
||
<span class="title">设备</span>
|
||
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
|
||
</div>
|
||
<!-- 二级菜单 -->
|
||
<div class="narsjswdleft-nav-2" style="display:block;">
|
||
{volist name='category' id='vo' key="key"}
|
||
<div class="jswdleft-nav2-ct">
|
||
<div class="nav2-ctmain">
|
||
<div class="thenav2title">
|
||
<input type="checkbox" class="jswdnav-checkbox" name="device" autocomplete="off" data-index="{$key-1}" value="{$vo.id}" {if condition="$vo.id == 38"}checked{/if}/>
|
||
<span>{$vo.name}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
<!--一级菜单-->
|
||
<div class="narsjswdleft-nav-1" >
|
||
<div class="thetitle">
|
||
<span class="title">分类</span>
|
||
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-upico.png" class="narsjswd-upico" />
|
||
</div>
|
||
<!--二级菜单-->
|
||
<div class="narsjswdleft-nav-2 category-nav" style="display:block;">
|
||
<!--二级菜单子级-->
|
||
{if condition='!empty($category[0]) && !empty($category[0]["items"])'}
|
||
{volist name='category[0]["items"]' id='vo'}
|
||
<div class="jswdleft-nav2-ct">
|
||
<div class="nav2-ctmain">
|
||
<div class="thenav2title">
|
||
<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="{$vo.id}">
|
||
<span>{$vo.name}</span>
|
||
</div>
|
||
{if condition="!empty($vo.items)"}
|
||
<img src="__PUBLIC__/web/images/nas/guide/narsjswd-closeico.png" class="narsjswd-openico" />
|
||
{/if}
|
||
</div>
|
||
<!-- 三级菜单-->
|
||
<div class="narsjswdleft-nav-3">
|
||
{if condition='!empty($vo["items"])'}
|
||
{volist name='vo["items"]' id='it'}
|
||
<div class="jswdleft-nav3-item">
|
||
<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="{$it.id}">
|
||
<span>{$it.name}</span>
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
{/if}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右边内容-->
|
||
<div class="narsjswd-ct-right">
|
||
<!-- 文章详情(如果要显示，就隐藏分页--把display:none 改为 block 或者jq自己设置隐藏) -->
|
||
<div class="narsjswdInfo" style="display: none;">
|
||
<div style="display:flex;flex-direction:row;justify-content:space-between;border-bottom: 1px solid #E6E6E6; margin-bottom: 1.5rem;padding-bottom: 0.625rem;">
|
||
<h2 class="jswdtitle"></h2>
|
||
<span class="back" style="font-size:14px;color:#ccc;cursor: pointer;">返回</span>
|
||
</div>
|
||
<div class="jswdcontent"></div>
|
||
</div>
|
||
<!-- 列表 -->
|
||
<div class="narsjswdlist">
|
||
{volist name='article' id='vo' key='key'}
|
||
<div class="narsjswdlist-item">
|
||
<h3 class="jswditem-title">{$vo.name}</h3>
|
||
<span class="jswditem-dec">{$vo.description}</span>
|
||
<div class="jswditem-tags">
|
||
{volist name='vo.product_series' id="series" key="k"}
|
||
<?php $t = $key % 3;?>
|
||
<div class="jswdtag jswd-tp{$t == 0 ? 3 : $t}">{$series}</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--分页 -->
|
||
<div class="naersjswd-fy"></div>
|
||
</div>
|
||
{include file='include/bottom2023'/}
|
||
</body>
|
||
<script type="text/javascript">
|
||
$(function () {
|
||
function buildPrevElements($this) {
|
||
var prev = $('<a href="javascript:void(0);" class="jsed-left-bt prev-page"></a>')
|
||
if ($this.options.current_page == 1) {
|
||
prev.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyleft-disabled.png" class="narsfy-ico" />')
|
||
} else {
|
||
prev.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyleft.png" class="narsfy-ico" />')
|
||
}
|
||
prev.unbind('click.prev').bind('click.prev', function () {
|
||
if ($this.options.current_page > 1) {
|
||
$this.options.current_page -= 1
|
||
$this.options.paginate($this.options.current_page)
|
||
}
|
||
})
|
||
|
||
return prev
|
||
}
|
||
function buildNextElements($this) {
|
||
var next = $('<a href="javascript:void(0);" class="jsed-left-bt next-page"></a>')
|
||
if ($this.options.current_page == $this.options.total_page) {
|
||
next.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyright-disabled.png" class="narsfy-ico" />')
|
||
} else {
|
||
next.append('<img src="__PUBLIC__/web/images/nas/guide/narsfyright.png" class="narsfy-ico" />')
|
||
}
|
||
next.unbind('click.next').bind('click.next', function () {
|
||
if ($this.options.current_page < $this.options.total_page) {
|
||
$this.options.current_page += 1
|
||
$this.options.paginate($this.options.current_page)
|
||
}
|
||
})
|
||
|
||
return next
|
||
}
|
||
function buildLinksElements($this) {
|
||
var side = 3
|
||
var $window = side * 2
|
||
var getLinks = function (start, end) {
|
||
var links = $('<div></div>')
|
||
for (var page = start; page <= end; page++) {
|
||
var link = $('<a href="javascript:void(0);" class="jswdnumit">' + page + '</a>')
|
||
link.removeClass('jswdnumit-active')
|
||
if ($this.options.current_page == page) {
|
||
link.addClass('jswdnumit-active')
|
||
}
|
||
links.append(link)
|
||
}
|
||
|
||
return links.children()
|
||
}
|
||
var getDots = function () {
|
||
return $('<a href="javascript:void(0)" class="jswdnumit">...</a>')
|
||
}
|
||
|
||
var linkWrap = $('<div class="jswd-nums"></div')
|
||
if ($this.options.total_page < $window + 6) {
|
||
linkWrap.append(getLinks(1, $this.options.total_page))
|
||
} else if ($this.options.current_page <= $window) {
|
||
linkWrap.append(getLinks(1, $window + 2))
|
||
linkWrap.append(getDots())
|
||
linkWrap.append(getLinks($this.options.total_page - 1, $this.options.total_page))
|
||
} else if ($this.options.current_page > ($this.options.total_page - $window)) {
|
||
linkWrap.append(getLinks(1, 2))
|
||
linkWrap.append(getDots())
|
||
linkWrap.append(getLinks($this.options.total_page - ($window + 2), $this.options.total_page))
|
||
} else {
|
||
linkWrap.append(getLinks(1, 2))
|
||
linkWrap.append(getDots())
|
||
linkWrap.append(getLinks($this.options.current_page - side, $this.options.current_page + side))
|
||
linkWrap.append(getDots())
|
||
linkWrap.append(getLinks($this.options.total_page - 1, $this.options.total_page))
|
||
}
|
||
|
||
linkWrap.find('a').unbind('click.link').bind('click.link', function (event) {
|
||
var text = $(event.currentTarget).text()
|
||
if (text != '...') {
|
||
var page = parseInt(text)
|
||
if ($this.options.current_page != page) {
|
||
$this.options.current_page = page
|
||
$this.options.paginate($this.options.current_page)
|
||
}
|
||
}
|
||
})
|
||
|
||
return linkWrap
|
||
}
|
||
function buildCustomJumpForm($this) {
|
||
var jump = $('<div class="swdfy-jump">'
|
||
+ '<span>跳转</span>'
|
||
+ '<input class="jumpinput" type="text" value="' + $this.options.current_page + '" />'
|
||
+ '<span>页</span>'
|
||
+ '</div>'
|
||
)
|
||
jump.find('input.jumpinput').unbind('change.jump').bind('change.jump', function (event) {
|
||
var page = parseInt($(event.currentTarget).val())
|
||
if (Number.isNaN(page) || page == 0) {
|
||
page = 1
|
||
}
|
||
if (page > $this.options.total_page) {
|
||
page = $this.options.total_page
|
||
}
|
||
if ($this.options.current_page != page) {
|
||
$this.options.current_page = page
|
||
$this.options.paginate($this.options.current_page)
|
||
}
|
||
$(event.currentTarget).val($this.options.current_page)
|
||
})
|
||
return jump
|
||
}
|
||
$.fn.extend({
|
||
options: {
|
||
current_page: 1,
|
||
total_page: 1,
|
||
paginate: function (page) { }
|
||
},
|
||
paginator: function (options) {
|
||
var $this = $(this)
|
||
$this.options = {
|
||
current_page: options.current_page,
|
||
total_page: options.total_page,
|
||
paginate: function (page) {
|
||
options.paginate(page)
|
||
$this.data('page', page)
|
||
$this.find('a.prev-page').replaceWith(buildPrevElements($this))
|
||
$this.find('a.next-page').replaceWith(buildNextElements($this))
|
||
$this.find('div.jswd-nums').replaceWith(buildLinksElements($this))
|
||
}
|
||
}
|
||
|
||
$this.empty()
|
||
if ($this.options.total_page > 1) {
|
||
$this.append(buildPrevElements($this))
|
||
$this.append(buildLinksElements($this))
|
||
$this.append(buildNextElements($this))
|
||
$this.append(buildCustomJumpForm($this))
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function() {
|
||
// 隐藏所有二级和三级菜单
|
||
//$('.narsjswdleft-nav-2, .narsjswdleft-nav-3').hide();
|
||
// 绑定一级菜单的点击事件
|
||
$('.narsjswdleft-nav-1 .themodel').click(function() {
|
||
// 收起所有其他一级菜单下的二级和三级菜单
|
||
/*$('.narsjswdleft-nav-1').not($(this).parent()).each(function() {
|
||
$(this).find('.narsjswdleft-nav-2, .narsjswdleft-nav-3').slideUp('slow');
|
||
});*/
|
||
// 切换当前一级菜单下的二级菜单的显示状态
|
||
$(this).next('.narsjswdleft-nav-2').slideToggle('slow');
|
||
});
|
||
|
||
// 绑定二级菜单的点击事件
|
||
$('.jswdleft-nav2-ct .nav2-ctmain').click(function() {
|
||
// 收起所有其他一级菜单下的二级和三级菜单
|
||
$('.jswdleft-nav2-ct').not($(this).parent()).each(function() {
|
||
$(this).find('.narsjswdleft-nav-3').slideUp('slow');
|
||
});
|
||
// 切换当前一级菜单下的二级菜单的显示状态
|
||
$(this).next('.narsjswdleft-nav-2').slideToggle('slow');
|
||
|
||
// 切换当前二级菜单下的三级菜单的显示状态
|
||
$(this).parent().find('.narsjswdleft-nav-3').slideToggle('slow');
|
||
});
|
||
|
||
// 阻止点击三级菜单时触发二级菜单的点击事件（如果需要的话）
|
||
/*$('.narsjswdleft-nav-3').click(function(e) {
|
||
e.stopPropagation();
|
||
});*/
|
||
|
||
// 返回列表
|
||
$('.narsjswdInfo .back').click(function() {
|
||
$('.naersjswd-fy').show()
|
||
$('.narsjswdlist').show()
|
||
$('.narsjswdInfo').hide()
|
||
})
|
||
|
||
// 查看文章详细
|
||
var articles = {$article|json_encode};
|
||
$('.narsjswd-ct-right').delegate('.narsjswdlist .narsjswdlist-item', 'click', function() {
|
||
var index = $(this).index()
|
||
if (articles.length > 0) {
|
||
$('.narsjswdInfo .jswdtitle').html(articles[index].name)
|
||
$('.narsjswdInfo .jswdcontent').html(articles[index].content)
|
||
|
||
// 显示文章详细，隐藏列表与分布栏
|
||
$('.naersjswd-fy').hide()
|
||
$('.narsjswdlist').hide()
|
||
$('.narsjswdInfo').show()
|
||
}
|
||
})
|
||
|
||
// 搜索
|
||
$('.nars-jswd-search-inpt').keyup(function(event){
|
||
if (event.originalEvent.keyCode == 13) {
|
||
// 显示列表与分布栏，隐藏文章详细
|
||
$('.naersjswd-fy').show()
|
||
$('.narsjswdlist').show()
|
||
$('.narsjswdInfo').hide()
|
||
|
||
// 加载列表数据
|
||
loadArticleData({
|
||
series: $('[name="series"]:checked').val(),
|
||
device: $('[name="device"]:checked').val(),
|
||
category: $('[name="category"]:checked').val(),
|
||
keywords: $(this).val(),
|
||
page: 1
|
||
}, true)
|
||
}
|
||
})
|
||
|
||
// 文章分页
|
||
$('.naersjswd-fy').paginator($.extend({}, {$page|json_encode}, {
|
||
paginate: function(page) {
|
||
loadArticleData({
|
||
series: $('[name="series"]:checked').val(),
|
||
device: $('[name="device"]:checked').val(),
|
||
category: $('[name="category"]:checked').val(),
|
||
page: page
|
||
})
|
||
}
|
||
}))
|
||
|
||
// 分类选择
|
||
$('div.jswdleft-ct').delegate('input', 'change', function(event) {
|
||
var target = $(event.currentTarget)
|
||
target.get(0).checked = !!target.get(0).checked
|
||
$('div.jswdleft-ct').find('input[name="' + target.attr('name') + '"]').each(function(i, el) {
|
||
if (target.get(0) != el) {
|
||
$(el).get(0).checked = false
|
||
}
|
||
})
|
||
if (target.attr('name') == 'device') {
|
||
var category = $('<div class="narsjswdleft-nav-2 category-nav" style="display:block;"></div>')
|
||
$.each(({$category|json_encode})[target.data('index')]['items'], function(i, it) {
|
||
var lv2 = $('<div class="jswdleft-nav2-ct"></div>')
|
||
var lv2Wrap = $('<div class="nav2-ctmain">'
|
||
+ '<div class="thenav2title">'
|
||
+ '<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="' + it.id + '">'
|
||
+ '<span>' + it.name + '</span>'
|
||
+ '</div>'
|
||
+'</div>')
|
||
if (it.items && it.items.length > 0) {
|
||
lv2Wrap.append($('<img src="__PUBLIC__/web/images/nas/guide/narsjswd-closeico.png" class="narsjswd-openico" />'))
|
||
}
|
||
lv2.append(lv2Wrap)
|
||
|
||
if (it.items && it.items.length > 0) {
|
||
var lv3 = $('<div class="narsjswdleft-nav-3"></div>')
|
||
$.each(it.items, function(k, v) {
|
||
lv3.append($('<div class="jswdleft-nav3-item">'
|
||
+ '<input type="checkbox" class="jswdnav-checkbox" name="category" autocomplete="off" value="' + v.id + '">'
|
||
+ '<span>' + v.name + '</span>'
|
||
+'</div>'))
|
||
})
|
||
lv2.append(lv3)
|
||
}
|
||
|
||
category.append(lv2)
|
||
})
|
||
$('div.narsjswdleft-nav-2.category-nav').replaceWith(category)
|
||
}
|
||
|
||
// 显示列表与分布栏，隐藏文章详细
|
||
$('.naersjswd-fy').show()
|
||
$('.narsjswdlist').show()
|
||
$('.narsjswdInfo').hide()
|
||
|
||
// 加载列表数据
|
||
loadArticleData({
|
||
series: $('[name="series"]:checked').val(),
|
||
device: $('[name="device"]:checked').val(),
|
||
category: $('[name="category"]:checked').val(),
|
||
page: 1
|
||
}, true)
|
||
})
|
||
|
||
function loadArticleData(data, rebuildPaginator) {
|
||
$.ajax({
|
||
url: '{:url("index/tops_nas/guide")}',
|
||
type: 'GET',
|
||
data: data,
|
||
dataType: 'JSON',
|
||
async: true,
|
||
beforeSend: function() {
|
||
$('div.narsjswdlist').empty()
|
||
$('div.narsjswdlist').html('<div style="text-align: center; padding-top: 10rem;">正在加载中......</div>')
|
||
},
|
||
success: function(r) {
|
||
if (r.code == 0) {
|
||
articles = r.data.article
|
||
var list = $('<div class="narsjswdlist"></div>')
|
||
if (r.data.page.total_size == 0) {
|
||
list.append($(
|
||
'<div style="display:flex;flex-direction:column;align-items:center;justify-content:center;with:100%;height:100%"><img class="empty-data" src="__PUBLIC__/web/images/nas/guide/narspc-zwsj.png" /><span style="font-size:16px;color:#cdcdcd">暂无数据</span></div>'
|
||
))
|
||
} else {
|
||
for (var i=0; i<r.data.article.length; i++) {
|
||
var item = $('<div class="narsjswdlist-item">'
|
||
+ '<h3 class="jswditem-title">' + r.data.article[i].name + '</h3>'
|
||
+ '<span class="jswditem-dec">' + r.data.article[i].description + '</span>'
|
||
+ '<div class="jswditem-tags"></div>'
|
||
+'</div>')
|
||
var series = r.data.article[i].product_series
|
||
if (series.length > 0) {
|
||
for (var k=0; k<series.length; k++) {
|
||
var t = (k+1)%3;
|
||
item.find('div.jswditem-tags').append($('<div class="jswdtag jswd-tp' + (t == 0 ? 3 : t) + '">' + series[k] + '</div>'))
|
||
}
|
||
}
|
||
list.append(item)
|
||
}
|
||
}
|
||
$('div.narsjswdlist').replaceWith(list)
|
||
|
||
if (rebuildPaginator) {
|
||
$('.naersjswd-fy').paginator({
|
||
current_page: r.data.page.current_page,
|
||
total_page: r.data.page.total_page,
|
||
paginate: function(page) {
|
||
loadArticleData({
|
||
series: $('[name="series"]:checked').val(),
|
||
device: $('[name="device"]:checked').val(),
|
||
category: $('[name="category"]:checked').val(),
|
||
page: page
|
||
})
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
});
|
||
</script>
|
||
</html>
|