jEditable jQuery技术使用

最新推荐文章于 2024-11-05 22:56:38 发布

原创最新推荐文章于 2024-11-05 22:56:38 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #header #class #javascript #function #div

ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用jEditable技术和jQuery实现的页面编辑特效方法。通过简单的代码示例展示了如何将这一技术应用到实际项目中，包括设置可编辑元素、定义回调函数等关键步骤。

jEditable技术是现在比较流行的AJAX技术,jEditable 通过jQuery,借助Editable,实现页面编辑特效.具体使用办法如下:

1,在视图上(页面),前提是有jquery.js,jeditable.js两个JS文件,代码如下:

下载路径:http://www.appelsiini.net/~tuupola/javascript/jEditable/

<h1 class="editable" id="header_1">Header 1</h1>
<h2 class="editable" id="header_2">Header 2</h2>
<h3 class="editable" id="header_3">Header 3</h3>
<p class="editable_textarea" id="paragraph_1">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis

</p>
<div class="editable_textarea" id="div_1">

</div>

2,其页面JAVASCRIPT脚本如下:

$(document).ready(function() {
    $(".editable").editable(url, {
        indicator : "正在处理中"
    });
    $(".editable_textarea").editable(url, {
        indicator : "正在处理中",
        type : 'textarea',
       event :'dblclick',
       id:'elementid',
       name:'elementvalue'
    });
});

其中name,id可作为页面传到业务层参数