风名博客

jquery之按年份 DESC 显示 google 图表日历

Thu, 29 Oct 2026 21:34:24 +0800

我正在使用 Google 日历图表，我想先显示 2015 年图表，然后显示 2014 年、2013 年等。

在谷歌的例子中:https://developers.google.com/chart/interactive/docs/gallery/calendar即使我按该顺序放置数据，也没有选项可以执行此操作。

如何实现这一点？谢谢。

请您参考如下方法:

这并不是一个理想的解决方案，但如果您有兴趣，如果您愿意在数据中反转年份值，则可以手动反转图表中的年份值。就像这样:

google.load("visualization", "1.1", { 
  packages: ["calendar"] 
}); 
 
google.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
  var dataTable = new google.visualization.DataTable(); 
  dataTable.addColumn({type: 'date'}); 
  dataTable.addColumn({type: 'number'}); 
 
  dataTable.addRows([ 
    [new Date(2012, 1, 1), 1], 
    [new Date(2013, 1, 1), 2], 
    [new Date(2014, 1, 1), 3], 
    [new Date(2015, 1, 1), 4] 
  ]); 
 
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 
  var options = {}; 
 
  google.visualization.events.addListener(chart, 'ready', swapYears); 
  chart.draw(dataTable, options); 
} 
 
// important code, this would be simpler w/ jQuery but here's pure JS 
function swapYears() { 
  var yearTexts = document.querySelectorAll('[font-size="50"]'); 
 
  var years = []; 
  yearTexts.forEach(function(text) { 
    years.push(text.innerHTML); 
  }); 
  years.reverse(); 
 
  for (var i = 0; i < yearTexts.length; i++) { 
    yearTexts[i].innerHTML = years[i]; 
  } 
}

JSFiddle

输出:

jquery之定义何时触发 onclick

Thu, 29 Oct 2026 21:34:24 +0800

我遇到了一些小问题。我有一个表单，并且我在系统中映射表单的字段。表单的按钮会自动获得一个像这样的 onclick 事件

window.location='http://www.something.com/test.html?vs=ZWJhMDAzMzktMTNkYi00ODRkLTgxYmQtNjQwYTU5MDIyZWE3OzA6ODc5NjY2NzoxMjg2NzUyNDM3NDI6OTAxNzM0MzA1OjkwMTczNDMwNTsS1'

它添加了一个需要的 vs 变量。问题是我需要表单有一个输入类型按钮，而不是提交。我正在使用 JQuery 验证，并且我用它来触发表单提交

$("#btn-default2").click(function() { 
        $("#myform").submit(); 
    });

现在的问题是，由于 onclick 事件，验证会快速触发，然后 onclick 事件会进行重定向。如果表单有效，我只需要此重定向。有什么方法可以停止 onclick 事件，并将其移至我的函数中，在其中检查表单是否有效？

谢谢

请您参考如下方法:

针对您的问题的程序性解答，

var btn = $("button.validate"); 
var x = btn.attr("onclick"); //get the onclick and store it in a variable. 
btn.attr("onclick", ""); //remove the onclick attribute for that button 
btn.click(function() { 
    //Now do validations for your button. 
    if ($("input[type='text']").val() == "10") {  
        eval(x); //If the form fields passed the validation 
        //then trigger the redirect using eval 
    } 
});

DEMO

jquery之如何将 Semantic-UI 导入 Angular 项目

Thu, 29 Oct 2026 21:34:24 +0800

我正在开发一个基于 Semantic-UI 框架(这是 Semantic-UI 的一个分支)的 Angular 项目。

我已经安装了:

npm install --save fomantic-ui

然后我在 angular.json 中添加了以下几行文件:

"styles": [ 
    "node_modules/fomantic-ui/dist/semantic.min.css", 
    "src/styles.scss" 
], 
"scripts": [ 
    "node_modules/jquery/dist/jquery.min.js", 
    "node_modules/fomantic-ui/dist/semantic.min.js" 
]

我还为它安装了类型 npm install --save @types/semantic-ui并且，根据this ，它们应该可以与 Semantic-UI 一起正常工作。

无论如何，这似乎不足以使用 modal() 等函数。 , dropdown() , calendar() ，事实上，我在 IDE (Webstorm) 和编译过程中都遇到错误:

TS2339: Property 'modal' does not exist on type 'JQuery<HTMLElement>'.

TS2339: Property 'calendar' does not exist on type 'JQuery<any>'.

TS2339: Property 'dropdown' does not exist on type 'JQuery<HTMLElement>'.

等等...

你知道在我的项目中导入 Semantic-UI 的正确方法是什么吗？

请您参考如下方法:

对于 Typescript 类型，您需要在 tsconfig.json 文件中添加一些行，以向 Angular 应用程序声明这些类型。

{ 
  "compilerOptions": { 
    ... 
    "target": "es5", 
    "typeRoots": [ 
      "../node_modules/@types" 
    ], 
    "types": [ 
      "hammerjs", 
      "jasmine", 
      "semantic-ui" 
    ], 
    ... 
}

也在 tsconfig.app.json 中:

{ 
  "extends": "./tsconfig.json", 
  "compilerOptions": { 
    "outDir": "./out-tsc/app", 
    "types": [ 
      "semantic-ui" 
    ] 
  }, 
  ... 
}

测试文件中相同tsconfig.spec.json:

{ 
  "extends": "./tsconfig.json", 
  "compilerOptions": { 
    "outDir": "../out-tsc/spec", 
    "types": [ 
      "jasmine", 
      "node", 
      "semantic-ui" 
    ] 
  }, 
  ... 
}

jquery之使用 jQuery 或 Javascript 写入本地文件

Thu, 29 Oct 2026 21:34:24 +0800

我正在创建一个将在网络浏览器中运行的原型(prototype)。我想存储(和检索)用户在使用原型(prototype)期间提交的各种信息。我知道我可以检索各种文件格式，例如 xml、json...并且我知道我可以使用插件 jstore 进行本地存储。所以我想我可以做一个复杂的解决方案，从启动文件中获取第一个 xml 加载，然后在操作它后使用本地存储，然后检查本地存储。

我不想使用 PHP 或 ASP 或其他脚本，因为我需要能够与不会运行网络服务器的高级管理人员共享原型(prototype)，并且我不想在网络服务器上安装原型(prototype)...但是也许这是最好的方法，因为我知道出于安全原因，javascript 无法写入本地文件系统。另一方面，也许我正在使获取初始 xml 和使用 jstore 插件的组合听起来比实际更困难。

请您参考如下方法:

该网络平台专门设计用于防止网站将任意数据写入客户端计算机。您可以探索一些异常(exception)情况:

像 Google Gears 这样的插件；或 HTML5 中的数据存储(未广泛使用)(容易丢失)
Cookie(容易丢失)
URL(受长度限制，容易丢失)
文件(更传统但笨拙)

网络显然通过服务器运行得更好。如果您希望部署桌面安装，则可以部署使用大量基于浏览器的 UI 的厚应用程序。该应用程序可以轻松访问本地系统的文件等。如果可能，请发表评论。

Jquery ui 可排序序列化不起作用

Thu, 29 Oct 2026 21:34:24 +0800

查遍了也没找到答案。我无法让我的可排序序列化。我得到的只是空数据

$(document).ready(function() { 
    $("ul#sortable").sortable({ 
        update : function () { 
            serial = $("ul#sortable").sortable("serialize"); 
            $.ajax({ 
                url: "sort_images_ajax.php", 
                type: "post", 
                data: serial, 
                error: function(){ 
                    alert("theres an error with AJAX"); 
                }, 
                success: function(feedback){ $("#data").html(feedback); } 
            }); 
        } 
 
    }); 
});

这是我的 html:

<ul id="sortable"> 
<li id="sort_1" class="ui-state-default">1</li> 
<li id="sort_2" class="ui-state-default">2</li> 
<li id="sort_3" class="ui-state-default">3</li> 
</ul>

由于我使用的是 jquery 1.4.2，所以我在 Stack Overflow 上找到了这条信息:

jQuery.ajaxSettings.traditional = true;

无论有没有最后一段代码，我都无法将其序列化。有什么建议吗？

请您参考如下方法:

我也有同样的问题...显然，从事件处理函数中调用 .sortable() 方法不起作用？!

P.S.:我认为您应该使用“停止”事件，而不是“更新”。

JQuery UI 可排序在 IE8 中很慢，但在 IE7 和 IE8 兼容模式下运行良好

Thu, 29 Oct 2026 21:34:24 +0800

JQuery UI 可排序(包括演示)在我可以测试的所有 IE8 中都很慢，但在 IE7 和 IE8 兼容模式下运行顺利。页面上的标记越复杂，IE8 的速度就越慢(这是我可以理解的，DOM 树变得更复杂)。

我正在使用 JQuery 1.3.2 和 JQuery UI 1.7.2(使用 1.7.3 进行测试 - 相同的情况)。

我发现了很多类似的报告(也适用于新的 JQuery UI 1.8.x 和 JQuery 1.4)，但没有答案。

可能有一些解决方案(除了通过元标记或 header 将 IE8 转换为 IE7 兼容模式)。提前致谢!

请您参考如下方法:

我确信您现在已经找到了一些解决方案，但以防万一其他人正在阅读本文。我认为答案是升级到 jQuery 1.4 和 jQuery UI 1.8。它们比前辈要快得多。

对于依赖 jQuery 1.3 的网站，您可以升级到 1.4 并使用向后兼容插件:

https://github.com/jquery/jquery-compat-1.3

jquery ui按钮不一致的悬停状态

Thu, 29 Oct 2026 21:34:24 +0800

我有 4 个使用 Jquery UI 的“按钮”功能的按钮。 3 工作完美无缺。第四个似乎不想在悬停时始终应用 jquery ui 悬停类“ui-state-hover”。它有时会这样做，但大多数时候它只应用“悬停”类(我在 firebug 中观看它)，这显然与它们的 css 样式不匹配。有谁知道到底是什么原因导致了这种差异？

编辑:我认为这是 UI 按钮和 Ajax uploader 之间的冲突。这是我正在使用的一些精简代码。

$('.upload_img').button({ 
    icons: { 
        primary: 'ui-icon-folder-open' 
    }, 
    label: "Browse" 
    }) 
 
 
 
 
 
   jQuery('.upload_img').each(function(){ 
 
    var button = jQuery(this); 
    var ID = jQuery(this).attr('value'); 
    var container = jQuery(this).parent(); 
 
    //prevent the clicks from its default 'form submit' behavior 
    $(this).click(function() { 
    return false; 
    });              
 
    new AjaxUpload( button, { 
        action: ajaxurl, 
        name: ID , // File upload name 
        data: { // Additional data to send 
            action: 'save_function', 
            type: 'upload', 
            _nonce: '<?php echo $nonce; ?>', 
            key: ID }, 
        onSubmit: function(file , ext){ 
            this.disable(); // If you want to allow uploading only 1 file at time, you can disable upload button 
 
        }, 
        onComplete: function(file, response) { 
            this.enable(); // re-enable upload button 
 
            if(response == 99){ 
                //alert(response); 
                show_message(5); // failure 
                t = setTimeout('fade_message()', 2000); 
            } 
            // If there was not an error 
            else{    
 
                show_message(4); // success 
                t = setTimeout('fade_message()', 2000); 
 
                } 
        } 
    }); 
 
 
 
 
    });

请您参考如下方法:

重新启用后，您是否尝试将 .button 重新附加到 .upload_img 上？

jquery之使用 jquery 将文本框转换为多行

Thu, 29 Oct 2026 21:34:24 +0800

我有一个单行文本框。

我想用 jquery 将其转换为多行，但控制添加到其中的行数。我还希望能够限制每行的字符数。

有什么想法可以用 jquery 做到这一点吗？

编辑:

是的，我所说的文本框是 <input type="text">

EG。 <input type="text" value="" name="txtTextBox1" id="xtTextBox1">

请您参考如下方法:

考虑到您有以下 HTML:

<input type="text" class="myclasses" style="color: #123123" value="akira"/>

然后使用以下代码片段:

(function($) { 
    $.fn.changeToTextArea = function(rows, columns) { 
        var attrs = {}; 
        var text = ""; 
 
        $.each(this[0].attributes, function(idx, attr) { 
            attrs[attr.nodeName] = attr.nodeValue; 
            if(attr.nodeName == "value") { 
              text = attr.nodeValue; 
              } 
            attrs["rows"] = rows; 
            attrs["cols"] = columns; 
        }); 
 
        this.replaceWith(function() { 
            return $("<textarea/>", attrs).append($(this).contents()).html(text); 
        }); 
    } 
})(jQuery);

你应该用

来调用它

$("input").changeToTextArea(7, 25);

(function($) { 
    $.fn.changeToTextArea = function(rows, columns) { 
        var attrs = {}; 
        var text = ""; 
       
        $.each(this[0].attributes, function(idx, attr) { 
            attrs[attr.nodeName] = attr.nodeValue; 
            if(attr.nodeName == "value") { 
              text = attr.nodeValue; 
              } 
            attrs["rows"] = rows; 
            attrs["cols"] = columns; 
        }); 
 
        this.replaceWith(function() { 
            return $("<textarea/>", attrs).append($(this).contents()).html(text); 
        }); 
    } 
})(jQuery); 
 
 
$("input").changeToTextArea(7, 25);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
<input type="text" class="xyzxterms" style="color: #123131" value="akira"/>

jquery之从 Prototype 迁移到 jQuery (Rails) 的策略

Thu, 29 Oct 2026 21:34:24 +0800

我有一个现有的 Rails 应用程序，其中包含使用 Prototype 编写的大量 js 代码，我希望将 jQuery 设置为默认应用程序的 javascript 框架，并且然后将现有的 Prototype 代码迁移到 jQuery 的等效代码。

您对此类问题的经验是什么，或者您建议我采取什么策略，以使其尽可能轻松:P。

任何帮助将不胜感激，提前致谢。

请您参考如下方法:

查看以下链接 -

http://randomactsofcoding.blogspot.com/2008/09/migrating-to-jquery.html

javascript之点击后退按钮时是否存在跨浏览器onload事件

Thu, 29 Oct 2026 21:34:24 +0800

对于所有主要浏览器(IE 除外)，当由于后退按钮操作而加载页面时，JavaScript onload 事件不会触发 - 它仅在页面首次加载时触发。

有人能给我一些解决这个问题的示例跨浏览器代码(Firefox、Opera、Safari、IE...)吗？我熟悉 Firefox 的 pageshow 事件，但不幸的是 Opera 和 Safari 都没有实现此功能。

请您参考如下方法:

各位，我发现JQuery只有一个作用:按下后退按钮时重新加载页面。这与“准备就绪”无关。

这是如何工作的？好吧，JQuery 添加了一个 onunload 事件监听器。

// http://code.jquery.com/jquery-latest.js 
jQuery(window).bind("unload", function() { // ...

默认情况下，它不执行任何操作。但不知何故，这似乎会触发 Safari、Opera 和 Mozilla 中的重新加载——无论事件处理程序包含什么。

[编辑(Nickolay):这就是为什么它会这样工作:webkit.org , developer.mozilla.org 。请阅读这些文章(或我在下面的单独答案中的总结)，并考虑您是否真的需要这样做并让您的用户的页面加载速度变慢。]

不敢相信？试试这个:

<body onunload=""><!-- This does the trick --> 
<script type="text/javascript"> 
    alert('first load / reload'); 
    window.onload = function(){alert('onload')}; 
</script> 
<a href="http://stackoverflow.com">click me, then press the back button</a> 
</body>

使用 JQuery 时您会看到类似的结果。

您可能想与没有 onunload 的这个进行比较

<body><!-- Will not reload on back button --> 
<script type="text/javascript"> 
    alert('first load / reload'); 
    window.onload = function(){alert('onload')}; 
</script> 
<a href="http://stackoverflow.com">click me, then press the back button</a> 
</body>