Ok so last week I talked about how I created the control panel for my CMS. This week I'm going to talk about how to wire it up to add elements to the page. I will also cover how to make those elements editable, re-ordeable and deletable.
So first off, I need to wire up the button functions so when you click say H! on the control panel, it adds an editable H1 tag to the page, so here goes.
Using the magic of jQuery, firstly I target the button I want to attach the action to. The code below creates a click function, so when a link with the class of 'heading' is clicked, do something.
$("a.heading").click(function(){
//Do something
});
Next I need it to add and editable H1 tag to the div with the ID of 'post'
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contentditable="true" class="editMe">Heading
</div>
');
});
The code above selects the div with the ID of 'post', then appends to it a div with a class of 'edit' which contains an H1 tag with the attribute contenteditable and another two divs which will act as the 'move' and 'delete' buttons. In essence, that's it, once I repeat the same code for the different tags I want to provide the user with I have the bare basics of a CMS. Obviously this on it's own would never be pratical in the real world so there is more work that needs doing to make it into a viable application.
So lets finish this function up. There are now two things I need to do to finish of this bit of code, first of all I need to add a return false statement because when the link is clicked, I want it to execute the javascript then do nothing else.
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
return false;
});
Secondly I need to attach the events to the move and delete buttons so I add in a call to another function called attachEvents
$("a.heading").click(function(){
$("#post").append('
<div class="edit">
<h1 contenteditable="true" class="editMe">Heading
</div>
');
attachEvents();
return false;
});
Ok so now I am calling that function I need to write it. The code below simply states that when the delete div is clicked, remove it's parent.
$("div.delete").click(function () {
$(this).parent().remove();
})
As for making the items sortable using the simplicity of jQuery I select the 'post' container and make it sortable like so:
$("#post").sortable({handle:'.move', containment:'parent'});
Again, I've given it a handle, the move button and I've contained it to the 'post' div. I hope this hasn't been to confusing, tune in next week to see how I'm getting on.