History
   Show Presentation
 
 
 2089
 



/teachers/demo_news?config=/teachers/mark/Mashup Content Library Config




<!-- demo -->
                                <div id="<!--#echo var="cell_id" -->demo" class="box jplist">
                                
                                        <!-- panel -->
                                        <div class="panel box panel-top">                                               
                                                                                                
                                                <div class="drop-down <!--#echo var="cell_id" -->page-by">
                                                        <ul>
                                                                <li><span data-number="3"> 3 per page </span></li>
                                                                <li><span data-number="5"> 5 per page </span></li>
                                                                <li><span data-number="10" data-default="true"> 10 per page </span></li>
                                                                <li><span data-number="all"> view all </span></li>
                                                        </ul>
                                                </div>
                                                <div class="drop-down <!--#echo var="cell_id" -->sort-drop-down">
                                                        <ul>
                                                                <li><span data-path="default">Sort by</span></li>
                                                                <li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
                                                                <li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
                                                                <li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
                                                                <li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
                                                                <li><span data-path=".like" data-order="asc" data-type="number" data-default="true">Likes asc</span></li>
                                                                <li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
                                                                <li><span data-path=".date" data-order="asc" data-type="datetime">Date asc</span></li>
                                                                <li><span data-path=".date" data-order="desc" data-type="datetime">Date desc</span></li>
                                                        </ul>
                                                </div>
                                                
                                                <!-- filter -->
                                                <div class="<!--#echo var="cell_id" -->filter">                                                  
                                                        <input data-path=".title" type="text" value="" placeholder="Filter by title"/>
                                                        <input data-path=".desc" type="text" value="" placeholder="Filter by description"/>                                                     
                                                </div>
                                                
                                                <div class="<!--#echo var="cell_id" -->paging-results" data-type="range"></div>
                                                <div class="<!--#echo var="cell_id" -->paging"></div>                                    
                                        </div>
                                        
                                        <!-- data -->
                                        <div class="box">
                                                <table class="<!--#echo var="cell_id" -->demo-tbl" border="0">
                                                
                                                        <!-- item 1 -->
                                                        <tr class="<!--#echo var="cell_id" -->tbl-item"><td width="100%"><table width="100%"><tr>
                                                                <!-- img -->
                                                                <td class="img">
                                                                        <img src="img/arch-1.jpg" alt="" title=""/>
                                                                </td>
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">03/15/2012</p>
                                                                        <p class="title">Arch</p>
                                                                        <p class="desc">An arch is a structure that spans a space and supports a load. Arches appeared as early as the 2nd millennium BC in Mesopotamian brick architecture and their systematic use started with the Ancient Romans who were the first to apply the technique to a wide range of structures.</p>
                                                                        <p class="like">5 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        <!-- item 2 -->
                                                        <tr class="<!--#echo var="cell_id" -->tbl-item"><td width="100%"><table width="100%"><tr>                                  
                                                                <!-- img -->
                                                                
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">03/18/2012</p>
                                                                        <p class="title">Architecture</p>
                                                                        <p class="desc">Architecture is both the process and product of planning, designing and construction. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilizations are often identified with their surviving architectural achievements.</p>
                                                                        <p class="like">25 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        <!-- item 3 -->
                                                        <tr class="tbl-item"><td width="100%"><table width="100%"><tr>                                   
                                                                <!-- img -->
                                                                <td class="img">
                                                                        <img src="img/autumn-1.jpg" alt="" title=""/>
                                                                </td>
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">01/16/2011</p>
                                                                        <p class="title">Autumn</p>
                                                                        <p class="desc">Autumn or Fall is one of the four temperate seasons. Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere) when the arrival of night becomes noticeably earlier. The equinoxes might be expected to be in the middle of their respective seasons, but temperature lag (caused by the thermal latency of the ground and sea) means that seasons appear later than dates calculated from a purely astronomical perspective.</p>
                                                                        <p class="like">12 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        <!-- item 4 -->
                                                        <tr class="tbl-item"><td width="100%"><table width="100%"><tr>                                  
                                                                <!-- img -->
                                                                <td class="img">
                                                                        <img src="img/boats-1.jpg" alt="" title=""/>
                                                                </td>
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">02/24/2000</p>
                                                                        <p class="title">Boats</p>
                                                                        <p class="desc">A boat is a watercraft of any size designed to float or plane, to provide passage across water. Usually this water will be inland (lakes) or in protected coastal areas. However, boats such as the whaleboat were designed to be operated from a ship in an offshore environment. In naval terms, a boat is a vessel small enough to be carried aboard another vessel (a ship).</p>
                                                                        <p class="like">11 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        <!-- item 5 -->
                                                        <tr class="tbl-item"><td width="100%"><table width="100%"><tr>                                  
                                                                <!-- img -->
                                                                <td class="img">
                                                                        <img src="img/book-1.jpg" alt="" title=""/>
                                                                </td>
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">11/22/2001</p>
                                                                        <p class="title">Books</p>
                                                                        <p class="desc">A book is a set of written, printed, illustrated, or blank sheets, made of ink, paper, parchment, or other materials, usually fastened together to hinge at one side. A single sheet within a book is called a leaf, and each side of a leaf is called a page. A book produced in electronic format is known as an electronic book (e-book).</p>
                                                                        <p class="like">100 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        <!-- item 6 -->
                                                        <tr class="tbl-item"><td width="100%"><table width="100%"><tr>                                  
                                                                <!-- img -->
                                                                <td class="img">
                                                                        <img src="img/business-1.jpg" alt="" title=""/>
                                                                </td>
                                                                
                                                                <!-- data -->
                                                                <td class="block">
                                                                        <p class="date">02/05/2004</p>
                                                                        <p class="title">Business</p>
                                                                        <p class="desc">A business (also known as enterprise or firm) is an organization engaged in the trade of goods, services, or both to consumers. Businesses are predominant in capitalist economies, where most of them are privately owned and administered to earn profit to increase the wealth of their owners. Businesses may also be not-for-profit or state-owned. A business owned by multiple individuals may be referred to as a company, although that term also has a more precise meaning.</p>
                                                                        <p class="like">15 Likes</p>
                                                                </td>
                                                        </tr></table></td></tr>
                                                        
                                                        


                                                
                                                </table>
                                        </div>
                                        <!-- end of data -->
                                        
                                        <div class="box jplist-no-results">
                                                <p>No results found</p>
                                        </div>
                                        
                                        <!-- panel -->
                                        <div class="panel box <!--#echo var="cell_id" -->panel-bottom">                                          
                                                                                                
                                                <div class="drop-down <!--#echo var="cell_id" -->page-by">
                                                        <ul>
                                                                <li><span data-number="3"> 3 per page </span></li>
                                                                <li><span data-number="5"> 5 per page </span></li>
                                                                <li><span data-number="10" data-default="true"> 10 per page </span></li>
                                                                <li><span data-number="all"> view all </span></li>
                                                        </ul>
                                                </div>
                                                <div class="drop-down <!--#echo var="cell_id" -->sort-drop-down">
                                                        <ul>
                                                                <li><span data-path="default">Sort by</span></li>
                                                                <li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
                                                                <li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
                                                                <li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
                                                                <li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
                                                                <li><span data-path=".like" data-order="asc" data-type="number">Likes asc</span></li>
                                                                <li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
                                                                <li><span data-path=".date" data-order="asc" data-type="datetime">Date asc</span></li>
                                                                <li><span data-path=".date" data-order="desc" data-type="datetime">Date desc</span></li>
                                                        </ul>
                                                </div>
                                                
                                                <div class="<!--#echo var="cell_id" -->paging-results" data-type="range"></div>
                                                <div class="<!--#echo var="cell_id" -->paging"></div>                                            
                                        </div>
                                </div>
                                <!-- end of demo -->