`
wbfsa
  • 浏览: 5844 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

基于jq的编辑插件singleEdit

阅读更多

前段时间遇到网站整顿,singleEdit主页一直无法打开,现在恢复正常,请大家继续支持!

 

 

  • 目前支持8种编辑方式
  • 身份证,email等31种自带验证模式
  • 验证模式可以自行添加修改
  • ajax无刷新保存数据
  • 数据联动更新
  • 自定义更换皮肤
  • 全部主流浏览器支持
  •  

     

    目前更新至1.0.3版本!

    需要引入的文件

    必需

    • jquery.latestVersion.js(jquery框架最新版本)
    • jquery.singleEdit.js(插件主要文件)
    • lang/singleEdit_zh-cn.js(语言文件包)
    • theme/singleEdit.css(样式文件)

    可选

    • plugins/formValidatorRegex.js(客户端数据验证插件,如果需要执行数据验证功能请引入此插件)
    • plugins/wbfsaTextAreaEncode.js(文本域输入编辑插件,如果需要文本域编辑功能请引入此插件,此插件的功能为转换textarea输入中的/n/r换行符为)
    • calender/WdatePicker.js(日历调用)
    • rater/jquery.rater.js(评分调用)

     



     

     代码:

    $(function() {
     
                $(".example").singleEdit({
                    data: { textbox: "(请点击我)"},//设置编辑对象的值,也可以在对象内直接赋值
                    main: [
                     { id: "textbox", type: "textbox" }//id对应要编辑的对象,type设置编辑方式
                    ]
                });     
             });
    

     

     

     



     

     

    $(function() {
                $(".example").singleEdit({
                    data: { key: "(请点击我)"},//设置编辑对象的值
                    main: [
                     { id: "key", type: "keyboard" }//id对应要编辑的对象,type设置编辑方式
                    ]
                });     
             });
    

     

     

     



     

    $(function() {
                $(".example").singleEdit({
                    selection: [
                    { id: "ch", item: [{ zID: 0, zname: "(请点击我)" }, { zID: 1, zname: "多选框选项1" }, { zID: 2, zname: "多选框选项2" }, { zID: 3, zname: "多选框选项3"}] }//设置选项,id对应main中的id
                    ],
                    data: { ch: 0},//接受一个“0|1|2”类似的字符串
                    main: [
                     { id: "ch", type: "check" }//id对应要编辑的对象,type设置编辑方式
                    ]
                });     
             });
    

     

     

     



     目前支持8种编辑方式。

     

    下载地址:http://plugins.jquery.com/project/SingleEdit

     

    演示:http://www.wbfsaworkstation.com.cn

     

    • 描述: 文本框编辑
    • 大小: 3 KB
    • 描述: 键盘编辑
    • 大小: 11.4 KB
    • 描述: 复选框编辑
    • 大小: 6.3 KB
    • 大小: 29.7 KB
    分享到:
    评论
    34 楼 静静的天空 2010-10-25  
    楼主网站打不开了,而且Google和jQuery里全是1.0.0版的。
    33 楼 kjj 2010-01-13  
    不错,不知道日历控件有没有计划加上农历的!!
    32 楼 vvnet 2009-12-10  
    8错,试用中
    31 楼 loess 2009-12-07  
    写的不错,我推荐给我们的开发
    30 楼 rplees 2009-12-06  
    适用下,感觉很不错。
    29 楼 szwx855 2009-12-06  
    呵呵,蛮好的一个插件,谢谢LZ,收藏了。
    28 楼 daxiong921 2009-12-06  
    好东西,收藏了~
    27 楼 wbfsa 2009-12-03  
    习惯在马桶上思考 写道
    看了.但在想一个问题.这些组件写得不错,但实用性强吗?有些东西或许用标签与数据库进行动态交互很简单.到这里反而变得复杂了,比较复选框的使用,下拉列表的使用等.而且很多标签大部分程序员都已经很习惯了它的用法了,改用这个,很多程序员要去学习它的用法.又凭什么感觉这些组件会有市场呢?


    恩 说得很好,有思维碰撞才能产生火花。我来说说我的看法
    我开发这个组件最初是为了配合我的项目,我的项目是一个营销管理系统,要构建一个客户的详细信息页面,这个页面包含80个与该客户相关的信息字段,首先这80个字段不可能一次性提交更新,所以编辑一个更新一个是不错的方案;其次绑定数据和做客户端验证非常麻烦,做好了这些往往导致前台布局凌乱不堪。所以我想到要做这样一个插件来弥补这些不足。 可能对于统一页面10个以下字段的更新不能体现出他的优势,但是一个页面上存在的需要更新字段越多,就越能体现singleEditde的优势。
    它的使用是非常简单的!你看看我的教程,就会知道。
    目前它的功能还在不断加强!也请你继续关注它的发展
    26 楼 习惯在马桶上思考 2009-12-03  
    看了.但在想一个问题.这些组件写得不错,但实用性强吗?有些东西或许用标签与数据库进行动态交互很简单.到这里反而变得复杂了,比较复选框的使用,下拉列表的使用等.而且很多标签大部分程序员都已经很习惯了它的用法了,改用这个,很多程序员要去学习它的用法.又凭什么感觉这些组件会有市场呢?
    25 楼 wbfsa 2009-12-02  
    liaodanz 写道
    那反选功能基本用不上,不要最好。画蛇添足~~~


    朋友如果选项过多,就会凸显出他的用途了~~
    24 楼 liaodanz 2009-12-02  
    那反选功能基本用不上,不要最好。画蛇添足~~~
    23 楼 wbfsa 2009-12-02  
    ycfdonews 写道
    "文本域输入编辑",如果内容很多的时候,界面就被撑开了,如果能显示一部分,多余部分用省略号代替会好些


    下次改动会加入针对文本域的文字计数功能和省略功能的!谢谢建议哈
    22 楼 wbfsa 2009-12-02  
    cdefg198 写道
    lz,这个写得不错,时间控件不够齐全,这个实用性怎么样呢?


    是指属性暴露得不够多吗?
    21 楼 zenggang2008 2009-12-02  
    开源的啊,楼主精神可嘉,希望下个项目能用上楼主的控件,真的很棒
    20 楼 ycfdonews 2009-12-02  
    "文本域输入编辑",如果内容很多的时候,界面就被撑开了,如果能显示一部分,多余部分用省略号代替会好些
    19 楼 cdefg198 2009-12-02  
    lz,这个写得不错,时间控件不够齐全,这个实用性怎么样呢?
    18 楼 wbfsa 2009-12-02  
    jejwe 写道
    wbfsa 写道
    akunamotata 写道
    很棒的插件,要是再多点功能就好了

    功能还会完善的,内核已经写好了,就等着扩展了~~呵呵
    最终目的是应用于表格的编辑

    适合来做自定义表单


    其实我最初开发它的目的就是快捷的生成一个关于客户详细信息的页面,页面中实现客户数据的更新,我已经把它用到自己的项目中了,开发速度确实快捷了许多,而且代码比起以前工整了许多。

    可是自从我看到http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html 这个yahoo的表格之后,发现singleEdit用在表格编辑方面也未尝不可。不过现在还在处于完善阶段。请继续关注singleEdit。各位宝贵的意见是我更新的动力。
    17 楼 jejwe 2009-12-01  
    wbfsa 写道
    akunamotata 写道
    很棒的插件,要是再多点功能就好了

    功能还会完善的,内核已经写好了,就等着扩展了~~呵呵
    最终目的是应用于表格的编辑

    适合来做自定义表单
    16 楼 wbfsa 2009-12-01  
    aystnd 写道
    好像不支持按esc键取消功能,我觉得这个很有必要加上


    这个很实用
    15 楼 aystnd 2009-12-01  
    好像不支持按esc键取消功能,我觉得这个很有必要加上

    相关推荐

      jq 双日历插件

      jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...

      jqui插件下载

      Jqui插件是基于jQuery UI库的扩展,用于增强网页的交互性和视觉效果。jQuery UI是一个功能丰富的开源JavaScript库,提供了各种用户界面组件,如拖放功能、对话框、滑块、日期选择器等。本压缩包提供的"jqui插件"可能...

      jq富文本插件编辑器

      【jq富文本插件编辑器】是一款用于...总的来说,这款jq富文本插件编辑器结合jQuery和LayUI,为开发者提供了一种简单易用的方法来实现网页的文本编辑功能,无论是框架还是原生环境,都能轻松集成,提升项目的用户体验。

      基于jq的视频查看插件

      基于jq的视频查看插件,默认全屏播放, 使用时,先加载视频路径( var video_src = getParamFromHref("src") $('.zy_media').append(`视频"}'> ${video_src}" type="video/mp4"> 您的浏览器不支持HTML5视频 ...

      jq图表插件

      "jq图表插件"是一种基于JavaScript库jQuery的可视化图表工具,它使得在网页上创建交互式图表变得简单易行。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,而jq图表插件则在此基础上...

      分页插件--基于jq编写的分页插件

      本文将详细介绍一个基于jQuery编写的分页插件,以及如何利用这个插件快速实现网页的分页功能。 分页插件的核心目标是提供一种简单、易用的方式来将大量数据分割成多页,允许用户通过点击页码或导航按钮来浏览数据的...

      图片查看 -jq插件

      首先,我们来看“jQueryViewer”这个文件名,这很可能是一个基于jQuery的图片查看器插件。这种插件通常包含JavaScript文件和可能的CSS样式文件,用于增强网页中图片的显示和交互体验。开发者可以轻松地将这些功能...

      基于jq的分页插件,简单易用。代码未压缩

      基于jq的分页插件,简单易用。 $(function () { $("#page").initPage({ maxPage: 5, //最大显示数 pageCount: 7, //总页数 callBack: function (data) { //点击页码回调,data是页码 } }); }); 插件代码未...

      基于JQ插件的把文本内容中表情符号替换为表情图标

      本文将详细探讨一个基于jQuery(JQ)的插件,该插件能够将文本中的表情符号转换为实际的表情图标,从而提供更加生动、直观的用户体验。 首先,我们要理解JQ插件的工作原理。jQuery是一个轻量级的JavaScript库,它...

      jq 弹窗插件

      "jq 弹窗插件"是基于jQuery的一个功能组件,主要用于创建提示框和对话框,使得开发者能够方便地在网页上实现各种交互式弹出窗口。 这个插件的核心特点在于它的高效性和易用性。"一次载入,多次调用"意味着只需在...

      JQ的分页插件

      JQ的分页插件是一种高效的解决方案,它能够帮助开发者轻松实现网页内容的分页显示,提升用户体验。本资源包含了一系列必要的文件,用于演示如何使用这个插件。 首先,我们来看`pagination.css`文件,这是一个CSS...

      JQ jQuery插件如何开发

      本篇文章将详细讲解如何开发一个jQuery插件,以帮助开发者扩展jQuery的功能,提升项目的可维护性和复用性。 首先,让我们理解jQuery插件的基本结构。一个简单的jQuery插件通常由一个函数定义,该函数接收一个jQuery...

      基于jQuery的倒计时插件

      本文将深入探讨基于jQuery的倒计时插件的实现原理、关键代码解析以及如何进行自定义扩展。 ### 一、基础原理 倒计时的核心思想是通过计算当前时间与目标时间之间的差值,并以秒或毫秒为单位进行递减,直至达到零。...

      基于Jq的热力图插件

      本主题关注的是一个基于jQuery和heatmap.js的热力图插件,它提供了一种简便的方式来在网页上集成热力图功能。 jQuery是一款轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画制作和Ajax交互。它使得...

      最优秀的50个JQ插件

      18. **Draggable & Droppable插件**:实现拖拽功能,适用于布局编辑或文件上传等场景。 19. **Calendar插件**:除了基本的日历功能外,还可以添加事件提醒等高级功能。 20. **Video Player插件**:提供视频播放...

      JQ 插件简单实用步骤条

      "JQ插件简单实用步骤条"是一个利用jQuery来创建的用户界面组件,主要用于指导用户按照一系列步骤完成任务,常见于表单提交、注册流程或者多步骤购物体验等场景。这个插件为开发者提供了一个方便、直观的方式来展示和...

      基于jq+htmlde库存日历插件

      【基于jq+htmlde库存日历插件】是一款在网页应用中用于管理库存时间的交互式日历组件。它结合了jQuery(jq)的高效DOM操作能力和HTML5(htmlde)的新特性,为开发者提供了一个轻量级且功能丰富的解决方案。这款插件...

      JQ第三方分享插件+可自定义链接、标题

      "JQ第三方分享插件+可自定义链接、标题"这个标题揭示了一个基于jQuery的第三方分享工具,它允许开发者方便地在他们的H5页面上实现社交分享功能,并且可以定制分享的链接和标题,以满足不同场景的需求。 jQuery是一...

      基于jquery的日历日程插件

      **基于jQuery的日历日程插件** 在Web开发中,日历日程插件是不可或缺的一部分,它们为用户提供了直观的界面,用于管理任务、安排会议或者查看日期相关的事件。"基于jQuery的日历日程插件"就是这样一个工具,它结合...

      JQ插件第五十六:17种翻页插件

      "JQ插件第五十六:17种翻页插件"是一个专门解决这个问题的jQuery插件,它提供了丰富的翻页解决方案,适应多种不同的应用场景。 这个插件的核心在于它的灵活性和易用性。只需要提供记录总数、URL以及是否使用AJAX...

    Global site tag (gtag.js) - Google Analytics