我想知道如何创建充当待办事项列表的WordPress插件?
我是WordPress的新手,我想像WordPress插件一样创建一个待办事项列表:
def foo(varA, varB):
if not (varA or varB):
return False
if varA:
for test1 in test2:
# Perform Action A
if varB:
for test1 in test2:
# Perform Action B
return True
//Document is the DOM can be accessed in the console with document.window.
// Tree is from the top, html, body, p etc.
//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.
//Event handling, uder interaction is what starts the code execution.
var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incomplete-tasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks
//New task list item
var createNewTaskElement=function(taskString){
var listItem=document.createElement("li");
//input (checkbox)
var checkBox=document.createElement("input");//checkbx
//label
var label=document.createElement("label");//label
//input (text)
var editInput=document.createElement("input");//text
//button.edit
var editButton=document.createElement("button");//edit button
//button.delete
var deleteButton=document.createElement("button");//delete button
label.innerText=taskString;
//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";
editButton.innerText="Edit";//innerText encodes special characters, HTML does not.
editButton.className="edit";
deleteButton.innerText="Delete";
deleteButton.className="delete";
//and appending.
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
return listItem;
}
var addTask=function(){
console.log("Add Task...");
//Create a new list item with the text from the #new-task:
var listItem=createNewTaskElement(taskInput.value);
//Append listItem to incompleteTaskHolder
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
taskInput.value="";
}
//Edit an existing task.
var editTask=function(){
console.log("Edit Task...");
console.log("Change 'edit' to 'save'");
var listItem=this.parentNode;
var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var containsClass=listItem.classList.contains("editMode");
//If class of the parent is .editmode
if(containsClass){
//switch to .editmode
//label becomes the inputs value.
label.innerText=editInput.value;
}else{
editInput.value=label.innerText;
}
//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
}
//Delete task.
var deleteTask=function(){
console.log("Delete Task...");
var listItem=this.parentNode;
var ul=listItem.parentNode;
//Remove the parent list item from the ul.
ul.removeChild(listItem);
}
//Mark task completed
var taskCompleted=function(){
console.log("Complete Task...");
//Append the task list item to the #completed-tasks
var listItem=this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
}
var taskIncomplete=function(){
console.log("Incomplete Task...");
//Mark task as incomplete.
//When the checkbox is unchecked
//Append the task list item to the #incomplete-tasks.
var listItem=this.parentNode;
incompleteTaskHolder.appendChild(listItem);
bindTaskEvents(listItem,taskCompleted);
}
var ajaxRequest=function(){
console.log("AJAX Request");
}
//The glue to hold it all together.
//Set the click handler to the addTask function.
addButton.onclick=addTask;
addButton.addEventListener("click",addTask);
addButton.addEventListener("click",ajaxRequest);
var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
var checkBox=taskListItem.querySelector("input[type=checkbox]");
var editButton=taskListItem.querySelector("button.edit");
var deleteButton=taskListItem.querySelector("button.delete");
//Bind editTask to edit button.
editButton.onclick=editTask;
//Bind deleteTask to delete button.
deleteButton.onclick=deleteTask;
//Bind taskCompleted to checkBoxEventHandler.
checkBox.onchange=checkBoxEventHandler;
}
//cycle over incompleteTaskHolder ul list items
//for each list item
for (var i=0; i<incompleteTaskHolder.children.length;i++){
//bind events to list items chldren(tasksCompleted)
bindTaskEvents(incompleteTaskHolder.children[i],taskCompleted);
}
//cycle over completedTasksHolder ul list items
for (var i=0; i<completedTasksHolder.children.length;i++){
//bind events to list items chldren(tasksIncompleted)
bindTaskEvents(completedTasksHolder.children[i],taskIncomplete);
}
// Issues with usabiliy don't get seen until they are in front of a human tester.
//prevent creation of empty tasks.
//Shange edit to save when you are in edit mode.
.container {
display: block;
width: 400px;
margin: 100px auto 0;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li, h3 {
clear:both;
list-style:none;
}
input, button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}
input[type="text"]:focus {
color: #333;
}
/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task {
float: left;
width: 318px;
}
p > button:hover {
color: #0FC57C;
}
/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}
li > input[type="text"] {
width: 226px;
}
li > .delete:hover {
color: #CF2323;
}
/* Completed */
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
/* Edit Task */
ul li input[type=text] {
display:none;
}
ul li.editMode input[type=text] {
display:block;
}
ul li.editMode label {
display:none;
}
来源: https://codepen.io/franklynroth/pen/ZYeaBd
但这是JavaScript,我希望将其作为WordPress插件的版本。
有人会对如何做有任何想法吗?