小编Hap*_*rso的帖子

在开发模式生成器时,我遇到了2011年这个问题中描述的相同问题.

给出的答案并不真正提供一个跨浏览器,客户端的解决方案.

单击" 导出模式"按钮时,我会接受以下任何解决方案:

1. 通过canvas2image触发下载,同时确保以.png扩展名保存文件(无论文件名设置为什么),或者,

2. 使用该Canvas2Image.saveAsPNG()方法生成的图像显示窗口小部件(最好是KendoUI),并让用户从那里保存它,最好不要使用蹩脚的右键单击解决方案,而是使用链接或按钮.

我正在使用的按钮的HTML:

<button id="downloadbtn" onClick="javascript:downloadImage()" data-role="button" class="k-button">Export Pattern</button>   

触发下载的功能:

function downloadImage () {

    //...extra code omitted
    var oCanvas = document.getElementById("my_canvas");
    oCanvas.width = $("#pixels-h").val();
    oCanvas.height = $("#pixels-v").val(); 
    Canvas2Image.saveAsPNG(oCanvas);
    //...extra code omitted    

  }

该文件似乎可以在OSX下使用Chrome版本23.0.1271.95和Safari版本5.1.7(6534.57.2)下载.

我有一个报告,有人在Fi​​refox 17.0.1 for OSX下载后无法打开该文件.显然,下载会生成.part文件.

最大的问题是没有文件扩展名,我怀疑这种方法是否可靠.

我正在寻找一种仅与客户端兼容的解决方案,与当前浏览器具有最广泛的兼容性,因此我认为HTML5 download属性不会起作用,因为它目前仅在Chrome中受支持.

有创意的解决方案

我有一个脚本（此处为 JsFiddle），可以检测li块元素何时在页面上垂直居中，并为其分配一个.centered类以通过 CSS 使其更大。

.centered {
    height: 30vh;
    background-color: #bbb;
    -webkit-transition: height 0.6s;
}

一旦确定了中心元素，我就可以通过以下方式选择下一个兄弟元素：

.centered + li {
    height: 20vh;
    background-color: #ccc;
    -webkit-transition: height 0.6s;
}

当我尝试在纯 CSS 中选择 .centered 元素之前的同级元素时，就会出现问题

在查看2011 年的这个问题后，我尝试使用评论和其他选择器之一中建议的 :has() 伪类，但没有运气。

这个CSS4关系伪类可以做到这一点，但目前不支持：

li:has(+ .centered) {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

我还尝试选择不是 的同级元素的last-of-type，但要么只支持简单的选择器，要么我只是不知道如何正确链接选择器。li.centered:not()

这是不工作的选择器：

li:not(.centered ~ li):last-of-type {
    height: 20vh;
    background-color: #Fcc;
    -webkit-transition: height 0.6s;
}

问题：是否有任何伪类和选择器的组合可以在纯 CSS 中实现这一目的？

我希望自提出这些问题以来已经取得了一些进展。

我正在使用一个六角形模式生成器,它使用KendoUI小部件作为GUI.

我正在尝试实现一个Randomize()函数,将滑块手柄设置为随机位置的动画.单击Randomize时调用该函数!按钮.这应该在Kendo滑块上生成一个slide或一个change事件,这反过来会触发changeYcomp(e)调用init()更新模式的函数的回调.

滑块的标记:

 <div class="sliderwrapper" id="yslider">
                            <label for="ycompSlider">Y variation</label>
          <input id="ycompSlider" class="slider" />
 </div>

回调脚本:

function changeYcomp(e) {
    kendoConsole.log("New slide value is: " + e.value);
    ycomp = e.value;
    init();
}

滑块的参数分配:

$("#ycompSlider").kendoSlider({
                                slide: changeYcomp,
                                change: changeYcomp,
                                min: -10,
                                max: 10,
                                smallStep: 1,
                                largeStep: 10,
                                value: 0
                            });

随机函数:

function Randomize() {
    console.log("Randomizing!")
    $("#yslider .k-draghandle").animate({
      left: Math.round(Math.random()*130-7)
    });

}

不幸的是,既不.k-draghandle通过CSS动画改变位置,也不改变任何滑块的HTML属性都会触发任何事件.

我假设滑块只是在侦听鼠标事件.

目前唯一的选择是通过step …