tijiao
This commit is contained in:
470
js/article.js
470
js/article.js
@@ -1,3 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
// 列表
|
// 列表
|
||||||
function at_list() {
|
function at_list() {
|
||||||
|
|
||||||
@@ -7585,29 +7587,32 @@ function article_con() {
|
|||||||
var arr = result.data.mains;
|
var arr = result.data.mains;
|
||||||
var str = '';
|
var str = '';
|
||||||
for (var i = 0; i < arr.length; i++) {
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
let sectionId = 'section-' + i; // 生成唯一的 ID
|
||||||
if (arr[i].width == 0) {
|
if (arr[i].width == 0) {
|
||||||
if (arr[i].is_title == 1) {
|
if (arr[i].is_title == 1) {
|
||||||
if (arr[i].content.indexOf("<p>") >= 0) {
|
if (arr[i].content.indexOf("<p>") >= 0) {
|
||||||
str += "<div class='Ptitle'>" + arr[i].content + "</div>"
|
str += `<div class="Ptitle" id="${sectionId}">${arr[i].content}</div>`
|
||||||
} else {
|
} else {
|
||||||
str += '<div class="Ptitle"><p>' + arr[i].content + '</p></div>'
|
str += `<div class="Ptitle" id="${sectionId}"><p>${arr[i].content}</p></div>`
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (arr[i].content.indexOf("<p>") >= 0) {
|
if (arr[i].content.indexOf("<p>") >= 0) {
|
||||||
str += arr[i].content
|
str += arr[i].content.replace("<p>", `<p id="${sectionId}">`);
|
||||||
} else {
|
} else {
|
||||||
str += '<p>' + arr[i].content + '</p>'
|
str += `<p id="${sectionId}">${arr[i].content}</p>`
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + arr[i].content;
|
var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + arr[i].content;
|
||||||
var fun = "picPreview('" + picsrc + "');"
|
var fun = "picPreview('" + picsrc + "');"
|
||||||
// console.log(fun)
|
// console.log(fun)
|
||||||
str += "<div class='imgHnkl'><img class='mainPicItem' onclick=" + fun + " src='https://submission.tmrjournals.com/public/mainimg/"
|
str += `<div class='imgHnkl' id="${sectionId}">` + "<img class='mainPicItem' onclick=" + fun + " src='https://submission.tmrjournals.com/public/mainimg/"
|
||||||
+ arr[i].content + "' width='" + arr[i].width + "'/><p style='font-size: 14px;font-family: 'Charis SIL';'>'" + arr[i].note + "</p></div>"
|
+ arr[i].content + "' width='" + arr[i].width + "'/><p style='font-size: 14px;font-family: 'Charis SIL';'>'" + arr[i].note + "</p></div>"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
str = `<div style="margin-left:300px;">${str}</div>`
|
||||||
$('.wen_rong .content-box .conthtmn').html(str);
|
$('.wen_rong .content-box .conthtmn').html(str);
|
||||||
|
|
||||||
// 引用
|
// 引用
|
||||||
if (result.data.refers.length > 0) { // 如果有引用数据
|
if (result.data.refers.length > 0) { // 如果有引用数据
|
||||||
var refs = '';
|
var refs = '';
|
||||||
@@ -7646,10 +7651,10 @@ function article_con() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 将生成的所有引用内容插入到页面中
|
// 将生成的所有引用内容插入到页面中
|
||||||
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" class="ArticleRef"><p><b>References</b></p>' + refs + '</div>');
|
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" style="margin-left:300px;" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
initArticleHtml(arr, result.data.refers, html_type)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: function () {
|
error: function () {
|
||||||
@@ -7680,13 +7685,8 @@ function article_con() {
|
|||||||
var str = '';
|
var str = '';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var htmlContent = ''
|
var htmlContent = ''
|
||||||
var navLinks = {
|
|
||||||
content: [], // 存放 content 类型的链接
|
|
||||||
image: [], // 存放 image 类型的链接
|
|
||||||
table: [] // 存放 table 类型的链接
|
|
||||||
};
|
|
||||||
|
|
||||||
htmlContent += arr.map((item, index) => {
|
htmlContent += arr.map((item, index) => {
|
||||||
//批注
|
//批注
|
||||||
@@ -7694,10 +7694,9 @@ function article_con() {
|
|||||||
let sectionId = 'section-' + index; // 生成唯一的 ID
|
let sectionId = 'section-' + index; // 生成唯一的 ID
|
||||||
// 判断是否是图片
|
// 判断是否是图片
|
||||||
if (item.type == 1) {
|
if (item.type == 1) {
|
||||||
var textContentimg = $('<div>').html(item.note).text(); // 提取纯文本
|
|
||||||
var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url;
|
var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url;
|
||||||
var fun = "picPreview('" + picsrc + "');"
|
var fun = "picPreview('" + picsrc + "');"
|
||||||
// console.log(fun)
|
|
||||||
|
|
||||||
contentHtml = `
|
contentHtml = `
|
||||||
<p contenteditable="false" main-state="${item.state}" style="display:flex;align-items: center;
|
<p contenteditable="false" main-state="${item.state}" style="display:flex;align-items: center;
|
||||||
@@ -7716,9 +7715,7 @@ function article_con() {
|
|||||||
}</p>
|
}</p>
|
||||||
</p>
|
</p>
|
||||||
`;
|
`;
|
||||||
navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc });
|
|
||||||
} else if (item.type == 2) {
|
} else if (item.type == 2) {
|
||||||
var textContentTable = $('<div>').html(item.table.title).text(); // 提取纯文本
|
|
||||||
var tableList = JSON.parse(item.table.table_data);
|
var tableList = JSON.parse(item.table.table_data);
|
||||||
|
|
||||||
contentHtml = `
|
contentHtml = `
|
||||||
@@ -7754,16 +7751,12 @@ function article_con() {
|
|||||||
text-align:center;color:#333;" >${item.table.note ? item.table.note : ''
|
text-align:center;color:#333;" >${item.table.note ? item.table.note : ''
|
||||||
}</p>
|
}</p>
|
||||||
</div>
|
</div>
|
||||||
`; navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId });
|
`;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
var textContent = $('<div>').html(item.content).text(); // 提取纯文本
|
|
||||||
contentHtml = `<p class="${item.is_h1 ? 'Ptitle pMain' : 'pMain'} " style="font-family: 'Charis SIL';min-height:12px;" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}" id="${sectionId}">${item.content}</p>`;
|
contentHtml = `<p class="${item.is_h1 ? 'Ptitle pMain' : 'pMain'} " style="font-family: 'Charis SIL';min-height:12px;" main-state="${item.state}" contenteditable="false" data-id="${item.am_id}" main-id="${item.am_id}" id="${sectionId}">${item.content}</p>`;
|
||||||
|
|
||||||
if (item.is_h1 ) {
|
|
||||||
|
|
||||||
navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_h1, });
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -7773,70 +7766,7 @@ function article_con() {
|
|||||||
}).join('');
|
}).join('');
|
||||||
htmlContent = `<div class="newHtml2" style="margin-left:300px;">${htmlContent}</div>`
|
htmlContent = `<div class="newHtml2" style="margin-left:300px;">${htmlContent}</div>`
|
||||||
$('.wen_rong .content-box .conthtmn').html(htmlContent);
|
$('.wen_rong .content-box .conthtmn').html(htmlContent);
|
||||||
console.log('navLinks.forEach at line 7752:', navLinks)
|
|
||||||
// 引用
|
|
||||||
var navHtml = `<div class="anchor-nav"><div class="jo-catalog-title"><span >OUTLINE</span></div><ul>`;
|
|
||||||
|
|
||||||
// 先添加 content 类型
|
|
||||||
navLinks.content.forEach(link => {
|
|
||||||
navHtml += `<li data-section="${link.sectionId}" class="outiline-item outiline-content ${link.is_h1 ? 'outiline-item-h1' : ''} ${link.is_h2 ? 'outiline-item-h2' : ''}" ><a href="${link.href}" style="font-style: italic;
|
|
||||||
|
|
||||||
font-weight: bold;"><b>${link.text}</b></a></li>`;
|
|
||||||
|
|
||||||
});
|
|
||||||
if (navLinks.image.length > 0) {
|
|
||||||
navHtml += `<li class="outiline-item outiline-img">
|
|
||||||
<h2 style="margin-bottom:20px;">Figures (${navLinks.image.length})</h2>
|
|
||||||
<div class="navLinksFigures">`;
|
|
||||||
|
|
||||||
// 使用 map 来遍历并返回 HTML 字符串
|
|
||||||
navHtml += navLinks.image.map((link, linkIndex) => {
|
|
||||||
return `<a href="${link.href}" data-section="${link.sectionId}">
|
|
||||||
|
|
||||||
<img src="${link.url}" style="object-fit: scale-down;width: 80px; height: 80px;border-radius:2px;border:1px solid #e0d4d4" />
|
|
||||||
<p style="margin-bottom:0; color: #333; cursor: pointer;font-family: 'Charis SIL';">Figure${linkIndex + 1}
|
|
||||||
</p>
|
|
||||||
</a>`;
|
|
||||||
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
|
|
||||||
|
|
||||||
navHtml += `</div></li>`;
|
|
||||||
}
|
|
||||||
if (navLinks.table.length > 0) {
|
|
||||||
navHtml += `<li class="outiline-item outiline-img">
|
|
||||||
<h2 style="margin-bottom:20px;">Tables (${navLinks.table.length})</h2>
|
|
||||||
<div class="navLinksTables" >`;
|
|
||||||
|
|
||||||
// 使用 map 来遍历并返回 HTML 字符串
|
|
||||||
navHtml += navLinks.table.map((link, linkIndex) => {
|
|
||||||
return `<a data-section="${link.sectionId}" href="${link.href}" style="border-bottom: 1px solid rgb(255, 255, 255);
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-weight: 500 !important;
|
|
||||||
padding: 2px 0 0 16px;
|
|
||||||
color: #333;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: 'Charis SIL';
|
|
||||||
line-height:18px;min-height: 12px;"
|
|
||||||
>
|
|
||||||
|
|
||||||
${link.text}
|
|
||||||
</a>`;
|
|
||||||
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
|
|
||||||
|
|
||||||
navHtml += `</div></li>`;
|
|
||||||
}
|
|
||||||
if (result.data.refers.length > 0) {
|
|
||||||
navHtml += `<li class="outiline-item outiline-img">
|
|
||||||
<h2 style="margin-bottom:20px;"><a href="#References">References (${result.data.refers.length})</a></h2>
|
|
||||||
</li>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 再添加 image 类型（按序号排序）
|
|
||||||
|
|
||||||
|
|
||||||
// 最后添加 table 类型（按序号排序）
|
|
||||||
|
|
||||||
|
|
||||||
navHtml += '</ul></div>';
|
|
||||||
if (result.data.refers.length > 0) { // 如果有引用数据
|
if (result.data.refers.length > 0) { // 如果有引用数据
|
||||||
var refs = '';
|
var refs = '';
|
||||||
var xuhao = 0;
|
var xuhao = 0;
|
||||||
@@ -7877,137 +7807,7 @@ function article_con() {
|
|||||||
// 将生成的所有引用内容插入到页面中
|
// 将生成的所有引用内容插入到页面中
|
||||||
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" style="margin-left:300px;" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
|
$('.wen_rong .content-box .conthtmn').append('<div id="ArticleRef" style="margin-left:300px;" class="ArticleRef"><p id="References"><b>References</b></p>' + refs + '</div>');
|
||||||
}
|
}
|
||||||
$('.wen_rong .content-box .conthtmn').prepend(navHtml);
|
initArticleHtml(arr, result.data.refers, html_type)
|
||||||
// 给导航栏添加固定定位样式
|
|
||||||
// 给导航栏添加固定定位样式
|
|
||||||
$('.anchor-nav').css({
|
|
||||||
'position': 'fixed',
|
|
||||||
// 'display': 'none',
|
|
||||||
'top': '0', // 固定在顶部
|
|
||||||
'left': '0', // 固定在左侧
|
|
||||||
'width': '285px', // 设置固定宽度
|
|
||||||
'background': '#ffffff', // 背景色
|
|
||||||
|
|
||||||
// 'border-radius': '12px', // 圆角效果
|
|
||||||
'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影效果
|
|
||||||
'z-index': '999', // 确保导航栏位于其他元素之上
|
|
||||||
'overflow-y': 'auto', // 允许垂直滚动
|
|
||||||
'height': '100vh', // 让导航栏充满整个页面高度
|
|
||||||
'position': 'sticky', /* 固定定位 */
|
|
||||||
'float': 'left', /* 固定定位 */
|
|
||||||
/* 导航栏顶部距离为0 */
|
|
||||||
'box-shadow': '2px 0 5px rgba(0, 0, 0, 0.1)',
|
|
||||||
});
|
|
||||||
$('.jo-catalog-title').css({
|
|
||||||
|
|
||||||
|
|
||||||
'line-height': '40px',
|
|
||||||
'font-size': '18px',
|
|
||||||
'color': '#333',
|
|
||||||
'border-bottom': '1px solid #f0f0f0',
|
|
||||||
|
|
||||||
});
|
|
||||||
$('.outiline-item').css({
|
|
||||||
|
|
||||||
|
|
||||||
'border-bottom': '1px solid #fff',
|
|
||||||
// 'margin-bottom': '10px',
|
|
||||||
'box-sizing': 'border-box',
|
|
||||||
|
|
||||||
'font-size': '14px',
|
|
||||||
'color': '#454545',
|
|
||||||
'cursor': 'pointer',
|
|
||||||
});
|
|
||||||
$('.outiline-content').css({
|
|
||||||
'padding': '4px 0',
|
|
||||||
'margin-left': '16px',
|
|
||||||
|
|
||||||
'color': '#333',
|
|
||||||
'cursor': 'pointer',
|
|
||||||
'font-family': 'Charis SIL',
|
|
||||||
// 'border-left': '3px solid #efefef',
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.outiline-img').css({
|
|
||||||
|
|
||||||
'margin-top': '20px',
|
|
||||||
'margin-bottom': '20px',
|
|
||||||
// 'border-left': '3px solid #efefef',
|
|
||||||
|
|
||||||
});
|
|
||||||
$('.outiline-table').css({
|
|
||||||
|
|
||||||
'margin-top': '20px',
|
|
||||||
'margin-bottom': '20px',
|
|
||||||
|
|
||||||
// 'border-left': '3px solid #efefef',
|
|
||||||
|
|
||||||
});
|
|
||||||
$('.navLinksFigures').css({
|
|
||||||
'display': 'flex',
|
|
||||||
'flex-wrap': 'wrap',
|
|
||||||
'gap': '10px',
|
|
||||||
|
|
||||||
'margin-bottom': '10px',
|
|
||||||
'margin-top': '10px',
|
|
||||||
|
|
||||||
});
|
|
||||||
$('.navLinksTables').css({
|
|
||||||
'display': 'flex',
|
|
||||||
'flex-wrap': 'wrap',
|
|
||||||
'gap': '4px',
|
|
||||||
|
|
||||||
'margin-bottom': '10px',
|
|
||||||
'margin-top': '10px',
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
// 在滚动时保持导航栏在视口内
|
|
||||||
|
|
||||||
$(document).ready(function () {
|
|
||||||
// 监听右侧滚动区域
|
|
||||||
$('.newBox').scroll(function () {
|
|
||||||
var scrollTop = $(this).scrollTop(); // 获取当前右侧滚动的位置
|
|
||||||
var scrollHeight = $(this)[0].scrollHeight; // 获取右侧滚动区域的总高度
|
|
||||||
var containerHeight = $(this).height(); // 获取右侧容器的高度
|
|
||||||
|
|
||||||
// 获取所有右侧的 .pMain
|
|
||||||
var sections = $('.newBox').find('.pMain');
|
|
||||||
var navLinks = $('.anchor-nav').find('a'); // 获取所有左侧的导航链接
|
|
||||||
|
|
||||||
// 初始化清除所有导航链接的高亮
|
|
||||||
navLinks.css({
|
|
||||||
'color': '', // 恢复默认颜色
|
|
||||||
'font-weight': '' // 恢复默认字体粗细
|
|
||||||
});
|
|
||||||
|
|
||||||
// 遍历所有的 section
|
|
||||||
sections.each(function (index, section) {
|
|
||||||
var sectionTop = $(section).offset().top - $('.newBox').offset().top + scrollTop; // 计算每个 .pMain 相对于 .newBox 的位置
|
|
||||||
var sectionBottom = sectionTop + $(section).outerHeight(); // 获取每个 section 的底部位置
|
|
||||||
|
|
||||||
// 判断该 section 是否在可视区域内
|
|
||||||
if (scrollTop + containerHeight >= sectionTop && scrollTop <= sectionBottom) {
|
|
||||||
// 高亮对应的导航链接
|
|
||||||
$(navLinks[index]).css({
|
|
||||||
'color': 'rgb(0, 102, 153)', // 激活时颜色变为蓝色
|
|
||||||
'font-weight': 'bold' // 激活时加粗
|
|
||||||
});
|
|
||||||
// 只高亮一个链接，找到第一个符合条件的并停止遍历
|
|
||||||
return false; // 结束 .each() 遍历
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -8519,6 +8319,242 @@ function article_con() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function initArticleHtml(htmlData, refs, type) {
|
||||||
|
var navLinks = {
|
||||||
|
content: [], // 存放 content 类型的链接
|
||||||
|
image: [], // 存放 image 类型的链接
|
||||||
|
table: [] // 存放 table 类型的链接
|
||||||
|
};
|
||||||
|
|
||||||
|
htmlData.forEach((item, index) => {
|
||||||
|
|
||||||
|
|
||||||
|
let sectionId = 'section-' + index; // 生成唯一的 ID
|
||||||
|
|
||||||
|
if (type == 0) {
|
||||||
|
if (item.width == 0) {
|
||||||
|
if (item.is_title == 1) {
|
||||||
|
var textContent = $('<div>').html(item.content).text(); // 提取纯文本
|
||||||
|
navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_title, });
|
||||||
|
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
var picsrc = 'https://submission.tmrjournals.com/public/mainimg/' + item.content;
|
||||||
|
var textContentimg = $('<div>').html(item.note).text(); // 提取纯文本
|
||||||
|
navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc });
|
||||||
|
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 判断是否是图片
|
||||||
|
if (item.type == 1) {
|
||||||
|
var picsrc = 'https://submission.tmrjournals.com/public/articleImage/' + item.image.url;
|
||||||
|
var textContentimg = $('<div>').html(item.note).text(); // 提取纯文本
|
||||||
|
|
||||||
|
navLinks.image.push({ sectionId: sectionId, type: 'image', text: textContentimg || 'Image ' + (index + 1), href: '#' + sectionId, url: picsrc });
|
||||||
|
} else if (item.type == 2) {
|
||||||
|
var textContentTable = $('<div>').html(item.table.title).text(); // 提取纯文本
|
||||||
|
navLinks.table.push({ sectionId: sectionId, type: 'table', text: textContentTable || 'Table ' + (index + 1), href: '#' + sectionId });
|
||||||
|
|
||||||
|
} else {
|
||||||
|
var textContent = $('<div>').html(item.content).text(); // 提取纯文本
|
||||||
|
|
||||||
|
if (item.is_h1) {
|
||||||
|
|
||||||
|
navLinks.content.push({ sectionId: sectionId, type: 'content', text: textContent, href: '#' + sectionId, is_h1: item.is_h1, });
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
console.log('navLinks.forEach at line 7752:', navLinks)
|
||||||
|
// 引用
|
||||||
|
var navHtml = `<div class="anchor-nav"><div class="jo-catalog-title"><span >OUTLINE</span></div><ul>`;
|
||||||
|
|
||||||
|
// 先添加 content 类型
|
||||||
|
navLinks.content.forEach(link => {
|
||||||
|
navHtml += `<li data-section="${link.sectionId}" class="outiline-item outiline-content ${link.is_h1 ? 'outiline-item-h1' : ''} ${link.is_h2 ? 'outiline-item-h2' : ''}" ><a href="${link.href}" style="font-style: italic;
|
||||||
|
|
||||||
|
font-weight: bold;"><b>${link.text}</b></a></li>`;
|
||||||
|
|
||||||
|
});
|
||||||
|
if (navLinks.image.length > 0) {
|
||||||
|
navHtml += `<li class="outiline-item outiline-img">
|
||||||
|
<h2 style="margin-bottom:20px;">Figures (${navLinks.image.length})</h2>
|
||||||
|
<div class="navLinksFigures">`;
|
||||||
|
|
||||||
|
// 使用 map 来遍历并返回 HTML 字符串
|
||||||
|
navHtml += navLinks.image.map((link, linkIndex) => {
|
||||||
|
return `<a href="${link.href}" data-section="${link.sectionId}">
|
||||||
|
|
||||||
|
<img src="${link.url}" style="object-fit: scale-down;width: 80px; height: 80px;border-radius:2px;border:1px solid #e0d4d4" />
|
||||||
|
<p style="margin-bottom:0; color: #333; cursor: pointer;font-family: 'Charis SIL';">Figure${linkIndex + 1}
|
||||||
|
</p>
|
||||||
|
</a>`;
|
||||||
|
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
|
||||||
|
|
||||||
|
navHtml += `</div></li>`;
|
||||||
|
}
|
||||||
|
if (navLinks.table.length > 0) {
|
||||||
|
navHtml += `<li class="outiline-item outiline-img">
|
||||||
|
<h2 style="margin-bottom:20px;">Tables (${navLinks.table.length})</h2>
|
||||||
|
<div class="navLinksTables" >`;
|
||||||
|
|
||||||
|
// 使用 map 来遍历并返回 HTML 字符串
|
||||||
|
navHtml += navLinks.table.map((link, linkIndex) => {
|
||||||
|
|
||||||
|
let TableIndex = 'Table ' + (linkIndex + 1);
|
||||||
|
|
||||||
|
if (link.text.includes(TableIndex)) {
|
||||||
|
// 使用正则表达式替换 "Table 1" 部分并添加高亮样式
|
||||||
|
link.text = link.text.replace(TableIndex, `<span style="color:#006699;">${TableIndex}</span>`);
|
||||||
|
console.log(link.text, '99999')
|
||||||
|
}
|
||||||
|
|
||||||
|
return `<a data-section="${link.sectionId}" href="${link.href}" style="border-bottom: 1px solid rgb(255, 255, 255);
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-weight: 500 !important;
|
||||||
|
padding: 2px 0 0 16px;
|
||||||
|
color: #333;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: 'Charis SIL';
|
||||||
|
line-height:18px;min-height: 12px;"
|
||||||
|
>
|
||||||
|
|
||||||
|
${link.text}
|
||||||
|
</a>`;
|
||||||
|
}).join(''); // 使用 join 来拼接所有的 HTML 字符串
|
||||||
|
|
||||||
|
navHtml += `</div></li>`;
|
||||||
|
}
|
||||||
|
if (refs.length > 0) {
|
||||||
|
navHtml += `<li class="outiline-item outiline-img">
|
||||||
|
<h2 style="margin-bottom:20px;"><a href="#References">References (${refs.length})</a></h2>
|
||||||
|
</li>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
navHtml += '</ul></div>';
|
||||||
|
$('.wen_rong .content-box .conthtmn').prepend(navHtml);
|
||||||
|
// 给导航栏添加固定定位样式
|
||||||
|
// 给导航栏添加固定定位样式
|
||||||
|
$('.anchor-nav').css({
|
||||||
|
'position': 'fixed',
|
||||||
|
// 'display': 'none',
|
||||||
|
'top': '0', // 固定在顶部
|
||||||
|
'left': '0', // 固定在左侧
|
||||||
|
'width': '285px', // 设置固定宽度
|
||||||
|
'background': '#ffffff', // 背景色
|
||||||
|
|
||||||
|
// 'border-radius': '12px', // 圆角效果
|
||||||
|
'box-shadow': '0 4px 8px rgba(0, 0, 0, 0.1)', // 阴影效果
|
||||||
|
'z-index': '999', // 确保导航栏位于其他元素之上
|
||||||
|
'overflow-y': 'auto', // 允许垂直滚动
|
||||||
|
'height': '100vh', // 让导航栏充满整个页面高度
|
||||||
|
'position': 'sticky', /* 固定定位 */
|
||||||
|
'float': 'left', /* 固定定位 */
|
||||||
|
/* 导航栏顶部距离为0 */
|
||||||
|
'box-shadow': '2px 0 5px rgba(0, 0, 0, 0.1)',
|
||||||
|
});
|
||||||
|
$('.jo-catalog-title').css({
|
||||||
|
'line-height': '40px',
|
||||||
|
'font-size': '18px',
|
||||||
|
'color': '#333',
|
||||||
|
'border-bottom': '1px solid #f0f0f0',
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.outiline-item').css({
|
||||||
|
'border-bottom': '1px solid #fff',
|
||||||
|
'box-sizing': 'border-box',
|
||||||
|
'font-size': '14px',
|
||||||
|
'color': '#454545',
|
||||||
|
'cursor': 'pointer',
|
||||||
|
});
|
||||||
|
$('.outiline-content').css({
|
||||||
|
'padding': '4px 0',
|
||||||
|
'margin-left': '16px',
|
||||||
|
'color': '#333',
|
||||||
|
'cursor': 'pointer',
|
||||||
|
'font-family': 'Charis SIL',
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.outiline-img').css({
|
||||||
|
|
||||||
|
'margin-top': '20px',
|
||||||
|
'margin-bottom': '20px',
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.outiline-table').css({
|
||||||
|
|
||||||
|
'margin-top': '20px',
|
||||||
|
'margin-bottom': '20px',
|
||||||
|
|
||||||
|
// 'border-left': '3px solid #efefef',
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.navLinksFigures').css({
|
||||||
|
'display': 'flex',
|
||||||
|
'flex-wrap': 'wrap',
|
||||||
|
'gap': '10px',
|
||||||
|
|
||||||
|
'margin-bottom': '10px',
|
||||||
|
'margin-top': '10px',
|
||||||
|
|
||||||
|
});
|
||||||
|
$('.navLinksTables').css({
|
||||||
|
'display': 'flex',
|
||||||
|
'flex-wrap': 'wrap',
|
||||||
|
'gap': '4px',
|
||||||
|
|
||||||
|
'margin-bottom': '10px',
|
||||||
|
'margin-top': '10px',
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// 在滚动时保持导航栏在视口内
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
// 监听右侧滚动区域
|
||||||
|
$('.newBox').scroll(function () {
|
||||||
|
var scrollTop = $(this).scrollTop(); // 获取当前右侧滚动的位置
|
||||||
|
var scrollHeight = $(this)[0].scrollHeight; // 获取右侧滚动区域的总高度
|
||||||
|
var containerHeight = $(this).height(); // 获取右侧容器的高度
|
||||||
|
|
||||||
|
// 获取所有右侧的 .pMain
|
||||||
|
var sections = $('.newBox').find('.pMain');
|
||||||
|
var navLinks = $('.anchor-nav').find('a'); // 获取所有左侧的导航链接
|
||||||
|
|
||||||
|
// 初始化清除所有导航链接的高亮
|
||||||
|
navLinks.css({
|
||||||
|
'color': '', // 恢复默认颜色
|
||||||
|
'font-weight': '' // 恢复默认字体粗细
|
||||||
|
});
|
||||||
|
|
||||||
|
// 遍历所有的 section
|
||||||
|
sections.each(function (index, section) {
|
||||||
|
var sectionTop = $(section).offset().top - $('.newBox').offset().top + scrollTop; // 计算每个 .pMain 相对于 .newBox 的位置
|
||||||
|
var sectionBottom = sectionTop + $(section).outerHeight(); // 获取每个 section 的底部位置
|
||||||
|
|
||||||
|
// 判断该 section 是否在可视区域内
|
||||||
|
if (scrollTop + containerHeight >= sectionTop && scrollTop <= sectionBottom) {
|
||||||
|
// 高亮对应的导航链接
|
||||||
|
$(navLinks[index]).css({
|
||||||
|
'color': 'rgb(0, 102, 153)', // 激活时颜色变为蓝色
|
||||||
|
'font-weight': 'bold' // 激活时加粗
|
||||||
|
});
|
||||||
|
// 只高亮一个链接，找到第一个符合条件的并停止遍历
|
||||||
|
return false; // 结束 .each() 遍历
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
function isHeaderRow(rowIndex, table) {
|
function isHeaderRow(rowIndex, table) {
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user