저장 가능하고 검색 가능한 콘텐츠가있는 스티커 페이지를 만드는 가장 좋은 방법은 무엇입니까?

Question

저는 sticky notes with php and jquery과 jStickyNote을 보았습니다. 둘 다 꽤 멋지게 보이지만 나는 뒤늦은 몇 가지 요소가 부족합니다. 특정 사용자가 만든 스티커를 수정할 수있는 방법을 찾지 못했고 데이터베이스에 스티커를 저장하는 좋은 방법을 찾지 못했습니다. 나는, 그리고 PHP, MySQL 및 jquery를 계속 사용하고 싶습니다. 첫 번째 링크를 사용하여 만든 이미지를 폴더에 저장하고 해당 데이터베이스에 URL을 저장할 수 있다고 생각했지만 다시 돌아가서 사용자가 끈적한 내용을 변경할 수는 없습니다. 두 번째 링크를 사용하면 끈적 거리지 않는 것을지지하는 것 같지 않습니다. 또한 모든 사람들이 볼 수 있도록 메시지 보드에 스티커를 추가하는 기능을 자연스럽게 보이는 무작위로 배치하는 기능을 만들고 싶습니다. 이러한 문제들에 대한 아이디어가 있습니까?

Answer 1

은 도움이 될 몇 가지 자바 스크립트입니다. :-)

Answer 2

코드를 보았습니까? jStickyNote를 정말 빨리 살펴 보았습니다.

기본적으로 "스티커 메모"는 CSS 스타일의 텍스트 영역 (div 요소로 둘러싸인 부분)입니다.

당신은 여기에 내가 권하고 싶습니다 무엇을, 사용자가 메모지나 스티커 메모/편집을 절약 할 수있게하려면 :

• 는 "저장"말한다 또는 이와 유사한 의미를 가진 각 음에 약간의 추가 버튼을 클릭합니다.
• 사용자가 "저장"버튼을 클릭하면 특정 텍스트 영역 요소에서 텍스트를 가져 와서 해당 텍스트를 데이터베이스에 저장해야합니다.

그렇다면 아마도 사용자 테이블과 sticknote 테이블을 사용하여 일종의 데이터베이스를 설계해야 할 것입니다. sticknote 테이블은 사용자 테이블에 대한 외래 키를 가질 수 있습니다. 사이트에 일종의 로그인 기능을 추가 한 다음 인증 된 사용자에게 올바른 스티커 메모를로드 할 수도 있습니다.

행운을 빌어 요!

Answer 3

http://sticky.appspot.com을 볼 수 있습니다. 코드는 google appengine 팀에서 출시했습니다.

Answer 4

죄송합니다. 구체적인 사항은 없지만 $ .ajax()를 사용하여 저장 버튼을 클릭하거나 (상자를 이동하거나 키 업할 때마다) PHP 스크립트를로드하도록 플러그인 코드를 수정할 수 있습니다 (예를 들어, $ ("# note-content"). text())의 가로 및 세로 위치와 내용을 입력하고 MySQL 쿼리가있는 데이터베이스에 스크립트를 연결합니다. 데이터를 직렬화하고 멀리 보내십시오. 사용자가 여러 가지 노트를 가질 수 있지만 하나부터 시작하도록하려면이 작업이 더욱 복잡해집니다. 어디서 전화 끊었 니? 나는 더 구체적 일지 모르지만 당신이 이미 알고있는 것이 확실하지 않습니다.

내가 일하고있는 앱에이 기능을 추가하는 것에 대해 이전에 생각하고있었습니다. 것은, 나는 그 플러그인을 좋아하지 않는다. 자신의 글을 쓰는 것은 매우 간단해야합니다. 구체적으로 도움이 필요한 경우 알려주십시오.

// 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 
}