一个小小好玩的demo,
并可设置自定义html模板
以及设置请求路径
效果图：
自定义嵌入一个tomcat
导入依赖jar包
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.20</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.4.1</version>
</dependency>
项目结构介绍
annotation 自定义注解类 用于设置请求路径，以及读取文件路径
components html模板，加载到tomcat
read 对注解的解析类
servlet 对应html模板 两者必须同名
status 一些状态值
test 测试入口类
util 工具类
vo 对象
MyTomcat 主要启动类
annotation包
PackageServlet
package com.demo.annotation;
import java.lang.annotation.*;
/**
* 读取对应的servlet路径和模板路径
*/
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface PackageServlet {
/*servlet 对应的包名*/
String servletPack();
/* 模板对应的包名*/
String componentsPack();
}
TomcatRequestMapping
package com.demo.annotation;
import java.lang.annotation.*;
/**
* @author tanyongpeng
* <p>设置servlet请求路径</p>
**/
@Target({ElementType.TYPE})
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface TomcatRequestMapping {
String[] value();
}
components包
DocServlet.html
<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文档测试</title>
<!-- main JS libs -->
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/js/jquery-1.11.0.min.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/js/jquery-ui.min.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/js/bootstrap.min.js"></script>
<!-- Style CSS -->
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/style.css" media="screen" rel="stylesheet">
<!-- scripts -->
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/general.js"></script>
<!-- Scroll Bars -->
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.mousewheel.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.jscrollpane.min.js"></script>
<script>
jQuery(function() {
jQuery('.scrollbar').jScrollPane({
autoReinitialise: true,
verticalGutter: 0
});
});
</script>
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/prettyPhoto.css" rel="stylesheet">
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.prettyPhoto.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.touchSwipe.min.js"></script>
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jplayer.css" rel="stylesheet">
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.jplayer.min.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jplayer.playlist.min.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.transform2d.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/jquery.grab.js"></script>
<script src="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/mod.csstransforms.min.js"></script>
<script src="../funky-tunes-css/js/jplayer/circle.player.js"></script>
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/prettify.css" rel="stylesheet">
<link href="https://thisuseravatar.oss-cn-guangzhou.aliyuncs.com/ladybugDoc/css/docs.css" media="screen" rel="stylesheet">
</head>
<body>
<div class="body-wrap">
<header class="header-demo">
<div class="inner gradient">
<!-- container -->
<div class="container">
<!-- row -->
<div class="row">
<div class="col-sm-3">
<div class="logo"><img src="images/logo.png" alt="" /></div>
</div>
<div class="col-sm-9">
<h1>Ladybug Plugin</h1>
<span>Version: 0.0.1</span>
<span>Last update: 18.08.2022</span>
</div>
</div>
<!--/ row-->
</div>
<!--/ container -->
</div>
</header>
<!-- container -->
<div class="container">
<!-- row -->
<div class="row">
<div class="col-sm-3">
<div class="sidebar-demo hidden-print" role="complementary" data-spy="affix" data-offset-top="200">
<ul class="nav">
<li><a href="#about">What is Funky Tunes</a></li>
<li><a href="#what-included">What is included</a></li>
<li><a href="#browser">Browser support</a></li>
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#template">Basic Template</a></li>
<li><a href="#typography">Typography</a></li>
<li>
<a href="#buttons">Components</a>
<ul class="nav">
<li>
<a href="#buttons">Buttons</a>
<ul class="nav">
<li><a href="#buttons-simple">Simple Buttons</a></li>
<li><a href="#buttons-transparent">Transparent Buttons</a></li>
<li><a href="#buttons-sized">Different sizes</a></li>
<li><a href="#buttons-shaped">Shaped Buttons</a></li>
<li><a href="#buttons-icons">Buttons with Icons</a></li>
<li><a href="#buttons-input">Buttoned Input</a></li>
</ul>
</li>
<li><a href="#rating-stars">Rating Stars</a></li>
<li><a href="#scroll-bars">Scroll Bars</a></li>
<li><a href="#navigation">Navigation</a></li>
<li><a href="#tabs">Tabs</a></li>
</ul>
</li>
<li>
<a href="#post-tabs">Widgets</a>
<ul class="nav">
<li><a href="#post-tabs">Post Tabs</a></li>
<li>
<a href="#pricing">Pricing Items</a>
<ul class="nav">
<li><a href="#pricing3">Pricing style 3</a></li>
</ul>
</li>
<li><a href="#content-box">Content Box</a></li>
<li><a href="#video-player">Video Player</a></li>
<li>
<a href="#audio-player">Audio Players</a>
<ul class="nav">
<li><a href="#audio-player-circle">Circle Player</a></li>
</ul>
</li>
<li><a href="#user-profile">User Profile</a></li>
<li><a href="#statistics">Statistics</a></li>
<li><a href="#widget-schedule">Schedule</a></li>
<li>
<a href="#charts">Charts</a>
<ul class="nav">
<li><a href="#charts-top3">Top 3 chart</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-9">
<!-- content -->
<div class="content-demo" role="main">
<!-- What is this -->
<div class="section-demo">
<h2 id="about">What is Funky Tunes UI Kit</h2>
<div class="description">
<p> Funky Tunes UI Kit is a number of useful user interface components built on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a> framework. We did not modify any line of Bootstrap, so you can safely use Funky Tunes UI Kit in your ongoing project.</p>
</div>
</div>
<!--/ What is this -->
<!-- What's included -->
<div class="section-demo">
<h2 id="what-included">What is included</h2>
<div class="description">
<p>Once purchased, unzip the compressed folder to see the directory structure of Funky Tunes UI Kit. You'll see something like this:</p>
</div>
<div class="example">
<div class="example-code">
<pre class="prettyprint">
funky-tunes
├───docs
│ ├───css
│ ├───images
│ └───js
├───funky-tunes-css
│ ├───css
│ ├───fonts
│ │ └───video-js
│ │ └───icons-small
│ ├───images
│ │ ├───icons
│ │ ├───prettyPhoto
│ │ └───temp
│ └───js
│ └───libs
│ └───jplayer
└───funky-tunes-less
├───fonts
│ └───video-js
│ └───icons-small
├───images
│ ├───icons
│ ├───prettyPhoto
│ └───temp
├───js
│ └───libs
│ └───jplayer
└───less
└───bootstrap
</pre>
</div>
</div>
<div class="description">
<dl class="clearfix">
<dt class="parent">docs/</dt><dd>contains this documentation.</dd>
<dt class="parent">funky-tunes-css/</dt><dd>contains Funky Tunes UI Kit in simple CSS format. Use it to easily start your project.</dd>
<dt>css/</dt><dd>contains all the stylesheets for CSS version of the kit.</dd>
<dt>fonts/</dt><dd>contains Bootstrap Glyphicons for CSS version of the kit.</dd>
<dt>fonts/video-js/</dt><dd>contains Video Player icons for CSS version of the kit.</dd>
<dt>fonts/icons-small/</dt><dd>contains Font icons for CSS version of the kit.</dd>
<dt>images/</dt><dd>contains all the images for CSS version of the kit.</dd>
<dt>images/icons/</dt><dd>contains all the icons for CSS version of the kit.</dd>
<dt>images/temp/</dt><dd>contains all the temporary images for CSS version of the kit.</dd>
<dt>js/</dt><dd>contains all the JS files for CSS version of the kit.</dd>
<dt class="parent">funky-tunes-less/</dt><dd>contains Funky Tunes UI Kit in LESS format. Use it to modify this kit in your project.</dd>
<dt>fonts/</dt><dd>contains Bootstrap Glyphicons for LESS version of the kit.</dd>
<dt>fonts/video-js/</dt><dd>contains Video Player icons for LESS version of the kit.</dd>
<dt>fonts/icons-small/</dt><dd>contains Font icons for LESS version of the kit.</dd>
<dt>images/</dt><dd>contains all the images for LESS version of the kit.</dd>
<dt>images/icons/</dt><dd>contains all the icons for LESS version of the kit.</dd>
<dt>images/temp/</dt><dd>contains all the temporary images for LESS version of the kit.</dd>
<dt>js/</dt><dd>contains all the JS files for LESS version of the kit.</dd>
<dt>less/</dt><dd>contains all the stylesheets for LESS version of the kit.</dd>
</dl>
<p><em>Note:</em> The folders <code>funky-tunes-css</code> and <code>funky-tunes-less</code> is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.</p>
</div>
</div>
<!--/ What's included -->
<!-- Browser support -->
<div class="section-demo">
<h2 id="browser">Browser support</h2>
<div class="description">
<p>Since Funky Tunes UI Kit is built on Bootstrap 3 framework, it supports the same browsers as Bootstrap.</p>
</div>
</div>
<!--/ Browser support -->
<!-- Getting Started -->
<div class="section-demo">
<h2 id="getting-started">Getting Started</h2>
<div class="description">
<p>To start working with Funky Tunes UI Kit you can use a basic <code>template.html</code>, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
<br />
We provide you both CSS and LESS standalone versions which are completely identical in design and functions.
</p>
<p>
<em>CSS Version:</em> You can use CSS version by dropping contents of <code>funky-tunes-css</code> folder to your project folder and including <code>style.css</code> file in your HTML page: <code><link href="style.css" media="screen" rel="stylesheet"></code>
</p>
<p>
<em>LESS Version:</em> You can find it in <code>funky-tunes-less</code> folder. Use LESS if you want to modify Funky Tunes UI Kit. We built it Bootstrap way so you won't find big difference. Use <code>less/variables.less</code> to modify different styles, use <code>style.less</code> to remove needless components.
</p>
<p>
If you want to start from scratch, the best way is to use <a href="#template">our template</a> where all startup files are already included and ready to be used. You can find <code>template.html</code> file both for CSS and LESS version in their respective folders.
</p>
</div>
</div>
<!-- Getting Started -->
<!-- Basic Template -->
<div class="section-demo">
<h2 id="template">Basic Template</h2>
<div class="description">
<p>You can use a basic <a href="../funky-tunes-css/template.html" target="_blank">HTML template</a> to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the Funky Tunes UI Kit.</p>
</div>
<div class="example">
<div class="example-code">
<pre class="prettyprint">
<!doctype html>
<!--[if lt IE 8 ]><html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Funky Tunes | Template</title>
<!-- main JS libs -->
<script src="js/libs/jquery-1.11.0.min.js"></script>
<script src="js/libs/jquery-ui.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<!-- Style CSS -->
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="style.css" media="screen" rel="stylesheet">
<!-- General Scripts -->
<script src="js/general.js"></script>
<!--[if lt IE 9]>
<script src="js/libs/html5shiv.js"></script>
<script src="js/libs/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="body-wrap">
<!-- container-->
<div class="container">
Start Your Work Here
</div>
<!--/ container-->
</div>
</body>
</html>
</pre>
</div>
</div>
</div>
<!-- Basic Template -->
<!-- Typography -->
<div class="section-demo">
<h2 id="typography">Typography</h2>
<div class="description">
<p>
Funky Tunes UI Kit uses free Open Sans , Allerta and Montserrat webfonts available at the Google Fonts . The global default font-size is 14px, this is applied to the <code><body></code>. In addition, all <code><p></code> (paragraphs) receive a line height of 24px and bottom margin of 25px.
<br />
Also, all headings, <code><h1></code> through <code><h6></code> are available.
</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color">
<h1>Example (h1)</h1>
<h2>Example (h2)</h2>
<h3>Example (h3)</h3>
<h4>Example (h4)</h4>
<h5>Example (h5)</h5>
<h6>Example (h6)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="example-code">
<pre class="prettyprint">
<h1>Example (h1)</h1>
<h2>Example (h2)</h2>
<h3>Example (h3)</h3>
<h4>Example (h4)</h4>
<h5>Example (h5)</h5>
<h6>Example (h6)</h6>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</pre>
</div>
</div>
</div>
<!--/ Typography -->
<!-- Buttons -->
<div class="section-demo">
<h2 id="buttons">Buttons</h2>
<!--/ Simple Buttons -->
<div class="description">
<h3 id="buttons-simple">Simple Buttons</h3>
<p>Use any of the available button classes to quickly create a simple button.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color example-buttons">
<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-green"><span>Green</span></a>
<a href="#" class="btn btn-red"><span>Red</span></a>
<a href="#" class="btn btn-caps"><span>All Capitals</span></a>
</div>
<div class="example-code">
<pre class="prettyprint">
<a href="#" class="btn"><span>Default</span></a>
<a href="#" class="btn btn-white"><span>White</span></a>
<a href="#" class="btn btn-gray"><span>Gray</span></a>
<a href="#" class="btn btn-round"><span>Rounded</span></a>
<a href="#" class="btn btn-caps"><span>All Capitals</span></a>
</pre>
</div>
</div>
<!--/ Simple Buttons -->
<!--/ Transparent Buttons -->
<div class="description">
<h3 id="buttons-transparent">Transparent Buttons</h3>
<p></p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item example-buttons">
<a href="#" class="btn btn-left btn-transparent"><span>Prev</span></a>
<a href="#" class="btn btn-transparent"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-transparent"><span>Next</span></a>
</div>
<div class="example-code">
<pre class="prettyprint">
<a href="#" class="btn btn-left btn-transparent"><span>Prev</span></a>
<a href="#" class="btn btn-transparent"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-transparent"><span>Next</span></a>
</pre>
</div>
</div>
<!--/ Transparent Buttons -->
<!-- Button Sizes -->
<div class="description">
<h3 id="buttons-sized">Buttons with Different Sizes</h3>
<p>Two button sizes available.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color example-buttons">
<a href="#" class="btn"><span>Default Button</span></a>
<a href="#" class="btn btn-large"><span>Large Button</span></a>
</div>
<div class="example-code">
<pre class="prettyprint">
<a href="#" class="btn"><span>Default Button</span></a>
<a href="#" class="btn btn-large"><span>Large Button</span></a>
</pre>
</div>
</div>
<!--/ Button Sizes -->
<!--/ Shaped Buttons -->
<div class="description">
<h3 id="buttons-shaped">Shaped Buttons</h3>
<p>Buttons with left and right pointers.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color example-buttons">
<a href="#" class="btn btn-left"><span>Prev</span></a>
<a href="#" class="btn"><span>Download all files</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>
<br />
<a href="#" class="btn btn-left btn-red"><span>Prev</span></a>
<a href="#" class="btn btn-red"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-red"><span>Next</span></a>
<br />
<a href="#" class="btn btn-left btn-green"><span>Prev</span></a>
<a href="#" class="btn btn-green"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-green"><span>Next</span></a>
</div>
<div class="example-code">
<pre class="prettyprint">
<a href="#" class="btn btn-left"><span>Prev</span></a>
<a href="#" class="btn"><span>Download all files</span></a>
<a href="#" class="btn btn-right"><span>Next</span></a>
<a href="#" class="btn btn-left btn-red"><span>Prev</span></a>
<a href="#" class="btn btn-red"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-red"><span>Next</span></a>
<a href="#" class="btn btn-left btn-green"><span>Prev</span></a>
<a href="#" class="btn btn-green"><span>Download all files</span></a>
<a href="#" class="btn btn-right btn-green"><span>Next</span></a>
</pre>
</div>
</div>
<!--/ Shaped Buttons -->
<!--/ Buttons with Icons -->
<div class="description">
<h3 id="buttons-icons">Buttons with Icons</h3>
<p></p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color example-buttons">
<a href="#" class="btn btn-red"><span><i class="glyphicon glyphicon-shopping-cart"></i>Buy Now!</span></a>
<a href="#" class="btn btn-green"><span><i class="glyphicon glyphicon-download-alt"></i>Download</span></a>
</div>
<div class="example-code">
<pre class="prettyprint">
<a href="#" class="btn btn-red">
<span><i class="glyphicon glyphicon-shopping-cart"></i>Buy Now!</span>
</a>
<a href="#" class="btn btn-green">
<span><i class="glyphicon glyphicon-download-alt"></i>Download</span>
</a>
</pre>
</div>
</div>
<!--/ Buttons with Icons -->
<!-- Buttoned Input -->
<div class="description">
<h3 id="buttons-input">Buttoned Input</h3>
<p>Wrap <code>input type="submit"</code> into <code>span</code> and use available button classes to create a styled Input.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color example-buttons">
<span class="btn"><input type="submit" value="Send Message" /></span>
</div>
<div class="example-code">
<pre class="prettyprint">
<span class="btn"><input type="submit" value="Send Message" /></span>
</pre>
</div>
</div>
<!--/ Buttoned Input -->
</div>
<!--/ Buttons -->
<!-- Rating Stars -->
<div class="section-demo">
<h2 id="rating-stars">Rating Stars</h2>
<div class="description">
<p>Use rating stars for voting.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item alt-color">
<!-- Rating Stars -->
<div class="rating clearfix margin-bottom-20">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star voted" rel="4"></span>
<span class="star" rel="5"></span>
</div>
<!--/ Rating Stars -->
<br />
<!-- Rating Stars -->
<div class="rating rating-large clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star" rel="4"></span>
<span class="star" rel="5"></span>
</div>
<!--/ Rating Stars -->
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="rating clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star voted" rel="4"></span>
<span class="star" rel="5"></span>
</div>
<div class="rating rating-large clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star" rel="4"></span>
<span class="star" rel="5"></span>
</div>
</pre>
</div>
</div>
</div>
<!--/ Rating Stars -->
<!-- Scroll Bars -->
<div class="section-demo">
<h2 id="scroll-bars">Scroll Bars</h2>
<div class="description">
<p>Create a styled Scroll Bar for your site.</p>
<div class="callout">
<h5>Element specific usage</h5>
<p>Styled Scroll Bar require next files to be included into <code><head></code> section of the page:</p>
<pre class="prettyprint">
<script src="js/jquery.mousewheel.js"></script>
<script src="js/jquery.jscrollpane.min.js"></script>
</pre>
</div>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item example-scrollbars">
<div class="scrollbars clearfix">
<!-- ScrollBars -->
<div class="scrollbar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="scrollbar style2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!--/ ScrollBars -->
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="scrollbar">
...Content...
</div>
<div class="scrollbar style2">
...Content...
</div>
</pre>
<div class="fire-js">Enable Scroll Bars via JS:</div>
<pre class="prettyprint">
<script>
jQuery(function() {
jQuery('.scrollbar').jScrollPane({
autoReinitialise: true,
verticalGutter: 0
});
});
</script>
</pre>
</div>
</div>
</div>
<!--/ Scroll Bars -->
<!-- Navigation -->
<div class="section-demo">
<h2 id="navigation">Navigation</h2>
<div class="description">
<p>Website menu with dropdown submenu.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<!-- Website Menu -->
<ul class="menu boxed clearfix bg-image-home">
<li><a href="#"><i class="menu-icon menu-icon-1"></i>Home</a></li>
<li>
<a href="#"><i class="menu-icon menu-icon-2"></i>Online Radio</a>
<ul>
<li><a href="#">Katy Perry</a></li>
<li><a href="#">Miley Cyrus</a></li>
<li><a href="#">Selena Gomez</a></li>
</ul>
</li>
<li>
<a href="#"><i class="menu-icon menu-icon-3"></i>Top 25</a>
<ul>
<li><a href="#">Miley Cyrus</a></li>
<li><a href="#">Katy Perry</a></li>
<li><a href="#">Lene Marlin</a></li>
</ul>
</li>
<li>
<a href="#"><i class="menu-icon menu-icon-4"></i>TV show</a>
<ul>
<li>
<a href="#">Katy Perry</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
<li>
<a href="#">Miley Cyrus</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
<li>
<a href="#">Selena Gomez</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="menu-icon menu-icon-5"></i>News</a></li>
<li><a href="#"><i class="menu-icon menu-icon-8"></i>Contact Us</a></li>
</ul>
<!--/ Website Menu -->
</div>
<div class="example-code">
<pre class="prettyprint">
<ul class="menu boxed clearfix bg-image-home">
<li><a href="#"><i class="menu-icon menu-icon-1"></i>Home</a></li>
<li>
<a href="#"><i class="menu-icon menu-icon-2"></i>Online Radio</a>
<ul>
<li><a href="#">Katy Perry</a></li>
<li><a href="#">Miley Cyrus</a></li>
<li><a href="#">Selena Gomez</a></li>
</ul>
</li>
<li>
<a href="#"><i class="menu-icon menu-icon-3"></i>Top 25</a>
<ul>
<li><a href="#">Miley Cyrus</a></li>
<li><a href="#">Katy Perry</a></li>
<li><a href="#">Lene Marlin</a></li>
</ul>
</li>
<li>
<a href="#"><i class="menu-icon menu-icon-4"></i>TV show</a>
<ul>
<li>
<a href="#">Katy Perry</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
<li>
<a href="#">Miley Cyrus</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
<li>
<a href="#">Selena Gomez</a>
<ul>
<li><a href="#">Album 1</a></li>
<li><a href="#">Album 2</a></li>
<li><a href="#">Album 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="menu-icon menu-icon-5"></i>News</a></li>
<li><a href="#"><i class="menu-icon menu-icon-8"></i>Contact Us</a></li>
</ul>
</pre>
</div>
</div>
</div>
<!--/ Navigation -->
<!-- Tabs -->
<div class="section-demo">
<h2 id="tabs">Tabs</h2>
<div class="description">
<p>Add quick, dynamic tab functionality to transition through panes of local content.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<!-- Widget Profile -->
<div class="tabs-framed tabs-framed-right boxed widget-container widget-profile">
<ul class="tabs clearfix">
<li><a href="#profile1" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a></li>
<li class="active"><a href="#profile2" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a></li>
<li><a href="#profile3" data-toggle="tab"><i class="icon-tab-6"></i>Music</a></li>
<li><a href="#profile4" data-toggle="tab"><i class="icon-tab-7"></i>Comments</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="profile1">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-1.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Miley Cyrus</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade in active" id="profile2">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-2.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Anna Maria Jopek</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile3">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-3.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Katy Perry</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile4">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-4.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Madonna</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--/ Widget Profile -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="tabs-framed tabs-framed-right boxed">
<ul class="tabs clearfix">
<li><a href="#profile1" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a></li>
<li class="active"><a href="#profile2" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a></li>
<li><a href="#profile3" data-toggle="tab"><i class="icon-tab-6"></i>Music</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="profile1">
...Content...
</div>
<div class="tab-pane fade in active" id="profile2">
...Content...
</div>
<div class="tab-pane fade" id="profile3">
...Content...
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
<!--/ Tabs -->
<!-- Post Tabs -->
<div class="section-demo">
<h2 id="post-tabs">Tabbed Post Items</h2>
<div class="description">
<p></p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-12">
<!-- Post Tabs -->
<div class="post-tabs clearfix">
<div class="post-tabs-bookmarks">
<ul class="scrollbar style2">
<li class="active">Lil Wayne</li>
<li>Bruno mars</li>
<li>Niki Minaj</li>
<li>Selena Gomez</li>
<li>Tim McGraw</li>
<li>Deep Purple</li>
<li>Katy Perry</li>
<li>Miley Cyrus</li>
<li>Christina</li>
</ul>
</div>
<div class="post-tabs-content boxed">
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow active">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-11.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-11.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Lil Wayne</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-12.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-12.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Bruno mars</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-13.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-13.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Niki Minaj</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-14.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-14.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Selena Gomez</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-13.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-13.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Tim McGraw</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-11.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-11.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Deep Purple</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-13.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-13.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Katy Perry</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-14.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-14.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Miley Cyrus</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
<!-- post item -->
<div class="post-item style6 clearfix bg-image-arrow">
<div class="post-image"><a href="../funky-tunes-css/images/temp/post-img-11.jpg" data-rel="prettyPhoto" title="Music"><img src="../funky-tunes-css/images/temp/post-img-11.jpg" alt="" /></a></div>
<div class="post-content">
<h2 class="post-title"><a href="#">Christina</a></h2>
<h6 class="post-subtitle">ARTISTs OF THE WEEK</h6>
<div class="post-desc">
<p>Praesent magna nunc, tincidunt pretium consequat dapibus, mollis nec odio. Nunc feugiat molestie orci.</p>
</div>
<ul class="post-links-alt">
<li class="post-more"><a href="#">Read more<i class="icon-small-next"></i></a></li>
<li class="post-refresh"><a href="#"><i class="icon-small-refresh"></i></a></li>
<li class="post-like"><a href="#" title="128 Likes"><i class="icon-small-like"></i></a></li>
<li class="post-comments"><a href="#" title="96 Comments"><i class="icon-small-comment"></i></a></li>
</ul>
</div>
</div>
<!--/ post item -->
</div>
</div>
<!--/ Post Tabs -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
</pre>
</div>
</div>
</div>
<!--/ Post Tabs -->
<!-- Pricing List -->
<div class="section-demo">
<h2 id="pricing">Pricing</h2>
<!-- Pricing List Style 3 -->
<div class="description">
<p>Use pricing items to announce prices for your services.</p>
<h3 id="pricing3">Pricing Items style 3</h3>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-4 col-md-offset-4">
<!-- Price List -->
<div class="price-list style3">
<div class="price-item boxed">
<div class="price-content bg-image-note4">
<h3 class="price-title">Full acc</h3>
<h6 class="price-subtitle">For music lovers</h6>
<ul>
<li>50 000 songs</li>
<li>All profiles</li>
<li>Exclusive</li>
<li>Hot news</li>
</ul>
</div>
<div class="price">
<strong><sub>$</sub>9</strong>
<span>per month</span>
</div>
<a href="#" class="btn btn-full btn-large"><span><i class="glyphicon glyphicon-shopping-cart"></i>Buy!</span></a>
</div>
</div>
<!--/ Price List -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="price-list style3">
<div class="price-item boxed">
<div class="price-content bg-image-note4">
<h3 class="price-title">Full acc</h3>
<h6 class="price-subtitle">For music lovers</h6>
<ul>
<li>50 000 songs</li>
<li>All profiles</li>
<li>Exclusive stories</li>
<li>Hot news</li>
</ul>
</div>
<div class="price">
<strong><sub>$</sub>9</strong>
<span>per month</span>
</div>
<a href="#" class="btn btn-full btn-large">
<span><i class="glyphicon glyphicon-shopping-cart"></i>Buy!</span>
</a>
</div>
</div>
</pre>
</div>
</div>
<!-- Pricing List Style 3 -->
</div>
<!--/ Pricing List -->
<!-- Content Box -->
<div class="section-demo">
<h2 id="content-box">Content Box</h2>
<div class="description">
<p>Use titled box to display different content.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item content-box-demo">
<div class="row">
<div class="col-sm-6 col-md-offset-3">
<!-- widget -->
<div class="widget-container boxed">
<h3 class="widget-title">Title</h3>
<h6 class="widget-subtitle">SubTitle</h6>
</div>
<!-- /widget -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="widget-container boxed">
<div class="inner">
<h3 class="widget-title">Widget Title</h3>
<!-- place your content here -->
</div>
</div>
</pre>
</div>
</div>
</div>
<!--/ Content Box -->
<!-- Video Player -->
<div class="section-demo">
<h2 id="video-player">Video Player</h2>
<div class="description">
<p>Use Video.js player to play video content.</p>
<div class="callout">
<h5>Element specific usage</h5>
<p>Video Player require next files to be included into <code><head></code> section of the page:</p>
<pre class="prettyprint">
<link href="css/video-js.css" rel="stylesheet">
<script src="js/video.js"></script>
</pre>
</div>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<!-- Video Player -->
<div class="widget-container widget-video boxed">
<video id="video1" controls preload="auto" poster="../funky-tunes-css/images/temp/vjs-poster-4.jpg" class="video-js vjs-styled-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
<script>
videojs("video1", {
"height": "auto",
"width": "auto"
}).ready(function() {
var myPlayer = this; // Store the video object
var aspectRatio = 342 / 536; // Make up an aspect ratio
function resizeVideoJS() {
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height(width * aspectRatio);
}
resizeVideoJS(); // Initialize the function
window.addEventListener("resize", resizeVideoJS, false); // Call the function on resize
});
</script>
</div>
<!--/ Video Player -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="widget-container widget-video boxed">
<video id="video1" controls preload="auto" poster="images/temp/vjs-poster-4.jpg" class="video-js vjs-styled-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
</div>
</pre>
<div class="fire-js">Enable Video Player via JS:</div>
<pre class="prettyprint">
<script>
videojs("video1", {
"height": "auto",
"width": "auto"
}).ready(function() {
var myPlayer = this; // Store the video object
var aspectRatio = 342 / 536; // Make up an aspect ratio
function resizeVideoJS() {
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id()).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height(width * aspectRatio);
}
resizeVideoJS(); // Initialize the function
window.addEventListener("resize", resizeVideoJS, false); // Call the function on resize
});
</script>
</pre>
</div>
</div>
</div>
<!--/ Video Player -->
<!-- Audio Player -->
<div class="section-demo">
<h2 id="audio-player">Audio Players</h2>
<!-- Circle Audio Player -->
<div class="description">
<h3 id="audio-player-circle">Circle Audio Player</h3>
<div class="callout">
<h5>Element specific usage</h5>
<p>Circle Audio Player require next files to be included into <code><head></code> section of the page:</p>
<pre class="prettyprint">
<link href="css/jplayer.css" rel="stylesheet">
<script src="js/jplayer/jquery.jplayer.min.js"></script>
<script src="js/jplayer/jquery.transform2d.js"></script>
<script src="js/jplayer/jquery.grab.js"></script>
<script src="js/jplayer/mod.csstransforms.min.js"></script>
<script src="js/jplayer/circle.player.js"></script>
</pre>
</div>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<!-- Circle Player -->
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="cp_container_1" class="cp-container clearfix">
<div class="cp-wrap">
<div class="cp-progress-holder">
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a class="cp-play" tabindex="1">play</a></li>
<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
<div class="jp-current-time"></div>
</div>
<div class="jp-controls jp-buttons">
<div class="song-title">
<div class="item-song">Picasso Baby</div>
<div class="item-artist">jay-z</div>
</div>
<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
<div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
<script>
//<![CDATA[
$(document).ready(function(){
new CirclePlayer(
"#jquery_jplayer_1",
{
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
},
{
cssSelectorAncestor: "#cp_container_1",
swfPath: "js/jplayer",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: false,
keyEnabled: false,
preload: "auto"
}
);
});
//]]>
</script>
<!--/ Circle Player -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="cp_container_1" class="cp-container clearfix">
<div class="cp-wrap">
<div class="cp-progress-holder">
<div class="cp-progress-1"></div>
<div class="cp-progress-2"></div>
</div>
<div class="cp-circle-control"></div>
<ul class="cp-controls">
<li><a class="cp-play" tabindex="1">play</a></li>
<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
</ul>
<div class="jp-current-time"></div>
</div>
<div class="jp-controls jp-buttons">
<div class="song-title">
<div class="item-song">Picasso Baby</div>
<div class="item-artist">jay-z</div>
</div>
<a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
<a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
<div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
<a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
</div>
</div>
</pre>
<div class="fire-js">Enable Circle Audio Player via JS:</div>
<pre class="prettyprint">
<script>
//<![CDATA[
$(document).ready(function(){
new CirclePlayer(
"#jquery_jplayer_1",
{
mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
},
{
cssSelectorAncestor: "#cp_container_1",
swfPath: "js/jplayer",
supplied: "oga, mp3",
wmode: "window",
smoothPlayBar: false,
keyEnabled: false,
preload: "auto"
}
);
});
//]]>
</script>
</pre>
</div>
</div>
<!-- Circle Audio Player -->
</div>
<!--/ Audio Player -->
<!-- User Profile -->
<div class="section-demo">
<div class="description">
<h2 id="user-profile">User Profile</h2>
<p>Display information about user in a styled box.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<!-- Widget Profile -->
<div class="tabs-framed tabs-framed-right boxed widget-container widget-profile">
<ul class="tabs clearfix">
<li><a href="#profile5" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a></li>
<li class="active"><a href="#profile6" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a></li>
<li><a href="#profile7" data-toggle="tab"><i class="icon-tab-6"></i>Music</a></li>
<li><a href="#profile8" data-toggle="tab"><i class="icon-tab-7"></i>Comments</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="profile5">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-1.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Miley Cyrus</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade in active" id="profile6">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-2.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Anna Maria Jopek</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile7">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-3.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Katy Perry</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile8">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="../funky-tunes-css/images/temp/profile-4.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Madonna</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views"><a href="#"><i class="icon-small-author"></i>7 034</a></li>
<li class="profile-likes"><a href="#"><i class="icon-small-like"></i>12 980</a></li>
<li class="profile-comments"><a href="#"><i class="icon-small-comment"></i>9 156</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--/ Widget Profile -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="tabs-framed tabs-framed-right boxed widget-container widget-profile">
<ul class="tabs clearfix">
<li>
<a href="#profile5" data-toggle="tab"><i class="icon-tab-4"></i>Photos</a>
</li>
<li class="active">
<a href="#profile6" data-toggle="tab"><i class="icon-tab-5"></i>Profile</a>
</li>
<li>
<a href="#profile7" data-toggle="tab"><i class="icon-tab-6"></i>Music</a>
</li>
<li>
<a href="#profile8" data-toggle="tab"><i class="icon-tab-7"></i>Comments</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="profile5">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="images/temp/profile-1.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Miley Cyrus</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views">
<a href="#"><i class="icon-small-author"></i>7 034</a>
</li>
<li class="profile-likes">
<a href="#"><i class="icon-small-like"></i>12 980</a>
</li>
<li class="profile-comments">
<a href="#"><i class="icon-small-comment"></i>9 156</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade in active" id="profile6">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="images/temp/profile-2.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Anna Maria Jopek</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views">
<a href="#"><i class="icon-small-author"></i>7 034</a>
</li>
<li class="profile-likes">
<a href="#"><i class="icon-small-like"></i>12 980</a>
</li>
<li class="profile-comments">
<a href="#"><i class="icon-small-comment"></i>9 156</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile7">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="images/temp/profile-3.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Katy Perry</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views">
<a href="#"><i class="icon-small-author"></i>7 034</a>
</li>
<li class="profile-likes">
<a href="#"><i class="icon-small-like"></i>12 980</a>
</li>
<li class="profile-comments">
<a href="#"><i class="icon-small-comment"></i>9 156</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile8">
<div class="profile-social">
<a href="#"><span class="icon-small-pinterest"></span></a>
<a href="#"><span class="icon-small-twitter"></span></a>
<a href="#"><span class="icon-small-facebook"></span></a>
</div>
<div class="profile-image">
<img src="images/temp/profile-4.jpg" alt="" />
</div>
<div class="bottom">
<div class="profile-desc">
<a href="#" class="profile-title">Madonna</a>
<span class="profile-subtitle">ARTIST PROFILE</span>
</div>
<ul class="profile-links clearfix">
<li class="profile-views">
<a href="#"><i class="icon-small-author"></i>7 034</a>
</li>
<li class="profile-likes">
<a href="#"><i class="icon-small-like"></i>12 980</a>
</li>
<li class="profile-comments">
<a href="#"><i class="icon-small-comment"></i>9 156</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
<!--/ User Profile -->
<!-- Statistics -->
<div class="section-demo">
<h2 id="statistics">Statistical Data</h2>
<div class="description">
<p>Statistics widget is based on <a href="https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart" target="_blank">Google Charts</a>.</p>
<div class="callout">
<h5>Element specific usage</h5>
<p>Google Charts require next file to be included into <code><head></code> section of the page:</p>
<pre class="prettyprint">
<script src="https://www.google.com/jsapi"></script>
</pre>
</div>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-6 col-md-offset-3">
<!-- Statistics -->
<div class="widget-container widget-stats boxed boxed-transparent">
<div class="stats-top">
<h6 class="widget-title">Chart positions</h6>
<div class="widget-subtitle">2013</div>
</div>
<div class="stats-content fade-effect">
<div id="stats" class="carousel slide" data-interval="20000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<div id="graph-1" class="graph"></div>
<div class="stats-tab-bottom clearfix">
<span class="artist">Passenger</span>
<span class="position"><strong>1</strong>st<em>top<br>position</em></span>
</div>
</div>
<div class="item">
<div id="graph-2" class="graph"></div>
<div class="stats-tab-bottom clearfix">
<span class="artist">Miley Cyrus</span>
<span class="position"><strong>2</strong>d<em>top<br>position</em></span>
</div>
</div>
<div class="item">
<div id="graph-3" class="graph"></div>
<div class="stats-tab-bottom clearfix">
<span class="artist">Katy Perry</span>
<span class="position"><strong>3</strong>rd<em>top<br>position</em></span>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#stats" data-slide="prev"></a>
<a class="carousel-control right" href="#stats" data-slide="next"></a>
</div>
</div>
</div>
<!--/ Statistics -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="widget-container widget-stats boxed boxed-transparent">
<div class="stats-top">
<h6 class="widget-title">Chart positions</h6>
<div class="widget-subtitle">2013</div>
</div>
<div class="stats-content fade-effect">
<div id="stats" class="carousel slide" data-interval="20000">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div id="graph-1" class="graph"></div>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month', 'Place', {type: 'string', role: 'tooltip', p: {html:true}}],
['Jan', 3, '<strong>3</strong><span>place</span>'],
['Feb', 1, '<strong>1</strong><span>place</span>'],
['Mar', 5, '<strong>5</strong><span>place</span>'],
['Apr', 8, '<strong>8</strong><span>place</span>'],
['May', 9, '<strong>9</strong><span>place</span>'],
['Jun', 6, '<strong>6</strong><span>place</span>'],
['Jul', 3, '<strong>3</strong><span>place</span>'],
['Aug', 8, '<strong>8</strong><span>place</span>'],
['Sep', 4, '<strong>4</strong><span>place</span>'],
['Oct', 2, '<strong>2</strong><span>place</span>'],
['Nov', 6, '<strong>6</strong><span>place</span>'],
['Dec', 9, '<strong>9</strong><span>place</span>']
]);
var options = {
curveType: 'function',
chartArea:{left:0, top:10, width:"100%"},
hAxis: {textStyle: {color: 'transparent', fontSize: 0}},
vAxis: {direction: -1, gridlines: {color: 'transparent', count: 0}, baselineColor: 'transparent'},
tooltip: {isHtml: true},
backgroundColor:{fill: 'transparent'},
series: [{
color: '#fff',
visibleInLegend: false,
pointSize: 4,
lineWidth: 3,
areaOpacity: .1
}]
};
var chart = new google.visualization.LineChart(document.getElementById('graph-1'));
chart.draw(data, options);
$(window).resize(function() {
chart.clearChart();
chart.draw(data, options);
});
$('#stats').on('slid.bs.carousel', function () {
chart.clearChart();
chart.draw(data, options);
})
}
</script>
<div class="stats-tab-bottom clearfix">
<span class="artist">Passenger</span>
<span class="position"><strong>1</strong>st<em>top<br>position</em></span>
</div>
</div>
...
...
...
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#stats" data-slide="prev"></a>
<a class="carousel-control right" href="#stats" data-slide="next"></a>
</div>
</div>
</div>
</pre>
</div>
</div>
</div>
<!--/ Statistics -->
<!-- Schedule -->
<div class="section-demo">
<h2 id="widget-schedule">Tour Calendar</h2>
<div class="description">
<p></p>
<div class="callout">
<h5>Element specific usage</h5>
<p>Widget Schedule require next files to be included into <code><head></code> section of the page:</p>
<pre class="prettyprint">
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
</pre>
</div>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-12">
<!-- Widget Schedule -->
<div class="widget-container widget-schedule clearfix">
<h2 class="widget-title"><i></i>Calendar</h2>
<div class="carousel">
<ul id="schedule">
<li class="schedule-item clearfix">
<div class="schedule-left">
<div class="schedule-name">Kyle<br />Minouge</div>
<div class="schedule-date">january 25th</div>
<div class="rating clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star" rel="4"></span>
<span class="star" rel="5"></span>
</div>
</div>
<div class="schedule-right">
<div class="schedule-avatar"><a href="#"><img src="../funky-tunes-css/images/temp/schedule-avatar-2.jpg" alt="" /></a></div>
<div class="schedule-links">
<a class="schedule-details" href="#"><i class="icon-small-info"></i>Details</a>
<a class="schedule-add" href="#"><i class="icon-small-star"></i>Add to list</a>
</div>
</div>
</li>
<li class="schedule-item clearfix">
<div class="schedule-left">
<div class="schedule-name">Selena<br />Gomez</div>
<div class="schedule-date">MARCH 18th</div>
<div class="rating clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star voted" rel="4"></span>
<span class="star" rel="5"></span>
</div>
</div>
<div class="schedule-right">
<div class="schedule-avatar"><a href="#"><img src="../funky-tunes-css/images/temp/schedule-avatar-3.jpg" alt="" /></a></div>
<div class="schedule-links">
<a class="schedule-details" href="#"><i class="icon-small-info"></i>Details</a>
<a class="schedule-add" href="#"><i class="icon-small-star"></i>Add to list</a>
</div>
</div>
</li>
<li class="schedule-item clearfix">
<div class="schedule-left">
<div class="schedule-name">Maria<br />Jopek</div>
<div class="schedule-date">MARCH 12th</div>
<div class="rating clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star voted" rel="4"></span>
<span class="star voted" rel="5"></span>
</div>
</div>
<div class="schedule-right">
<div class="schedule-avatar"><a href="#"><img src="../funky-tunes-css/images/temp/schedule-avatar-4.jpg" alt="" /></a></div>
<div class="schedule-links">
<a class="schedule-details" href="#"><i class="icon-small-info"></i>Details</a>
<a class="schedule-add" href="#"><i class="icon-small-star"></i>Add to list</a>
</div>
</div>
</li>
</ul>
<a class="prev" id="schedule-prev" href="#">‹</a>
<a class="next" id="schedule-next" href="#">›</a>
</div>
</div>
<script>
jQuery(document).ready(function ($) {
function scheduleInit() {
$('#schedule').carouFredSel({
swipe : {
onTouch: true
},
prev: '#schedule-prev',
next: "#schedule-next",
auto: {
play: true,
timeoutDuration: 16000
},
scroll: {
pauseOnHover: true,
items: 1,
duration: 500,
easing: 'swing'
}
});
}
scheduleInit();
$(window).resize(function() {
scheduleInit();
});
});
</script>
<!--/ Widget Schedule -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="widget-container widget-schedule clearfix">
<h2 class="widget-title"><i></i>Calendar</h2>
<div class="carousel">
<ul id="schedule">
<li class="schedule-item clearfix">
<div class="schedule-left">
<div class="schedule-name">Kyle<br />Minouge</div>
<div class="schedule-date">january 25th</div>
<div class="rating clearfix">
<span class="star voted" rel="1"></span>
<span class="star voted" rel="2"></span>
<span class="star voted" rel="3"></span>
<span class="star" rel="4"></span>
<span class="star" rel="5"></span>
</div>
</div>
<div class="schedule-right">
<div class="schedule-avatar">
<a href="#"><img src="images/temp/schedule-avatar-2.jpg" alt="" /></a>
</div>
<div class="schedule-links">
<a class="schedule-details" href="#"><i class="icon-small-info"></i>Details</a>
<a class="schedule-add" href="#"><i class="icon-small-star"></i>Add to list</a>
</div>
</div>
</li>
...
...
...
</ul>
<a class="prev" id="schedule-prev" href="#">‹</a>
<a class="next" id="schedule-next" href="#">›</a>
</div>
</div>
</pre>
<div class="fire-js">Enable Schedule via JS:</div>
<pre class="prettyprint">
<script>
jQuery(document).ready(function ($) {
function scheduleInit() {
$('#schedule').carouFredSel({
swipe : {
onTouch: true
},
prev: '#schedule-prev',
next: "#schedule-next",
auto: {
play: true,
timeoutDuration: 16000
},
scroll: {
pauseOnHover: true,
items: 1,
duration: 500,
easing: 'swing'
}
});
}
scheduleInit();
$(window).resize(function() {
scheduleInit();
});
});
</script>
</pre>
</div>
</div>
</div>
<!--/ Schedule -->
<!-- Charts -->
<div class="section-demo">
<h2 id="charts">Music Charts</h2>
<!-- Top 3 Chart -->
<div class="description">
<h3 id="charts-top3">Top 3 Chart</h3>
<p>Top 3 songs and video clips.</p>
<h4>Example</h4>
</div>
<div class="example">
<div class="example-item">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<!-- Top 3 Chart -->
<div class="widget-container widget-top3chart boxed">
<ul class="chart-tab music">
<li class="clearfix">
<span class="position">1</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-4.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Wide Awake</strong>Miley Cyrus</a>
<a href="#" class="chart-like">246<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">2</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-6.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Bullet proof</strong>Madonna</a>
<a href="#" class="chart-like">984<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">3</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-8.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>She Wolf</strong>Rihanna</a>
<a href="#" class="chart-like">896<i class="icon-small-like"></i></a>
</li>
</ul>
<ul class="chart-tab video active">
<li class="clearfix">
<span class="position">1</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-9.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>She Wolf</strong>Shakira</a>
<a href="#" class="chart-like">593<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">2</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-10.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Wide Awake</strong>Katy Perry</a>
<a href="#" class="chart-like">412<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">3</span>
<div class="chart-avatar"><img src="../funky-tunes-css/images/temp/thumb-11.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Bullet proof</strong>Bruno Mars</a>
<a href="#" class="chart-like">360<i class="icon-small-like"></i></a>
</li>
</ul>
<ul class="chart-links green clearfix">
<li class="text">Top3</li>
<li><a href="javascript:;" class="music"><i class="icon-small-note"></i>Music</a></li>
<li><a href="javascript:;" class="video active"><i class="icon-small-cam"></i>Videos</a></li>
</ul>
</div>
<!--/ Top 3 Chart -->
</div>
</div>
</div>
<div class="example-code">
<pre class="prettyprint">
<div class="widget-container widget-top3chart boxed">
<ul class="chart-tab music">
<li class="clearfix">
<span class="position">1</span>
<div class="chart-avatar"><img src="images/temp/thumb-4.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Wide Awake</strong>Miley Cyrus</a>
<a href="#" class="chart-like">246<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">2</span>
<div class="chart-avatar"><img src="images/temp/thumb-6.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Bullet proof</strong>Madonna</a>
<a href="#" class="chart-like">984<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">3</span>
<div class="chart-avatar"><img src="images/temp/thumb-8.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>She Wolf</strong>Rihanna</a>
<a href="#" class="chart-like">896<i class="icon-small-like"></i></a>
</li>
</ul>
<ul class="chart-tab video active">
<li class="clearfix">
<span class="position">1</span>
<div class="chart-avatar"><img src="images/temp/thumb-9.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>She Wolf</strong>Shakira</a>
<a href="#" class="chart-like">593<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">2</span>
<div class="chart-avatar"><img src="images/temp/thumb-10.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Wide Awake</strong>Katy Perry</a>
<a href="#" class="chart-like">412<i class="icon-small-like"></i></a>
</li>
<li class="clearfix">
<span class="position">3</span>
<div class="chart-avatar"><img src="images/temp/thumb-11.jpg" alt="" /></div>
<a href="#" class="chart-title"><strong>Bullet proof</strong>Bruno Mars</a>
<a href="#" class="chart-like">360<i class="icon-small-like"></i></a>
</li>
</ul>
<ul class="chart-links green clearfix">
<li class="text">Top3</li>
<li>
<a href="javascript:;" class="music"><i class="icon-small-note"></i>Music</a>
</li>
<li>
<a href="javascript:;" class="video active"><i class="icon-small-cam"></i>Videos</a>
</li>
</ul>
</div>
</pre>
</div>
</div>
<!--/ Top 3 Chart -->
</div>
<!--/ Charts -->
</div>
<!--/ content -->
</div>
</div>
<!--/ row-->
</div>
<!--/ container -->
</div>
</body>
</html>
read包
ReadPackageServlet
package com.demo.read;
import com.demo.annotation.PackageServlet;
import com.demo.annotation.TomcatRequestMapping;
import com.demo.util.ClassUtil;
import com.demo.util.ServletUtil;
import com.demo.vo.ServletVo;
import com.demo.vo.TomcatPrintVo;
import javax.servlet.Servlet;
import java.util.ArrayList;
import java.util.List;
import java.util.Set;
/**
* @author tanyongpeng
* <p>根据注解路径获取所有servlet 以及对应的模板</p>
**/
public final class ReadPackageServlet {
public static List<ServletVo> servletList(Class<?> cls) throws Exception {
List<ServletVo> ladybugServlets = new ArrayList<>();
PackageServlet packageServlet = cls.getAnnotation(PackageServlet.class);
if (packageServlet != null){
String servletPack = packageServlet.servletPack();
String componentsPack = packageServlet.componentsPack();
Set<Class<?>> classSet = ClassUtil.getClasses(servletPack);
for (Class<?> aClass : classSet) {
TomcatRequestMapping servlet = aClass.getAnnotation(TomcatRequestMapping.class);
if (servlet != null) {
String component = ServletUtil.getComponent(componentsPack, aClass);
TomcatPrintVo.getInstance().getServletComponents().put(aClass.getSimpleName(),component);
for (String path : servlet.value()) {
ladybugServlets.add(new ServletVo(aClass.getSimpleName(), (Servlet) aClass.newInstance(),path));
}
}
}
}
return ladybugServlets;
}
}
servlet包
DocServlet
package com.demo.servlet;
import com.demo.annotation.TomcatRequestMapping;
import com.demo.util.ServletUtil;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* @author tanyongpeng
* 当前servlet必须对应DocServlet.html 必须同名
*/
@TomcatRequestMapping("/user/doc")
public class DocServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
ServletUtil.setComponent(response,DocServlet.class);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
status包
ReptileStatus
package com.demo.status;
/**
* @author tanyongpeng
* <p>状态值</p>
**/
public class ReptileStatus {
// 语法标识符号
public static final String GRAMMAR_HTML = ".html";
public static final String GRAMMAR_LOCALHOST = "localhost";
public static final String GRAMMAR_WEBAPPS = "webapps";
// 语法分割符split
public static final String GRAMMAR_SPLIT_SLASH_DAN = "/";
// 语法替换符号
public static final String GRAMMAR_REPLACE_POINT = ".";
public static final String GRAMMAR_REPLACE_LEFT_SLASH = "\\";
// 请求字符编码
public static final String CHAR_CONTENT_TYPE = "text/html";
public static final String CHAR_ENCODING = "UTF-8";
// 路径
public static final String CHAR_SYSTEM_PATH = "user.dir";
public static final String CHAR_USER_PATH = "\\src\\main\\java\\";
}
util包
ClassUtil
package com.demo.util;
import java.io.File;
import java.io.FileFilter;
import java.io.IOException;
import java.net.JarURLConnection;
import java.net.URL;
import java.net.URLDecoder;
import java.util.Enumeration;
import java.util.LinkedHashSet;
import java.util.Set;
import java.util.jar.JarEntry;
import java.util.jar.JarFile;
/**
* @author tanyongpeng
* <p>class读取类</p>
**/
public class ClassUtil {
/**
* 根据包名获取包下面所有的类名
*
* @param pack
* @return
* @throws Exception
*/
public static Set<Class<?>> getClasses(String pack) throws Exception {
// 第一个class类的集合
Set<Class<?>> classes = new LinkedHashSet<Class<?>>();
// 是否循环迭代
boolean recursive = true;
// 获取包的名字 并进行替换
String packageName = pack;
String packageDirName = packageName.replace('.', '/');
// 定义一个枚举的集合 并进行循环来处理这个目录下的things
Enumeration<URL> dirs;
try {
dirs = Thread.currentThread().getContextClassLoader().getResources(packageDirName);
// 循环迭代下去
while (dirs.hasMoreElements()) {
// 获取下一个元素
URL url = dirs.nextElement();
// 得到协议的名称
String protocol = url.getProtocol();
// 如果是以文件的形式保存在服务器上
if ("file".equals(protocol)) {
// 获取包的物理路径
String filePath = URLDecoder.decode(url.getFile(), "UTF-8");
// 以文件的方式扫描整个包下的文件 并添加到集合中
findClassesInPackageByFile(packageName, filePath, recursive, classes);
} else if ("jar".equals(protocol)) {
// 如果是jar包文件
// 定义一个JarFile
JarFile jar;
try {
// 获取jar
jar = ((JarURLConnection) url.openConnection()).getJarFile();
// 从此jar包 得到一个枚举类
Enumeration<JarEntry> entries = jar.entries();
findClassesInPackageByJar(packageName, entries, packageDirName, recursive, classes);
} catch (IOException e) {
// log.error("在扫描用户定义视图时从jar包获取文件出错");
e.printStackTrace();
}
}
}
} catch (IOException e) {
e.printStackTrace();
}
return classes;
}
/**
* 以文件的形式来获取包下的所有Class
*
* @param packageName
* @param packagePath
* @param recursive
* @param classes
*/
private static void findClassesInPackageByFile(String packageName, String packagePath, final boolean recursive, Set<Class<?>> classes) {
// 获取此包的目录 建立一个File
File dir = new File(packagePath);
// 如果不存在或者 也不是目录就直接返回
if (!dir.exists() || !dir.isDirectory()) {
// log.warn("用户定义包名 " + packageName + " 下没有任何文件");
return;
}
// 如果存在 就获取包下的所有文件 包括目录
File[] dirfiles = dir.listFiles(new FileFilter() {
// 自定义过滤规则 如果可以循环(包含子目录) 或则是以.class结尾的文件(编译好的java类文件)
@Override
public boolean accept(File file) {
return (recursive && file.isDirectory()) || (file.getName().endsWith(".class"));
}
});
// 循环所有文件
for (File file : dirfiles) {
// 如果是目录 则继续扫描
if (file.isDirectory()) {
findClassesInPackageByFile(packageName + "." + file.getName(), file.getAbsolutePath(), recursive, classes);
} else {
// 如果是java类文件 去掉后面的.class 只留下类名
String className = file.getName().substring(0, file.getName().length() - 6);
try {
classes.add(Thread.currentThread().getContextClassLoader().loadClass(packageName + '.' + className));
} catch (ClassNotFoundException e) {
// log.error("添加用户自定义视图类错误 找不到此类的.class文件");
e.printStackTrace();
}
}
}
}
/**
* 以jar的形式来获取包下的所有Class
*
* @param packageName
* @param entries
* @param packageDirName
* @param recursive
* @param classes
*/
private static void findClassesInPackageByJar(String packageName, Enumeration<JarEntry> entries, String packageDirName, final boolean recursive, Set<Class<?>> classes) {
// 同样的进行循环迭代
while (entries.hasMoreElements()) {
// 获取jar里的一个实体 可以是目录 和一些jar包里的其他文件 如META-INF等文件
JarEntry entry = entries.nextElement();
String name = entry.getName();
// 如果是以/开头的
if (name.charAt(0) == '/') {
// 获取后面的字符串
name = name.substring(1);
}
// 如果前半部分和定义的包名相同
if (name.startsWith(packageDirName)) {
int idx = name.lastIndexOf('/');
// 如果以"/"结尾 是一个包
if (idx != -1) {
packageName = name.substring(0, idx).replace('/', '.');
}
if ((idx != -1) || recursive) {
if (name.endsWith(".class") && !entry.isDirectory()) {
String className = name.substring(packageName.length() + 1, name.length() - 6);
try {
classes.add(Class.forName(packageName + '.' + className));
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
}
}
}
}
}
SelfStartingUtil
package com.demo.util;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.PrintStream;
/**
* @author tanyongpeng
* <p>浏览器启动类</p>
**/
public class SelfStartingUtil {
public static void run(int port){
if (!"Linux".equals(System.getProperty("os.name"))){
try {
String address = "http://localhost:"+port+"/user/doc";
String run = "cmd /c start "+address;
Runtime.getRuntime().exec(run);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
ServletUtil
package com.demo.util;
import cn.hutool.core.io.FileUtil;
import com.demo.status.ReptileStatus;
import com.demo.vo.TomcatPrintVo;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author tanyongpeng
* <p>des</p>
**/
public class ServletUtil {
public static PrintWriter out(HttpServletResponse response){
response.setContentType(ReptileStatus.CHAR_CONTENT_TYPE);
response.setCharacterEncoding(ReptileStatus.CHAR_ENCODING);
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
return out;
}
public static String getComponent(String path,Class<?> cls){
return FileUtil.readUtf8String(getPath(path,cls));
}
public static String getPath(String path,Class<?> cls){
String property = System.getProperty(ReptileStatus.CHAR_SYSTEM_PATH)+ReptileStatus.CHAR_USER_PATH;
path = path.replace(ReptileStatus.GRAMMAR_REPLACE_POINT,ReptileStatus.GRAMMAR_REPLACE_LEFT_SLASH);
return property + path + ReptileStatus.GRAMMAR_REPLACE_LEFT_SLASH + cls.getSimpleName() + ReptileStatus.GRAMMAR_HTML;
}
public static void setComponent(HttpServletResponse response,Class<?> cls){
// 根据servlet名称获取对应的模板，并写出
PrintWriter printWriter = out(response);
printWriter.println(TomcatPrintVo.getInstance().getServletComponents().get(cls.getSimpleName()));
}
}
vo包
ServletVo
package com.demo.vo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.servlet.Servlet;
/**
* @author tanyongpeng
* <p>des</p>
**/
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ServletVo {
/**
* 名称
*/
private String servletName;
/**
* 当前对象
*/
private Servlet servlet;
/**
* 当前访问路径
*/
private String path;
}
TomcatPrintVo
package com.demo.vo;
import lombok.Data;
import java.util.HashMap;
import java.util.Map;
/**
* @author tanyongpeng
* <p>des</p>
**/
@Data
public class TomcatPrintVo {
protected static volatile TomcatPrintVo printVo;
private Map<String,String> servletComponents = new HashMap<>();
public static TomcatPrintVo getInstance(){
if (printVo == null){
synchronized (TomcatPrintVo.class){
if (printVo == null){
printVo = new TomcatPrintVo();
}
}
}
return printVo;
}
}
主启动类
MyTomcat
package com.demo;
import com.demo.read.ReadPackageServlet;
import com.demo.status.ReptileStatus;
import com.demo.util.SelfStartingUtil;
import com.demo.vo.ServletVo;
import org.apache.catalina.Context;
import org.apache.catalina.Host;
import org.apache.catalina.LifecycleException;
import org.apache.catalina.connector.Connector;
import org.apache.catalina.core.StandardContext;
import org.apache.catalina.startup.Tomcat;
import java.util.List;
import java.util.UUID;
/**
* @author tanyongpeng
* <p>des</p>
**/
public class MyTomcat {
public static void runTomcat(int port,Class<?> cls) throws Exception {
//1.把目录的绝对路径获取到
String classPath = System.getProperty(ReptileStatus.CHAR_SYSTEM_PATH);
//2.新建一个Tomcat对象
Tomcat tomcat = new Tomcat();
//3.创建一个连接器
Connector connector = tomcat.getConnector();
//4.连接器有一个端口属性
connector.setPort(port);
//5.设置Host
Host host = tomcat.getHost();
//6.设置Host的属性，可以参照Server.xml来进行理解
host.setName(ReptileStatus.GRAMMAR_LOCALHOST);
host.setAppBase(ReptileStatus.GRAMMAR_WEBAPPS);
//7.把class加载进来，把启动的工程加入进来了
Context context = tomcat.addContext(host,ReptileStatus.GRAMMAR_SPLIT_SLASH_DAN,classPath);
if(context instanceof StandardContext) {
List<ServletVo> servletVos = ReadPackageServlet.servletList(cls);
for (ServletVo servletVo : servletVos) {
tomcat.addServlet(ReptileStatus.GRAMMAR_SPLIT_SLASH_DAN,servletVo.getServletName() + UUID.randomUUID().toString(),servletVo.getServlet()).addMapping(servletVo.getPath());
}
}
try {
tomcat.start();
} catch (LifecycleException e) {
e.printStackTrace();
}
// 启动至浏览器
SelfStartingUtil.run(port);
//强制Tomcat Server等待，避免main线程执行结束后关闭
tomcat.getServer().await();
}
}
最后开始测试
test包
MyTest
package com.demo.test;
import com.demo.MyTomcat;
import com.demo.annotation.PackageServlet;
/**
* @author tanyongpeng
* <p>
* 测试类
* servletPack 对应servlet的路径
* componentsPack 对应html模板的路径
* </p>
**/
@PackageServlet(servletPack = "com.demo.servlet",componentsPack = "com.demo.components")
public class MyTest {
public static void main(String[] args) throws Exception {
// 启动 port 设置端口号
// 如果当前类PackageServlet这个注解 需要把当前类class加载减去
MyTomcat.runTomcat(8888,MyTest.class);
}
}
完工！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/112556.html
