1

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

4

6 回答 6

10

听起来你可能是从错误的方向接近这个。与其创建就地编辑并使其很好地降级（Graceful Degradation 角度），不如创建一个非 Javascript 版本进行编辑，然后在页面加载后使用 Javascript 添加就地编辑，参考作为渐进增强。

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

于 2008-09-30T14:05:41.647 回答
4

如果没有 JavaScript，您根本无法进行就地编辑，因此它的优雅降级包括确保当 JavaScript 不可用时用户仍然可以编辑有问题的项目。

因此，我只需要一个链接来编辑有问题的整个项目，然后在页面加载时在 JavaScript 中创建就地编辑控件，如果您不想让用户使用就地编辑，则隐藏编辑链接有空的时候。

于 2008-09-30T13:50:54.723 回答
0

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

于 2008-09-30T13:57:40.307 回答
0

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

于 2008-09-30T13:59:00.570 回答
0

我假设您正在尝试做的事情类似于以下场景：

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

其中 <a> 是一个将 <span> 替换为 <input> 的按钮，以便可以对其进行编辑。有几种方法可以使其优雅地降级（即在没有 javascript 的情况下工作）。

理论上：

使用 CSS，使用伪选择器来完成。:active 有点像 onclick 事件，所以如果你在 <li> 中嵌套一个隐藏的 <input>，这个 CSS 会隐藏 <span> 并在点击 li 时显示 <input>。

李：活动#可编辑{
    显示：无；
}
李：主动输入{
    显示：块；
}

这可能适用于您最喜欢的浏览器，但毫无疑问，您会发现它在 IE 中出现问题。

在实践中：

使用链接。让 <a> 成为一个实际链接，该链接指向在服务器端完成了此输入/跨度替换的页面。您在 <a> 上粘贴一个事件处理程序，该处理程序使用 MooTools 取消拥有 JS 的人的点击事件，如下所示： 

函数make_editable（evt）{
    var evt = 新事件（evt）；
    evt.preventDefault();
}
于 2008-09-30T14:15:35.817 回答
0

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

于 2008-10-01T18:16:55.667 回答