Edited from https://github.com/timseverien/taggd
Here will only show what is add, please go to taggd to see other original usages.
這裡只說明新增的功能，其餘用法請前往 taggd 檢視。
Look at the position property, you can set individual position for every record. If not set, it will follow the rules of options. There are four choices : top, bottom, left, right.
看到新增的 position 屬性，現在可以為個別資料設定位置，如果沒有設定，則是依照 options 中的原始設定。有四個選項可以設定： top, bottom, left, right 。
var options = {
// Aligning the text popups
align: {
x: 'center', // left, center or right
y: 'top' // top, center or bottom
},
// The (relative) offset of the popups in pixels
offset: {
left: 0, // horizontal offset
top: 20 // vertical offset
}
};
var data = [
{
x: 0.35,
y: 0.4,
text: '狗狗汪汪叫'
,attributes: {
id: 'dog', // id is necessary
},
position: 'left' // top, bottom, left, right
},
{
x: 0.8,
y: 0.2,
text: '沒有指定 position, 則是依照 options 中的規則'
,attributes: {
id: 'nothing', // id is necessary
},
// If not set, it will follow the rules of options.
//position: 'right' // top, bottom, left, right
},
];
It is for update data usage.
為了更新資料需求， ID 屬性一定要填寫。
Add a method updateInfo for update data.
新增一個更新資料的方法 updateInfo
var options = {
edit: true,
align: {},
offset: {},
updateInfo : function(save_data){
alert('id : ' + save_data.id +'\ntitle : ' + save_data.title +'\nx : ' + save_data.x +'\ny : ' + save_data.y);
/*
// here you will get id, title, x, y
// new record's id will be "new"
// you should give it a unique id like below
var info = 'id='+ save_data.id
+ '&title=' + save_data.title
+ '&x=' + save_data.x
+ '&y=' + save_data.y;
$.post( '/whereYouHandleIt', info, function( return_data ) {
// update the new record's id
$.each(picTags.data, function(i, v) {
if (v.attributes.id == 'new') {
if (save_data.title == v.text) {
v.attributes = {id:return_data.info.id};
}
}
});
// remove all records not be saved
picTags.data = $.grep(picTags.data, function(v) {
return (v.attributes.id != 'new');
});
picTags.addDOM();
}, "json");
*/
}
};I remove the delete button and it have to delete manually.
// 刪除了 delete 按鈕，現在需要手動刪除，刪除的方式如下。
// delete a record manually
function delete_record(id) {
picTags.data = $.grep(picTags.data, function(v) {
return (v.attributes.id != id);
});
picTags.addDOM();
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent