照片怎样编辑文字_微信编辑文字显示全文

照片怎样编辑文字_微信编辑文字显示全文Jeditable-jQuery就地编辑插件使用jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件。(注:就地编辑,也有称即时编辑

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Jeditable – jQuery就地编辑插件使用

 
 

 jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件。(注: 就地编辑,也有称即时编辑?一般的流程是这样的,当用户点击网页上的文字时,该文字就会出现在一个编辑框中,用户对文字进行修改完成后点击提交按钮,新的文本将发送到服务器上,然后表单消失,显示最新编辑的文本。),你可以通过这个演示页面来亲自体验下。

    官网:http://www.appelsiini.net/projects/jeditable

基本的使用方法如下:

首先编辑一个 html 文件,包含这么一段:

<div class="edit" id="div_1">Dolor</div>
<div class="edit_area" id="div_2">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat.</div>

然后我们使用如下的 JS 代码来实现即时编辑(要先引入 Jeditable 插件):

$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php');
});

 

实现不同内容的编辑以及更多的定制项:

 
$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php', {
        indicator : 'Saving...',
        tooltip   : 'Click to edit...'
    });
    $('.edit_area').editable('http://www.example.com/save.php', { 
        type      : 'textarea',
        cancel    : 'Cancel',
        submit    : 'OK',
        indicator : '<img src="img/indicator.gif">',
        tooltip   : 'Click to edit...'
    });
});
 

上面的定制项包括按钮的文本,提示信息以及提交时的 loading 图片显示等等。

那么当用户点击了确定按钮时,发送到服务器上的是什么数据呢?

数据内容包含了编辑框的 ID 以及新的内容:id=elements_id&value=user_edited_content

你也可以使用下面的方法来修改默认的参数名:

$(document).ready(function() {
    $('.edit').editable('http://www.example.com/save.php', { 
        id   : 'elementid',
        name : 'newvalue'
    });
});

修改后传递的数据变成:elementid=elements_id&newvalue=user_edited_content

如果单行文本框不注意满足你的要求,可以使用 textarea 多行文本编辑框: 

 
$(document).ready(function() {
    $('.edit_area').editable('http://www.example.com/save.php', { 
        loadurl  : 'http://www.example.com/load.php',
        type    : 'textarea',
        submit  : 'OK'
    });
});
 

另外 Jeditable 还支持下拉选择框哦:

$('.editable').editable('http://www.example.com/save.php', { 
    data   : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}",
    type   : 'select',
    submit : 'OK'
});

 

或者你也可以从服务器获取下拉选择的数据内容:

 
<?php
 /* http://www.example.com/json.php */
 $array['E'] =  'Letter E'; 
 $array['F'] =  'Letter F'; 
 $array['G'] =  'Letter G'; 
 $array['selected'] =  'F';
 print json_encode($array);
?>
 

然后通过 loadurl 指定这个服务器输出数据的 URL 地址:

$('.editable').editable('http://www.example.com/save.php', { 
    loadurl : 'http://www.example.com/json.php',
    type   : 'select',
    submit : 'OK'
});

 

如果你希望给组件设定不同的样式,可以这样:

 
$('.editable').editable('http://www.example.com/save.php', { 
    cssclass : 'someclass'
});

$('.editable').editable('http://www.example.com/save.php', { 
    loadurl : 'http://www.example.com/json.php',
    type    : 'select',
    submit  : 'OK',
    style   : 'display: inline'
});  
 

或者:

$('.editable').editable('http://www.example.com/save.php', { 
    loadurl : 'http://www.example.com/json.php',
    type    : 'select',
    submit  : 'OK',
    style   : 'inherit'
});

最后来点高级的内容,如果你希望使用一个 JS 函数而不是 URL 来处理提交,可以这样:

 
$('.editable').editable(function(value, settings) { 
    console.log(this);
    console.log(value);
    console.log(settings);
    return(value);
 }, { 
    type    : 'textarea',
    submit  : 'OK',
});
 

处理回调: 

 
$('.editable').editable('http://www.example.com/save.php', { 
    type     : 'textarea',
    submit   : 'OK',
    callback : function(value, settings) {
        console.log(this);
        console.log(value);
        console.log(settings);
    }
});
 

使用附加参数:

$(".editable").editable("http://www.example.com/save.php";, {
   submitdata : {foo: "bar"};
});

 

直接从URL获取显示内容:

$(".editable").editable("http://www.example.com/save.php";, {
    loadurl : "http://www.example.com/load.php"

});

英文原文:http://www.appelsiini.net/projects/jeditable

 

作   者:孟晨 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/166791.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 龙芯CPU架构_龙芯mips架构

    龙芯CPU架构_龙芯mips架构龙芯架构龙芯指令集:CPU访存指令24个全部来自MIPSCPU算数指令(ALU)10个全部来自MIPSCPU算数指令14个全部来自MIPSCPU乘除指令12个来自MIPS12个来自龙芯(其中8个重复MIPS指令功能)CPU跳转分支指令20个全部来自MIPSCPU位移指令15个全部来自MIPSCPU特殊指令2个全部来自MIPSCPU异常指令12个全…

  • python创意小作品代码_python浪漫表白源码

    python创意小作品代码_python浪漫表白源码这篇文章主要为大家详细介绍了python实现浪漫的烟花秀,具有一定的参考价值,感兴趣的小伙伴们可以参考一下无意中看到一段用Tkinter库写的放烟花的程序,就跟着跑了一遍。设计理念:通过让画面上一个粒子分裂为X数量的粒子来模拟爆炸效果。粒子会发生“膨胀”,意思是它们会以恒速移动且相互之间的角度相等。这样就能让我们以一个向外膨胀的圆圈形式模拟出烟花绽放的画面。经过一定时间后,粒子会进入“自由落体”阶…

  • 共享打印机无法连接到打印机0x00000bcb_共享打印机错误为0X0000011b

    共享打印机无法连接到打印机0x00000bcb_共享打印机错误为0X0000011b  有不少用户遇到了网络共享打印机无法连接的问题,尤其是Win10最常遇见,打印机后提示“windows无法连接到打印机0x0000011b”错误。下面系统之家小编给大家带来0x0000011b共享打印机无法连接解决方法。一起来看看吧。  0x0000011b共享打印机无法连接解决方法  卸载补丁  打开设置——>更新和安全—->Windows更新—->“查看更新历史记录—->卸载更新  Win10更新2021年9月补丁后导致的,共享打印机.

  • mac如何使用快捷键,使得窗口最大化/最小化(完)[通俗易懂]

    mac如何使用快捷键,使得窗口最大化/最小化

  • Android N上一些新特性的介绍「建议收藏」

    Android N上一些新特性的介绍「建议收藏」byLi.zhu随着6月份google的AndroidNpreview4版本的发布,笔者也借着东风在N6P上体验了一把新系统,试玩之后认为有几点新的感受特记录之。1.分屏多任务进入后台多任务管理页面,然后按住其中一个卡片,然后向上拖动至顶部即可开启分屏多任务,支持上下分栏和左右分栏,允许拖动中间的分割线调整两个APP所占的比例。目前,AndroidN开发者

  • 几款国产开源的Windows界面库

    几款国产开源的Windows界面库vchelp2013-3-212:10:47阅读(3972)评论(0)上次介绍的几款图形界面库http://blog.okbase.net/vchelp/archive/23.html都是国外的开源项目,今天介绍的几款都是国人的开源项目,大部分是采用DirectUI设计思想。 1. 炫彩界面库XCGUI炫彩界面库不仅是界面库,它是软件界面开发框架,让用户开发

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号