jquery便笺插件
jquery sticky notes plugin
I Use jQuery Sticky Notes Plugin http://www.jquery-sticky-notes.com/我使用 Web 服务和 ajax 将其与数据库连接 asp.net 以创建注释并编辑和删除,然后我使用 json 数组从数据库中获取注释。问题是:我无法使用数据库中的注释填充此插件它使用选项数组
jQuery(document).ready(function() {
var options = {
notes:[{"id":1,
"text":"Test Internet Explorer",
"pos_x": 50,
"pos_y": 50,
"width": 200,
"height": 200,
}]
,resizable: true
,controls: true
,editCallback: edited
,createCallback: created
,deleteCallback: deleted
,moveCallback: moved
,resizeCallback: resized
};
jQuery("#notes").stickyNotes(options);
});
注释包含注释属性,如果现在有一个注释:-如何使用此选项数组使用数据库中的注释填充此插件
尝试下面的代码,并根据代码中的注释填充数组Note
从第 3 行开始(您需要放置一个 For
循环或其他东西)。 然后将数组分配给option.notes
,如倒数第二行所示。
jQuery(document).ready(function() {
var note= new Object();
///////Populate the Notes array here
note=[{"id":1,
"text":"Sticky Text1",
"pos_x": 20,
"pos_y": 50,
"width": 200,
"height": 200,
},{"id":1,
"text":"Sticky Text 2",
"pos_x": 50,
"pos_y": 50,
"width": 200,
"height": 200,
}];
///////Populate the Notes array here
var options = {
notes:null
,resizable: true
,controls: true
,editCallback: edited
,createCallback: created
,deleteCallback: deleted
,moveCallback: moved
,resizeCallback: resized
};
options.notes=note;
jQuery("#notes").stickyNotes(options);
$(documet).ready(function () {
//calling for edit text
var edited = function (note) {
alert("Edited note with id " + note.id + ", new text is: " + note.text);
};
// calling:create new note to add it to database
var created = function (note) {
alert("Created note with id " + note.id + ", text is: " + note.text);
};
//calling to delete note from database
var deleted = function (note) {
alert("Deleted note with id " + note.id + ", text is: " + note.text);
};
//calling to update location
var moved = function (note) {
alert("Moved note with id " + note.id + ", text is: " + note.text);
};
//calling to update size
var resized = function (note) {
alert("Resized note with id " + note.id + ", text is: " + note.text);
};
$.ajax({
type: "POST",
url: "../../Services/sticky_notes.asmx/getnotes",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function suc(data, status) {
var Jnotes = $.parseJSON(data);
//i have json now how can i use it to populate option
var options = {
notes: Jnotes,
resizable: true,
controls: true,
editCallback: edited,
createCallback: created,
deleteCallback: deleted,
moveCallback: moved,
resizeCallback: resized
};
$("#notes").stickyNotes(options);
},
error: function error(request, status, error) {
csscody.alert(request.statusText);
}
});
});
相关文章:
- 如何在Angular2中使用jQuery插件
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 水平视差滚动从头开始-没有插件(jQuery)
- 什么是最好的表单元素样式库/插件(jQuery)
- 如何在Bootstrap Modal上使用Vue.js渲染插件jQuery(作为工具提示和Switchery)
- 屏蔽输入插件 jquery
- 多选插件 jquery 不适用于 javascript
- 使用验证器插件 Jquery 验证动态输入表单元素
- 如何从网格数据表插件 jQuery 中清除数据
- 插件Jquery Validation的错误消息显示不正确
- Livestamp插件Jquery-如何显示时间
- Youtube跟踪JQuery插件JQuery .tubeplayer.js
- 创建句柄特性的拖放插件- jquery
- 如何使用表排序插件- jquery搜索表中的项
- Ajax文件上传进度没有任何插件Jquery
- 航路点插件Jquery
- 在数据表插件jQuery中设置分页长度
- 如何在OpenUI5/SAPUI5中使用jQuery插件(jQuery验证引擎)
- 时钟插件 jQuery
- jQuery插件'jQuery .shuffle.js'执行排序