X-editable

使用 Twitter Bootstrap、jQuery UI 或纯 jQuery 就地编辑

该库允许您在页面上创建可编辑元素。它可以与任何引擎（仅引导、jquery-ui、jquery）一起使用，并包括弹出和内联模式。请试用演示，看看它是如何工作的。

Demo
Documentation

引入CDN（在核心库之后）

Bootstrap

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>

jquery-ui

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>

jquery

<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/js/jquery-editable-poshytip.min.js"></script>

如

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

主要属性是：

type - 输入类型（文本、文本区域、选择等）
url - 用于处理提交值的服务器端脚本的 URL（/post、post.php 等）
pk - 要更新的记录的主键（数据库中的 ID）
id 或 name - 要更新的字段的名称（db 中的列）。取自 id 或 data-name 属性
value - 初始值。对 select 很有用，其中 value 是要显示的文本的整数键。如果为空 - 将从元素 html 内容中获取

设置可编辑模式：内联或弹出（默认）

//turn to inline mode
$.fn.editable.defaults.mode = 'inline';

将 editable() 方法应用于这些元素

$(document).ready(function() {$('#username').editable();
});

或者，您可以通过 javascript 设置所有选项

<a href="#" id="username">superuser</a>

$('#username').editable({showbuttons: false  // 是否显示按钮，若为false,点击回车保存输入内容type: 'text',pk: 1,url: '/post',title: 'Enter username'validate: function(value) { // 校验输入的值，可使用正则表达式if ($.trim(value) == '') {return 'This field is required';} else {if (!/^\d+$/.test(val)) {return '只能输入数字';}}}
});

一个完整的例子

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>X-editable starter template</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- bootstrap --><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"><script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  <!-- x-editable (bootstrap version) --><link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script><!-- main.js --><script src="main.js"></script></head><body><div class="container"><h1>X-editable starter template</h1><div><span>Username:</span><a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a></div><div><span>Status:</span><a href="#" id="status"></a></div></div><script type="text/javascript">  $(document).ready(function() {//toggle `popup` / `inline` mode$.fn.editable.defaults.mode = 'popup';     //make username editable$('#username').editable();//make status editable$('#status').editable({type: 'select',title: 'Select status',placement: 'right',value: 2,source: [{value: 1, text: 'status 1'},{value: 2, text: 'status 2'},{value: 3, text: 'status 3'}]/*//uncomment these lines to send data on server,pk: 1,url: '/post'*/});});</script>  </body>
</html>

X-editable快速编辑table表单,input,select等相关推荐

html的input不可编辑状态,HTML中让表单input不可编辑的方法
HTML中让表单input不可编辑的方法,有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使的内容,"中国"两个字不可以修改.表单input不可编辑的方法实现 ...
java 文本域不可编辑_实现表单input文本框不可编辑的三种方法
问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表单的不可编辑功能. 实现方式 1.οnfοcus=t ...
开发指南专题九：JEECG微云快速开发平台-表单校验组件ValidForm
开发指南专题九:JEECG微云快速开发平台表单校验组件ValidForm 10.表单校验组件ValidForm 10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Valid ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
LeaRun.net快速开发动态表单
表单,在网页技术中,主要负责数据传输,是通过浏览器或APP,显示.收集.提交信息到服务器上,如我们常用的用户注册.在线联系.在线故障受理等都是在线表单的具体应用形式. 在信息化建设过程中,存在大量前端 ...
css表单发光,表单input选中后发光CSS怎么写
表单input选中后发光CSS代码如下input{ border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; padding-left ...
html线框聚焦效果,24种表单input输入框聚焦动画特效
这是一组效果超酷的表单input输入框聚焦CSS3动画特效.这组特效共24种不同的聚焦动画效果,分为3个类别,分别是边框动画特效,背景动画特效和浮动标签动画特效. 这组输入框聚焦特效主要使用CSS3 ...
开发指南专题十：JEECG微云快速开发平台--表单校验组件ValidForm
开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...
前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...

X-editable快速编辑table表单,input,select等

X-editable

引入CDN（在核心库之后）

Bootstrap

jquery-ui

jquery

如

设置可编辑模式：内联或弹出（默认）

将 editable() 方法应用于这些元素

一个完整的例子

X-editable快速编辑table表单,input,select等相关推荐

最新文章

热门文章