将 jQuery UI 颜色选择器滑块转换为 jQuery Mobile 版本答案

【问题标题】：Convert jQuery UI colorpicker slider to jQuery Mobile version将 jQuery UI 颜色选择器滑块转换为 jQuery Mobile 版本
【发布时间】：2013-06-17 19:05:18
【问题描述】：

我根本不是 js 程序员，所以我对 jquery 移动库中的代码感到非常困惑（他们根本没有好的 cmets）。我已经使用 jQuery UI 创建了一个颜色选择器滑块，您可以看到 fiddle here - 我正在寻求帮助来创建我的小提琴版本，而不是使用 jquery mobile 或任何带有从哪里开始的指针。

我看到他们使用不同的方法来改变元素，所以我尝试改变它们，例如：

    domSlider.setAttribute( "id", "slider-horiz" );
    domSlider.setAttribute( "role", "application" );

我不确定如何实现滑块本身所需的功能，就像在 jQuery UI 中我能够在我的 html 文档中执行此操作（如小提琴中所示）：

    $(function() {
    var box = $('#box')[0];

    $("#slider-horiz").slider({
        orientation: "horizontal",
        min: 0,
        max: 360,
        value: 0,
        slide: function(event, ui) {
            box.style.background = 'hsl(' + ui.value + ', 100%, 50%)';
            var clr = $('#box').css('background-color');
            $('#box').attr('data-color', clr).trigger('click');
            $('#slider-handle').css('background-color', clr);
            if (ui.value == 0) {
                $('#box').attr('data-color', 'hsl(' + ui.value + ', 0%, 0%)').trigger('click');
                $('#slider-handle').css('background-color', '#000');
            }
            if (ui.value == 360) {
                $('#box').attr('data-color', 'hsl(' + ui.value + ', 100%, 100%)').trigger('click');
                $('#slider-handle').css('background-color', '#fff');
            }

        }
    });
});

【问题讨论】：

标签： jquery css jquery-ui jquery-mobile canvas

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/7F9eZ/

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <form>
                    <input name="slider-1" id="slider-1" min="0" max="360" value="0" type="range"/>
                    <a href="#colored_sketch" id="box" data-color="" style="border: 1px solid black; width: 30px; height: 30px; background: #000; display: inline-block;"></a>                    
                </form>                                
                <canvas id='colored_sketch' width='800' height='300'></canvas>
            </div>
        </div>    
    </body>
</html>

Javascript：

$(document).on('pageshow', '#index', function(){ 
    var box = $('#box')[0];
    $('#colored_sketch').sketch();

    $(document).on( "slidestop", "#slider-1", function( event, ui ) {
        box.style.background = 'hsl(' + $(this).val() + ', 100%, 50%)';
        var clr = $('#box').css('background-color');
        $('#box').attr('data-color', clr).trigger('click');        
    });    
});

CSS：

.ui-slider-track {
    background:url(http://i.imgur.com/lHQxra5.png) repeat-x !important;
    width: 200px !important;
    margin: 0 15px 0 15px !important;
}

#slider-1 {
    display: none;
}

#box {
    width:30px;
    height:30px;
    border:1px solid #000;
}

【讨论】：

哇，完全出乎意料，但非常感谢 - jquery mobile 是否无法进行我的小提琴中存在的实时更新？如在滑块移动时更新框的颜色。我注意到了 slidestop 和 slidestart（当然我在他们的文档中找不到）。
它有能力并且存在官方文档，您只需要考古学博士学位即可找到它：api.jquerymobile.com/slider ;)
编辑：没关系，我得到了颜色，只是不是实时的。