Jeditable的多个复选框类型

我在页面上进行了一些就地编辑时使用了出色的jEditable插件。有一个地方需要多个复选框元素。是否有jEditable插件允许我这样做？Jeditable的多个复选框类型

我需要一个新类型来满足我的一个需求：可以称为“复选框”的多选框类型。

当编辑字段键入“复选框”时，会出现一个复选框列表，允许用户选择多个选项。保存会返回一个数组，并且update.php会将这个数组存储在我的数据库中。

如：

<div style="border:red 1px solid;" class="editable"> this is test !</div>

点击格后，格的内容应该是这样的： enter image description here

我不想多选，如：http://i.stack.imgur.com/lANX1.png

任何帮助或建议将非常感谢！

来源

2013-12-23 Fresh Lover

下面的代码可能会帮助........

为此，我们需要两个JavaScript， 1）jQuery的1.9.1.js或任何 2）jquery.jeditable.js

<html> 
<head> 
    <title>Hello!!!</title> 

    <script src="js/jquery-1.9.1.js"></script> 
    <script src="js/jquery.jeditable.js"></script> 

    <script type="text/javascript"> 
    $.editable.addInputType('checkbox', { 
     element: function(settings, original) { 
      $(this).append('<input type="checkbox" id="check1_" name="check" value="OTCS" /> OTCS'); 
      $(this).append('<input type="checkbox" id="check2_" name="check" value="OCJ" /> OCJ'); 
      $(this).append('<input type="checkbox" id="check3_" name="check" value="OCAD" /> OCAD'); 
      $(this).append('<input type="checkbox" id="check4_" name="check" value="OCB" /> OCB'); 
      $(this).append('<input type="checkbox" id="check5_" name="check" value="ZINZENDORF" /> ZINZENDORF'); 
      $(this).append('<input type="checkbox" id="check6_" name="check" value="Others" /> Others'); 
      var hidden = $('<input type="hidden"/>'); 
      $(this).append(hidden); 
      return(hidden); 
     }, 
     submit: function (settings, original) { 
      //some code 
     }, 
     content: function(string, settings, original) { 
      //some code 
     } 
    }); 

    $(document).ready(function() { 
     $('#cb').editable('www.some.com/some.php',{ 
      indicator: '<img src="img/indicator.gif">', 
     tooltip: 'Click to select', 
     loadtext: 'loading...', 
     type: 'checkbox', 
      onblur: 'submit', 
      cancel: 'Cancel', 
      submit: 'OK' 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <h1>Hello!</h1> 

    <div style="border:red 1px solid;" id="cb"> Click me to turn in CheckBox....... </div> 
</body>

First

After

来源

2014-02-23 19:04:54 Sheel

Jeditable的多个复选框类型

回答

相关问题