<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery列表递推手风琴 - 网页模板</title>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="css/newsWidget.css" />
<link rel="stylesheet" href="css/newsWidget_color.css" />
<script src="js/greensocks/TweenMax.min.js"></script>
<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/jquery.jfeed.pack.js"></script>
<script src="js/jquery.newsWidget.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<section class="col-lg-10 col-lg-offset-1">
<div style="width:960px; margin:0 auto;position:relative;">
<ul id="mainNewsWidget">
<li data-title="Press on Read More to Open" data-date="12-2-2013" data-image="images/img/1.jpg">
<h2>2 Different Styles to continue reading this.</h2>
<br />
<strong>The Full page Style</strong> and <strong>In-Widget Style</strong>.<p>
This is the full page view. Check examples for the In-widget.<br />
</p>
<br />
<p>Lorem ipsum dolor <strong>sit</strong> amet, <span>consectetuer</span>
<em>adipiscing elit</em>, sed diam nonummy nibh euismod tincidunt
ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
<ul style="list-style:square; margin-bottom:5px;">
<li>sdasd</li>
<li>dsdd</li>
</ul>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril.<p></p>
<img src="images/img/1.jpg" width="200" height="120" class="img-rounded">
<p>link <strong>Strong Text</strong>,
<em>em</em></p>
<p><button type="button" class="btn btn-primary">Primary
</button></p>
<p>delenit augue duis dolore te feugait nulla facilisi. Nam liber
tempor cum soluta nobis eleifend option congue nihil imperdiet doming
id quod mazim placerat facer possim assum. Typi non habent claritatem
insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii legunt saepius.
Claritas est etiam processus dynamicus, qui sequitur mutationem
consuetudium lectorum. Mirum est notare quam littera gothica, quam
nunc putamus parum claram, anteposuerit litterarum formas humanitatis
per seacula quarta decima et quinta decima. Eodem modo typi, qui
nunc nobis videntur parum clari, fiant sollemnes in futurum. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet
doming id quod mazim placerat facer possim assum. Typi non habent
claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii
legunt saepius. Claritas est etiam processus dynamicus, qui sequitur
mutationem consuetudium lectorum. Mirum est notare quam littera
gothica, quam nunc putamus parum claram, anteposuerit litterarum
formas humanitatis per seacula quarta decima et quinta decima. Eodem
modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui
facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum
est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Nam liber tempor cum soluta nobis eleifend option congue
nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui
facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum
est notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.</p>
</li>
<li data-title="Links can be direct or as Read More buttons inside the News Reader" data-date="12-2-2013" data-image="images/img/2.jpg" data-link="http://www.moobnn.com" data-link-type="readmore">
Links can be 2 types <strong>"readmore"</strong> links and
<strong>"direct"</strong> links. <br />
The readmore type will add a Continue reading button at the end
of the article however the direct type will open the article in
a new tab (can be self). <br>
To define a readmore link, add <strong>data-link-type</strong> to
the list item. Otherwise the link will be direct.<br>
<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
at vero eros et accumsan et iusto odio dignissim qui blandi