Iron Man Day 25 - X-editable

by Sheng Huang Huang

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<p>
<a href="#" id="username" data-type="text" data-url="https://jsonplaceholder.typicode.com/posts" data-title="請輸入文字"></a>
</p>
<p>
<a href="#" id="sex"></a>
</p>

CSS

body {
  margin: 100px;
}

JavaScript

$.fn.editable.defaults.mode = 'inline';
$.fn.editable.defaults.emptytext = '點我加入資料';

$(document).ready(function() {
    $('#username').editable();
    
    $('#sex').editable({
      type: 'select',
      value: 'M',
      source: [
      	{value: 'M', text: 'Male'},
        {value: 'F', text: 'Female'}
      ],
      mode: 'popup'
    });
});