JQuery | 吕神的自我修养

单行文字滚动效果，jquery手写

2014.11.29

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行文字滚动效果，jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; height:35px; overflow:hidden;}
.roll-box li { line-height:35px; height:35px;}
</style>

</head>

<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开！看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花，超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐！好吃又减肥！</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {

	$(obj).find("ul:first").animate({
		marginTop: "-35px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

——————————————————-

小修改：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>单行文字滚动效果，jquery手写</title>
<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" ></script>
<style>
ul ,li{ margin:0px; padding:0px; list-style:none;}
.roll-box{ background:# #FF0000; xheight:35px; overflow:hidden; width:200px;}
.roll-box li { line-height:35px; xheight:35px;}
</style>

</head>
<body>

<div class="roll-box" id="roll-box">
<ul >
    <li><a href="javascript:;" class="roll-item">1【中国电子进出口浙江公司】 26款热门车型保养费用大公开！看你有没被坑蒙在鼓里~</a></li>
    <li><a href="javascript:;" class="roll-item">2【中国电子进出口浙江公司】 手把手教你折百合花，超简单的</a></li>
    <li><a href="javascript:;" class="roll-item">3【公元大厦】 美丽的水果晚餐！好吃又减肥！</a></li>
</ul>
</div>

<script>
function autoNotice(obj) {
	
	var h = $(obj).find("ul:first li:first").height();
	console.log();
	$(obj).find("ul:first").animate({
		marginTop: -h+"px"
	},
	500,
	function() {
		$(this).css({
			marginTop: "0px"
		}).find("li:first").appendTo(this);
	});
}

var myar = setInterval('autoNotice("#roll-box")', 2500);

</script>

</body>
</html>

用fastclick插件解决jquery中.live方法添加的click事件在苹果iso浏览器下不好用问题

2014.08.15

jquery.live()可以对未来加载到页面中html标签写click点击事件。针对未来的html这一特性，我们非常喜欢用.live()
但是在iso浏览器下，

$('.live').live({
    'click':function(){
        alert('live');
    }
});

却没有反应。上网上找了一些有这么解决的吧 click 事件改成 touchstart 事件

$('.live').live({
    'touchstart':function(){
        alert('live');
    }
});

或者同时给两个事件都加上

$('.live').live({
    'click , touchstart':function(){
        alert('live');
    }
});

这样苹果手机的iso浏览器的确可以了，可以触发事件。
但是当我想手指移动页面时如果正好点在这个div的时候就出发这个事件了，请问如何在手机端将触摸和触摸移动分开？这有出现了一个问题。

—————我是分割线——————-
后来又找了一些文章发现了 FastClick 这个js插件。发现他很神奇的解决了这个问题。使用也很简单。
引用fastclick.js这个js文件，然后在页面加载完事后运行 FastClick.attach(document.body); 就可以了。
<script type=”text/javascript”></script>

<script src="js/fastclick.js" ></script>
<script type="text/javascript">
$(function() {
    FastClick.attach(document.body);
});
</script>

如果页面中某些 html元素不希望收到 FastClick 的影响，可以给这个元素添加 needsclick 这个类。
例如：

<a class="needsclick">忽略 FastClick </a>
<a class="dropdown-toggle needsclick" data-toggle="dropdown">Dropdown</a>

项目主页：https://github.com/ftlabs/fastclick
备用下载地址：http://pan.baidu.com/s/1jG0xTpc

FastClick – 消除在触摸UI上的点击延迟

2014.08.15

FastClick 是一个简单，易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟。它支持以下浏览器：

Mobile Safari on iOS 3 and upwards
Chrome on iOS 5 and upwards
Chrome on Android (ICS)
Opera Mobile 11.5 and upwards
Android Browser since Honeycomb
PlayBook OS 1 and upwards

项目主页：http://www.open-open.com/lib/view/home/1353808399777

tabindex解决div获得焦点focus()和失去焦点blur()的问题

2014.08.07

tabindex解决div获得焦点focus()和失去焦点blur()的问题

首先要说的是，默认情况下div标签是没有获得焦点focus()和失去焦点blur()两个事件的。
如果想要div可以拥有获得焦点focus()和失去焦点blur()两个事件。
可以给div标签加上 Tabindex=”-1″ 属性。
例如

这样就可给div加上焦点事件了。同理，利用tabindex=”-1″ 也可以给其他不支持焦点事件的标签添加焦点事件。

一下是关于 TabIndex的相关信息。

TabIndex 属性 Tabindex=”-1″ 与Tabindex=”0″、任意数字

html中的tabIndex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。

把控件的tabIndex属性设成1到32767的一个值，就可以把这个控件加入到TAB键的序列中。

这样，当浏览者使用TAB键在网页控件中移动时，将首先移动到具有最小tabIndex属性值的控件上，最后在具有最大tabIndex属性值的控件上结束移动。

如果有两个控件的tabIndex属性相同，则以控件在html代码中出现的顺序为准。

默认的tabIndex属性为 0 ，将排列在在所有指定tabIndex的控件之后。

而若把tabIndex属性设为一个负值（如tabIndex=”-1″），那么这个链接将被排除在TAB键的序列之外。如果最初选择了[Tab]键，带这个输入栏的网页会将光标移动到firstName栏。

在给tabIndex特性赋值时，要留意几个问题。下面是几个赋值规则：

带0值tabIndex的元素根据源代码（或默认页面行为）进行排序。

大于0的tabIndex值设定其tab顺序。所有带正tabIndex值的元素出现在所有带0 tabIndex值的元素之前。

如果你犯了一个错误，把同一个tabIndex赋予给多个元素，像其它元素一样，它们会以一个0值tabIndex进行处理。

将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。注意：如果使用-1值时，onfocus与onblur事件仍被启动。 tabIndex的值可为0至32767之间的任意数字

jquery $.ajax各个事件执行顺序

2014.07.28

jquery中各个事件执行顺序如下：

1.ajaxStart(全局事件)

2.beforeSend

3.ajaxSend(全局事件)

4.success

5.ajaxSuccess(全局事件)

6.error

7.ajaxError (全局事件)

8.complete

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

js暂停几秒钟再执行的函数怎么写

2014.07.24

//使用 setTimeout 时需注意，当该代码执行时，JS 会立即编译函数第一个参数“code”
//所以该函数的第一个参数应该为：需要编译的代码、或者一个函数
//例1：setTimeout("alert('x')", 2000);
//例2：setTimeout(function () { alert('x'); }, 2000);
 
//错误示例：setTimeout(alert('x'), 2000); "x" 会立马跳出来，延时没有效果
 
//所以你的代码应该是：
$.get("bad_step.php?step="+$(this).val(),function(data,status){
    setTimeout(function () { 
        $('#step').html(data);
    }, 8000);
});

关于jquery $.each 跳出循环问题

2014.07.20

关于jquery $.each 跳出循环问题
在写 jquery 使用 $.each 函数循环的时候，有的时候需要跳出循环。
首先考虑到的方法是break，当使用break的时候，发现程序报错。Illegal break statement——不合法的break声明。
原来虽同为循环，each函数还是不同于原生态的for循环，不能够直接使用break或者continue 。

在$.each 中想要终止循环，可以使用 return
return false 跳出循环
return true 进入下一个循环

$.each( Array ,  function(i,e){
    console.log( e );
    return true ;//相当于continue 跳出本次循环，继续下次循环
    return false ;//相当于continue 跳出循环，不在执行后面的循环
});

jQuery 的 live() 方法对 hover 事件的处理

2014.07.20

要求 jQuery 1.4.3+

因为hover不是标准的事件，因此无法直接使用live进行处理，故使用以下方法代替，效果一样。

mouseenter:当鼠标指针进入（穿过）元素时
mouseleave:当鼠标指针离开元素时

$("table tr").live({
   mouseenter:
   function()
   {
      //todo
   },
   mouseleave:
   function()
   {
      //todo
   }
});

解决input file 的onchange事件只生效一次的问题

2014.07.18

解决input file 的onchange事件只生效一次的问题

文件选择框的onchange事件只在第一次改变时生效，以后再选择文件不会触发onchange事件。

解决方法1：用jQuery的live代替直接使用change。

错误代码：

    $("#fileToUpload").change(function(){
        //do someing
    })

正确代码：

    $("#fileToUpload").live('change', function(){
        //do someing
    })

解决方法2：onchange后，生成一个新input type file代替旧的。

$('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID"  />');

jquery select 获取，添加，设置

2014.03.25

每一次操作select的时候，总是要出来翻一下资料，不如自己总结一下，以后就翻这里了。

比如<select class=”selector”></select>

1、设置value为pxx的项选中

 $(".selector").val("pxx");

2、设置text为pxx的项选中

$(".selector").find("option[text='pxx']").attr("selected",true);

这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

$(".selector").val();

4、获取当前选中项的text

$(".selector").find("option:selected").text();

这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jquery中是非常简单的。

如：

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);

});

jQuery获取Select选择的Text和Value:
1. var checkText=jQuery(“#select_id”).find(“option:selected”).text(); //获取Select选择的Text

2. var checkValue=jQuery(“#select_id”).val(); //获取Select选择的option Value

3. var checkIndex=jQuery(“#select_id “).get(0).selectedIndex; //获取Select选择的索引值

4. var maxIndex=jQuery(“#select_id option:last”).attr(“index”); //获取Select最大的索引值

jQuery添加/删除Select的Option项：

1. jQuery(“#select_id”).append(“<option value=’Value’>Text</option>”); //为Select追加一个Option(下拉项)

2. jQuery(“#select_id”).prepend(“<option value=’0′>请选择</option>”); //为Select插入一个Option(第一个位置)

3. jQuery(“#select_id option:last”).remove(); //删除Select中索引值最大Option(最后一个)

4. jQuery(“#select_id option[index=’0′]”).remove(); //删除Select中索引值为0的Option(第一个)

5. jQuery(“#select_id option[value=’3′]”).remove(); //删除Select中Value=’3’的Option

6. jQuery(“#select_id option[text=’4′]”).remove(); //删除Select中Text=’4’的Option

内容清空：

jQuery(“#select_id”).empty();

Jquery实际应用，判断radio，selelct，checkbox是否选中及选中的值

2014.02.24

jquery取radio单选按钮的值  

$("input[name='items']:checked").val();  
另：判断radio是否选中并取得选中的值 

如下所示： 
function checkradio(){ 
var item = $(":radio:checked"); 
var len=item.length; 
if(len>0){ 
  alert("yes--选中的值为："+$(":radio:checked").val()); 
} 
} 




 jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关   

 获取一组radio被选中项的值   

 var item = $('input[name=items][checked]').val();   

 获取select被选中项的文本   

 var item = $("select[name=items] option[selected]").text();   

 select下拉框的第二个元素为当前选中值   

 $('#select_id')[0].selectedIndex = 1;   

 radio单选组的第二个元素为当前选中值   

 $('input[name=items]').get(1).checked = true;  

    
 获取值：  

  

 文本框，文本区域：$("#txt").attr("value")；   

 多选框checkbox：$("#checkbox_id").attr("value")；   

 单选组radio： $("input[type=radio][checked]").val();   

 下拉框select： $('#sel').val();  

    

 控制表单元素：   

 文本框，文本区域：$("#txt").attr("value",'');//清空内容   

$("#txt").attr("value",'11');//填充内容  

   
 多选框checkbox： $("#chk1").attr("checked",'');//不打勾   

 $("#chk2").attr("checked",true);//打勾   

 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾  

    

 单选组radio： $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项   

 下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项   

 $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option   

$("#sel").empty()；//清空下拉框  

    

 刚开始接触jquery，很多东西不熟悉   

 在用$("#id")来获得页面的input元素的时候，发现$("#id").value不能取到值  

   

 后来终于在伟大的百度帮助下，找到了问题的原因：   

 $("")是一个jquery对象，而不是一个dom element  

    

 value是dom element的属性  

  

 jquery与之对应的是val  

   
 val() :获得第一个匹配元素的当前值。  

  

 val(val):设置每一个匹配元素的值。  

   

 所以，代码应该这样写：  

   
 取值：val = $("#id")[0].value;   
 赋值：  $("#id")[0].value = "new value";   

 或者$("#id").val("new value");  

   

 或者这样也可以：val = $("#id").attr("value"); 



jQuery中each非常好用，常用它取代javascript的for循环 

例如在一个function里有一个each,在each里某种条件 成立的话，就把这个function返回true或者false 

function methodone(){ 
.... 
$.each(array,function(){ 
if(条件成立){ 
return true; 
} 
}); 
.... 
} 

结果发现老是不对。 

后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用其它的方式 
break----用return false; 
continue --用return ture; 

所以当我在each里想使用return true给这个function返回时，其实只是让each继续执行而以 
连each都没有中断，所以function也就不能return了  

另：判断radio是否选中并取得选中的值 

如下所示： 
function checkradio(){ 
var item = $(":radio:checked"); 
var len=item.length; 
if(len>0){ 
  alert("yes--选中的值为："+$(":radio:checked").val()); 
} 
}

jquery+ajax+php创建无限滚动页面

2014.02.24

jquery+ajax+php创建无限滚动页面

html文件：

<html>
	<head>
		<title>Endless Scroll</title>
		<style type="text/css">
			body{ font-family: "Trebuchet MS",verdana,arial;}
			#loading{ display:none; font-weight:bold;color:#FF0000;}
			p { padding:10px;}
		</style>
		
	</head>
	<body>
		<div id="container">
			<p>Test Paragraph 1</p>
			<p>Test Paragraph 2</p>
			<p>Test Paragraph 3</p>
		</div>
		<p id="loading">loading data... </p>
		<script type="text/javascript" src="../jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function()
			{
				$(window).scroll(loadData);
			});
			
			var counter = 0;
			function loadData()
			{
				if(counter < 5)
				{
					if  (isUserAtBottom())
					{
						getData();
					}
				}
			}
			function isUserAtBottom()
			{
				return ((($(document).height() - $(window).height()) - $(window).scrollTop()) <= 50) ? true : false;
			}
			function getData()
			{
				$(window).unbind('scroll');
				$('#loading').show();

				$.get(
				'data.php',
				{},
				function(response)
				{
					counter++;
					$('#loading').hide();
					$('#container').append(response);
					$(window).scroll(loadData);
				});
			}
		</script>
	</body>
</html>

data.php文件：

<?php sleep(2);
	echo '<p>This data has been <br/>loaded from server...</p>';
?>

jQuery animate解决动画闪烁问题

2014.02.20

$("#menu").hover(function() {
    $("#menu").stop(true).animate({
        height: "500"
    },
    5000).animate({
        width: "500px"
    },
    5000);
},
function() {
    $("#menu").stop(true).animate({
        height: "100"
    },
    5000).animate({
        width: "100px"
    },
    5000);
});

在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用 mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细。
解决闪动可以使用Stop()
stop([clearQueue],[jumpToEnd])
概述
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数
[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
当鼠标移上去的时候就菜单下拉，当鼠标离开的时候菜单上卷，下拉和上卷的动画时间都是5秒种。

$("#menu").hover(function() {
    $("#menu").animate({
        height: "500"
    },
    5000);
},
function() {
    $("#menu").animate({
        height: "100"
    },
    5000);
});

如果我快速不断地将鼠标移入移出菜单（即，当菜单下拉动画未完成时，鼠标又移出了菜单）就会产生“动画积累”，当鼠标停止移动后，积累的动画还会持续执行，直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。
要解决此问题只需要在移入移出动画之前加入stop()，结束当前动画进入下个动画即可。
代码如下：

$("#menu").hover(function() {
    $("#menu").stop().animate({
        height: "500"
    },
    5000);
},
function() {
    $("#menu").stop().animate({
        height: "100"
    },
    5000);
});

如果需到组合动画，在移入移出动画之前加入stop()来停止当前动画，如下

$("#menu").hover(function() {
    $("#menu").stop().animate({
        height: "500"
    },
    5000).animate({
        width: "500px"
    },
    3000);
},
function() {
    $("#menu").stop().animate({
        height: "100"
    },
    5000).animate({
        width: "100px"
    },
    3000);
});

效果并不好，因为stop()只是停止了当前第一步的动画（即{height:”500″}），然后又进入了第二步的动画（即[width:”500″}）。
此时stop()的第一个参数就派上了用场，它会把下面没有执行的动画序列都清空掉。

当然也可以使用第二个参数，让动画达到最后状态。如：stop(false,true)

微信分享通用组件

2014.02.19

微信分享通用组件，用于微信浏览器内浏览网页的分享信息定义。
一、可定义的信息
1、分享时显示的LOGO；
2、分享LOGO的宽度；
3、分享LOGO的高度；
4、分享出去显示的标题（默认调用网页标题）；
5、分享出去显示的描述（默认调用网页标题）；
6、分享链接(默认为当前页面的URL)。
7、分享微信的APPID(一般为空)。

二、使用方法

1、引入微信分享组件js：

/*******************************
 * Author:Mr.Think
 * Description:微信分享通用代码
 * 使用方法：_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');
 *******************************/
function _WXShare(img,width,height,title,desc,url,appid){
    //初始化参数
    img=img||'http://a.zhixun.in/plug/img/ico-share.png';
    width=width||100;
    height=height||100;
    title=title||document.title;
    desc=desc||document.title;
    url=url||document.location.href;
    appid=appid||'';
    //微信内置方法
    function _ShareFriend() {
        WeixinJSBridge.invoke('sendAppMessage',{
              'appid': appid,
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res){
                _report('send_msg', res.err_msg);
          })
    }
    function _ShareTL() {
        WeixinJSBridge.invoke('shareTimeline',{
              'img_url': img,
              'img_width': width,
              'img_height': height,
              'link': url,
              'desc': desc,
              'title': title
              }, function(res) {
              _report('timeline', res.err_msg);
              });
    }
    function _ShareWB() {
        WeixinJSBridge.invoke('shareWeibo',{
              'content': desc,
              'url': url,
              }, function(res) {
              _report('weibo', res.err_msg);
              });
    }
    // 当微信内置浏览器初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                _ShareFriend();
          });

            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                _ShareTL();
                });

            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                _ShareWB();
           });
    }, false);
}

2、在页面底部或共用js中，初始化执行：

_WXShare('分享显示的LOGO','LOGO宽度','LOGO高度','分享标题','分享描述','分享链接','微信APPID(一般不用填)');

可通过动态定义【分享链接】，实现每次分享出去的链接不同；

window resize和scroll事件的基本优化

2014.02.16

同事在项目中使用scroll事件去加载数据，结果IE下悲剧了。给了一个简单优化方法，效果明显。
只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发，低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。
基本的优化思路：在一定的时间之内，只执行一次resize事件函数。

var resizeTimer = null;
$(window).on('resize', function () {
        if (resizeTimer) {
            clearTimeout(resizeTimer)
        }
        resizeTimer = setTimeout(function(){
            console.log("window resize");
        }, 400);
    }
);

scroll事件优化同理。

jQuery日期插件 Prettydate

2014.02.07

Prettydate 是一个 jQuery 用来显示日期格式的插件，他的日期格式不同与传统格式。
例如刚刚，昨天，1分钟前，1小时前

<br />

在线演示：http://jquery.bassistance.de/prettydate/demo/
示例代码：

$.prettyDate.messages = {
    now: "gerade eben",
    minute: "vor einer Minute",
    minutes: $.prettyDate.template("vor {0} Minuten"),
    hour: "vor einer Stunde",
    hours: $.prettyDate.template("vor {0} Stunden"),
    yesterday: "Gestern",
    days: $.prettyDate.template("vor {0} Tagen"),
    weeks: $.prettyDate.template("vor {0} Wochen")
}

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-prettydate/
下载地址：https://github.com/jzaefferer/jquery-prettydate

FusionCharts参数说明 – 3D饼图属性 – Pie3D.swf

2014.02.06

animation 是否显示加载图表时的动画
palette 内置的图表样式,共5个
paletteColors 自定义图表元素颜色(为多个,如过过少会重复)
showAboutMenuItem 右键是否显示”关于FusionCharts”
aboutMenuItemLabel 右键关于自定义文字
aboutMenuItemLink 右键关于自定义链接(FusionCharts链接格式)
showZeroPies 是否显示0值的饼
showPercentValues labels上是否显示百分数
showPercentInToolTip tip上是否显示百分数
showLabels 是否显示Label
manageLabelOverflow 当Label溢出时进行自动管理
useEllipsesWhenOverflow 当Label溢出时候使用…
showValues 是否显示值
labelSepChar label上的分隔符
defaultAnimation 是否关闭默认动画一开始自定义动画
clickURL 整个图表的点击的url

标题
caption 主标题
subCaption 副标题

图表的装饰
showBorder 显示边框
borderColor 边框颜色
borderThickness 边框粗细
borderAlpha 边框透明度
bgColor 背景颜色
bgAlpha 背景透明度
bgRatio 背景比例
bgAngle 背景角度
bgSWF 背景flash地址可以是图片地址
bgSWFAlpha 背景flash的透明度
showVLineLabelBorder
logoURL log地址
logoPosition log位置
logoAlpha log透明度
logoScale log比例
logoLink log链接

元素的装饰
showPlotBorder 每一片的边框
plotBorderColor 每一片的边框颜色
plotBorderThickness 每一片的边框粗细
plotBorderAlpha 每一片的边框透明度
plotFillAlpha 每一片的边框填充透明度
use3DLighting 3d光效果

饼/圈专有属性
slicingDistance 当点击图表的时候这一片饼离开中心点的距离
pieRadius 饼的外半径
startingAngle 起始角度
enableRotation 开启旋转
pieInnerFaceAlpha 图表里面的透明度
pieOuterFaceAlpha 图表外面的透明度
pieYScale 饼立起来的角度,角度越大看到的面积越大.
pieSliceDepth 图表的厚度
标明线 & Labels (label和图表元素之间的线)
enableSmartLabels 是否开启标明显
skipOverlapLabels 跳过重复标签
isSmartLineSlanted 标明线方式(倾斜或直)
smartLineColor 标明线颜色
smartLineThickness 标明线粗细
smartLineAlpha 标明线透明度
labelDistance
smartLabelClearance 标明线长度

数字
formatNumber 逗号来分隔数字(千位，百万位),默认为1(True)；若取0,则不加分隔符
formatNumberScale 是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M
defaultNumberScale 默认数量级
numberScaleUnit
numberScaleValue
numberPrefix 数字前缀
numberSuffix 数字后缀
decimalSeparator 小数分隔符
thousandSeparator 千位分割符
inDecimalSeparator 在十进位分割符
inThousandSeparator 在千位分割符
decimals 小数
forceDecimals 是否用0填充以至满足要保留的小数位

字体
baseFont 基本字体
baseFontSize 基本字号
baseFontColor 基本字颜色
Tool-tip
showToolTip 是否显示提示
toolTipBgColor 提示背景色
toolTipBorderColor 提示边框色
toolTipSepChar 提示分隔符
showToolTipShadow 是否显示提示Tool-tip阴影

边距
captionPadding 标题内边距
chartLeftMargin 图表左外边距
chartRightMargin 图表右外边距
chartTopMargin 图表上外边距
chartBottomMargin 图表下外边距
set元素
borderColor 边框颜色
isSliced 被切开
label [label]
value 值
color 颜色
link 链接(FusionCharts链接格式)
toolText 自定义提示

图例(3.2版本以上)
showLegend 是否显示图例
legendPosition 图例位置
legendCaption 图例说明
legendIconScale 图例图标0-5(图例图标大小)
legendBgColor 图例背景色
legendBgAlpha 图例透明度
legendBorderColor 图例边框颜色
legendBorderThickness 图例边框粗细
legendBorderAlpha 图例边框透明度
legendShadow 图例阴影
legendAllowDrag 是否允许拖动图例
legendScrollBgColor 图例滚动条背景色
legendScrollBarColor 图例滚动条颜色
legendScrollBtnColor 图例滚动条按钮颜
reverseLegend 反转图例
interactiveLegend 图例交互(是否可点击)
legendNumColumns 设置图例的列数(如果设置不当会自动设置,如果legendPosition设置为右面该属性自动设置为1)
minimiseWrappingInLegend

FusionCharts入门指南网页图标js,flash插件
 FusionCharts例子及参数说明 – 多系列折线图 – MSLine.swf
FusionCharts例子及参数说明 – 3D柱状图 – Column3D.swf
FusionCharts例子及参数说明 – 3D饼图属性 – Pie3D.swf

FusionCharts参数说明 – 3D柱状图 – Column3D.swf

2014.02.06

图表样式

canvasBaseColor 底盘颜色

showCanvasBase 是否显示底盘

canvasbasecolor 底盘颜色

柱图元素细节

plotGradientColor 渐变色 2D条图(Bar2D.swf )区分线及网格

alternateVGridColor 垂直网格交替的颜色。

alternateVGridAlpha 垂直网格交替的透明度。 2D条图(Bar2D.swf )区分线及网格

alternateVGridColor 垂直网格交替的颜色。

alternateVGridAlpha 垂直网格交替的透明度。

FusionCharts参数说明 – 网页折线图 – MSLine.swf

2014.02.06

示例下载地址：
http://yun.baidu.com/share/link?shareid=2229288966&uk=1010090726

showLabels 是否显示Label
labelDisplay Label的展示形式(AUTO/WRAP/STAGGER/ROTATE/NONE)
useEllipsesWhenOverflow 当Label溢出时候使用…
rotateLabels 旋转Label
slantLabels 如果rotateLabels=1，设置label是否偏转个角度.
labelStep label步伐(可以设置5个一显示/和category中showLabel=’0’有些类似但不完全相同,区别在于这个属性是先展示后去掉不要的label,后者正好相反.这样对label会不会自动折行很有关系)
staggerLines 如果 labelDisplay=’STAGGER’,Label显示多少行.
showValues 是否显示值
valuePosition 值的位置(ABOVE/BELOW/AUTO,上下自动)
rotateValues 把值旋转
showYAxisValues 是否y轴值
showLimits 是否y轴极限值
yAxisValuesStep y轴值步伐(距离几个刻度显示一个值)
showShadow 是否显示阴影
adjustDiv 调整线
rotateYAxisName 是否旋转y轴名字
yAxisNameWidth y轴名字的宽
clickURL 图表点击的url
defaultAnimation 默认动画
yAxisMinValue 指定纵轴(y轴)最小值，数字
yAxisMaxValue 指定纵轴(y轴)最小值，数字

图表标题和轴名称
caption 图表主标题
subCaption 图表副标题
xAxisName 横向坐标轴(x轴)名称
yAxisName 纵向坐标轴(y轴)名称

图表和画布的样式
showBorder 是否显示边框
borderColor 边框颜色
borderThickness 边框粗细
borderAlpha 边框透明度
bgColor 图表背景色，6位16进制颜色值
bgAlpha 图表背景透明度
bgRatio 图表背景的放大缩小比例
bgAngle 图表背景的角度
bgSWF 图表背景flash也可以是图片地址
bgSWFAlpha 图表背景flash的透明度
canvasBgColor 画布背景色，6位16进制颜色值
canvasBgAlpha 画布透明度，[0-100]
canvasBgRatio 画布放大缩小比例
canvasBgAngle 画布角度
canvasBorderColor 画布边框颜色，6位16进制颜色值
canvasBorderThickness 画布边框厚度，[0-100]
canvasBorderAlpha 画布边框透明度
showVLineLabelBorder

图表元素细节
lineColor 线的颜色
lineThickness 线的粗细
lineAlpha 线的透明度
lineDashed 是否虚线
lineDashLen 每个小虚线长度
lineDashGap 两个小虚线间的距离

折点
drawAnchors 是否显示折点
anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形)
anchorRadius 折点半径
anchorBorderColor 折点边框颜色
anchorBorderThickness 折点边框粗细
anchorBgColor 折点背景色
anchorAlpha 折点透明度
anchorBgAlpha 折点背景透明度

分区线和网格
numVDivLines 画布内部垂直分区线条数，数字
vDivLineColor 垂直分区线颜色，6位16进制颜色值
vDivLineThickness 垂直分区线厚度，[1-5]
vDivLineAlpha 垂直分区线透明度，[0-100]
vDivLineIsDashed 垂直分区线是否为虚线
vDivLineDashLen 垂直分区线每个虚线长度
vDivLineDashGap 垂直分区线2个虚线间距离
showAlternateVGridColor 是否在纵向网格带交替的颜色，默认为0(False)
alternateVGridColor 纵向网格带交替的颜色，6位16进制颜色值
alternateVGridAlpha 纵向网格带的透明度，[0-100]
numDivLines 画布内部水平分区线条数，数字
divLineColor 水平分区线颜色，6位16进制颜色值
divLineThickness 水平分区线厚度，[1-5]
divLineAlpha 水平分区线透明度，[0-100]
divLineIsDashed 水平分区线是否为虚线
divLineDashLen 水平分区线每个虚线长度
divLineDashGap 水平分区线2个虚线间距离
zeroPlaneColor 0线颜色
zeroPlaneThickness 0线粗细
zeroPlaneAlpha 0线透明度
showAlternateHGridColor 是否在横向网格带交替的颜色，默认为0(False)
alternateHGridColor 横向网格带交替的颜色，6位16进制颜色值
alternateHGridAlpha 横向网格带的透明度，[0-100]
showZeroPlane 是否显示0线

字体属性
baseFont 图表字体
baseFontSize 图表字体大小
baseFontColor 图表字体颜色，6位16进制颜色值
outCnvBaseFont 图表画布以外的字体样式
outCnvBaseFontSize 图表画布以外的字体大小
outCnvBaseFontColor 图表画布以外的字体颜色，6位16进制颜色值

图表的内外边距
captionPadding 标题内边距
chartLeftMargin 图表左外边距
chartRightMargin 图表右外边距
chartTopMargin 图表上外边距
chartBottomMargin 图表下外边距

Set标签
value 数据值
displayValue 显示的值
color 颜色
link 链接（本窗口打开[Url]，新窗口打开[n-Url]，调用JS函数[java script:函数]）
toolText 自定义提示
showValue 是否显示值
valuePosition 值得位置
alpha 透明度
anchorSides 折点这个多边形有几个边3-20(eg:3是个三角形)
anchorRadius 折点半径
anchorBorderColor 折点边框颜色
anchorBorderThickness 折点边框粗细
anchorBgColor 折点背景色
anchorAlpha 折点透明度
anchorBgAlpha 折点背景透明度

dashed 虚线

FusionCharts入门指南网页图标js,flash插件

2014.02.06

FusionCharts 是一个网页图标插件，使用他可以快速的在网页上实现各种图标。这个图表的功能强大，入门简单。

例如：

多系列折线图 – MSLine.swf

3D柱状图 – Column3D.swf

3D饼图属性 – Pie3D.swf

阅读详细 »