2017-07-20 12 views
2

でSweetAlert2を使用して、それは私がしかし、それは約束の代わりにコールバックを使用してVISされ、その新機能を利用するためにSweetAlert2を使用していたSweetAlert<a href="http://visjs.org/" rel="nofollow noreferrer">vis.js</a>の項目を編集可能にするにはvis.js

で大丈夫だったコールバックを使用しています。コールバックを使用してjs!

onAdd: function (item, callback) { 
     prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) { 
     if (value) { 
      item.content = value; 
      callback(item); // send back adjusted new item 
     } 
     else { 
      callback(null); // cancel item creation 
     } 
     }); 
    }, 

function prettyPrompt(title, text, inputValue, callback) { 
    swal({ 
     title: title, 
     text: text, 
     type: 'input', 
     showCancelButton: true, 
     inputValue: inputValue 
    }, callback); 
    } 

それでは、どのようSweetAlert2を使用するために、これを変更するには、次のプロンプトのためSweetAlertを呼び出すvis.js 137に

ライン47 57およびライン129へ:ここ

http://visjs.org/examples/timeline/editing/editingItemsCallbacks.htmlから取られたサンプルコードのですか?

答えて

1

ここに行く:

var items = new vis.DataSet([ 
 
    {id: 1, content: 'item 1', start: new Date(2013, 3, 20)} 
 
]); 
 

 
var min = new Date(2013, 3, 1); // 1 april 
 
var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april 
 

 
var container = document.getElementById('visualization'); 
 
var options = { 
 
    editable: true, 
 

 
    onAdd: function (item, callback) { 
 
    swal({ 
 
     title: 'Add item', 
 
     text: 'Enter text content for new item:', 
 
     input: 'text', 
 
     inputValue: item.content 
 
    }).then(function(result) { 
 
     if (result.value) { 
 
     item.content = result.value; 
 
     callback(item); // send back adjusted new item 
 
     } 
 
    }); 
 
    } 
 
}; 
 
var timeline = new vis.Timeline(container, items, options);
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.css" rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.js"></script> 
 

 
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script> 
 

 
<div id="visualization"></div>

関連する問題