ساخت دستگیره کنترل

ساخت دستگیره کنترل

در این اموزش ما به شما نحوه ساختن دستگیره کنترلی شبیه دستگیره کنترل ولوم رادیو های قدیمی را می دهیم.

برای مشاهده لینک وارد شود

کار را با نوشتن کد های HTML آغاز می کنیم.ما فقط نیاز به یک مکان برای کنترل المان مورد نظر داریم و بقیه به صورت پویا ایجاد خواهند شد.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Shiny Switches with CSS3 &amp; jQuery | 8NP Demo</title>

        <!-- CSS stylesheets -->
        <link rel="stylesheet" href="assets/css/styles.css" />
        <link rel="stylesheet" href="assets/knobKnob/knobKnob.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <section id="main">

            <div id="bars">
                <div id="control">
                    <!-- The knob markup will go here -->
                </div>
                                <!-- The colorful dividers will go here -->
            </div>

        </section>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/knobKnob/transform.js"></script>
        <script src="assets/knobKnob/knobKnob.jquery.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

تگ control# جایی است که نشانه گذاری به آن اضافه خواهد شد.در زیر آن ما تگی برای افزودن میله هایی رنگی به دور آن نشانه قرار داده ایم.آنها بخشی از پلاگین نیستند ما فقط از آنها برای نمایش دادن سطح کنترل از آنها استفاده می کنیم.

Shiny Knob Control

کد های jQuery

شما میتونید سورس پلاگین را داخل پوشه knobKnob پیدا کنید.برای استفاده کردن آن در وبسایت تان  کافی است آن را در پوشه assets از حالت فشرده خارج کرده و فایل های مورد نیاز خودتان را در آن اضافه نمایید.

assets/knobKnob/knobKnob.jquery.js​

(function($){

    $.fn.knobKnob = function(props){

        var options = $.extend({
            snap: 0,
            value: 0,
            turn: function(){}
        }, props || {});

        var tpl = '<div class="knob">\
                <div class="top"></div>\
                <div class="base"></div>\
            </div>';

        return this.each(function(){

            var el = $(this);
            el.append(tpl);

            var knob = $('.knob',el)
                knobTop = knob.find('.top'),
                startDeg = -1,
                currentDeg = 0,
                rotation = 0,
                lastDeg = 0,
                doc = $(document);

            if(options.value > 0 && options.value <= 359){
                rotation = currentDeg = options.value;
                knobTop.css('transform','rotate('+(currentDeg)+'deg)');
                options.turn(currentDeg/359);
            }

            knob.on('mousedown', function(e){

                e.preventDefault();

                var offset = knob.offset();
                var center = {
                    y : offset.top + knob.height()/2,
                    x: offset.left + knob.width()/2
                };

                var a, b, deg, tmp,
                    rad2deg = 180/Math.PI;

                knob.on('mousemove.rem',function(e){

                    a = center.y - e.pageY;
                    b = center.x - e.pageX;
                    deg = Math.atan2(a,b)*rad2deg;

                    // we have to make sure that negative
                    // angles are turned into positive:
                    if(deg<0){
                        deg = 360 + deg;
                    }

                    // Save the starting position of the drag
                    if(startDeg == -1){
                        startDeg = deg;
                    }

                    // Calculating the current rotation
                    tmp = Math.floor((deg-startDeg) + rotation);

                    // Making sure the current rotation
                    // stays between 0 and 359
                    if(tmp < 0){
                        tmp = 360 + tmp;
                    }
                    else if(tmp > 359){
                        tmp = tmp % 360;
                    }

                    // Snapping in the off position:
                    if(options.snap && tmp < options.snap){
                        tmp = 0;
                    }

                    // This would suggest we are at an end position;
                    // we need to block further rotation.
                    if(Math.abs(tmp - lastDeg) > 180){
                        return false;
                    }

                    currentDeg = tmp;
                    lastDeg = tmp;

                    knobTop.css('transform','rotate('+(currentDeg)+'deg)');
                    options.turn(currentDeg/359);
                });

                doc.on('mouseup.rem',function(){
                    knob.off('.rem');
                    doc.off('.rem');

                    // Saving the current rotation
                    rotation = currentDeg;

                    // Marking the starting degree as invalid
                    startDeg = -1;
                });

            });
        });
    };

})(jQuery);

اکنون در زیر نحوه استفاده از این پلاگین را در زیر می بینید

assets/js/script.js​

$(function(){

    var colors = [
        '۲۶e000','2fe300','37e700','45ea00','51ef00',
        '۶۱f800','6bfb00','77ff02','80ff05','8cff09',
        '۹۳ff0b','9eff09','a9ff07','c2ff03','d7ff07',
        'f2ff0a','fff30a','ffdc09','ffce0a','ffc30a',
        'ffb509','ffa808','ff9908','ff8607','ff7005',
        'ff5f04','ff4f03','f83a00','ee2b00','e52000'
    ];

    var rad2deg = 180/Math.PI;
    var deg = 0;
    var bars = $('#bars');

    for(var i=0;i<colors.length;i++){ -="" 180="" :="" active="" backgroundcolor:="" bars="" class="colorBar" colorbars="bars.find('.colorBar');" create="" deg="i*12;" div="" dom="" every="" instead="" lastnum="numBars;" left:="" move="" numbars="=" number="" of="" on="" only="" return="" snap="" the="" top:="" turn="" update="" value:="" var="" when="">

پایان

 

 

 

+1
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


5 + = ده

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>