javascript - 如何在带有文本的 Html 框中创建建议框(Javascript 中的提示框)-6ren

javascript - 如何在带有文本的 Html 框中创建建议框(Javascript 中的提示框)

转载作者：技术小花猫更新时间：2023-10-29 12:31:17

我正在尝试制作一个页面，允许用户在单击一个单词后获得一个小的建议框(如一个非常小的弹出窗口)，他可以在其中单击并选择他想要的同义词。

我不确定这可以用什么语言完成，可能是 javascript，但我没有找到任何例子。

html代码如下:

Original:
I <b class="synonyms" style="color:black;" 
title="love|really like|really love">like</b> apples.

The result should be(after a user chooses synonyms):
I <b>{like|love}</b> apples.

因此，例如，当他从句子“我喜欢苹果”中单击“喜欢”时，应该有一个小建议框，他可以在所有建议选项中进行选择(爱|真的喜欢|真的很喜欢)。

结果是原创加上他选择的。

这是我的 javascript 示例，但是我不确定是否有办法单击特定单词(一个句子中可能有多个单词)，以及是否可以设置建议框样式并添加单词列表单击它们以从中进行选择。

<!DOCTYPE html>
<html>
<body>

<p>I <b id="demo">like</b> apples.</p>

<button onclick="choose()">Try it</button>


<script>
function choose() {
    var synonym = prompt("Choose synonyms:", "like");
    
    if (synonym != null) {
        document.getElementById("demo").innerHTML =
        "{" + "like" + "|" + synonym + "}";
    }
}
</script>

</body>
</html>

最佳答案

...however I am not sure if there is a way to click on specific word (there could be more than one word in a sentence), and also is there way to style the suggestion box and add list of words to choose from by clicking on them.

把你的问题分解成几个步骤。这将使您更容易理解问题域并设计解决方案。根据我从您的问题中得出的结论，大致步骤及其实现可能类似于下面描述的步骤。

注释 1 :答案基于纯 JavaScript。请记住，所有框架(如 jQuery 等)都是仅在更高级别抽象的 JavaScript。首先学习基本的 JavaScript 对您来说很重要。

注释 2 :我在整个答案中以嵌入链接的形式提供了关键概念的引用(供您获取更多信息和学习)。

1) 文字的标记和 Javascript 设置:有些词有同义词。同义词在标题属性中的标记本身中可用。您到达的标记很好:

标记:

<p>
    I <i class="synonyms" title="love|really like|really love">like</i> apples. 
    I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
</p>

我们需要能够识别所有带有同义词的单词，以便我们可以使用 Javascript 来操作它们。这些在标记中标识为 i具有名为 synonyms 的类的元素.

Javascript:

var words = [].slice.call(document.querySelectorAll('i.synonyms'));

querySelectorAll 返回一个节点列表，因此将其转换为数组的最简单方法是调用 slice on array prototype .我们需要一个数组，以便我们稍后对其进行迭代。

2) 菜单的标记和Javascript设置:需要弹出一个意见箱。因此，只需添加一个元素来保存您的同义词。您已经知道会有一个同义词列表，因此在语义上有一个列表元素是有意义的。并给它一个id。稍后我们将动态填充它。

标记:

<ul id="synonymMenu"></ul>

Javascript:

var menu = document.getElementById('synonymMenu');

3) 建议框菜单应该弹出 : 每当点击这样的词时。所以，我们需要在所有这些单词上添加一个事件监听器来监听点击事件。我们已经有了变量 words 中的单词在上面的第一步中。我们只是迭代和 add the event listener执行函数 manageMenu .稍后我们将定义该函数。在此期间，我们还使用 setAttribute 将现有单词缓存在数据属性中以便以后使用它。 .

words.forEach(function(wrd) {
    wrd.setAttribute('data-word', wrd.textContent);
    wrd.addEventListener('click', manageMenu);
});

4) 用选定的同义词替换单词 :每当在建议框菜单中单击同义词时。因此，我们还必须向同义词列表添加一个单击事件监听器。我们已经将菜单存储在变量 menu 中在上面的步骤 2 中。只需添加监听器即可执行函数 applySynonym .稍后我们将定义该函数。

menu.addEventListener('click', applySynonym);

5)我们也要关闭悬空的意见箱 :我们可以通过点击 body 的任何地方来做到这一点。只需在 body 上添加另一个 click 事件处理程序。执行函数 toggleMenu与 hide范围。稍后会定义这个函数。

document.body.addEventListener('click', function() {
    toggleMenu('hide');
});

6) 根据 title 属性创建同义词列表并显示 :它在建议框菜单中，当单击单词时。我们将在 manageMenu 中定义我们在第 3 步中声明的函数。解释在代码注释中。

function manageMenu(e) {
    // define variables
    var synonyms, optn, link, position;  

    // clear existing list and then show the menu
    clearMenu(); toggleMenu('show'); 

    // cache the click event target to a variable to be used later
    currentWord = e.target;

    // get the position of word relative to viewport
    position = currentWord.getBoundingClientRect();

    // use that position to shift the popup menu near to the word
    menu.style.top = position.top + 24 + 'px';
    menu.style.left = position.left + 2 + 'px';

    // extract title attribute, split by | and store in array
    synonyms = currentWord.getAttribute('title').split('|');

    // iterate array creating an li and anchor for each synonym
    // createElement creates a new element
    // appendChild adds an element to another
    synonyms.forEach(function(syn) {
        optn = document.createElement('li');
        link = document.createElement('a');
        link.setAttribute('href', '#'); link.textContent = syn;
        // add anchor to li, and the li to the menu
        optn.appendChild(link); menu.appendChild(optn);
    });
    // stop propagation of click, so that it doesn't go to body
    e.stopPropagation(); 
}

上面代码中给你的关键引用是关于 using the event object and its target , getting the position of word relative to viewport , createElement , appendChild , 和 stopPropagation

7) 原词后应加上同义词: 并在其位置显示，一旦单击同义词。这我们将在 applySynonym 中定义我们在步骤 4 中引用的函数。

function applySynonym(e) {
    var txt = '';

    // Because we added event listener to the parent ul element, 
    // we have to check if the clicked element is the anchor or not
    if (e.target.tagName != 'A') { return false; }

    // We retrieve the orginal text from the data attribute, 
    // which we cached in step 6 above. And append current anchor's text
    txt += '{' + currentWord.getAttribute('data-word') + '|';
    txt += e.target.textContent + '}';
    // replace the text of the word
    currentWord.textContent = txt;
    toggleMenu('hide'); // hide the suggestion box menu
    // stop propagation of click, so that it doesn't go to body
    // prevent default so that clicking anchor doesn't jump to top
    e.stopPropagation(); e.preventDefault();
}

上面代码中给你的关键引用是关于 preventDefault .

8) 我们定义了其余的辅助函数 :

function toggleMenu(mode) {
    if (mode == 'show') { menu.style.display = 'block'; }
    if (mode == 'hide') { menu.style.display = 'none'; }
}

function clearMenu() {
    // we loop the child nodes of menu ul element, 
    // remove the last child (last li) of that ul element, 
    // until it does not has-child-nodes.
    while (menu.hasChildNodes()) { 
        menu.removeChild(menu.lastChild); 
    }
}

上面代码中给你的关键引用是关于 hasChildNodes , removeChild , 和 lastChild .

9) 通过 CSS 定义演示文稿，特别是使菜单绝对定位，在第一次加载时隐藏它并美化演示:

ul#synonymMenu {
    position: absolute; display: none;
    ...
    border: 1px solid #bbb; background-color: #efefef;
}

10) 测试。

演示 fiddle :https://jsfiddle.net/abhitalks/zske2aoh/

演示片段:

(function() {
	var menu = document.getElementById('synonymMenu'), 
		words = [].slice.call(document.querySelectorAll('i.synonyms')), 
		currentWord = null
	;
	
	words.forEach(function(wrd) {
		wrd.setAttribute('data-word', wrd.textContent);
		wrd.addEventListener('click', manageMenu);
	});
	menu.addEventListener('click', applySynonym);
	document.body.addEventListener('click', function() {
		toggleMenu('hide');
	});

	function manageMenu(e) {
		var synonyms, optn, link, position; 
		clearMenu(); toggleMenu('show'); 
		currentWord = e.target;
		position = currentWord.getBoundingClientRect();
		menu.style.top = position.top + 24 + 'px';
		menu.style.left = position.left + 2 + 'px';
		synonyms = currentWord.getAttribute('title').split('|');
		synonyms.forEach(function(syn) {
			optn = document.createElement('li');
			link = document.createElement('a');
			link.setAttribute('href', '#'); link.textContent = syn;
			optn.appendChild(link); menu.appendChild(optn);
		});
		e.stopPropagation();
	}
	
	function applySynonym(e) {
		var txt = '';
		if (e.target.tagName != 'A') { return false; }
		txt += '{' + currentWord.getAttribute('data-word') + '|';
		txt += e.target.textContent + '}';
		currentWord.textContent = txt;
		toggleMenu('hide');
		e.stopPropagation(); e.preventDefault();
	}
	
	function toggleMenu(mode) {
		if (mode == 'show') { menu.style.display = 'block'; }
		if (mode == 'hide') { menu.style.display = 'none'; }
	}
	
	function clearMenu() {
		while (menu.hasChildNodes()) { 
			menu.removeChild(menu.lastChild); 
		}
	}
	
})();

* { font-family: sans-serif; }
html, body { height: 100%; }
i.synonyms { cursor: pointer; color: #333; }
ul#synonymMenu {
	position: absolute; display: none;
	width: auto; max-height: 120px; 
	overflow: hidden; overflow-y: auto;
	list-style: none; padding: 0; margin: 0; 
	border: 1px solid #bbb; background-color: #efefef;
	box-shadow: 0px 0px 6px 1px rgba(128,128,128,0.3);
}
ul#synonymMenu > li { display: block; }
ul#synonymMenu a { 
	display: block; padding: 4px 20px 4px 6px; 
	color: #333; font-size: 0.9em; text-decoration: none;
}
ul#synonymMenu a:hover {
	background-color: #99b;
}

<p>
I <i class="synonyms" title="love|really like|really love">like</i> apples. 
I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
</p>
<ul id="synonymMenu"></ul>

编辑:

根据 Op 的评论，代码已更新，以通过复选框容纳多个同义词选择。增加的复杂性是添加复选框而不是简单的 anchor ，更改相同的更新样式的事件监听器，以及在重复单击时保留预先存在的选择的逻辑。

更新 fiddle :https://jsfiddle.net/abhitalks/ffpL4f7k/

更新片段:

(function() {
	var menu = document.getElementById('synonymMenu'), 
		menuWrap = document.getElementById('menuWrapper'),
		okButton = document.getElementById('synOk'), 
		words = [].slice.call(document.querySelectorAll('i.synonyms')), 
		currentWord = null
	;
	
	words.forEach(function(wrd) {
		wrd.setAttribute('data-word', wrd.textContent);
		wrd.addEventListener('click', manageMenu);
	});
	okButton.addEventListener('click', applySynonym);
	document.body.addEventListener('click', function(e) { 
		if (isDescendant(menuWrapper, e.target)) {
			return;
		}
		toggleMenu('hide');
	});

	function manageMenu(e) {
		var synonyms, opt, lbl, chk, txt, position, existing; 
		clearMenu(); toggleMenu('show'); 
		currentWord = e.target;
		position = currentWord.getBoundingClientRect();
		menuWrap.style.top = position.top + 20 + 'px';
		menuWrap.style.left = position.left + 2 + 'px';
		existing = currentWord.textContent;
		synonyms = currentWord.getAttribute('title').split('|');
		synonyms.forEach(function(syn) {
			opt = document.createElement('li'); 
			lbl = document.createElement('label');
			chk = document.createElement('input'); 
			chk.setAttribute('type', 'checkbox'); 
			txt = document.createTextNode(syn);
			lbl.appendChild(chk); 
			lbl.appendChild(txt); 
			opt.appendChild(lbl); 
			menu.appendChild(opt);
		});
		preSelect(existing);
		e.stopPropagation();
	}
	
	function preSelect(existing) {
		var labels = [].slice.call(menu.querySelectorAll('label'));
		labels.forEach(function(lbl) {
			if (existing.indexOf(lbl.textContent) > -1) {
				lbl.firstChild.checked = true;
			}
		});
	}
	
	function applySynonym(e) {
		var txt = '', labels, checked, selected;
		labels = [].slice.call(menu.querySelectorAll('label'));
		checked = labels.filter(function(lbl){
			return lbl.firstChild.checked;
		});
		selected = checked.map(function(lbl){
			return lbl.textContent;
		}).join('|');
		
		txt += '{' + currentWord.getAttribute('data-word') + '|';
		txt += selected + '}';
		currentWord.textContent = txt;
		toggleMenu('hide');
		e.stopPropagation(); 
	}
	
	function toggleMenu(mode) {
		if (mode == 'show') { menuWrap.style.display = 'block'; }
		if (mode == 'hide') { menuWrap.style.display = 'none'; }
	}
	
	function clearMenu() {
		while (menu.hasChildNodes()) { 
			menu.removeChild(menu.lastChild); 
		}
	}
	
	function isDescendant(parent, child) {
		 var node = child.parentNode;
		 while (node != null) {
			 if (node == parent) {
				 return true;
			 }
			 node = node.parentNode;
		 }
		 return false;
	}

})();

* { font-family: sans-serif; box-sizing: border-box; }
html, body { height: 100%; }
div.wrap { 
	border: 1px solid #ddd; max-height: 480px; 
	padding: 4px 22px 4px 4px; font-size: 0.9em;
	overflow: hidden; overflow-y: auto;
}
i.synonyms { cursor: pointer; color: #333; }
div#menuWrapper {
	position: absolute; display: none; width: 128px; 
	padding: 4px; margin: 0; 
	border: 1px solid #bbb; background-color: #efefef;
	box-shadow: 0px 0px 6px 1px rgba(128,128,128,0.3);
}
ul#synonymMenu {
	max-height: 120px; 
	overflow: hidden; overflow-y: auto;
	list-style: none; padding: 0; margin: 0; 
}
ul#synonymMenu > li { display: block; }
ul#synonymMenu label { 
	display: block; color: #333; font-size: 0.9em; 
	padding: 2px 18px 2px 4px; 
}
ul#synonymMenu label:hover { background-color: #99b; }
button#synOk { padding: 2px; width: 100%; }

<div class="wrap">
	<p>
	I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
	</p>
	<p>
	I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
	</p>
	<p>
	I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. I <i class="synonyms" title="love|relish|savor">like</i> apples. I <i class="synonyms" title="love|relish|savor|enjoy|patronize|adore">like</i> oranges. 
	</p>
</div>
<div id="menuWrapper">
	<ul id="synonymMenu"></ul>
	<hr/>
	<button id="synOk">Ok</button>
</div>

关于javascript - 如何在带有文本的 Html 框中创建建议框(Javascript 中的提示框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36049942/

文章推荐： javascript - jQuery change 和 HTML 的 onchange 有什么区别？

文章推荐： python - Skype4Py:无法授权传入的好友请求

文章推荐： javascript - 在添加新元素时收缩 div 元素

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

技术小花猫

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在带有文本的 Html 框中创建建议框(Javascript 中的提示框)