Question

这是我下载clockpicker jquery插件源代码的链接 http://weareoutman.github.io/clockpicker/jquery.html

我在我的一个对话框中使用了clockpicker，但我需要调整它的大小。 clockpicker没有这样的属性我可以提到尺寸。我需要在css中做些什么更改才能更改时钟选择器的高度和宽度？

我可以通过更改clockpicker-popover类中的某些属性来更改框的宽度和高度，但更改clockpicker-dial和clockpicker-tick类没有帮助。

实际时钟（小时和分钟）没有变化。我看到这是用javascript代码编写的，并且根据实际时钟的准备，一些变量被声明如下。

// Clock size
var dialRadius = 100,
outerRadius = 80,
// innerRadius = 80 on 12 hour clock
innerRadius = 54,
tickRadius = 13,
diameter = dialRadius * 2,
duration = transitionSupported ? 350 : 1;

基于这些值，完成了一些三角运算。我该如何更改这些值以调整时钟大小？

Answer 1

使用css缩放弹出窗口：

.popover{
    -ms-transform: scale(1.5);
    -webkit-transform: scale(1.5); 
    transform: scale(1.5);
    top:120px !important;
    margin-left:100px; }

并在编辑过的js库中使用新的变量缩放：

// Clock size
...
var zoom = 1.5;

具有缩放能力的最终结果:( js库代码已更改）http://jsfiddle.net/YkvK9/412/

Answer 2

如果您查看源文件，您会找到clockpicker的css，它是以.css结尾的那个

Answer 3

在上面的jsfiddle示例中有一个错误（我在上面的评论中提到过）。这是修复：

    // Mousedown or touchstart
    function mousedown(e, space) {
        var offset = plate.offset(),
            isTouch = /^touch/.test(e.type),
            x0 = offset.left + dialRadius*zoom,
            y0 = offset.top + dialRadius*zoom,
            dx = (isTouch ? e.originalEvent.touches[0] : e).pageX - x0,
            dy = (isTouch ? e.originalEvent.touches[0] : e).pageY - y0,
            z = Math.sqrt(dx * dx + dy * dy)/zoom,
            moved = false;
        ............
        ............

        // Clock
        self.setHand(dx/zoom, dy/zoom, ! space, true);

        // Mousemove on document
        $doc.off(mousemoveEvent).on(mousemoveEvent, function(e){
            e.preventDefault();
            ..........
            ..........
            moved = true;
            self.setHand(x/zoom, y/zoom, false, true);
        });

        // Mouseup on document
        $doc.off(mouseupEvent).on(mouseupEvent, function(e){
            $doc.off(mouseupEvent);
            e.preventDefault();
            ...........
            ...........
            if ((space || moved) && x === dx && y === dy) {
                self.setHand(x/zoom, y/zoom);
            }
            .............
            .............
            $doc.off(mousemoveEvent);
        });
    }

    // Set clock hand to (x, y)
    ClockPicker.prototype.setHand = function(x, y, roundBy5, dragging){
        var radian = Math.atan2(x, - y),
        isHours = this.currentView === 'hours',
        unit = Math.PI / (isHours || roundBy5 ? 6 : 30),
        z = Math.sqrt(x * x + y * y),
        options = this.options,
        inner = isHours && z < (outerRadius + innerRadius) / 2,
        radius = inner ? innerRadius : outerRadius,
        value;
        ......
        ......
    }

如何调整时钟选择器的大小？

3 个答案: