• Highcharts点击legend symbol切换serie的显示/隐藏

    2011-03-20

    之前有写过一篇关于Highcharts导出图片的Java代码实现–Highcharts导出代码Java版，这里将介绍的是如何实现点击图列说明(legend symbol)时，隐藏其在图中的显示。 其中Highcharts默认实现了点击文本(legend item)则不显示的效果，但如果点击文本旁边的图片，则无反应。 在highcharts.src.js中6299行可以看到下面代码： .on(‘click’, function(event) {    var strLegendItemClick = ‘legendItemClick’,    fnLegendItemClick = function() {         item.setVisible();     };     // click the name or symbol     if (item.firePointEvent) { // point         item.firePointEvent(strLegendItemClick, null, fnLegendItemClick);     } else {         fireEvent(item, strLegendItemClick, null, fnLegendItemClick);     }}) 从注释“click the name or symbol”，意思好像是点击文本或者符号，都有触发事件，但点击符号并没改变图的可视状态。 setVisible方法是有两个参数：vis、redraw，其中vis为boolean型，真则表示显示该serie，假真不显示，如果vis为UNDEFINED，则切换该serie的可视状态。 而我们如果要实现点击legend同样切换对应的serie的可视状态，则需要在图中所有的legend上绑定click事件。legend上发生click事件时，则触发该legend旁边的element的click事件，就达到效果。 [...]

    posted in 技术类 by 半醒

  • jQuery 日期选择插件

    2011-03-05

    jQuery UI中自带了Datepicker的插件，功能很强大。 键盘快捷键 国际化 自定义样式 支持在两个日期选择中限制时间选择的先后 。。。。。。 使用时除了jquery.js外，需另外引入jquery.ui.core.js、jquery.ui.datepicker.js、jquery.ui.all.css、jquery.ui.datepicker.css，大小分别为8KB、73KB、1KB、4KB，其中jquery.ui.core.js和jquery.ui.datepicker.js的minified版大小分别为5KB和35KB。 其实在实际使用中，根本用不了这么多的功能，而是只需要提供一个日期选择的控件就OK，但jQuery Datepicker这个插件太“重”了，不适合。 经过Google一番，发现一个较为轻便的日期控件。 项目页面：http://teddevito.com/demos/calendar.php 使用方法：页面引入calendar.css和cal.js，如何在jQuery的ready方法中$(‘input’).simpleDatepicker(); 自定义选项：chosendate, startdate, enddate 缺陷：控件显示后，点击页面其他位置，控件不能消失，只能选择日期、点击“Today”“close”后才会消失。日期格式不能定义，只能以mm/dd/yyyy和m/d/yyyy格式显示。 这里提供本人修改版本，汉化，修改默认日期显示格式为yyyy-mm-dd，同时为了实现点击页面其他位置时关闭控件，在cal.js 81行给日期所在的table加了id，该id调用日期空间时传入，即$(‘input’).simpleDatepicker({tableid:"tableId"});。 点击页面空白位置关闭控件的方法： function displayCal(num) {     $("html").click(function(o){         obj = o.srcElement || o.target;         var inputId = 0;         var tableId = 0;         var t = 0;         if (obj.nodeName.toUpperCase() != "HTML"){             t = $(obj).parentsUntil("TABLE").parent()[0].id; [...]

    posted in 技术类 by 半醒

  • 购物兔 – 支持返现的淘宝购物浏览器

    2011-03-05

    购物兔是款淘宝购物浏览器，通过淘宝各种商家合作渠道为用户返现。 首次使用需要设置你的支付宝账户，用来返现。通过各种商家合作渠道为用户节省 3~30% 金钱，并且直接返现到你的支付宝账户。 购物兔会在你浏览淘宝的时候自动转换为返现链接，并在右上角显示出返现金额。 返现金额是根据商家设定的广告费用而定，一般都会有几十块钱的优惠，还是很不错的。购物兔基于 IE 浏览器，在转换链接的过程中会出现卡的情况。 http://gouwutu.com/recommend.html

    posted in 技术类 by 半醒

 
Powered by Wordpress. Theme by Shlomi Noach  京东商品折扣