Question

我根本不是一个js程序员，所以看着jquery移动库里面的代码我很困惑（他们根本就没有好的评论）。我已经使用jQuery UI创建了一个colorpicker滑块，你可以看到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');
            }

        }
    });
});

Answer 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 UI colorpicker滑块转换为jQuery Mobile版本

1 个答案: