JavaScript和ajax的运用练习
来源：互联网 发布：淘宝怎么发布微淘广播 编辑：程序博客网 时间：2024/06/05 02:46
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!-- Page title --> <title>HOMER | WebApp admin theme</title> <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!--<link rel="shortcut icon" type="image/ico" href="favicon.ico" />--> <!-- Vendor styles --> <link th:href="@{/vendor/fontawesome/css/font-awesome.css}" rel="stylesheet" /> <link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.css" /> <link rel="stylesheet" href="vendor/metisMenu/dist/metisMenu.css" /> <link rel="stylesheet" href="vendor/animate.css/animate.css" /> <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.css" /> <!-- App styles --> <link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" /> <link rel="stylesheet" href="fonts/pe-icon-7-stroke/css/helper.css" /> <link rel="stylesheet" href="styles/style.css"/> <script src="js/jquery-2.1.1.js" type="text/javascript"></script></head><body class="fixed-navbar fixed-sidebar"><!-- Simple splash screen--><div class="splash"> <div class="color-line"></div><div class="splash-title"><h1>Homer - Responsive Admin Theme</h1><p>Special Admin Theme for small and medium webapp with very clean and aesthetic style and feel. </p><div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div> </div><!--[if lt IE 7]><p class="alert alert-danger">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]--><!-- Header --><div id="header"> <div class="color-line"> </div> <div id="logo" class="light-version"> <span> Homer Theme </span> </div> <nav role="navigation"> <div class="header-link hide-menu"><i class="fa fa-bars"></i></div> <div class="small-logo"> <span class="text-primary">HOMER APP</span> </div> <form role="search" class="navbar-form-custom" method="post" action="#"> <div class="form-group"> <input type="text" placeholder="Search something special" class="form-control" name="search"/> </div> </form> <div class="mobile-menu"> <button type="button" class="navbar-toggle mobile-menu-toggle" data-toggle="collapse" data-target="#mobile-collapse"> <i class="fa fa-chevron-down"></i> </button> <div class="collapse mobile-navbar" id="mobile-collapse"> <ul class="nav navbar-nav"> <li> <a class="" href="login.html">Login</a> </li> <li> <a class="" href="login.html">Logout</a> </li> <li> <a class="" href="profile.html">Profile</a> </li> </ul> </div> </div> <div class="navbar-right"> <ul class="nav navbar-nav no-borders"> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <i class="pe-7s-speaker"></i> </a> <ul class="dropdown-menu hdropdown notification animated flipInX"> <li> <a> <span class="label label-success">NEW</span> It is a long established. </a> </li> <li> <a> <span class="label label-warning">WAR</span> There are many variations. </a> </li> <li> <a> <span class="label label-danger">ERR</span> Contrary to popular belief. </a> </li> <li class="summary"><a href="#">See all notifications</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <i class="pe-7s-keypad"></i> </a> <div class="dropdown-menu hdropdown bigmenu animated flipInX"> <table> <tbody> <tr> <td> <a href="projects.html"> <i class="pe pe-7s-portfolio text-info"></i> <h5>Projects</h5> </a> </td> <td> <a href="mailbox.html"> <i class="pe pe-7s-mail text-warning"></i> <h5>Email</h5> </a> </td> <td> <a href="contacts.html"> <i class="pe pe-7s-users text-success"></i> <h5>Contacts</h5> </a> </td> </tr> <tr> <td> <a href="forum.html"> <i class="pe pe-7s-comment text-info"></i> <h5>Forum</h5> </a> </td> <td> <a href="analytics.html"> <i class="pe pe-7s-graph1 text-danger"></i> <h5>Analytics</h5> </a> </td> <td> <a href="file_manager.html"> <i class="pe pe-7s-box1 text-success"></i> <h5>Files</h5> </a> </td> </tr> </tbody> </table> </div> </li> <li class="dropdown"> <a class="dropdown-toggle label-menu-corner" href="#" data-toggle="dropdown"> <i class="pe-7s-mail"></i> <span class="label label-success">4</span> </a> <ul class="dropdown-menu hdropdown animated flipInX"> <div class="title"> You have 4 new messages </div> <li> <a> It is a long established. </a> </li> <li> <a> There are many variations. </a> </li> <li> <a> Lorem Ipsum is simply dummy. </a> </li> <li> <a> Contrary to popular belief. </a> </li> <li class="summary"><a href="#">See All Messages</a></li> </ul> </li> <li> <a href="#" id="sidebar" class="right-sidebar-toggle"> <i class="pe-7s-upload pe-7s-news-paper"></i> </a> </li> <li class="dropdown"> <a href="login.html"> <i class="pe-7s-upload pe-rotate-90"></i> </a> </li> </ul> </div> </nav></div><!-- Navigation --><aside id="menu"> <div id="navigation"> <div class="profile-picture"> <a href="index.html"> <img src="images/profile.jpg" class="img-circle m-b" alt="logo"/> </a> <div class="stats-label text-color"> <span class="font-extra-bold font-uppercase">Robert Razer</span> <div class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown"> <small class="text-muted">Founder of App <b class="caret"></b></small> </a> <ul class="dropdown-menu animated flipInX m-t-xs"> <li><a href="contacts.html">Contacts</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="analytics.html">Analytics</a></li> <li class="divider"></li> <li><a href="login.html">Logout</a></li> </ul> </div> <div id="sparkline1" class="small-chart m-t-sm"></div> <div> <h4 class="font-extra-bold m-b-xs"> $260 104,200 </h4> <small class="text-muted">Your income from the last year in sales product X.</small> </div> </div> </div> <!--加数据--> <ul class="nav" id="side-menu"> <li> <a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="typography.html">Typography</a></li> <li><a href="buttons.html">Colors & Buttons</a></li> <li><a href="components.html">Components</a></li> <li><a href="alerts.html">Alerts</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="loading_buttons.html">Loading buttons</a></li> <li><a href="draggable.html">Draggable panels</a></li> <li><a href="code_editor.html">Code editor</a></li> <li><a href="email_template.html">Email template</a></li> <li><a href="nestable_list.html">List</a></li> <li><a href="tour.html">Tour</a></li> <li><a href="icons.html">Icons library</a></li> </ul> </li> </ul> <!--<ul class="nav" id="side-menu"> <li class="active"> <a href="index.html"> <span class="nav-label">Dashboard</span> <span class="label label-success pull-right">v.1</span> </a> </li> <li> <a href="analytics.html"> <span class="nav-label">Analytics</span><span class="label label-warning pull-right">NEW</span> </a> </li> <li> <a href="#"><span class="nav-label">Interface</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="panels.html">Panels design</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="buttons.html">Colors & Buttons</a></li> <li><a href="components.html">Components</a></li> <li><a href="alerts.html">Alerts</a></li> <li><a href="modals.html">Modals</a></li> <li><a href="loading_buttons.html">Loading buttons</a></li> <li><a href="draggable.html">Draggable panels</a></li> <li><a href="code_editor.html">Code editor</a></li> <li><a href="email_template.html">Email template</a></li> <li><a href="nestable_list.html">List</a></li> <li><a href="tour.html">Tour</a></li> <li><a href="icons.html">Icons library</a></li> </ul> </li> <li> <a href="#"><span class="nav-label">App views</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="contacts.html">Contacts</a></li> <li><a href="projects.html">Projects</a></li> <li><a href="project.html">Project detail</a></li> <li><a href="app_plans.html">App plans</a></li> <li><a href="social_board.html">Social board</a></li> <li><a href="faq.html">FAQ</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="notes.html">Notes</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="mailbox.html">Mailbox</a></li> <li><a href="mailbox_compose.html">Email compose</a></li> <li><a href="mailbox_view.html">Email view</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="blog_details.html">Blog article</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="forum_details.html">Forum details</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="calendar.html">Calendar</a></li> <li><a href="invoice.html">Invoice</a></li> <li><a href="file_manager.html">File manager</a></li> <li><a href="chat_view.html">Chat view</a></li> <li><a href="search.html">Search view</a></li> </ul> </li> <li> <a href="#"><span class="nav-label">Charts</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="chartjs.html">ChartJs</a></li> <li><a href="flot.html">Flot charts</a></li> <li><a href="inline.html">Inline graphs</a></li> <li><a href="chartist.html">Chartist</a></li> <li><a href="c3.html">C3 Charts</a></li> </ul> </li> <li> <a href="#"><span class="nav-label">Box transitions</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="overview.html"><span class="label label-success pull-right">Start</span> Overview </a> </li> <li><a href="transition_two.html">Columns from up</a></li> <li><a href="transition_one.html">Columns custom</a></li> <li><a href="transition_three.html">Panels zoom</a></li> <li><a href="transition_four.html">Rows from down</a></li> <li><a href="transition_five.html">Rows from right</a></li> </ul> </li> <li> <a href="#"><span class="nav-label">Common views</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="login.html">Login</a></li> <li><a href="register.html">Register</a></li> <li><a href="error_one.html">Error 404</a></li> <li><a href="error_two.html">Error 505</a></li> <li><a href="lock.html">Lock screen</a></li> <li><a href="password_recovery.html">Passwor recovery</a></li> </ul> </li> <li> <a href="#"><span class="nav-label">Tables</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="tables_design.html">Tables design</a></li> <li><a href="datatables.html">Data tables</a></li> <li><a href="footable.html">Foo Table</a></li> </ul> </li> <li> <a href="widgets.html"> <span class="nav-label">Widgets</span> <span class="label label-success pull-right">Special</span></a> </li> <li> <a href="#"><span class="nav-label">Forms</span><span class="fa arrow"></span> </a> <ul class="nav nav-second-level"> <li><a href="forms_elements.html">Forms elements</a></li> <li><a href="forms_extended.html">Forms extended</a></li> <li><a href="text_editor.html">Text editor</a></li> <li><a href="wizard.html">Wizard</a></li> <li><a href="validation.html">Validation</a></li> </ul> </li> <li> <a href="options.html"> <span class="nav-label">Layout options</span></a> </li> <li> <a href="grid_system.html"> <span class="nav-label">Grid system</span></a> </li> <li> <a href="landing_page.html"> <span class="nav-label">Landing page</span></a> </li> <li> <a href="package.html"> <span class="nav-label">Package</span></a> </li> </ul>--> <!--加数据--> <script type="text/javascript"> $.ajax({ type: "get", dataType:'json', url: "http://localhost:9999/html/glks", //data: "name=John&location=Boston", success: function(data){ var n = eval(data); console.log(n.row); //console.log(n.row.length); var listone = []; var liststr=""; var dd=[]; var ss={}; for(var i=0;i<n.row.length;i++){ // listone.push(n.row[i].keyword); // liststr +=n.row[i].keyword; var cstr = ""; //console.log(n.row[i].camenu.length); for (var j = 0; j < n.row[i].camenu.length; j++) { listone.push(n.row[i].camenu[j].keyword); // cstr+=n.row[i].camenu[j].keyword; cstr+=" <li><a href=\"http://localhost:9999/html/tables\">"+n.row[i].camenu[j].keyword+"</a></li>"; } //1 liststr+=" <li>\n" + " <a href=\"#\"><span class=\"nav-label\">"+n.row[i].keyword+"</span><span id='fff' class=\"fa arrow\"></span> </a><ul class=\"nav nav-second-level\" id='son'>"+cstr+"</ul></li>" //console.log($(".fa arrow")); //dd=$(".fa arrow"); // console.log(dd); $(".nav-label").click(function(){ $(" li ul li").toggle(); }); } $('#side-menu').html(liststr); /*$(".nav-label").click(function(){ $(".nav nav-second-level").toggle(); });*/ /*$("#fff").click(function(){ $("#son").toggle(); });*/ console.log(listone); } }); </script><li></li> </div></aside><!-- Main Wrapper --><div id="wrapper"> <div class="content animate-panel"> <div class="row"> <div class="col-lg-12 text-center m-t-md"> <h2> Welcome to Homer Theme </h2> <p> Special <strong>Admin Theme</strong> for small, medium and large webapp with very clean and aesthetic style and feel. </p> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="hpanel"> <div class="panel-heading"> <div class="panel-tools"> <a class="showhide"><i class="fa fa-chevron-up"></i></a> <a class="closebox"><i class="fa fa-times"></i></a> </div> Dashboard information and statistics </div> <div class="panel-body"> <div class="row"> <div class="col-md-3 text-center"> <div class="small"> <i class="fa fa-bolt"></i> Page views </div> <div> <h1 class="font-extra-bold m-t-xl m-b-xs"> 226,802 </h1> <small>Page views in last month</small> </div> <div class="small m-t-xl"> <i class="fa fa-clock-o"></i> Data from January </div> </div> <div class="col-md-6"> <div class="text-center small"> <i class="fa fa-laptop"></i> Active users in current month (December) </div> <div class="flot-chart" style="height: 160px"> <div class="flot-chart-content" id="flot-line-chart"></div> </div> </div> <div class="col-md-3 text-center"> <div class="small"> <i class="fa fa-clock-o"></i> Active duration </div> <div> <h1 class="font-extra-bold m-t-xl m-b-xs"> 10 Months </h1> <small>And four weeks</small> </div> <div class="small m-t-xl"> <i class="fa fa-clock-o"></i> Last active in 12.10.2015 </div> </div> </div> </div> <div class="panel-footer"> <span class="pull-right"> You have two new messages from <a href="">Monica Bolt</a> </span> Last update: 21.05.2015 </div> </div> </div> </div> <div class="row"> <div class="col-lg-3"> <div class="hpanel"style="width: 500px;height: 500px;"> <div class="panel-body text-center h-200" > <iframe src="http://localhost:9999/html/shu"style="width: 1500px;height: 400px;border: 1px solid #ffffff;"></iframe> </div> <!-- <div class="panel-body text-center h-200"> <i class="pe-7s-graph1 fa-4x"></i> <h1 class="m-xs">$1 206,90</h1> <h3 class="font-extra-bold no-margins text-success"> All Income </h3> <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit vestibulum.</small> </div>--> <!--<div class="panel-footer"> This is standard panel footer </div>--> </div> </div> <!-- <div class="col-lg-3"> <div class="hpanel stats"> <div class="panel-body h-200"> <div class="stats-title pull-left"> <h4>Users Activity</h4> </div> <div class="stats-icon pull-right"> <i class="pe-7s-share fa-4x"></i> </div> <div class="m-t-xl"> <h3 class="m-b-xs">210</h3> <span class="font-bold no-margins"> Social users </span> <div class="progress m-t-xs full progress-small"> <div style="width: 55%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="55" role="progressbar" class=" progress-bar progress-bar-success"> <span class="sr-only">35% Complete (success)</span> </div> </div> <div class="row"> <div class="col-xs-6"> <small class="stats-label">Pages / Visit</small> <h4>7.80</h4> </div> <div class="col-xs-6"> <small class="stats-label">% New Visits</small> <h4>76.43%</h4> </div> </div> </div> </div> <div class="panel-footer"> This is standard panel footer </div> </div> </div>--> <!--<div class="col-lg-3"> <div class="hpanel stats"> <div class="panel-body h-200"> <div class="stats-title pull-left"> <h4>Page Views</h4> </div> <div class="stats-icon pull-right"> <i class="pe-7s-monitor fa-4x"></i> </div> <div class="m-t-xl"> <h1 class="text-success">860k+</h1> <span class="font-bold no-margins"> Social users </span> <br/> <small> Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry</strong>. Lorem Ipsum has been. </small> </div> </div> <div class="panel-footer"> This is standard panel footer </div> </div> </div>--> <!--<div class="col-lg-3"> <div class="hpanel stats"> <div class="panel-body h-200"> <div class="stats-title pull-left"> <h4>Today income</h4> </div> <div class="stats-icon pull-right"> <i class="pe-7s-cash fa-4x"></i> </div> <div class="clearfix"></div> <div class="flot-chart"> <div class="flot-chart-content" id="flot-income-chart"></div> </div> <div class="m-t-xs"> <div class="row"> <div class="col-xs-5"> <small class="stat-label">Today</small> <h4>$230,00 </h4> </div> <div class="col-xs-7"> <small class="stat-label">Last week</small> <h4>$7 980,60 <i class="fa fa-level-up text-success"></i></h4> </div> </div> </div> </div> <div class="panel-footer"> This is standard panel footer </div> </div> </div>--> </div> <div class="row"> <div class="col-lg-3"> <div class="hpanel stats"> <div class="panel-heading"> <div class="panel-tools"> <a class="showhide"><i class="fa fa-chevron-up"></i></a> <a class="closebox"><i class="fa fa-times"></i></a> </div> Last active </div> <div class="panel-body list"> <iframe src="http://localhost:9999/html/xian" style="width: 1500px;height: 400px;border: 1px solid #ffffff;"></iframe> </div> <!--<div class="panel-body list"> <div class="stats-title pull-left"> <h4>Activity</h4> </div> <div class="stats-icon pull-right"> <i class="pe-7s-science fa-4x"></i> </div> <div class="m-t-xl"> <span class="font-bold no-margins"> Social users </span> <br/> <small> Lorem Ipsum is simply dummy text of the printing simply all dummy text. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been. </small> </div> <div class="row m-t-md"> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold text-success">300,102</h3> <div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div> </div> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold text-success">280,200</h3> <div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div> </div> </div> <div class="row m-t-md"> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold ">120,108</h3> <div class="font-bold">38% <i class="fa fa-level-down"></i></div> </div> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold ">450,600</h3> <div class="font-bold">28% <i class="fa fa-level-down"></i></div> </div> </div> </div>--> <div class="panel-footer"> This is standard panel footer </div> </div> </div> <!-- <div class="col-lg-6"> <div class="hpanel"> <div class="panel-heading"> <div class="panel-tools"> <a class="showhide"><i class="fa fa-chevron-up"></i></a> <a class="closebox"><i class="fa fa-times"></i></a> </div> Recently active projects </div> <div class="panel-body list"> <div class="table-responsive project-list"> <table class="table table-striped"> <thead> <tr> <th colspan="2">Project</th> <th>Completed</th> <th>Task</th> <th>Date</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="i-checks" checked="checked"/></td> <td>Contract with Zender Company <br/> <small><i class="fa fa-clock-o"></i> Created 14.08.2015</small> </td> <td> <span class="pie">1/5</span> </td> <td><strong>20%</strong></td> <td>Jul 14, 2013</td> <td><a href=""><i class="fa fa-check text-success"></i></a></td> </tr> <tr> <td><input type="checkbox" class="i-checks"/></td> <td>There are many variations of passages <br/> <small><i class="fa fa-clock-o"></i> Created 21.07.2015</small> </td> <td> <span class="pie">1/4</span> </td> <td><strong>40%</strong></td> <td>Jul 16, 2013</td> <td><a href=""><i class="fa fa-check text-navy"></i></a></td> </tr> <tr> <td><input type="checkbox" class="i-checks" checked="checked"/></td> <td>Contrary to popular belief <br/> <small><i class="fa fa-clock-o"></i> Created 12.06.2015</small> </td> <td> <span class="pie">0.52/1.561</span> </td> <td><strong>75%</strong></td> <td>Jul 18, 2013</td> <td><a href=""><i class="fa fa-check text-navy"></i></a></td> </tr> <tr> <td><input type="checkbox" class="i-checks"/></td> <td>Gamma project <br/> <small><i class="fa fa-clock-o"></i> Created 06.03.2015</small> </td> <td> <span class="pie">226/360</span> </td> <td><strong>16%</strong></td> <td>Jul 22, 2013</td> <td><a href=""><i class="fa fa-check text-navy"></i></a></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-lg-3"> <div class="hpanel"> <div class="panel-heading"> <div class="panel-tools"> <a class="showhide"><i class="fa fa-chevron-up"></i></a> <a class="closebox"><i class="fa fa-times"></i></a> </div> Activity </div> <div class="panel-body list"> <div class="pull-right"> <a href="#" class="btn btn-xs btn-default">Today</a> <a href="#" class="btn btn-xs btn-default">Month</a> </div> <div class="panel-title">Last Activity</div> <small class="fo">This is simple example</small> <div class="list-item-container"> <div class="list-item"> <h3 class="no-margins font-extra-bold text-success">2,773</h3> <small>Tota Messages Sent</small> <div class="pull-right font-bold">98% <i class="fa fa-level-up text-success"></i></div> </div> <div class="list-item"> <h3 class="no-margins font-extra-bold text-color3">4,422</h3> <small>Last activity</small> <div class="pull-right font-bold">13% <i class="fa fa-level-down text-color3"></i></div> </div> <div class="list-item"> <h3 class="no-margins font-extra-bold text-color3">9,180</h3> <small>Monthly income</small> <div class="pull-right font-bold">22% <i class="fa fa-bolt text-color3"></i></div> </div> <div class="list-item"> <h3 class="no-margins font-extra-bold text-success">1,450</h3> <small>Tota Messages Sent</small> <div class="pull-right font-bold">44% <i class="fa fa-level-up text-success"></i></div> </div> </div> </div> </div> </div>--> </div> </div> <!-- Right sidebar --> <div id="right-sidebar" class="animated fadeInRight"> <div class="p-m"> <button id="sidebar-close" class="right-sidebar-toggle sidebar-button btn btn-default m-b-md"><i class="pe pe-7s-close"></i> </button> <div> <span class="font-bold no-margins"> Analytics </span> <br/> <small> Lorem Ipsum is simply dummy text of the printing simply all dummy text.</small> </div> <div class="row m-t-sm m-b-sm"> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold text-success">300,102</h3> <div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div> </div> <div class="col-lg-6"> <h3 class="no-margins font-extra-bold text-success">280,200</h3> <div class="font-bold">98% <i class="fa fa-level-up text-success"></i></div> </div> </div> <div class="progress m-t-xs full progress-small"> <div style="width: 25%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" role="progressbar" class=" progress-bar progress-bar-success"> <span class="sr-only">35% Complete (success)</span> </div> </div> </div> <div class="p-m bg-light border-bottom border-top"> <span class="font-bold no-margins"> Social talks </span> <br/> <small> Lorem Ipsum is simply dummy text of the printing simply all dummy text.</small> <div class="m-t-md"> <div class="social-talk"> <div class="media social-profile clearfix"> <a class="pull-left"> <img src="images/a1.jpg" alt="profile-picture"/> </a> <div class="media-body"> <span class="font-bold">John Novak</span> <small class="text-muted">21.03.2015</small> <div class="social-content small"> Injected humour, or randomised words which don't look even slightly believable. </div> </div> </div> </div> <div class="social-talk"> <div class="media social-profile clearfix"> <a class="pull-left"> <img src="images/a3.jpg" alt="profile-picture"/> </a> <div class="media-body"> <span class="font-bold">Mark Smith</span> <small class="text-muted">14.04.2015</small> <div class="social-content"> Many desktop publishing packages and web page editors. </div> </div> </div> </div> <div class="social-talk"> <div class="media social-profile clearfix"> <a class="pull-left"> <img src="images/a4.jpg" alt="profile-picture"/> </a> <div class="media-body"> <span class="font-bold">Marica Morgan</span> <small class="text-muted">21.03.2015</small> <div class="social-content"> There are many variations of passages of Lorem Ipsum available, but the majority have </div> </div> </div> </div> </div> </div> <div class="p-m"> <span class="font-bold no-margins"> Sales in last week </span> <div class="m-t-xs"> <div class="row"> <div class="col-xs-6"> <small>Today</small> <h4 class="m-t-xs">$170,20 <i class="fa fa-level-up text-success"></i></h4> </div> <div class="col-xs-6"> <small>Last week</small> <h4 class="m-t-xs">$580,90 <i class="fa fa-level-up text-success"></i></h4> </div> </div> <div class="row"> <div class="col-xs-6"> <small>Today</small> <h4 class="m-t-xs">$620,20 <i class="fa fa-level-up text-success"></i></h4> </div> <div class="col-xs-6"> <small>Last week</small> <h4 class="m-t-xs">$140,70 <i class="fa fa-level-up text-success"></i></h4> </div> </div> </div> <small> Lorem Ipsum is simply dummy text of the printing simply all dummy text. Many desktop publishing packages and web page editors. </small> </div> </div> <!-- Footer--> <footer class="footer"> <span class="pull-right"> Example text </span> Company 2015-2020 </footer></div><!-- Vendor scripts --><script src="vendor/jquery/dist/jquery.min.js"></script><script src="vendor/jquery-ui/jquery-ui.min.js"></script><script src="vendor/slimScroll/jquery.slimscroll.min.js"></script><script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script><script src="vendor/jquery-flot/jquery.flot.js"></script><script src="vendor/jquery-flot/jquery.flot.resize.js"></script><script src="vendor/jquery-flot/jquery.flot.pie.js"></script><script src="vendor/flot.curvedlines/curvedLines.js"></script><script src="vendor/jquery.flot.spline/index.js"></script><script src="vendor/metisMenu/dist/metisMenu.min.js"></script><script src="vendor/iCheck/icheck.min.js"></script><script src="vendor/peity/jquery.peity.min.js"></script><script src="vendor/sparkline/index.js"></script><!-- App scripts --><script src="scripts/homer.js"></script><script src="scripts/charts.js"></script><script> $(function () { /** * Flot charts data and options */ var data1 = [ [0, 55], [1, 48], [2, 40], [3, 36], [4, 40], [5, 60], [6, 50], [7, 51] ]; var data2 = [ [0, 56], [1, 49], [2, 41], [3, 38], [4, 46], [5, 67], [6, 57], [7, 59] ]; var chartUsersOptions = { series: { splines: { show: true, tension: 0.4, lineWidth: 1, fill: 0.4 }, }, grid: { tickColor: "#f0f0f0", borderWidth: 1, borderColor: 'f0f0f0', color: '#6a6c6f' }, colors: [ "#62cb31", "#efefef"], }; $.plot($("#flot-line-chart"), [data1, data2], chartUsersOptions); /** * Flot charts 2 data and options */ var chartIncomeData = [ { label: "line", data: [ [1, 10], [2, 26], [3, 16], [4, 36], [5, 32], [6, 51] ] } ]; var chartIncomeOptions = { series: { lines: { show: true, lineWidth: 0, fill: true, fillColor: "#64cc34" } }, colors: ["#62cb31"], grid: { show: false }, legend: { show: false } }; $.plot($("#flot-income-chart"), chartIncomeData, chartIncomeOptions); });</script></body></html>
阅读全文
