(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事件调用。 最佳答案
<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">×</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";
}