Javascript 关于如何使在位编辑可降解有何想法?

Javascript 关于如何使在位编辑可降解有何想法?,javascript,mootools,graceful-degradation,progressive-enhancement,edit-in-place,Javascript,Mootools,Graceful Degradation,Progressive Enhancement,Edit In Place,我目前正在为MooTools编写一个就地编辑脚本,我有点困惑,不知道如何在没有JavaScript的情况下让它优雅地降级,同时仍然拥有一些功能。我想以某种方式使用渐进增强。我不是在寻找代码,而是一个如何处理这种情况的概念。如果您有任何想法或知道任何在位编辑脚本可以优雅地降级,请与他人分享。没有JavaScript,您根本无法进行在位编辑,因此优雅的降级包括确保用户在JavaScript不可用时仍然可以编辑有问题的项目 因此,我只需要有一个链接来编辑整个相关项目,然后在页面加载时用JavaScri

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

没有JavaScript,您根本无法进行在位编辑,因此优雅的降级包括确保用户在JavaScript不可用时仍然可以编辑有问题的项目


因此,我只需要有一个链接来编辑整个相关项目,然后在页面加载时用JavaScript创建就地编辑控件,如果您希望用户在可用时使用就地编辑,则隐藏编辑链接。

没有JavaScript,您根本无法进行就地编辑,因此,在JavaScript不可用的情况下,确保用户仍然可以编辑有问题的项目是它的一个重要组成部分


因此,我只需要有一个链接来编辑整个相关项目,然后在页面加载时用JavaScript创建就地编辑控件,如果您希望用户在可用时使用就地编辑,则隐藏编辑链接。

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

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

可以在每个元素下的div中输入一个编辑。加载页面时,使用javascript隐藏这些div。这样,它们只有在javascript从不启动时才可用。

可以在每个元素下的div中输入一个编辑。加载页面时,使用javascript隐藏这些div。这样,它们只有在javascript从不启动的情况下才可用。

听起来您可能是从错误的方向来实现这一点的。与其创建在位编辑并使其很好地降级(优雅的降级角度),不如创建一个非Javascript版本进行编辑,然后在页面加载后使用Javascript添加在位编辑,参考as


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

听起来您可能是从错误的方向来实现这一点的。与其创建在位编辑并使其很好地降级(优雅的降级角度),不如创建一个非Javascript版本进行编辑,然后在页面加载后使用Javascript添加在位编辑,参考as


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

我正在评估您尝试执行的操作类似于以下场景:

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>
  • 可编辑文本
  • 其中,是将替换为的按钮,以便可以对其进行编辑。有两种方法可以使它优雅地降级(即在没有javascript的情况下工作)

    理论上:

    使用CSS,使用psuedo选择器执行此操作:active有点像onclick事件,因此如果在
  • 中嵌套一个隐藏的,这个CSS将隐藏,并在单击li时显示

    li:active #editable { display:none; } li:active input{ display:block; } li:活动#可编辑{ 显示:无; } 李:主动输入{ 显示:块; } 这可能在你最喜欢的浏览器中工作,但毫无疑问,你会发现它在IE中被破坏了

    实际上:

    使用链接。这是一个实际的链接,指向一个页面,在该页面中,输入/跨度替换已在服务器端完成。在上粘贴一个事件处理程序,该事件处理程序使用MooTools为具有JS的用户取消单击事件,如下所示:

    function make_editable(evt) { var evt = new Event(evt); evt.preventDefault(); } 函数使_可编辑(evt){ var evt=新事件(evt); evt.preventDefault(); }
    我想你要做的是类似以下场景的事情:

    <li>
        <span id="editable">Editable text</span> <a class="edit_button"> </a>
    </li>
    
  • 可编辑文本
  • 其中,是将替换为的按钮,以便可以对其进行编辑。有两种方法可以使它优雅地降级(即在没有javascript的情况下工作)

    理论上:

    使用CSS,使用psuedo选择器执行此操作:active有点像onclick事件,因此如果在
  • 中嵌套一个隐藏的,这个CSS将隐藏,并在单击li时显示

    li:active #editable { display:none; } li:active input{ display:block; } li:活动#可编辑{ 显示:无; } 李:主动输入{ 显示:块; } 这可能在你最喜欢的浏览器中工作,但毫无疑问,你会发现它在IE中被破坏了

    实际上:

    使用链接。这是一个实际的链接,指向一个页面,在该页面中,输入/跨度替换已在服务器端完成。你打了个平手