Now that we have worked a bit on our admin zone, it's time for us to work on
the frontpage of our component, just to make it look better. At the moment, our
component only shows a list of news. If you take a look at the
components/com_tinynews/views/tinynews/tmpl/default.php
file, you will
see our previous code:
defined('_JEXEC') or die('Restricted access'), frontpage, Joomla! componentworking onforeach($this->news as $new){ echo "<p><b>".$new->title."</b></p><br/><br/>"; echo "<p>".$new->text."</p><br/><br/>"; }
We are going to change this code a bit, as follows:
defined('_JEXEC') or die('Restricted access'), foreach($this->news as $new){ ?> <div class="news_box"> <h1><?php echo $new->title; ?></h1> <p><?php echo $new->text; ?></p> </div> <?php }
These are only small changes, but they are necessary if we want to add some
styling later. For this, we are going to create a CSS file. We will create this file
(called frontend_style.css)
inside
components/com_tinynews/css/
, and we will place some styles in it, as
follows:
.news_box{ width: 175px; margin-right: 9px; margin-bottom: 9px; float: left; border-right: 1px solid #3B3630; border-bottom: 1px solid #3B3630; } .news_box h1{ font-size: 16px; font-weight: bold; margin-bottom: 10px; padding-right: 10px; } .news_box p{ padding-right: 10px; }
After we have our basic styles in place, we need to include the CSS file. We will
do that in our
components/com_tinynews/views/tinynews/tmpl/default.php
file:
defined('_JEXEC') or die('Restricted access'), $document =& JFactory::getDocument(); $css = JURI::base().'components/com_tinynews/css/frontend_style.css'; $document->addStyleSheet( $css );
Just as we have seen on our admin screen, we will use the
addStyleSheet
method, and with that done, our component will look as
follows:
Each one of the columns has a different height, but don't worry, we are going to solve this with a bit of help from jQuery.
Having equal size columns will make our design look much better, and it's not going to be so hard. First of all, we are going to download one plugin that's going to help us with our task. Just visit this page:
http://www.cssnewbie.com/equalheights-jquery-plugin/.
Download the jquery.equalheights.js
file and place it
in components/com_tinynews/js/
. In order to include it,
we are going to again edit the default.php
file to add the
necessary addScript
method:
... $css = JURI::base().'components/com_tinynews/css/frontend_style.css'; $document->addStyleSheet( $css ); $js = JURI::base().'components/com_tinynews/js/ jquery.equalheights.js'; $document->addScript($js);
After doing so, we need to call the plugin method; we will do that after the previous code:
$js = " jQuery(document).ready(function($){ $('.news_box').equalHeights(); }); "; $document->addScriptDeclaration($js);
The addScriptDeclaration
method will help us add our code
to the header of our site and will be executed on document ready. If we now try
to reload our site, we will see that, thanks to the plugin, our columns will
have exactly the same height. Want to take a look? Check the next
screenshot:
Why don't you try it on your own site? As you have seen, it's quite easy to accomplish. Also, don't forget to check the plugin's author website (http://www.cssnewbie.com/equalheights-jquery-plugin/) as there are some other interesting options that you can use:
As always, you can find these two files in the
equal_heights
folder of the code bundle for Chapter 9. Take a look
at the folder in order to see the necessary changes. Of course, you will need to
download the plugin.
Now that we have our columns with equal heights, what can we do to enhance our component? Well, as the section title itself is quite self-explanatory, I think the surprise effect has been lost.
But don't worry, to compensate, we will see a very interesting plugin; just keep reading. This time we are going to use the Quick Paginate plugin. As always, you can find it by searching on the http://jquery.com/ page or by browsing to this link:
http://plugins.jquery.com/project/quick_paginate.
After downloading the plugin, we need to place it in our js
folder,
components/com_tinynews/js/jquery.quickpaginate.js
. Soon we will
be seeing how versatile this plugin is. But first, we need to include it in
our
components/com_tinynews/views/tinynews/tmpl/default.php
file. To
do this, we will add the following code:
$js = JURI::base().'components/com_tinynews/js/ jquery.quickpaginate.js'; $document->addScript($js);
And now it's time to change the code that we use for our
addScriptDeclaration
method. In our first example, we are going to
make the call for quickpaginate
in its default way:
jQuery(document).ready(function($){ $('.news_box').equalHeights(); $('#news_container div').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') }); }); "; $document->addScriptDeclaration($js);
We will take a look at the options in the call. But first, we will finish the example so that later, when we have a working copy, we can make changes and see the results.
Our next necessary step is going to be to create a container for our
news_box
DIVs and another one for the pagination elements. Take a
look at the following code:
<div id="news_container"> <?php foreach($this->news as $new){ ?> <div class="news_box"> <h1><?php echo $new->title; ?></h1> <p><?php echo $new->text; ?></p> </div> <?php } ?> </div> <div id="news_container_page"> </div>
As you can see from the previous code, we have created a
news_container
DIV that will contain all the other DIVs created in
the foreach
loop. And at the end, we have
news_container_page
that will contain the paginator
elements.
Some styles are also needed and we need to add them to our
frontend_style.css
file. In fact, we are only going to add the
following style:
#news_container_page{ float: none; clear: both; text-align: center; }
If the jquery.quickpaginate.js
plugin is not working, we
will need to make one small change to it. Open the
jquery.quickpaginate.js
file and look for the following
line:
var pagerNav = $('<a class="'+settings.prev+'" href="#">« Prev</a><a class="'+settings.next+'" href="#">Next »</a>'),
Change it to:
var pagerNav = jQuery('<a class="'+settings.prev+'" href="#">« Prev</a><a class="'+settings.next+'" href="#">Next »</a>'),
Remember that we are using the SC jQuery Joomla! plugin so that our
library doesn't conflict with any other library, such as MooTools.
Because of that, the $
is not directly available, and so
we have to use jQuery
instead.
With all these elements in place, we can take a look at our site. The next screenshot shows us the output:
Good, we are now able to go from one page to another in just one click. Nice, isn't it?
As in the previous topics, you can find the changes we have made in the
code bundle in a folder called paginate
.
And before continuing, let's take a look at the options of our call (discussed previously):
$('#news_container div').quickpaginate({ perpage: 4, showcounter: true, pager : $('#news_container_page') });
The options are as follows:
perpage
—defines the number of elements we
want to have in each pageshowcounter
—is a very useful option that
not only shows the number of pages, but also the page that we are
onpager
—defines where pagination elements
can be placedHowever, we can also change the classes for styling the elements. Take a look at the following plugin page to see the options:
18.219.249.210