对于JQuery图表来说，其重要的功能是以一个简洁和交互的方式展示繁杂的原始数据。这并不仅仅以各种颜色来渲染展示数据，而应该是更能够吸引读者和方便用户理解。 稍后介绍的某些javascript图表库，已经越来越流行了，因为它们有着相当吸引人的组件，囊括了我们已知的包括线状图，柱状图和饼图等7种图表类型。另外，这些js图表库提供一些有用的组件作为它们的可选项，比如说放大，缩小，这些工具能提供关于数据的更多信息，同时也提供一些选项对其进行定制。 tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 用户通常遇到某些使用了兼容现代浏览器的HTML5的canvas特性的jQuery图表，并不能很好的与IE兼容。整体上，这些库集成了六种图表类型，比如散点图，饼图，柱状图，带点的折线图以及区域图。这些图表能够通过简单的配置就能展示多种图例，这将帮助人们清楚的分辨各图表项。 在这篇文章中，我们分享给读者的是15个图表库——各种从简单到复杂的高级图表，它们都能胜任。希望你们喜欢！ tnjin 翻译于 2天前 1人顶 顶 翻译的不错哦! 1. Chart.js : 使用HTML5 canvas的图表库 Chart.js是一个令人印象深刻的基于HTML5的canvas特性构建的javascript图表库。目前支持六种图表类型（折线图，柱状图，雷达图，饼图，柱状区域图和极坐标区域图），而且这些通过一个独立的，不足5Kb的包来提供的。颜色，字体，加粗以及图表大小都是可以定制的。同时，图表也可以选择在加载的时候添加动画效果。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 2. xCharts : 基于数据驱动的图表 xCharts是一个用于给网站创建具有漂亮的视觉效果和自定义数据驱动的图表的javascript库，它依赖于D3.js。基于HTML，CSS和SVG技术，xChart被设计成能够被动态，流式和开放的集成和定制。 由于xChart使用SVG技术，我们能够直接通过CSS生成大部分的我们定义的xChart图表。这意味着如果你愿意，你只需要做很少的控制就可以处理这些可视化的图表。定义图表风格的最好的方式是从包含的样式表开始，或者使用你的浏览器的元素监视器来查看每一个元素可用的CSS选择器。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 3. Sigma.js : 使用HTML5的canvas对象作图 Sigma.js 是一个使用HTML5 Canvas元素作图的免费开源的javascript图表库。它被特别设计成适合分享页面上交互的网络地图和浏览动态的网络数据库。这个js库以MIT协议分发。 Source 4. HighCharts Highcharts 是一个纯粹使用HTML5/Javascript写的图表库，能向你的网站或者网络应用提供直观交互的图表。目前，Highcharts支持折线图，曲线图，面积图，面积拟合图，条状图，柱状图，饼图，散点图，仪表图，面积范围图，面积曲线图，条状范围图，气泡图，箱型图，误差线，漏斗图，瀑布流和极坐标图表类型。 Source tnjin 翻译于 2天前 0人顶 顶 翻译的不错哦! 5.Fusion Charts jQuery 的FusionCharts插件帮助你增加交互式的JavaScript图表，在你的网站，移动端和企业级应用中绘图。它将FusionCharts套件XT的灵动和全面的特点与jQuery简易的语法融合在了一起 Source 6. Flot : jQuery中引人注目的JavaScript绘图插件 Flot 为jQuery准备的一个纯JavaScript绘图库, 重点在于使用简单，引人注目的界面和良好的交互特性。图的一些关键特性是通过开关，放大缩小和与数据点交互来控制的，此外还有它加入了简单工具提醒的功能 Source Mitisky 翻译于 2天前 0人顶 顶 翻译的不错哦! 7. JS Charts : 免费的JavaScript图表 JS Charts是一个基于JavaScript的图生成器，它只需要很少或不需要编码。使用JS Charts来绘制图表是一个简单且容易的工作，因为你只需要使用客户端脚本（即通过Web浏览器操作）。不需要额外的插件或服务器模块。只引用这个脚本，准备好图表数据的XML、JSON或JavaScript数组，OK，你的图表已经就绪了！ 源码 8. jQuery Sparklines 这个jQuery插件直接在浏览器中生成波形图（小的内联图表），使用的数据可以是内嵌在HTML中或通过JavaScript提供。这个插件与大多数现代浏览器兼容，已经使用Firefox 2+、Safari […]
View Details现如今，网站开发设计的需求会要求自动适应所有移动设备，即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid（流）和自适应性特点。 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容。网格设计常见于报纸和杂志中的文字图像排版设计。 可以创建网格布局的数量几乎是无限的，并且能够用无数种方式排布。比如：在等间距的两列，三列或者四列网格顶端有一个横跨的header，或者一整页的有着同样外观和感觉的方格。 有一些很好的JQuery网格布局插件能够大幅的缩短开发时间，如果你在你下一个项目中使用的话。这些网格插件能够优化瀑布流，使列的大小可调，滚动数据以匹配header，同样也可以添加数据网格，以及针对网格的一些动作比如：重新调整列的大小，分页，排序，行和列的样式等等。 下面是15款jQuery网格布局插件，能够让开发者和设计师在创建响应式布的网格布局时，同时拥有迷人的视觉效果，以及一个兼容所有浏览器和手持设备的响应式的外观。希望你们能够喜欢！ 1.自由墙 自由墙是一个跨浏览器的响应式jQuery插件，它可以帮助你创建很多不同的网格布局：灵活布局，图片布局，网格，流体网格，metro风格布局还有用CSS3实现的动画效果和回调事件的瀑布流布局。自由墙是一站式的解决方案来在桌面，移动和平板上动态创建网格布局。 它是基于容器的宽(或高)以及单元的宽(或高)，同时它会创建一个虚拟的矩阵。扫描矩阵的每一个单元，找到空闲单元并让其为空白区域，之后将一个块元素插入。若果没有块可以匹配的话，它将缩放块来适应(这是选项之一) 出处 2. S Gallery S Gallery 是一款 jQuery 图片画廊插件 ，将图片显示在响应式网格。它的灵感来自于Sony’s产品页画廊 (Flash实现) 并完全实现了它的功能。当一个项目获得焦点或被点击时, 可以使用 prev-next 按钮 或使用键盘来浏览其他操作。 单击后会返回网格视图并有一个全屏选项(使用HTML5全屏API). 查看代码 3. Mason.js 创建一个动态列的网格布局（比如Pinterest）有许多javascript方案。虽然大多数都很棒，但有时，这些网格会含有缝隙或者锯齿边缘。Mason.js是一款致力于通过智能填充空隙，力图表现完美网格的jQuery插件。一个网格被创建出来，这款插件会计算空隙的位置并使用预定义的元素或者重复内容填充空隙。元素的大小，列/行的大小，断点以及布局是流式还是固定都是可以被重新定义的。 Source 4.jQuery.Shapeshift 有许多jQuery的插件可以创建一个照片分享样式的动态网格布局。jQuery.Shapeshift是一个正是这类插件的强大替代品，通过一个触摸动作，这些图片可以拖曳（需要使用jQuery UI）。拖曳可以影响网格布局，就像网格在需要的时候，会自动去填充空隙一样。这同样在触摸设备和响应式布局上有效。这个插件有许多灵活可变的参数，比如设置margin，启用/禁用拖曳，自定义动画等等。 Source 5. jQuery Nested Nested是一款可以生成多列没有空隙的网格布局的jQuery插件。这个插件为所有的元素创建一个矩阵，建立一个多列的网格，并尝试用记录的元素来填充所有空隙。其实有很多解决方案能够达到同样的效果。但是，Nested提供了一个小的动作：它能够重新调整网格底部的任何元素，以确保没有缝隙。它的用法也很简单，只需要给一个jQuery的函数指定容器元素就行。并且，提供了多种可选参数方便用户定制，比如启用/禁用动画，最少列数等 Source 6. Wookmark jQuery Plugin 拥有动态列的网格布局如此流行，并不仅仅是因为它们被用于图片分享的网站，更是因为对于不同大小的内容显示来说，这是一个非常棒的方式。Wookmark，Pinterest的替代品，发布了一个可以创建那样布局的jQuery插件，兼容所有的浏览器。目前，这个插件只提供了少量的可选项：容器元素，offset（垂直/竖直距离）和元素的宽度——就这些。在初始化时，它会自己获取窗口的大小并自动排布网格（当然，它也是响应式的布局）。 Source Grid-A-Licious是一个jQuery插件，可以让你很容易的创建类似Pinterest的浮动表格布局。当然也有其他的插件能够完成这个功能，但Grid-A-Licious提供了更完善的响应式解决方案。不管什么尺寸的屏幕，还是什么设备，表格表现得都很完美，它都能实现浮动而不使用绝对定位。插件提供了自定义宽度、间隔和动画（速度，过渡时间，效果等等）的选项，并且它支持在表格前或后插入新项目，这对于动态布局来说是非常有用的。 Source 8. jPhotoGrid jPhotoGrid只需要图像和字幕的简单列表，就可以将其变成了可以浏览和放大照片的网格。这个插件几乎所有的样式都是靠CSS完成的。诀窍是通过浮动的列表项来对网格进行布局。而插件会做的第一件事，就是将这些都转换成绝对定位。这就是为什么这个插件可以放大单个图像，然后将其返回到原来的地方。 来源 9. Gridster Gridster是一个令人印象深刻的jQuery插件，是为了开发出一个类iGoogle的多列网格，可以拖动n行删除并重新排序。该插件只需要jQuery（不用jQuery UI），可以将任何给定的HTML构造成网格的部件。而且，不局限于最初加载的元素，它还可以动态的添加新元素和删除现有的元素。 来源 10. Photoset Grid PhotosetGrid是一个简单的jQuery插件，用来将图片基于Tumblr的图片集功能，整理成一个灵活的网格。插件最初用于Style Hatch Tumblr主题，以此来在一个响应式的布局中显示图片集，但他们后来扩展了它，并为我们发布了一个jQuery插件。 来源 11. Flex Flex是一个流式非对称的网格动画jQuery插件。你可以将鼠标放在瓦片上，就能看到它们渐渐扩大。 Flex是一个想法，灵感来自于Adidas.com的flash主页。 来源 12. Freetile […]
View Details每个月都有很多新的 jQuery 插件推出，虽然大多数都很基础，了无新意。但也的确有不少是非常有意思的。我们这里列出 10 个新的奇妙的 jQuery 插件： jqtimeline Download: http://goto.io/jqtimeline/ Any List Scroller Download: http://als.musings.it/ Custom Scrollbar Download: http://manos.malihu.gr/tuts/custom-scrollbar… Social Count Download: http://fgte.st/SocialCount/examples/ Facebook wall Download: http://www.neosmart.de/social-media/facebook-wall/ Supersized! Download: http://buildinternet.com/project/supersized/ Sidr Download: http://www.berriart.com/sidr/ Flexisel Download: http://9bitstudios.github.io/flexisel/ iCheck Download: http://damirfoy.com/iCheck/ Textillate Download: http://jschr.github.io/textillate/ 转自:http://www.oschina.net/news/46103/10-fresh-and-fantastic-jquery-plugins
View Details<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>个税计算器</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <style> .descBlock { margin: 0 auto; width: 550px; display: none; } .descBlock_on { margin: 0 auto; width: 550px; } .descTitle { color: #FF0000; font-size: 18px; text-align: center; line-height: 120%; } .descContent { line-height: 150%; } </style> <script language="javascript"> //工资、薪金所得 OK 2000 function calcTax1(income) { var tax; var diff = (income – 2000); if (diff <= 0) { tax = 0; } if (diff > 0 && diff <= 500) { […]
View DetailsCircular Countdown jQuery Plugin – MORE INFO / DEMO Coconut – Jquery Countdown Plugin – MORE INFO / DEMO 包含四种不同尺寸的圆。 Dynamic Countdown with Counter – MORE INFO / DEMO 纯文本的倒计时模板 JBMarket Circular Countdown – MORE INFO / DEMO 使用不同颜色区分：日、时、分和秒。 LuxCountdown – MORE INFO / DEMO 提供多种方格效果的倒计时器，多种颜色 Easy Countdown – MORE INFO / DEMO 带百分比进度提示的倒计时插件 jsCountdown – MORE INFO / DEMO 提供 14 种不同皮肤，同时提供 png 格式模板让你可以自行修改样式 Broadcast Countdown Widget – MORE INFO / DEMO 类似 WordPress 网站的倒计时效果 以下是收费的 jQuery 脚本 JavaScript Animated Counter – MORE INFO / DEMO Fancy Countdown – jQuery plugin – MORE INFO / DEMO jQuery Plugin – KK Countdown – MORE INFO / DEMO Littlewebthings CountDown – MORE INFO / DEMO jQuery Countdown Plugin by David Walsh –MORE INFO / DEMO This plugin […]
View DetailsBlueimp Gallery: DEMO || DOWNLOAD Blueimp gallery 主要为移动设备而设计，同时也支持桌面浏览器。可定制视频和相片，支持触摸操作，支持全屏播放等。 YoutubeTV: DEMO || DOWNLOAD 该插件可以让你直接在网页上播放来自 YouTube 的视频，支持播放列表 Osvaldas: DEMO || DOWNLOAD 提供水平和垂直显示的播放器 Shadowbox: DEMO || DOWNLOAD Shadowbox is a great plugin and is a perfect web-based media viewer app and the best part is that it supports entire list of media publishing formats. This app can be customized way too easily. Jplayer: DEMO || DOWNLOAD jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件，前台播放器外观完全可以使用 XHML/CSS自定义。 Video.js: DEMO || DOWNLOAD Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器 ILightBox: DEMO || DOWNLOAD If you are looking to build exquisite responsive overlay windows, ILightBox is perfect for you. It offers you […]
View Details数据可视化是科学、艺术和设计的结合，当枯燥隐晦的数据被数据科学家们以优雅、简明、直观的视觉方式呈现时，带给人们的不仅仅是一种全新的观察世界 的方法，而且往往具备艺术作品般的强大冲击力和说服力。如今数据可视化已经不局限于商业领域，在社会和人文领域的影响力也正在显现，以下我们将介绍的是是 个让人耳目一新、拍案叫绝的数据可视化项目。 一、富人区、穷人区 “富人区、穷人区”是一个互动地图项目，能直观显示美国每个城市的居民收入和房租水平，不同的颜色谱系代表着不同区域的收入水平，你可以搜索每个州、每座城市甚至每个街区的收入状况。 二、谷歌流感趋势 谷歌流感趋势（Google Flu Trends）通过分析人们的搜索关键词来跟踪预测全球流感趋势，这是Google.org的一个公益项目。 三、LoTRProject LOTRProject其实是一个数据可视化项目，它把托尔金《指环王》系列小说（霍比特人，指环王， 以及精灵之钻）里表述的一个巨大而复杂的家谱关系， 通过图表， 地图， 时间轴以及简单文字说明生动地表现了出来。 四、GE 医学影像创新大赛 2011年9月份GE斥资1亿美元启动了GE创新挑战赛，挖掘能够提高早期乳腺癌诊断水平的创意想法。该视觉可视化项目收到了7大类500个提案，其中五位获胜者获得种子资金用于将创意付诸实施。 五、英国同性婚姻法案 英国卫报发起的这个视觉可视化项目能够分析展示在2013年同性婚姻法案上投票的英国议会议员的个人情况，数据包括议员的性别、所在政党和当选时间。 六、2010年美国枪支杀人统计 Periscopic（潜望镜）公司推出的这个数据可视化项目展示了2010年枪支暴力如何提前终止了9595人的生命。数据来自FBI的联合犯罪报告以及世界卫生组织。 图形中的弧线代表受害者理论上可以活到的生命长度，鼠标停留在弧线上将显示更多信息，你还能将图形与枪支型号、种族、性别等进行关联分析。 七、皇后乐队：四个视角 “四个视角”项目显示了语言在皇后乐队歌曲中的重要性，通过分析皇后乐队歌词中的关键词汇，能发现皇后乐队音乐中表达的重要主题，以及每位歌曲作词人的影响力。 八、1851年至今的飓风统计 通过分析来自美国海洋与大气管理局（NOAA）的数据，开发人员John Nelson创建了这个能够分析1851年以来的热带风暴和飓风的数据可视化项目。该项目用颜色区分飓风的强度，卫报的一篇报道中可以看到这个项目的动画版本。 九、纽约市政交通的一天 YouTube用户STLTransit用可视化的方式展示了纽约人一天中如何使用包括地铁在内的市政交通，数据来自General Transit Feed规范数据，STLTransit还未其他城市的交通系统创建了视频。 十、Facebook照片分享 在地图数据可视化方面拥有专长的旧金山一家设计与技术工作室Stanmen制作了一系列视频演示Facebook用户的照片分享行为，该项目将该工作室的George Takei发布的三张照片在三个月内的传播情况进行了可视化分析。 文章来自IT经理网
View DetailsJavaScript 本身可以算是一门简单的语言，但我们也不断用智慧和灵活的模式来改进它。昨天我们将这些模式应用到了 JavaScript 框架中，今天这些框架又驱动了我们的 Web 应用程序。很多新手开发者被各种强大的 JavaScript 框架吸引进来，但他们却忽略了框架身后浩如星海的 JavaScript 实用技巧。本文将为你呈献其中七个基础知识点： 1. 在 String.prototype.replace 方法中使用 /g 和 /i标志位 令很多 JavaScript 初学者意外的是，字符串的 replace 方法并不会 替换所有匹配的子串——而仅仅替换第一次匹配。当然 JavaScript 老手们都知道这里可以使用正则表达式，并且需要加上一个全局标志位（/g）： 1 // Mistake 2 // 踩到坑了 3 var str = "David is an Arsenal fan, which means David is great"; 4 str.replace("David", "Darren"); // "Darren is an Arsenal fan, which means David is great" 5 6 // Desired 7 // 符合预期 8 str.replace(/David/g, "Darren"); // "Darren is an Arsenal fan, which means Darren is great" 另一个基本的逻辑错误就是在大小写不敏感的校验场合（字母可大写可小写）没有忽略大小写，此时 /i标志位就很实用： 1 str.replace(/david/gi, "Darren"); // "Darren will always be an Arsenal fan, which means Darren will always be great" （译注：上面这段例程我没有看懂用意，可能是注释有误吧……） 每个 JavaScript 开发者都曾踩过这两个标志位的坑——因此别忘了在适当的时候用上它们！ 2. […]
View Details|
1 2 3 4 |
关闭有很多，看是哪种弹出窗体： 1. 直接 <button type="button">关闭</button> 2. 关闭当前 $.pdialog.closeCurrent(); |
navTab的刷新在doc文件里也有说明 首先 在form表单里指定好回调函数 * <form action="/user.do?method=save" onsubmit="return validateCallback(this, navTabAjaxDone)"> 如果不指定回调函数的话框架会默认使用DWZ.ajaxDone() <div class="dp-highlighter bg_html"><div class="bar"><div class="tools"><b>[html]</b> <a href="#" class="ViewSource" title="view plain" onclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><a href="#" class="CopyToClipboard" title="copy" onclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><a href="#" class="PrintSource" title="print" onclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a><a href="#" class="About" title="?" onclick="dp.sh.Toolbar.Command('About',this);return false;">?</a><div style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 99;"><embed id="ZeroClipboardMovie_2" src="//static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="0" height="0" name="ZeroClipboardMovie_2" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=2&width=0&height=0" wmode="transparent"></div></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span>function navTabAjaxDone(json){ </span></span></li><li class=""><span> </span></li><li class="alt"><span> DWZ.ajaxDone(json); </span></li><li class=""><span> //注意返回的JSON的数据结构 </span></li><li class="alt"><span> if (<span class="attribute">json.statusCode</span><span> == DWZ.statusCode.ok){ </span></span></li><li class=""><span> if (json.navTabId){ </span></li><li class="alt"><span> //把指定navTab页面标记为需要“重新载入”。注意navTabId不能是当前navTab页面的 </span></li><li class=""><span> navTab.reloadFlag(json.navTabId); </span></li><li class="alt"><span> </span></li><li class=""><span> } else { </span></li><li class="alt"><span> //重新载入当前navTab页面 </span></li><li class=""><span> navTabPageBreak(); </span></li><li class="alt"><span> </span></li><li class=""><span> } </span></li><li class="alt"><span> if ("closeCurrent" == json.callbackType) { </span></li><li class=""><span> </span></li><li class="alt"><span> setTimeout(function(){navTab.closeCurrentTab();}, 100); </span></li><li class=""><span> </span></li><li class="alt"><span> } else if ("forward" == json.callbackType) { </span></li><li […]
View Details