必威体育下载基督教Heilmann

您当前正在浏览editinplace类别的存档。必威体育简介

“editinplace”类别的存档

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

星期五,1月4日,2008

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

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

尝试非脚本解决方案

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


              
              =
              “可编辑”
              >
             
  
               
               =
               “mainheading”
               >
              标题:>
  
               
               类型=
               “文本” 
               id=
               “mainheading” 
              
         价值=“东欧的水獭”>
>

CSS:

.editable标签{
  位置:绝对;
  :0;
  :-9999 px;
}
.editable输入{
  边境:没有一个;
  字体类型:天线,无衬线;
}

但是唉!它更容易获得吗?我不确定,由于标题的语义良度受到干扰。我很确定搜索引擎会不喜欢它,因为屏幕阅读器在表单模式下的工作方式与在阅读模式下的工作方式不同,这可能会更令人困惑。我们把它擦掉。

让它低调地工作

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


              
              id=
              “editform” 
              行动=
              “servermagic.php”
              >
             

               
               =
               “可编辑”
               >
              
  
                
                href=
                “# editheader”
                >
               编辑我,懦夫!>
>

               
               =
               “可编辑”
               >
              
  
                
                href=
                “# editdescription”
                >
               我好了,做到!>
>

               
               id=
               “editingsection”
               >
              
  
               
                >
               
    
               
               =
               “editheader”
               >
              主标题内容:>
    
               
               类型=
               “文本” 
               id=
               “editheader” 
               的名字=
               “editheader”
               >
              
  >
  
              
               >
              
    
              
              =
              “editdescription”
              >
             内容描述:>
    
              
              类型=
              “文本” 
             
           id=“editdescription” 
           的名字=“editdescription”>
  >
  
             
              >
             
             
             类型=
             “提交” 
             价值=
             “保存更改”
             >
             >
            
>
>

编辑我,懦夫!

我好了,做到!

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

  • 查找带有。的部分ID"editsection"并将其隐藏起来
  • 找到类“editable”中的所有元素,并添加一个指向编辑函数的单击处理程序
  • 覆盖表单的submit事件以指向存储函数

编辑函数的作用如下:

  • 检查是否已经编辑了另一个元素,如果有,则将焦点集中在这个元素上
  • 从目标链接的href获取表单元素的ID
  • 将表单元素的值设置为元素的内容
  • 将“编辑”样式设置为原始元素以隐藏它
  • 显示原始链接所在的表单字段
  • 关注表单字段
  • 告诉主脚本当前正在编辑什么元素

存储功能应:

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

下面的脚本正是这样做的。我正在使用YUI在这个例子中,我喜欢专注于编写脚本,而不是担心浏览器问题。也就是说,注意,在Firefox中需要在超时中包装表单字段焦点,是什么呢?

雅虎。名称空间(“ch”);雅虎。cheditinplace = 函数(){名称和id使用*/
  varnamesandids= {editsection:“editingsection”,编辑:“编辑”,隐藏的:“隐藏”,可编辑的:“可编辑”,形式:“editform”
  };var你们=雅虎。跑龙套事件,=雅虎。跑龙套Dom;var编辑= {};
  vareditingsection=码。得到(namesandids。editsection);
  如果(editingsection){码。addClass(editingsection,namesandids。隐藏的);函数doedit(e){
      如果(!编辑。目标){
        vart=你们。getTarget(e);
        如果(t。href){
          varfieldid=t。getAttribute(“href”)分裂(“#”)(1];
          var=码。得到(fieldid);
          列表末尾();字段。价值 =t。innerHTML;码。addClass(t,namesandids。编辑);setTimeout(函数(){字段。焦点();},10)编辑= {目标:t,:,id:fieldid};
        };
      } 其他的 {setTimeout(函数(){编辑。焦点();},10)
      }你们。preventDefault(e);
    };函数商店(e){
      如果(编辑。目标){编辑。目标innerHTML =编辑。价值;码。removeClass(编辑。目标,namesandids。编辑);editingsection。列表末尾(编辑。);编辑。目标焦点();
        // Ajax Magic在这里,您可以使用edit.id作为ID你们。preventDefault(e);编辑= {};
      };
    };var编辑=码。getElementsByClassName(namesandids。可编辑的);你们。(编辑,“点击”,doedit);你们。(码。得到(namesandids。形式),“提交”,商店);}
}();

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

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