jQuery Slider Bar / 슬라이더 바 3종 샘플

Open API/Jquery|2016. 11. 17. 11:03
반응형



슬라이더 바 샘플입니다.


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>
저작자표시

댓글()

jQuery 페이지 또는 객체에서 특정 키워드 강조하기

Open API/Jquery|2016. 11. 17. 10:59
반응형


특정 페이지 또는 객체에서 키워드 찾는 함수..


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>


저작자표시

댓글()

jQuery Star Rating Plugin - 별점 주기

Open API/Jquery|2016. 11. 16. 10:38
반응형



별점 주기 플러그인입니다.


가끔 유용하게 사용하는 기능 쓸라면 코딩하기 귀찮은.....( _ _)..


Plugin Url : http://wbotelhos.com/raty


DownLoad : https://github.com/wbotelhos/raty


(기본 샘플외에도 많은 기능이 있습니다.)



Test Url : http://www.uhoon.co.kr/test/6979.html


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Pragma" content="no-cache"/>
        <meta http-equiv="Expires" content="-1"/>
        <title>jQuery Raty - A Star Rating Plugin</title>
 
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script type="text/javascript" src="/test/2979/js/jquery.raty.js"></script>
 
    </head>
    <body>
        <div id="star" ></div>
 
        <div style="padding-top:20px;">
            <label for="starRating">Value : </label><input type="text" id="starRating" value="3"/>
        </div>
 
        <div style="padding-top:20px;">
            <label for="displayStarRating">Value : </label><span id="displayStarRating" style="padding-left:20px;">3</span>
        </div>
    </body>
 
    <script type="text/javascript">
        $(function() {
            $('div#star').raty({
                score: 3
                ,path : "/test/2979/img"
                ,width : 200
                ,click: function(score, evt) {
                    $("#starRating").val(score);
                    $("#displayStarRating").html(score);
                }
            });
        });
    </script>
</html>

옵션


cancel      : false                                          // Creates a cancel button to cancel the rating.
cancelHint  : 'Cancel this rating!'                          // The cancel's button hint.
cancelOff   : 'cancel-off.png'                               // Icon used on active cancel.
cancelOn    : 'cancel-on.png'                                // Icon used inactive cancel.
cancelPlace : 'left'                                         // Cancel's button position.
click       : undefined                                      // Callback executed on rating click.
half        : false                                          // Enables half star selection.
halfShow    : true                                           // Enables half star display.
hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'] // Hints used on each star.
iconRange   : undefined                                      // Object list with position and icon on and off to do a mixed icons.
mouseout    : undefined                                      // Callback executed on mouseout.
mouseover   : undefined                                      // Callback executed on mouseover.
noRatedMsg  : 'Not rated yet!'                               // Hint for no rated elements when it's readOnly.
number      : 5                                              // Number of stars that will be presented.
numberMax   : 20                                             // Max of star the option number can creates.
path        : ''                                             // A global locate where the icon will be looked.
precision   : false                                          // Enables the selection of a precision score.
readOnly    : false                                          // Turns the rating read-only.
round       : { down: .25, full: .6, up: .76 }               // Included values attributes to do the score round math.
score       : undefined                                      // Initial rating.
scoreName   : 'score'                                        // Name of the hidden field that holds the score value.
single      : false                                          // Enables just a single star selection.
size        : 16                                             // The size of the icons that will be used.
space       : true                                           // Puts space between the icons.
starHalf    : 'star-half.png'                                // The name of the half star image.
starOff     : 'star-off.png'                                 // Name of the star image off.
starOn      : 'star-on.png'                                  // Name of the star image on.
target      : undefined                                      // Element selector where the score will be displayed.
targetFormat: '{score}'                                      // Template to interpolate the score in.
targetKeep  : false                                          // If the last rating value will be keeped after mouseout.
targetText  : ''                                             // Default text setted on target.
targetType  : 'hint'                                         // Option to choose if target will receive hint o 'score' type.
width       : undefined                                      // Manually adjust the width for the project.
저작자표시

댓글()
이전 1 ··· 43 44 45 46 47 48 49 ··· 60 다음

티스토리툴바