Jquery 를 이용한 조직도 그리기 PlugIn 입니다.
Test Url : http://www.uhoon.co.kr/test/3551/3551.html
Plugin Url : http://th3silverlining.com/2011/12/01/jquery-org-chart-a-plugin-for-visualising-data-in-a-tree-like-structure/
슬라이더 바 샘플입니다.
Jquery UI 사이트의 Slider bar 중 사용빈도 수가 높은 샘플을 정리해보았습니다.
Test Url : http://www.uhoon.co.kr/test/3377.html
참고 Url : http://jqueryui.com/slider/
1. 최대/최소값을 지정하는 슬라이더 바
2. 구간을 선택하는 슬라이더 바
3. 최대/최소 값중 증가값을 지정하는 슬라이더 바
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(function() {
$("#slider-range-max").slider({
range: "max",
min: 1,
max: 10,
value: 2,
slide: function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-range-max").slider("value"));
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function(event, ui) {
$("#amount2").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount2").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$("#slider").slider({
value:10,
min: 0,
max: 100,
step: 10,
slide: function( event, ui ) {
$( "#amount3" ).val( "$" + ui.value );
}
});
$( "#amount3" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<p>
<input type="text" id="amount2" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<p>
<input type="text" id="amount3" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
</body>
</html>
특정 페이지 또는 객체에서 키워드 찾는 함수..
1원짜리는 아니고...3원쯤의 가치가..;;
Test Url : http://www.uhoon.co.kr/test/3143.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>KeyWord Highlights</title>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
</head>
<script type="text/javascript">
<!--
$(document).ready(function(){
fnKeyWordHighlights("p","감기");
});
function fnKeyWordHighlights(obj,keyword)
{
$(obj).each(function(){
$(this).html($(this).html().replace(eval("/"+keyword+"/gi"), "<span style='color:red;font-weight:bold;'>"+keyword+"</span>"));
});
}
//-->
</script>
</head>
<body >
<p>나는 오늘 감기에 걸렸다. 지겨운 감기.. 너무 싫다.</p>
</body>
</html>
