Как лучше всего создать страницу с наклейками с сохраняемым и доступным содержимым?

Question

Я посмотрел на заметки с php и jquery и jStickyNote , и хотя оба выглядят довольно изящно, им не хватает некоторых элементов, которые мне нужны. Мне не удалось найти способ, позволяющий отдельным пользователям изменять созданные ими стикеры, и я не нашел хорошего способа сохранить их в своей базе данных. Я хотел бы продолжать использовать php, mysql и jquery. С первой ссылкой я подумал, что я могу просто сохранить созданное изображение в папку и сохранить URL-адрес в этой базе данных, но потом я не могу вернуться назад и позволить пользователю изменить содержимое стикера. Со второй ссылкой, похоже, вообще нет поддержки для сохранения липкой. Я также хотел бы создать функцию, в которой добавление наклеек на доску объявлений (на всеобщее обозрение) происходит случайным образом, что выглядит естественно. Есть идеи по любой из этих проблем?

Answer 1

Вот некоторый JavaScript, который должен помочь:

// Called when the edit (A) button is pressed
function edit(event, editButton)
{
    // Get existing title and change element to textarea
    var stickyTitle = $(editButton).parent().find('p.stickyTitle');
    var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
    $(textareaTitle).text(stickyTitle.html());

    // Get existing description and change element to textarea
    var stickyDescription = $(editButton).parent().find('p.stickyDescription');
    var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
    $(textareaDescription).text(stickyDescription.html());

    // Create save button
    var saveButton = $(document.createElement('div')).addClass('jSticky-create');                    

    // Add save button, then replace title, then replace description, then remove edit button
    $(editButton).before(saveButton);
    $(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
    $(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
    $(editButton).remove();

    // Set description textarea focus and set button actions
    textareaTitle.focus();
    setActions();
}

// Called when the save (tick) button is pressed
function save(event, saveButton)
{
    // Get existing title and change element to paragraph
    var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
    var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
    var newTitleValue = textareaTitle.val();
    $(stickyTitle).html(newTitleValue);

    // Get existing description and change element to paragraph
    var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
    var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
    var newDescriptionValue = textareaDescription.val();
    $(stickyDescription).html(newDescriptionValue);

    // Create edit button
    var editButton = $(document.createElement('div')).addClass('jSticky-edit');

    // Add edit button, then replace title, then replace description, then remove save button
    $(saveButton).before(editButton);
    $(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
    $(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
    $(saveButton).remove();

    // Set button actions
    setActions();

    // Add the object to the ads div
    $('#ads').append(object);

    // Update your database here
    // by calling the saveAd.php
}

function setActions()
{

    // call these after changes are made to anything
    $('.jSticky-create').unbind('click').click(function(e)
    {
        save(e, this);
    });

    $('.jSticky-edit').unbind('click').click(function(e)
    {
        edit(e, this);
    });

    $('.jSticky-delete').unbind('click').click(function(e)
    {
        remove(e, this);
    });
}

function remove(event, deleteButton)
{
    var stickyMaster = $(deleteButton).parent();
    $(stickyMaster).remove();
    //then call savead.php with delete parameter
}

Answer 2

Вы можете взглянуть на http://sticky.appspot.com - код был выпущен командой Google Appengine.

Answer 3

Извините, что не вдавался в подробности, но вы можете изменить код плагина для загрузки php-скрипта при каждом нажатии кнопки сохранения (или при перемещении блока, или даже при нажатии клавиши) с помощью $ .ajax (), передавая ему горизонтальные и вертикальные позиции и содержимое заметки (скажем, $ ("# note-content"). text ()) и сценарий подключает эти объекты в базу данных с помощью запроса MySQL. Просто сериализуйте свои данные и отправьте их. Это становится сложнее, если вы хотите, чтобы у ваших пользователей было несколько заметок, но начните с одной. Где именно ты завис? Я был бы более конкретен, но я не уверен, что вы уже знаете.

Ранее я думал о добавлении этой функции в приложение, над которым я работаю. Дело в том, что мне не нравятся эти плагины. Это должно быть очень просто, чтобы написать свой собственный, хотя. Дайте мне знать, если вам нужна помощь с чем-то конкретным.

Answer 4

Вы смотрели какой-нибудь код? Я очень быстро взглянул на jStickyNote.

По сути, «заметка» - это текстовая область в стиле css (которая окружена элементом div).

Если вы хотите, чтобы пользователи могли сохранять заметки / редактировать прошлые заметки, вот что я бы порекомендовал:

• Добавьте несколько кнопок к каждой заметке с надписью «Сохранить» или с аналогичным значением.
• Когда пользователь нажимает кнопку «Сохранить», вам нужно извлечь текст из этого конкретного элемента textarea и затем сохранить этот текст в базе данных.

С учетом вышесказанного вам, вероятно, потребуется спроектировать какую-либо базу данных с таблицей пользователей и таблицей заметок. Таблица с наклейками может иметь внешний ключ для пользовательской таблицы. Вы также захотите добавить какую-либо функцию входа в систему на свой сайт, а затем загрузить правильные заметки для аутентифицированного пользователя.

Удачи!