<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documentation</title>
<link href="css/monokai.css" rel="stylesheet">
<link href="css/themify-icons.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="main/assets/css/lib/jquery-ui.min.css" rel="stylesheet" />
<link href="main/assets/css/lib/lobipanel.min.css" rel="stylesheet" />
<link href="main/assets/css/lib/menubar/hoe.css" rel="stylesheet">
<link href="main/assets/css/lib/bootstrap.min.css" rel="stylesheet">
<link href="main/assets/css/style.css" rel="stylesheet">
<link href="css/doc-style.css" rel="stylesheet">
</head>
<body hoe-navigation-type="horizontal" hoe-nav-placement="left" theme-layout="wide-layout">
<div class="header header-bg">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-top">
<div class="pull-left">
<div class="logo"><a href="index.html"><span>Focus</span></a></div>
</div>
<div class="pull-right">
<ul>
<li class="header-icon dib"><i class="ti-email"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div id="hoeapp-wrapper" class="hoe-hide-lpanel" hoe-device-type="desktop">
<header id="hoe-header" hoe-lpanel-effect="shrink" hoe-color-type="logo-bg7">
<div class="hoe-left-header">
<span class="hoe-sidebar-toggle"><a href="javascript:void(0)"></a></span>
</div>
</header>
<div id="hoeapp-container">
<aside id="hoe-left-panel" hoe-position-type="absolute">
<ul class="nav panel-list m-0">
<li>
<a href="index.html">
<span class="menu-text">Index</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="calendar.html">
<span class="menu-text">Calendar</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="chart.html">
<span class="menu-text">Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="colorpicker.html">
<span class="menu-text">Colorpicker</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="datamap.html">
<span class="menu-text">Datamap</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="data-table.html">
<span class="menu-text">Data Table</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="gmap.html">
<span class="menu-text">Gmap</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="image-crop.html">
<span class="menu-text">Image Crop</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="jsgrid.html">
<span class="menu-text">Js Grid</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="knob.html">
<span class="menu-text">Knob</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="modal.html">
<span class="menu-text">Modal</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="multiselect.html">
<span class="menu-text">Multiselect</span>
<span class="selected"></span>
</a>
</li>
<li class="hoe-has-menu">
<a href="javascript:void(0)">
<span class="menu-text">More</span>
<span class="selected"></span>
</a>
<ul class="hoe-sub-menu">
<li>
<a href="multiselect-dropdown.html">
<span class="menu-text">Multiselect Dropdown</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="nestable.html">
<span class="menu-text">Nestable</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="panel.html">
<span class="menu-text">Panel</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="peity-chart.html">
<span class="menu-text">Peity Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rangeslider.html">
<span class="menu-text">Rangeslider</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rating1.html">
<span class="menu-text">Rating 1</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="rating2.html">
<span class="menu-text">Rating 2</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="scrollable.html">
<span class="menu-text">Scrollable</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="select2-dropdown.html">
<span class="menu-text">Select2-dropdown</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="sperkline-chart.html">
<span class="menu-text">Sperkline Chart</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="sweetalert.html">
<span class="menu-text">Sweetalert</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="toastr.html">
<span class="menu-text">Toastr.html</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="todo.html">
<span class="menu-text">Todo</span>
<span class="selected"></span>
</a>
</li>
<li>
<a href="vector-map.html">
<span class="menu-text">Vector Map</span>
<span class="selected"></span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section id="main-content">
<div class="row">
<div class="col-lg-12">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">Instruction</div>
</div>
<div class="panel-body">
Knob Jquery Plugin <a class="plugin-link" href="http://anthonyterrien.com/demo/knob/" target="_blank"> Click Here</a>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">HTML</div>
</div>
<div class="panel-body">
<pre><code class="html">
<div class="col-lg-4">
<div class="card alert nestable-cart">
<div class="card-header">
<h4>Basic</h4>
<div class="card-header-right-icon">
<ul>
<li class="doc-link"><a href="#"><i class="ti-link"></i></a></li>
</ul>
</div>
</div>
<div class="knob_plug">
<input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
</div>
</div><!-- /# card -->
</div><!-- /# column -->
<script src="assets/js/lib/knob/jquery.knob.min.js"></script><!-- scripit init-->
<script src="assets/js/lib/knob/knob.init.js"></script><!-- scripit init-->
</code></pre>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">CSS</div>
</div>
<div class="panel-body">
<pre><code class="less">
/* CSS */
.knob_plug{
text-align: center;
}
</code></pre>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel lobipanel-basic panel-primary">
<div class="panel-heading">
<div class="panel-title">Javascript</div>
</div>
<div class="panel-body">
<pre><code class="javascript">
/* Knob Jquery Javascript control function */
$(function($) {
"use strict";
$(".knob").knob({
change : function (value) {
//console.log("change : " + value);
},
release : function (value) {
//console.log(this.$.attr('value'));
console.log("release : " + value);
},
cancel : function () {
console.log("cancel : ", this);
},
/*format : function (value) {
return value + '%';
},*/
draw : function () {
// "tron" case
if(this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv) // Arc
, pa // Previous arc
, r = 1;
this.g.lineWidth = this.lineWidth;
if (this.o.displayPrevious) {
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc( this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
return false;
}
}
});
// Example of infinite knob, iPod click wheel
var v, up=0,down=0,i=0
,$idir = $("div.idir")
,$ival = $("div.ival")
,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
$("input.infinite").knob(
{
min : 0
, max : 20
, stopper : false
, change : function () {
if(v > this.cv){
if(up){
decr();
up=0;
}else{up=1;down=0;}
} else {
if(v < this.cv){
if(down){
incr();
down=0;
}else{down=1;up=0;}
}
}
v = this.cv;
}
});
});
//Superpose (clock) function
function clock() {
var $s = $(".second"),
$m = $(".minute"),
$h = $(".hour");
d = new Date(),
s = d.getSeconds(),
m = d.getMinutes(),
h = d.getHours();
$s.val(s).trigger("change");
$m.val(m).trigger("change");
$h.val(h).trigger("change");
setTimeout("clock()", 1000);
}
clock();
</code></pre>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="main/assets/js/lib/jquery.min.js"></script>
<script src="main/assets/js/lib/lobipanel.js"></script>
<script src="main/assets/js/lib/jquery-ui.min.js"></script>
<script src="main/assets/js/lib/jquery.ui.touch-punch.min.js"></script>
<script src="main/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="main/assets/js/lib/sidebar.js"></script>
<script src="main/assets/js/lib/bootstrap.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'></script>
<script src="js/scripts.js"></script>
</body>
</html> |