我正在使用 w3.css 进行响应式页面设计。每种尺寸(小、中、大)都有自己独特(但几乎相同)的代码,我将其称为“部分”。每个部分都有多个 jQuery 文本编辑器 (JQTE)。当我查看大页面时,所有的 JQTE 都呈现完美没有问题。当我查看 Medium 或 Small 页面(使用浏览器开发工具)时,JQTE 显示为标准 textarea 元素,即使当我使用浏览器开发工具查看元素时,所有 JQTE 都已成功呈现。
即使我在页面首先设置为“小”或“中”的情况下呈现页面,它们也不会呈现。我试过用一个类调用 $().jqte() ,用单独的不同元素,用 $("textarea").jqte() ,但 JQTE 仍然只为大页面正确呈现。
下面的代码是在 ColdFusion 中使用循环呈现的,因此 #id# 值将替换为实际数值。
<!--LARGE-->
<div class="w3-hide-small w3-hide-medium lgdiv#id#" style="display:none">
<textarea name="lgtext#id#" id="lgtext#id#" class="jqteeditor"></textarea>
</div>
<!--MEDIUM-->
<div class="w3-hide-small w3-hide-large mddiv#id#" style="display:none">
<textarea name="mdtext#id#" id="mdtext#id#" class="jqteeditor"></textarea>
</div>
<!--SMALL-->
<div class="w3-hide-medium w3-hide-large smdiv#id#" style="display:none">
<textarea name="smtext#id#" id="smtext#id#" class="jqteeditor"></textarea>
</div>
我用以下方式渲染 JQTE:
$("textarea").jqte({
'format': false,
'fsize': false,
'color': false,
'b': true,
'i': true,
'u': true,
'ul': false,
'ol': false,
'sub': false,
'sup': false,
'outdent': false,
'indent': false,
'right': false,
'center': false,
'left': false,
'strike': false,
'link': false,
'remove': false,
'unlink': false,
'source': false,
'rule': false
});
或者
$(".jqteeditor").jqte({
'format': false,
'fsize': false,
'color': false,
'b': true,
'i': true,
'u': true,
'ul': false,
'ol': false,
'sub': false,
'sup': false,
'outdent': false,
'indent': false,
'right': false,
'center': false,
'left': false,
'strike': false,
'link': false,
'remove': false,
'unlink': false,
'source': false,
'rule': false
});
或单独为每个元素:
$("#{elementid}").jqte({
'format': false,
'fsize': false,
'color': false,
'b': true,
'i': true,
'u': true,
'ul': false,
'ol': false,
'sub': false,
'sup': false,
'outdent': false,
'indent': false,
'right': false,
'center': false,
'left': false,
'strike': false,
'link': false,
'remove': false,
'unlink': false,
'source': false,
'rule': false
});
其中 {elementid} 对应于 sm、md 和 lg 的每个 id。
根据大小,我有显示包含 JQTE 的 div 的按钮:
<div class="w3-hide-small w3-hide-medium">
<i class="far fa-comment" onclick="ShowJQTE('lg',#id#)"></i>
</div>
<div class="w3-hide-small w3-hide-large">
<i class="far fa-comment" onclick="ShowJQTE('md',#id#)"></i>
</div>
<div class="w3-hide-large w3-hide-medium">
<i class="far fa-comment" onclick="ShowJQTE('sm',#id#)"></i>
</div>
其中 ShowJQTE 只是切换相应 div 的显示。
如何让 JQTE 在所有页面大小上一致呈现?