带有html的JavaScript的粘滞便笺

问题描述 投票:1回答:1
(function ($) {

    $.fn.stickynote = function (options) {
        var opts = $.extend({}, $.fn.stickynote.defaults, options);
        return this.each(function () {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            switch (o.event) {
                /*case 'dblclick':
                    $this.dblclick(function(e){$.fn.stickynote.createNote(o);})
                    break;*/
                case 'click':
                    $this.click(function (e) {
                        $.fn.stickynote.createNote(o);
                    })

                    break;
            }
        });
    };
    $.fn.stickynote.defaults = {
        size: 'large',
        event: 'click',
        color: '#FF0000',


    };
    $.fn.stickynote.createNote = function (o) {
        //o.preventDefault();
        var _note_content = $(document.createElement('textarea'));
        var _div_note = $(document.createElement('div'))
            .addClass('jStickyNote')
            .css('cursor', 'move');
        if (!o.text) {

            _div_note.append(_note_content);
            var _div_create = $(document.createElement('div'))
                .addClass('jSticky-create');
            /*.attr('title','Create Sticky Note');*/

            _div_create.mouseup(function (e) {
                var _p_note_text = $(document.createElement('p'))
                    .css('color', o.color)
                    .html(
                $(this)
                    .parent()
                    .find('textarea')
                    .val());
                $(this)
                    .parent()
                    .find('textarea')
                    .before(_p_note_text)
                    .remove();

                $(this).remove();

            })

        } else _div_note.append('<p style="color:' + o.color + '">' + o.text + '</p>');

        var _div_delete = $(document.createElement('div'))
            .addClass('jSticky-delete');

        _div_delete.mouseup(function (e) {
            $(this).parent().remove();
        })

        var _div_wrap = $(document.createElement('div'))
            .css({
            'position': 'absolute',
            'top': '0',
            'right': '0'
        })
            .append(_div_note)
            .append(_div_delete)
            .append(_div_create);

        switch (o.size) {
            case 'large':
                _div_wrap.addClass('jSticky-large');
                break;
            case 'small':
                _div_wrap.addClass('jSticky-medium');
                break;
        }
        if (o.containment) {
            _div_wrap.draggable({
                containment: '#' + o.containment,
                scroll: false,
                start: function (event, ui) {
                    if (o.ontop) $(this).parent().append($(this));
                }
            });
        } else {
            _div_wrap.draggable({
                scroll: false,
                start: function (event, ui) {
                    if (o.ontop) $(this).parent().append($(this));
                }
            });
        }
        $('#content').append(_div_wrap);

    };
})(jQuery);

我正在开发一个stickynote插件,但无法将其作为可调整大小的。

此代码中可以做些什么以使其可调整大小?

[当我不使用CSS时,此粘滞便会被调整大小,但是当我这样做时,它的未调整会变大小。

此外,如何在不使用id属性的情况下调用此函数,我不希望在任何地方对其进行硬编码。

例如,在此示例中,我使用id testsmall进行了调用,但我不想这样做,并且我想通过HTML按钮将其作为onclick事件来调用。

javascript jquery
1个回答
0
投票
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="typescript.css" />

</head>
<body>

 <div class="page">
    <div class="topOfPage"><div class="addButton"  id="addButton"></div>
    <div class="minimizebutton"></div>
    <div class="setting"></div>
    <div class="cancelAll"></div></div>
    <h2>STICKY NOTES</h2>
    <div class="searchingClass">
        <div>
            <input type="text" class="searchKey" id="searchKey"  placeholder="Search...">
        </div>
        <div class="searchType">
        <select name="searchDropDown " class="check " id="check">
        <option value="contains"  id="check1" class="check">Contains  </option>
        <option value="startsWith"id="check2" class="check"selected="selected">StartsWith</option>
            </select>
        </div>
    </div>
    <div id="noteArea" class="noteArea" ></div>
    <div id="emptyNote" class="emptyNote"></div>
    <div class="option" id="option">
        <div><button class="optionbutton" id="deleted" >Delete note</button></div>
        <div><button  class="optionbutton" id="open">Open note </button></div>
    </div>
    </div>
    <div id="myModal" class="modal">
    <div class="modal-Content">
        <div><span class="close">&times;</span></div>
        <div><div><textarea class="textArea" id="textArea" contenteditable="true" rows="8" cols="59" 
   placeholder="Take a note..."></textarea></div>
        <div><button class="button" type="button" id="okTextArea" disabled="disable">Ok</button>
        <button class="button" type="button" id="boldContent"> B</button>
        <button  class="button" type="button" id="cancelTextArea">Cancel</button></div></div><br>
    </div>
 </div>
 <div class="editBody" id="editBody">
    <div class="editBody-Content">
         <textarea id="EditTextArea" rows="8" cols="59"></textarea><br>
         <button class="button" id="okEditBody" >OKAY</button>
    </div>
 </div>
 <div class="searchEmpty"></div>
 <div class="minimize"><div class="maxButton"></div></div>

 <script src="typescript.js"></script>
 </body>

</html>


//typescript.
let modal: HTMLInputElement = <HTMLInputElement>document.getElementById("myModal");
let okTextArea: HTMLInputElement = <HTMLInputElement>document.getElementById('okTextArea');
let textArea:HTMLInputElement = <HTMLInputElement>document.getElementById("textArea");
let EditTextArea:HTMLInputElement = <HTMLInputElement>document.getElementById("EditTextArea");
let noteArea:HTMLInputElement= <HTMLInputElement> document.getElementById('noteArea');
let editBody:HTMLInputElement =  <HTMLInputElement>document.getElementById("editBody");
let searchKey:any = document.getElementById('searchKey');
let okEditBody:HTMLInputElement =  <HTMLInputElement>document.getElementById("okEditBody");
let emptyNote:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("emptyNote")[0];
let searchEmpty=<HTMLInputElement>document.getElementsByClassName("searchEmpty")[0];
let thisTarget: any;
let inputArray:Storage = localStorage.getItem('local') ? 
JSON.parse(localStorage.getItem('local')|| '{}') : [];
let option:HTMLInputElement =<HTMLInputElement>document.getElementById('option');

 //modal popup
class Modal{    
modalOpen():void{
    modal.style.display = "block";
}
modalClose():void{
    modal.style.display = "none";
    textArea.value = "";
}
}


 class AllOperation extends Modal{

      okSubmission():void{  

      if (textArea.value === "") {okTextArea.disabled = true; }
      else{
      let division:HTMLElement = document.createElement('ARTICLE');
      division.setAttribute('class', 'tile'); 
      let textValue:Text =document.createTextNode(textArea.value);
      division.appendChild(textValue);
      noteArea.appendChild(division);
      inputArray.push(textArea.value);
      localStorage.setItem('local', JSON.stringify(inputArray));
      textArea.value = "";
      /*let dateDiv = document.createElement('div');
      dateDiv.setAttribute('class', 'dateDiv');
      division.appendChild(dateDiv);
      let dateValue = new Date();
      let date:any = dateValue.getDate();
      let month:any = dateValue.getMonth() + 1;
      let year:any = dateValue.getFullYear();
      let dateDivVal:any = (date + "/" + month + "/" + year);
      let dateDivValue = document.createTextNode(dateDivVal);
      dateDiv.appendChild(dateDivValue);*/
      }     
}
okDisable():void{
    if (textArea.value !== '') {okTextArea.disabled = false;}
}   
deleteDivision():void{
        let deleteinformation=confirm("do you want to delete?");
        if(deleteinformation==true){
        thisTarget.parentNode.removeChild(thisTarget);
        localStorage.clear();
        var element = inputArray.indexOf(thisTarget.innerText);
        inputArray.splice(element, 1);      
        if (noteArea != null) {
            window.localStorage.setItem('local', JSON.stringify(inputArray));
        }
         emptyNote.style.display = "none";
         if (noteArea.innerText == "") { emptyNote.style.display = "block";}
        }
}
openDivision():void{
        editBody.style.display = "block";
        EditTextArea.value = thisTarget.innerHTML;
        thisTarget.setAttribute("class", "fold tile");
}
editText():void{
        thisTarget.parentNode.removeChild(thisTarget);
        if (EditTextArea.value === "") {okEditBody.disabled = true;}
        else{
        editBody.style.display = 'none';
        let notes:HTMLElement = document.createElement('DIV');
        notes.setAttribute('class', 'editnotes'); 
        let division:HTMLElement =document.createElement('DIV');
        division.setAttribute('class', 'tile'); 
        let textValue:Text =document.createTextNode(EditTextArea.value);
        division.appendChild(textValue);
        noteArea.appendChild(division);
        let temp:Text=thisTarget.innerText;
        var element = inputArray.indexOf(thisTarget.innerText);
        inputArray.splice(element, 1);  
        inputArray.push(EditTextArea.value);    
        localStorage.setItem('local', JSON.stringify(inputArray));
        }
}
okEditDisable():void{
        if (EditTextArea.value !== '') {okEditBody.disabled = false;}
}

}

class LocalStorageCls {
using():void {
    let div:any = JSON.parse(localStorage.getItem('local') || '{}');
    for (var i = 0; i < inputArray.length; i++) {
        let division:HTMLElement = document.createElement('DIV');
        division.setAttribute('class', 'tile');
        division.innerHTML = div[i];
        noteArea.appendChild(division);
    }
}
localStorageFun():void{
    if(localStorage["local"]) {
        this.using();   
   }
  }
  }

 class OptionOfTile{
showOption(event:MouseEvent) {
      thisTarget = event.target;
      event.preventDefault();
      option.style.display = 'block';
      option.style.left = event.clientX + 'px';
      option.style.top = event.clientY + 'px';
      return false;
    }

hideOption():void {
        option.style.display = 'none';
    }
 }

 class SearchContent extends LocalStorageCls{
 search():void {
        if (noteArea == null) {
            this.using();
        }

  let searchKey:string = (document.getElementById('searchKey')as HTMLInputElement).value;
  searchKey = searchKey.toLowerCase();
  let searchContent = noteArea.childNodes as unknown as HTMLCollectionOf<HTMLElement>;            
  let check:HTMLSelectElement = (document.getElementById('check')as HTMLSelectElement);
  let value1:string = check.options[check.selectedIndex].value;
  let value:string=value1!;
        if(value == "contains"){
            for (let i = 0; i < searchContent.length+1; i++) {
                    searchEmpty.style.display = "none";
                    if (noteArea.innerText == "") { searchEmpty.style.display = "block";}
                    if (!searchContent[i].innerText.toLowerCase().includes(searchKey)) {
                        searchContent[i].style.display = 'none';
                    } else {
                        searchContent[i].style.display = 'block';
                    }
                }
        }

        else if(value == "startsWith"){
            for (let i = 0; i < searchContent.length+1; i++) {
                    searchEmpty.style.display = "none";
                    if (noteArea.innerText == "") { searchEmpty.style.display = "block";}
                    var data = searchContent[i].innerText.substring(0, searchKey.length);
                    if (searchKey != data.toLowerCase()) {
                        searchContent[i].style.display = 'none';
                    }
                    else {
                        searchContent[i].style.display = 'block';
                    }

             }
        }       
    }
  }

  window.onload = () => {
emptyNote.style.display = "none";
if (noteArea.innerText == "") { emptyNote.style.display = "block";}
};

let addButton:HTMLInputElement=<HTMLInputElement>document.getElementById("addButton");  
let span:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("close")[0];
let cancelTextArea:HTMLInputElement=<HTMLInputElement>document.getElementById("cancelTextArea");
let modalObj=new Modal();       
    addButton.onclick = function() {  
    modalObj.modalOpen();  
    }
    span.onclick = function() {  
    modalObj.modalClose();  
    }  
    cancelTextArea.onclick=function(){
    modalObj.modalClose();
    }
let deletebutton:HTMLInputElement=<HTMLInputElement>document.getElementById("deleted"); 
let openbutton:HTMLInputElement=<HTMLInputElement>document.getElementById("open");
let boldContent:HTMLInputElement=<HTMLInputElement>document.getElementById("boldContent");
let allobject = new AllOperation();
      okTextArea.onclick=function(){
          allobject.okSubmission();
          emptyNote.style.display = "none";
          searchEmpty.style.display = "none";
          allobject.modalClose();
    }
       textArea.onkeydown=function(){
           allobject.okDisable();
    }
        EditTextArea.onkeydown=function(){
            allobject.okEditDisable();
    }   
        boldContent.onclick=function(){
            textArea.onkeypress=function(){
            textArea.style.fontWeight="italics";
            }
    }
       deletebutton.onclick = function () {

           allobject.deleteDivision();
    }
       openbutton.onclick=function(){
           allobject.openDivision();
    }
       okEditBody.onclick=function(){
           allobject.editText();
    } 
let localobject=new LocalStorageCls();
localobject.localStorageFun();  
let optionOfTileobject=new OptionOfTile();
       noteArea.addEventListener('contextmenu', function (event:MouseEvent) {
           optionOfTileobject.showOption(event);
    });
     window.onclick=function(){
            optionOfTileobject.hideOption();
    }
let searchContentobject=new SearchContent();
        searchKey.onkeyup=function(){
            setTimeout(function(){
            searchContentobject.search();
            },2000);  

    }
let cancelAll:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("cancelAll")[0];
let page:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("page")[0];
        cancelAll.onclick=function(){
            page.style.display="none";
    }
let minimizebutton =  <HTMLInputElement>document.getElementsByClassName("minimizebutton")[0];
let minimize:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("minimize")[0];
let maxButton:HTMLInputElement =  <HTMLInputElement>document.getElementsByClassName("maxButton")[0];
        minimizebutton.onclick=function(){
            page.style.display="none";
            minimize.style.display="block";
            emptyNote.style.display="none";
            searchEmpty.style.display="none";
    }
        maxButton.onclick=function(){
            page.style.display="block";
            minimize.style.display="none";
            emptyNote.style.display="none";
            searchEmpty.style.display="none";
    }
© www.soinside.com 2019 - 2024. All rights reserved.