关于如何使就地编辑可降解的任何想法?

时间:2020-03-06 14:55:21  来源:igfitidea点击:

我目前正在为MooTools写一个就地编辑脚本,对于在没有JavaScript的情况下如何使其优雅降级的同时,我仍然有些困惑。我想以某种方式使用渐进增强。我不是在寻找代码,而是在寻找一种如何处理这种情况的概念。如果我们有任何想法或者知道任何可以正常降级的就地编辑脚本,请分享。

解决方案

如果没有JavaScript,就无法进行就地编辑,因此,要进行适当的降级包括确保在JavaScript不可用时,用户仍然可以编辑有问题的项目。

这样,我只有一个链接,可以编辑整个问题,然后在页面加载时在JavaScript中创建就地编辑控件,如果我们愿意而不是用户使用就地编辑,则可以隐藏编辑链接有空的时候。

如果是文本内容,则可以将可编辑内容显示为输入类型"提交"按钮,并以内容为标题。单击后,它将提交整个表单,保留其他值,并显示一个编辑对话框。之后,可以恢复表单值。

也许在每个具有就地编辑的元素的下面的div中放置一个输入。页面加载后,使用javascript隐藏这些div。这样,只有在javascript永不触发时,它们才可用。

听起来我们可能是从错误的方向进行操作。与其创建一个就地编辑并使其降级到很好的程度(优美的降级角度),不如说是创建一个非Java版本进行编辑,然后在页面加载后使用Javascript添加就地编辑,以代替作为渐进增强。

有两种选择。使用没有Javascript的提交按钮将显示形式创建为表单,然后使用Javascript将输入替换为执行现场编辑的某种标签。我们应该能够使用标签和id属性的组合来选择正确的属性,以便就地编辑实现正常工作。如果我们不希望默认显示表单,则另一种选择是显示带有按钮/链接的值,以便使用服务器端处理将其转换为表单,然后在其中添加编辑区域。

我假设我们要尝试执行的操作类似于以下情况:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

<a>是将<span>替换为<input>的按钮,以便可以对其进行编辑。有两种方法可以使它正常降级(即无需使用javascript即可工作)。

理论上:

使用CSS,通过psuedo-selectors做到这一点。 :active有点像onclick事件,因此,如果在<li>中嵌套一个隐藏的<input>,则当单击li时,此CSS将隐藏<span>并显示<input>。

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

这可能会在我们最喜欢的浏览器中工作,但是毫无疑问,我们会发现它在IE中损坏。

在实践中:

使用链接。将该<a>设置为实际链接,该链接将链接到已在服务器端完成此输入/跨度替换的页面。我们将事件处理程序粘贴在<a>上,该处理程序使用MooTools取消具有JS的用户的click事件,如下所示:

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

尝试使用样式化的输入文本,并在页面加载后使用readonly属性将其设置为只读。
然后单击它,删除readonly属性,然后onblur将其重新设置为只读。
当单击"保存"按钮或者onblur事件时,发出Ajax请求以将数据保存在服务器中。