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的多個複選框類型

回答

相關問題