'jQuery' Tag

  • 使用jQuery检测iPhone/iPod设备

    2012-03-08

    针对越来越多的智能移动设备，很多站点都已提供移动版。而jQuery在手机和平板设备上的jQuery Mobile，正是为移动Web提供一个跨浏览器的框架，方便开发人员开发出真正的移动Web网站。 不同浏览器对CSS的支持是不一样的，所以这里检测当前浏览器是否为Safari，就可以将访问定向到适合的页面上来展示。 // 返回 TRUE/FALSEfunction isiPhone(){ return ( (navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1) );} 重定向访问Script // 重定向来自 iPhone/iPod 的访问function isiPhone(){ return ( (navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1) );}if(isiPhone()){ window.location = "mob.example.com";} 重定向访问PHP // Redirect iPhone/iPod visitorsif(strpos($_SERVER['HTTP_USER_AGENT'], ‘iPhone’) || strpos($_SERVER['HTTP_USER_AGENT'], ‘iPod’)){ header("Location: http://mob.example.com");} iPhone和iPod上Safari的User Agent User Agent String for iPhoneMozilla/5.0 (iPhone; [...]

    posted in 技术类 by 半醒

  • 6个超有用的jQuery代码段

    2011-11-23

    图片预载入 先将图片预先载入到后台，当用户访问请求的时候直接就显示。 1: (function($) { 2: var cache = []; 3: // Arguments are image paths relative to the current page. 4: $.preLoadImages = function() { 5: var args_len = arguments.length; 6: for (var i = args_len; i–;) { 7: var cacheImage = document.createElement(‘img’); 8: cacheImage.src = arguments[i]; 9: cache.push(cacheImage); 10: } 11: } 12: [...]

    posted in 技术类 by 半醒

  • jsTree初始checkbox的选中状态

    2011-04-29

    程序开发中，很多地方都需要有用到“树”行结构的菜单。这里介绍的是一个jQuery的插件jsTree。 功能： 支持HTML、JSON、XML格式数据源 支持AJAX异步获取节点数据 自定义节点类型，并可指定icon 支持使用cookies来保存树的状态 支持拖拽、直接编辑、键盘快捷键、搜索等 缺点： 双击节点无法展开 获取选中节点ID时，如果父节点有选中，则无法获得该节点下选中的子节点的ID 异步获取下级节点时，如果使用搜索功能，会把所有节点都搜索一遍，即会去将所有的节点都取出来 对于JSON格式数据源，虽然有attr:{id:”node_identificator”,some-other-attribute:”attribute_value”}，但其实这里好像只有id这一个会有用 对于checkbox，无法直接在返回的数据中指定选中状态 下面的代码就是解决checkbox初始化选中状态，以及获取“树”中所有全选中状态节点的ID，如果同时需要获取半选中状态的节点ID，则需要修改源代码。 先构造一个html data的“树”行菜单，这使用默认的主题，及html_data、checkbox、ui三个插件。 <script type=”text/javascript”> $(function(){ var checkNodeIds = “11″.split(“,”);//需要选中的节点ID，为数组 $(“#roleTree”).bind(‘loaded.jstree’, function (e, data) { $(“#roleTree”).jstree(“open_all”); $(“#roleTree”).find(“li”).each(function() { for (var i = 0; i < checkNodeIds.length; i++) { if ($(this).attr(“id”) == checkNodeIds[i]) { //如果节点的ID等于checkNodeIds[i]，表示要选中 //alert($(this).attr(“id”)); $(“#roleTree”).jstree(“check_node”, $(this)); break; } } }); }).jstree({ [...]

    posted in 技术类 by 半醒

  • 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 半醒

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