jquery便签插件

Posted 2023-05-09

【中文标题】jquery便签插件

【英文标题】：jquery sticky notes plugin

【发布时间】：2012-05-16 21:36:12

【问题描述】：

我使用 jQuery 便签插件http://www.jquery-sticky-notes.com/ 我使用 asp.net Web 服务和 ajax 将它与数据库连接以创建注释并编辑和删除，然后我使用 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);
        );

如果现在有一个注释，则注释包含注释属性：- 我如何使用这个选项数组使用数据库中的注释填充这个插件

【问题讨论】：

您可以将您的代码粘贴到jsfiddle.net 以及 jquery ajax 和示例 json 数组或 web 服务输出中。你使用 asp.net mvc 3 吗？

var Jnotes1 = $.parseJSON(data); var Jnotes2 =JSON.stringify(data) 你可以在这里粘贴 Jnotes2 的输出吗？

【参考方案1】：

尝试下面的代码并根据代码中的 cmets 填充 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);

【讨论】：

如果使用jquery或ajax动态添加节点会更好。

【参考方案2】：

 $(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);
                
            );
        );

【讨论】：

var Jnotes1 = $.parseJSON(data); var Jnotes2 =JSON.stringify(data) 你可以在这里粘贴 Jnotes2 的输出吗？

不要使用 $.parseJSON(data.d);它适用于一维数组。