jQuery就地编辑插件。可通过插件架构进行扩展。插件的插件。真正地
Posted
tags:
中文标题：jQuery就地编辑插件。可通过插件架构进行扩展。插件的插件。真正地 原文标题：jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really. 项目评级：Star:1800 Fork:476 下载地址：https://github.com/NicolasCARPi/jquery_jeditable 详情介绍jquery可编辑
折旧通知书
此项目已弃用，不应在新项目中使用。去看看马利图书馆吧。它或多或少是一样的，但使用的是typescript，没有jQuery依赖项。
备选库
使用Malle。
描述
jQuery的编辑插件（与jQuery v3.4.0+兼容）。
将其绑定到页面上的一个元素，单击后，该元素将成为一个表单，该表单将通过异步（ajax）POST请求发送到URL。
适用于文本输入、文本区域、选择、日期选择器等…提供了大量不同的选项，您可以使用这些选项来做您想做的事情！
现场演示
现场演示
安装
用法
正在加载库
使用<script>标签从服务器加载dist/jquery.jeditable.min.js文件，或使用CDNJS链接。
最基本的用法
只有一个强制参数。浏览器发送编辑内容的URL。
上面的代码做了几件事：
类edit的元素可编辑。编辑从单击鼠标开始。表单输入元素是文本。输入元素的宽度和高度与原始元素匹配。如果用户在表单外部单击，则放弃更改。如果用户点击ESC，也会发生同样的情况。当用户点击ENTER时，浏览器将文本提交到save.php。
对oneliner来说不错吧？让我们添加一些选项。
添加选项
在上面的代码中，双击edit类的元素将变为可编辑的。发送数据时会显示“正在保存…”。CSS类custom-css将应用于该元素。要提交的按钮将显示“保存”文本。
类edit_area的元素将通过文本区域进行编辑。保存过程中将显示一个图像。
类edit_select的元素将成为可选择的下拉列表。
当鼠标悬停时，这两个元素都会有一个工具提示。
现场演示展示了更多的例子，但有了这些，你已经可以做很多了！
此处提供完整的选项列表：选项完整列表
发送到服务器的内容是什么？
当用户单击提交按钮时，POST请求会发送到目标URL，如下所示：
其中element_id是元素的id，user_edited_content是用户在输入中输入的内容。
如果要更改发送的参数的名称，则需要添加两个选项：
上面的代码将导致将其发送到服务器：
正在加载数据
如果您需要加载与显示的内容不同的内容（元素来自Wiki或在Markdown或Textile中，并且您需要加载源），您可以使用loadurl选项进行加载。
默认情况下，它会向loadurl发出GET请求，因此如果您想要POST，请添加loadtype选项。loadtext是在请求时显示一些内容。
PHP脚本load.php应该返回文本的来源（所以markdown或wiki文本，而不是html）。
save.php应该返回html（因为这是提交后显示给用户的内容）。
或者，您可以在data选项（接受字符串或函数）中传递源。
我喜欢写句子（并用括号中的文字结束）。
使用选择
您可以通过指定select的类型参数值来使用select。Select是从JSON编码的数组中构建的。此数组可以使用data参数给定，也可以从loadurl参数给定的外部URL中获取。数组键是<option>标签的值。数组值是以下拉方式显示的文本。
JSON编码的数组如下所示：
记下最后一个条目。这很特别。当数组中的值selected时，您可以告诉Jedit默认应该选择哪个选项。让我们做两个简单的例子。首先，我们在数据参数中传递下拉值：
如果您需要动态生成下拉的值，该怎么办？然后您可以从外部URL获取值。让我们假设我们有以下PHP脚本：
那么我们使用loadurl参数来代替data：
造型元素
您可以使用cssclass和style参数设置输入元素的样式。第一个假设是CSS中定义的类的名称。第二个可以是作为字符串的任何有效的样式声明。检查以下示例：
两个参数都可以具有inherit的特殊值。将class设置为inherit将使窗体继承父级的class。将style设置为inherit将使窗体具有与其父窗体相同的样式属性。
以下示例将使用下拉菜单使单词桔子可编辑。此下拉菜单继承了<span>的样式。因此，它将以内联方式显示。
提交到函数而不是URL
有些人想控制一切。我想让你开心。您可以完全控制Ajax请求。只需提交到函数
的URL。传递的参数与回调相同。
请注意，函数必须返回一个字符串。通常是经过编辑的内容。这将在编辑后显示在页面上。
其他选项
演示包含其他示例，请查看！
此处提供完整的选项列表：选项完整列表
支持
如果你有一个bug要报告，有问题要问，或者你只是想讨论与项目相关的事情，请打开一个GitHub问题。