JavaScript >> Javascript 文檔 >  >> Tags >> CSS

使用 jQuery 和 CSS3 的閃亮旋鈕控制

在本教程中,我們將編寫一個用於創建閃亮旋鈕控件的 jQuery 插件。恰當地命名為knobKnob,這個插件將使用CSS3 轉換和jQuery 的新事件處理方法,為您網站的訪問者提供一種從範圍內交互式選擇值的新方法。

KnobKnob 也在 Github 上。

更新: 感謝 ranyefet,該插件現在可以在移動設備上運行 [更改]。

HTML

頁面的 HTML 標記相當簡單。我們只需要控件的佔位符元素 - 其餘部分將由插件動態生成。以防萬一,這裡是頁面的完整標記:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Shiny Switches with CSS3 &amp; jQuery | Tutorialzine 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>

首先,我們包含最新版本的 jQuery,transform.js,它對我們將使用的 CSS3 轉換屬性的跨瀏覽器支持水平進行了調整,knobKnob 插件文件和 script.js,它將所有內容整合在一起。

#control div 是生成插件標記的地方。下面我們將插入 div,這些 div 將成為它周圍的彩色條。它們不是 KnobKnob 插件的一部分,我們將根據控件中選擇的值顯示它們。 KnobKnob 還帶有一個樣式表,用於確定旋鈕的外觀。您可以在 head 部分看到它。

現在讓我們來寫這個插件吧!

jQuery 代碼

您可以在旋鈕旋鈕文件夾中找到插件源文件。要在您的項目中使用它,只需將其解壓縮到您網站的資產文件夾中並包含您在其中找到的文件。這是實際的插件文件:

assets/knobKnob/knobKnob.jquery.js

/**
 * @name        jQuery KnobKnob plugin
 * @author      Martin Angelov
 * @version     1.0
 * @url         https://tutorialzine.com/2011/11/pretty-switches-css3-jquery/
 * @license     MIT License
 */

(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);

該插件採用多個選項作為參數對象 - snap、value 和 turn:

  • 抓拍 是對齊為零的度數。您可以通過慢慢向下轉動旋鈕來測試這一點;
  • 價值 是旋鈕的初始旋轉(也以度為單位);
  • 是一個回調函數,每次轉動旋鈕時都會調用。它唯一的參數是旋轉的比率(從 0 到 1)。稍後我們將使用此函數來確定要顯示多少個彩色分隔線。

在上面的代碼中,您可以看到我們正在使用 Math.atan2 函數(就像我們在 PointPoint 插件中所做的那樣)來計算鼠標指針和旋鈕中心之間的角度(以弧度為單位)。通過跟踪拖動開始和結束位置的角度,我們可以確定旋鈕旋轉了多少。

後來我們也使用jQuery 1.7 的新方法來操作事件監聽器——開和關。

現在讓我們看看如何使用這個插件。

assets/js/script.js

$(function(){

    var colors = [
        '26e000','2fe300','37e700','45ea00','51ef00',
        '61f800','6bfb00','77ff02','80ff05','8cff09',
        '93ff0b','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++){

        deg = i*12;

        // Create the colorbars

        $('<div class="colorBar">').css({
            backgroundColor: '#'+colors[i],
            transform:'rotate('+deg+'deg)',
            top: -Math.sin(deg/rad2deg)*80+100,
            left: Math.cos((180 - deg)/rad2deg)*80+100,
        }).appendTo(bars);
    }

    var colorBars = bars.find('.colorBar');
    var numBars = 0, lastNum = -1;

    $('#control').knobKnob({
        snap : 10,
        value: 154,
        turn : function(ratio){
            numBars = Math.round(colorBars.length*ratio);

            // Update the dom only when the number of active bars
            // changes, instead of on every move

            if(numBars == lastNum){
                return false;
            }
            lastNum = numBars;

            colorBars.removeClass('active').slice(0, numBars).addClass('active');
        }
    });

});

旋鈕周圍顯示的彩色條不是插件的一部分。而且它們不應該是 - 插件只處理控件本身,這使得重用它更容易。

上面的代碼創建了一組 30 個 div,顏色逐漸從綠色變為紅色。然後將它們旋轉 12 度增量。感謝 回調函數傳遞給插件,這段代碼可以確定要顯示多少條彩色條。您可以在 assets/css/styles.css 中查看其餘的欄樣式 .

我們完成了!

有了這個,我們的插件就完成了!您可以將它用作控制面板和其他管理頁面的一部分,在您希望讓用戶能夠從值池中進行選擇的任何地方。下次我們將使用這個插件來增強新的範圍表單元素。


Tutorial JavaScript 教程
  1. 靜態站點、服務器端計算、Nextjs、WordPress

  2. 使用 Fetch API 發送 GraphQL 查詢(沒有 Apollo,URQL)

  3. SpiderMonkey 中的新正則表達式引擎

  4. 如何使用 TypeScript 騷擾你的民選官員

  5. 僅替換正則表達式匹配的一部分

  6. 我使用 Next.js、Day.js 和 Dev.to API 製作了一個免費的 Dev.to Writing Streak Calculator

  7. 使用Reducer Hook 來救援!

  1. 如何應對日益增長的供應鏈安全風險?

  2. 範圍內的獨家新聞(在 JavaScript 中)

  3. 為什麼我將 AlOficial.com 從 Laravel 轉移到 Nuxtjs 並且仍然是 React Lover。

  4. Phoenix 與 React:The Right Way™

  5. 我從 QA 到前端開發的旅程

  6. 🚦 在 HTML5 中將表單提交給不同的 Action

  7. 在 div 標籤之間插入/刪除 HTML 內容

  1. 5 個 jQuery 通知插件

  2. 一些 Redux 核心概念及其職責

  3. 帶有 MooTools 和 Node.js 的服務器端 JavaScript

  4. 使用 console.time() 在 JavaScript 中測量執行時間