Skip to main content

jQuery - StackPanels


 <div class="testSubject2">
            <h2 id="header_puppies"><a href="#">Puppies</a></h2>
            <div id="panel_puppies">
              <img src="puppy-1.jpg"><img src="puppy-2.jpg"><img src="puppy-3.jpg"><img src="puppy-4.jpg"><img src="puppy-5.jpg"><img src="puppy-6.jpg">
            </div>
            <h2 id="header_flowers"><a href="#">Flowers</a></h2>
            <div id="panel_flowers">
              <img src="flower-1.jpg"><img src="flower-2.jpg"><img src="flower-3.jpg"><!--img src="flower-4.jpg"><img src="flower-5.jpg"><img src="flower-6.jpg"-->
            </div>
            <h2 id="header_food"><a href="#">Food</a></h2>
            <div id="panel_food">
              <img src="food-1.jpg"><img src="food-2.jpg"><img src="food-3.jpg"><img src="food-4.jpg"><img src="food-5.jpg"><img src="food-6.jpg">
            </div>
          </div>
$(function(){
   $('.testSubject2').accordion({});
);


One feature that the accordion widget lacks, present in its tabs widget kinfolk, is the
innate ability to load content via Ajax. Not wanting our accordions to suffer from an
inferiority complex, let’s see how we can easily add that ability using the knowledge
that we have at hand.
Tabs specify the location of remote content via the href of the anchor tags within
them. Accordions, on the other hand, ignore the href of anchor tags in their header
unless the navigation option is being used. Knowing this, we’ll safely use it to specify
the location of any remote content to be loaded for the panel.
This is a good decision because it’s consistent with the way that tabs work (consistency
is a good thing), and it means we don’t have to needlessly introduce custom
options or attributes to record the location. We’ll leave the anchor href of “normal”
panels at #.
We want to load the panel content whenever the panel is about to open, so we bind
an accordionchangestart event to the accordion(s) on our page with this code:
$('.ui-accordion').bind('accordionchangestart',function(event,info){
if (info.newContent.length == 0) return;
var href = $('a',info.newHeader).attr('href');
if (href.charAt(0) != '#') {
info.newContent.load(href);
$('a',info.newHeader).attr('href','#');
}
});
In this handler we first locate the opening panel by using the reference provided in
info.newContent. If there’s none (which can happen for collapsible accordions), we
simply return.
Then we locate the anchor within the activating header by finding the <a> element
within the context of the reference provided by info.newHeader, and grab its href
attribute. If it doesn’t start with #, we assume it’s a remote URL for the panel content.
To load the remote content, we employ the handy load() method, and then
change the href of the anchor to #. This last action prevents us from fetching the content
again next time the panel is opened. (To force a load every time, simply remove
the href assignment.)

Comments

Popular posts from this blog

Stretch a row if data overflows in jasper reports

It is very common that some columns of the report need to stretch to show all the content in that column. But  if you just specify the property " stretch with overflow' to that column(we called text field in jasper report world) , it will just stretch that column and won't change other columns, so the row could be ridiculous. Haven't find the solution from internet yet. So I just review the properties in iReport one by one and find two useful properties(the bold highlighted in example below) which resolve the problems.   example:
<band height="20" splitType="Stretch"> <textField isStretchWithOverflow="true" pattern="" isBlankWhenNull="true"> <reportElement stretchType="RelativeToTallestObject" mode="Opaque" x="192" y="0" width="183" height="20"/> <box leftPadding="2"> <pen lineWidth="0.25"/> …

JasperReports - Configuration Reference

Spring - Operations with jdbcTemplate

This class manages all the database communication and exception handling using a java.sql.Connection that is obtained from the provided DataSource. JdbcTemplate is a stateless and threadsafe class and you can safely instantiate a single instance to be used for each DAO.


Use of Callback Methods
JdbcTemplate is based on a template style of programming common to many other parts of Spring. Some method calls are handled entirely by the JdbcTemplate, while others require the calling class to provide callback methods that contain the implementation for parts of the JDBC workflow. This is another form of Inversion of Control. Your application code hands over the responsibility of managing the database access to the template class. The template class in turn calls back to your application code when it needs some detail processing filled in. These callback methods are allowed to throw a java.sql.SQLException, since the framework will be able to catch this exception and use its built-in excepti…