必威体育下载基督教Heilmann

贴有“editinplace”标签的帖子

尝试更容易访问的就地编辑解决方案

星期五,1月4日,2008

今天我将尝试找到一种更容易访问的方法来提供就地编辑脚本。这个此处描述的解决方案可能还没准备好现实生活,请在不同的环境中测试它并提供修复。它获得了知识共享共享的许可,所以发疯吧!

我真的很喜欢就地编辑的想法。最常用的就地编辑示例可能是Flickr,它允许您在登录时单击任何标题或描述来直接编辑。我喜欢就地编辑的原因是它让用户更容易描述事物,希望能使网站更容易访问和查找(毕竟,所有的文本都是被索引的,并且对每个人都是可用的)。就地编辑的缺点是许多解决方案不太容易访问。它们向元素添加了一个单击处理程序,这些元素不一定对辅助技术可用,而且根本无法通过键盘访问。

非脚本解决方案尝试

从技术上讲,创建可访问的就地编辑的最简单解决方案是使用带标签的输入字段并使用CSS使它们看起来像其他元素。代码可以是这样的:


              
              =
              “可编辑”
              >
             
  
               
               对于=
               “主攻方向”
               >
              标题:>
  
               
               类型=
               “文本” 
               身份证件=
               “主攻方向” 
              
         价值=“东欧水獭”>
>

以及CSS

可编辑的标签{
  位置绝对的
  顶部0
  左边-99 99 PX
}
可编辑的输入{
  边境没有人
  字体类型阿拉里无衬线
}

但是唉!它更容易获得吗?我不确定,因为标题的语义美受到干扰。我很肯定搜索引擎会对它皱眉,当屏幕阅读器在表单模式下的工作方式与在阅读模式下的工作方式不同时,它可能会更加令人困惑。所以,让我们拭目以待吧。

使其不受干扰地工作

下一步是使用普通标题,并以某种方式将其与文档中其他地方的表单字段连接起来。很酷的一点是我们有这样的东西betway体育官方网HTML:目标链接。例如:


              
              身份证件=
              “编辑表单” 
              行动=
              “servermagic.php”
              >
             

               
               =
               “可编辑”
               >
              
  
                
                HREF=
                “第二代教育家”
                >
               编辑我,小熊!>
>

               
               =
               “可编辑”
               >
              
  
                
                HREF=
                “编辑说明”
                >
               我也是,去做吧!>
>

               
               身份证件=
               “编辑节”
               >
              
  
               
                >
               
    
               
               对于=
               “editheader”
               >
              主标题内容:>
    
               
               类型=
               “文本” 
               身份证件=
               “editheader” 
               名称=
               “editheader”
               >
              
  >
  
              
               >
              
    
              
              对于=
              “编辑说明”
              >
             说明内容:>
    
              
              类型=
              “文本” 
             
           身份证件=“编辑说明” 
           名称=“编辑说明”>
  >
  
             
              >
             
             
             类型=
             “提交” 
             价值=
             “保存更改”
             >
             >
            
>
>

编辑我,小熊!

我也是,去做吧!

这在没有JavaScript的情况下也能正常工作(但是我的Firefox在你点击链接的时候并没有高亮显示表单字段,有人知道为什么吗?请评论!).它需要的只是一个javascript来将其转换成一个可工作的就地编辑版本。脚本的作用是:

  • 查找包含身份证件“编辑分区”并将其隐藏在视图中
  • 找到类“editable”中的所有元素,并添加一个指向编辑函数的单击处理程序
  • 重写表单的提交事件以指向存储函数

编辑功能应执行以下操作:

  • 检查是否已在编辑另一个元素,如果有则将其聚焦
  • 从目标链接的href获取表单元素的ID
  • 将表单元素的值设置为元素的内容
  • 将“已编辑”样式设置为原始元素以隐藏它
  • 显示原始链接所在的表单域
  • 聚焦窗体域
  • 告诉主脚本当前正在编辑什么元素

存储功能应:

  • 检查是否编辑了元素(以避免覆盖常规表单提交)
  • 将目标链接的内容设置为字段的值
  • 将表单域移回其来源
  • 将焦点设置回链接
  • 异步存储内容(此处未实现)
  • 停止正常表单提交
  • 将脚本的编辑状态重置为“无”

下面是执行此操作的脚本。我正在使用悠悠在这个例子中,我喜欢专注于编写脚本,而不是担心浏览器问题。也就是说,注意,您需要在firefox中超时包装表单域焦点,那是怎么回事?

雅虎。命名空间“ch”)雅虎。中国.editinplace = 功能){/*使用的名称和ID*/
  var人名= {编辑部分“editingsection”编辑“编辑”隐藏的“隐藏”可编辑的可编辑的形式“editform”
  }var=雅虎。乌蒂尔.事件YD=雅虎。乌蒂尔.Domvar编辑= {}
  vareditingsection=码。得到人名。编辑部分)
  如果editingsection){码。加法类editingsection人名。隐藏的)功能doDebuge){
      如果编辑。目标){
        varT=你们。获取目标e)
        如果THREF){
          varfieldid=T获取属性“HREF”).分裂“#”)[]
          var领域=码。得到fieldid)
          .列表末尾领域)字段。价值 =T内层HTML码。加法类T人名。编辑)setTimeout功能){字段。集中)})编辑= {目标T领域领域身份证件fieldid}
        }
      } 其他的 {setTimeout功能){编辑。领域.集中)})
      }你们。防止违约e)
    }功能商店e){
      如果编辑。目标){编辑。目标.内层HTML =编辑。领域.价值码。removeClass编辑。目标人名。编辑)编辑部。列表末尾编辑。领域)编辑。目标.集中)
        // Ajax Magic在这里,您可以使用edit.id作为ID你们。防止违约e)编辑= {}
      }
    }var编辑=码。getElementsByClassName人名。可编辑的)你们。编辑点击doDebug)你们。码。得到人名。形式)“提交”商店)}
})

尝试解决方案将脚本作为zip下载示例页告诉我你的想法!

在Firefox测试,IE7以及PC上的Opera 9,请给我更多关于其他系统和浏览器的反馈。