国产精品日韩免费看,久青草久青草视频,国产偷人自拍区视频在线观看

Text Control 控件教程：使用 MutationObserver 觀密報(bào)告預(yù)覽選項(xiàng)卡何時(shí)處于活動(dòng)狀態(tài)

翻譯|行業(yè)資訊|編輯：胡濤|2024-07-30 15:40:16.127|閱讀 65 次

概述：本文主要介紹，Text Control 控件教程：使用 MutationObserver 觀密報(bào)告預(yù)覽選項(xiàng)卡何時(shí)處于活動(dòng)狀態(tài)，歡迎查閱

TX Text Control 是一款功能類似于 MS Word 的文字處理控件，包括文檔創(chuàng)建、編輯、打印、郵件合并、格式轉(zhuǎn)換、拆分合并、導(dǎo)入導(dǎo)出、批量生成等功能。廣泛應(yīng)用于企業(yè)文檔管理，網(wǎng)站內(nèi)容發(fā)布，電子病歷中病案模板創(chuàng)建、病歷書寫、修改歷史、連續(xù)打印、病案歸檔等功能的實(shí)現(xiàn)。

TX Text Control 最新下載

考慮以下情況：您的應(yīng)用程序中有一個(gè)外部“保存”按鈕，用于保存文檔編輯器中的當(dāng)前文檔。此按鈕應(yīng)僅在文檔處于“編輯”模式而非“預(yù)覽”模式時(shí)啟用，以允許用戶保存內(nèi)容。預(yù)覽模式是一種在您設(shè)計(jì)模板時(shí)用數(shù)據(jù)填充插入的合并字段以預(yù)覽文檔的模式。

已啟用按鈕

當(dāng)文檔處于預(yù)覽模式時(shí)，“保存”按鈕應(yīng)該被禁用，如下面的屏幕截圖所示：

已禁用按鈕

MutationObserver API

實(shí)現(xiàn)此目的的一種方法是使用MutationObserver API。該MutationObserver接口提供了監(jiān)視 DOM 樹所做更改的功能。當(dāng)檢測(cè)到更改時(shí)，觀察者將調(diào)用指定的回調(diào)函數(shù)。這對(duì)于檢測(cè) JavaScript 對(duì) DOM 所做的更改非常有用，例如當(dāng)文檔模式從預(yù)覽更改為編輯時(shí)。

在ribbonTabsLoaded事件處理程序中，您可以創(chuàng)建一個(gè)新MutationObserver實(shí)例并觀察ribbonGroupMailMergePreview元素的變化。當(dāng)ribbonGroupMailMergePreview元素可見時(shí)（即文檔處于預(yù)覽模式），您可以禁用“保存”按鈕。當(dāng)ribbonGroupMailMergePreview元素不可見時(shí)（即文檔處于編輯模式），您可以啟用“保存”按鈕。

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

TXTextControl.addEventListener("ribbonTabsLoaded", function () {

targetNode = document.getElementById('ribbonGroupMailMergePreview');

// Start observing the target node for configured mutations
if (targetNode) {
observer.observe(targetNode, config);
// Initial check
console.log(`Initial visibility of #ribbonGroupMailMergePreview: ${checkVisibility(targetNode)}`);
} else {
console.error('Element #ribbonGroupMailMergePreview not found');
}
});

每當(dāng)檢測(cè)到元素發(fā)生變化時(shí)，就會(huì)調(diào)用回調(diào)函數(shù)ribbonGroupMailMergePreview。該函數(shù)將檢查ribbonGroupMailMergePreview元素是否可見，并相應(yīng)地啟用或禁用“保存”按鈕。

// Function to check visibility
function checkVisibility(element) {
const style = window.getComputedStyle(element);
return style && style.display !== 'none' && style.visibility !== 'hidden';
}

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' || mutation.type === 'childList') {
// Check visibility whenever an attribute or child list changes
const isVisible = checkVisibility(targetNode);

if (isVisible) {
document.getElementById('saveBtn').disabled = true;
} else {
document.getElementById('saveBtn').disabled = false;
}
}
}
};

此示例的完整 kbd 在此處：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TX Text Control Document Editor from JS</title>
<script
src="http://backend.textcontrol.com/api/TXWebSocket/GetResource?name=tx-document-editor.min.js">
</script>
<style>

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

button {
margin-top: 20px;
}

#txDocumentEditor {
height: 600px;
width: 800px;
}

</style>
</head>
<body>

<div id="txDocumentEditor"></div>

<button id="saveBtn" onclick="save()">Save Document</button>

<script>

var targetNode = null;

TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: "wss://backend.textcontrol.com/api/TXWebSocket?access-token="
});

var customerJson = [{
"name": "John Doe",
"address": "1234 Elm Street",
"city": "Austin",
"state": "TX",
"zip": "78701"
}];

TXTextControl.addEventListener("ribbonTabsLoaded", function () {

targetNode = document.getElementById('ribbonGroupMailMergePreview');

// Start observing the target node for configured mutations
if (targetNode) {
observer.observe(targetNode, config);
// Initial check
console.log(`Initial visibility of #ribbonGroupMailMergePreview: ${checkVisibility(targetNode)}`);
} else {
console.error('Element #ribbonGroupMailMergePreview not found');
}
});

TXTextControl.addEventListener("textControlLoaded", function () {
TXTextControl.loadJsonData(JSON.stringify(customerJson));
});

function save() {
TXTextControl.saveDocument(TXTextControl.StreamType.HTMLFormat, function (data) {
console.log(data);
});
}

// Function to check visibility
function checkVisibility(element) {
const style = window.getComputedStyle(element);
return style && style.display !== 'none' && style.visibility !== 'hidden';
}

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' || mutation.type === 'childList') {
// Check visibility whenever an attribute or child list changes
const isVisible = checkVisibility(targetNode);

if (isVisible) {
document.getElementById('saveBtn').disabled = true;
} else {
document.getElementById('saveBtn').disabled = false;
}
}
}
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

</script>

</body>
</html>

結(jié)論

該MutationObserverAPI 是用于檢測(cè) DOM 樹更改的強(qiáng)大工具。在此示例中，我們使用了根據(jù)特定元素的MutationObserver可見性啟用或禁用“保存”按鈕。此技術(shù)可應(yīng)用于需要響應(yīng) DOM 更改的各種場(chǎng)景。

歡迎下載|體驗(yàn)更多TX Text Control產(chǎn)品

獲取更多產(chǎn)品信息請(qǐng)咨詢

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

上一篇：借助Aspose.html控件，將SVG 轉(zhuǎn)PNG 的 C# 圖像處理庫(kù) 下一篇：界面控件DevExpress WinForms，支持HTML & CSS提升用戶體驗(yàn)（一）