<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Moondy’s Zone &#187; JS/Ajax</title>
	<atom:link href="http://www.moondyzone.com/class/js/feed" rel="self" type="application/rss+xml" />
	<link>http://www.moondyzone.com</link>
	<description>一位IT民工的点点滴滴……  WEB前端、网页重构、AS3</description>
	<lastBuildDate>Mon, 18 Apr 2011 10:06:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.moondyzone.com/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>页面复制的完美解决方案</title>
		<link>http://www.moondyzone.com/css/610.html</link>
		<comments>http://www.moondyzone.com/css/610.html#comments</comments>
		<pubDate>Sun, 17 Apr 2011 09:25:14 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[Xhtml/Css]]></category>
		<category><![CDATA[兼容]]></category>
		<category><![CDATA[复制]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=610</guid>
		<description><![CDATA[之前有发过一篇有关兼容浏览器页面复制的文章，很早就有朋友反应说在某些情况下无效，当时却还没有怎么注意，后来自己要用的时候发现的确是有问题，查了一下原因，原来是FLASH版本的问题。现在的浏览器中FLASH版本基本上都升到10了，在FLASH10中，要有实际的点击动作才能触发复制，所以原来那个是就无效了。
当然，解决办法还是有的，在这里介绍一个：zeroclipboard。同样也是利用FLASH来实现的，所以浏览器的兼容性是没有问题的。
另外，现在很多项目都会用到jquery，用的时候需要注意，尽可能用$(window).load()，因为如果用$(document).ready()的话会有可能在还没被加载的情况下就运行了，会复制失效。对于用jquery框架的朋友，这里推荐一个专门针对jquery的版本：zClip。
相关文章兼容浏览器的页面复制代码解决IE8的兼容问题，X-UA-Compatible meta标签全兼容的标准三级菜单兼容浏览器的DIV最小高度自适应CSS实现兼容浏览器的文字阴影效果兼容各浏览器的FLASH透明方法]]></description>
		<wfw:commentRss>http://www.moondyzone.com/css/610.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>一个挺酷的星级投票效果</title>
		<link>http://www.moondyzone.com/js/586.html</link>
		<comments>http://www.moondyzone.com/js/586.html#comments</comments>
		<pubDate>Tue, 09 Feb 2010 09:01:46 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[投票]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=586</guid>
		<description><![CDATA[先声明一下，这是本人在某个项目中用到的，本人自己写的，如有雷同纯属巧合。同时也欢迎高人指正。
这种星级的投票效果很常见，但是目前线上大多都是通过多张背景图切换来实现的，比如下面这种

感觉这种方法挺麻烦的，而且也不能精确地表示比如8.8这样的小数，所以自己写了个，感觉还挺不错，不多说了，先上代码：


&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;IE=EmulateIE7&#34; /&#62;
&#60;title&#62;vote&#60;/title&#62;
&#60;script type=&#34;text/javascript&#34; src=&#34;http://www.moondyzone.com/wp-demo/jquery-lightbox/js/jquery.js&#34;&#62;&#60;/script&#62;
&#60;style&#62;
.user_rate {font-size:14px; position:relative; padding:10px 0;}
	.user_rate p {margin:0; padding:0; display:inline; height:40px; overflow:hidden; position:absolute; top:0; left:100px; margin-left:140px;}
	.user_rate p span.s {font-size:36px; line-height:36px; float:left; font-weight:bold; color:#DD5400;}
	.user_rate p span.g {font-size:22px; display:block; float:left; color:#DD5400;}
/*rating*/
.big_rate_bak {width:140px; height:28px; overflow:hidden; text-align:left; position:absolute; top:3px; left:85px; display:inline-block; background:url(http://www.moondyzone.com/wp-content/uploads/2010/02/b_star.gif) left [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/586.html/feed</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>兼容浏览器的页面复制代码</title>
		<link>http://www.moondyzone.com/js/574.html</link>
		<comments>http://www.moondyzone.com/js/574.html#comments</comments>
		<pubDate>Fri, 01 Jan 2010 14:56:33 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[兼容]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=574</guid>
		<description><![CDATA[关于此方法复制不成功的，请看这一篇：http://www.moondyzone.com/css/610.html 
关于这个问题，目前网上大部分的代码都是只兼容IE的。因为之前实现这个功能都是用到了一个IE的控件。但前不久做一个任务的时候也碰到了这个需求，但是要全兼容，所以就找了一下，现在有了一种新的办法来解决这个问题，是通过一个FLASH来解决的。
原理其实很简单，是利用了AS3中的 System.setClipboard() 方法，因为是通过FLASH实现的，所以没有浏览器上的兼容性问题，用法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Transitional//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;无标题文档&#60;/title&#62;
&#60;SCRIPT type=text/javascript&#62;
 function copy(meintext) {
  if (window.clipboardData) {
      window.clipboardData.setData(&#34;Text&#34;, meintext)
  } else {
 var flashcopier = 'flashcopier';
 if(!document.getElementById(flashcopier)) {
        var divholder = document.createElement('div');
  divholder.id = [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/574.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>使用动态scritp标签解决跨域读数据的问题</title>
		<link>http://www.moondyzone.com/js/532.html</link>
		<comments>http://www.moondyzone.com/js/532.html#comments</comments>
		<pubDate>Fri, 04 Sep 2009 07:43:48 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[JSON]]></category>
		<category><![CDATA[跨域]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=532</guid>
		<description><![CDATA[来到TX后第一个比较正式的任务就是做一个活动页面。页面就不说了，活动页面嘛，那个线条啊只能大块大块地切图了。然后就是因为数据量并不多，所以采用了用静态页然后通过JS去读数据的做法。然后就碰到了跨域的问题了。
我想肯定有很多朋友也会碰到这样的情况，对方只给出一个链接让你去取数据，通过传递不同的参数，返回不同的数据。如果是在本域的话，用AJAX是很方便的，但AJAX不能跨域。而iframe的方法也不实用，只能跨小域，还需要在双方页面加相应的函数，页面里多了那么一块也让人感觉不舒服。所以决定用动态script标签的方法来解决这个问题。
在这里想说一句，国内的业内环境真是…，网上查出来的技术文章几乎都是同样的几篇转来转去，而且也说得不清不楚的很费解。还是BI上环境好些，呵呵。下面的代码并非我原创，也是参考来的，但我一定讲解清楚，让每一个看这文章的人都能明白具体是如何实现的。
由于浏览器安全的问题，一些跨域的请求都会被拒绝，当然，你也可以设置为添加到信任站点就能访问，但你不可能要求你的每个用户都去这样添加。但是，也有个例外，JS是可以跨域的，比如说我们用jquery的时候，可以加载code.google.com里面的jquery包，同样也能应用到jquery的框架；再比如说一些流量统计的代码，都是加一段JS在页面，我们就能应用到写在里面的函数了。所以，当我们把我们所以跨域读取的地址写在script标签的src里的时候，不管是什么后缀名的文件，都会被当做一个JS来读取。所以呢，这个页面的输出要采用JS的格式。
在这里先说两点，第一是这个方法名字虽然是叫动态script标签，但是你静态地直接写在页面里也是可以的，前提是你不需要动态地传递参数；第二是在很多文章里会把此方法跟json扯上关系，其实这跟json没有任何关系，只是因为用json来处理某些返回值时比较方便罢了。下面还是用json格式的来说明好了，因为这样的应用可能会比较多一点。
首先我们新建一个页面，可以是ASP、PHP或者CGI，或者TXT也都可以，但是让他的输出像这样：

var MyJSON = &#123;
   'info': &#91;&#123;'name' : 'moondy','sex' : '男','age' : '28'&#125;&#93;
&#125;;

这里定义了一个json，你也可以这样定义：

var name=&#34;moondy&#34;;
var sex=&#34;男&#34;;
var age=&#34;28&#34;;

喜欢怎样写就怎样写了，只是在有多组数据的时候，用json比较方便了。关键是要用var ，这样才能当做一个JS的变量来读取，此方法的主要思想，就是在你的页面动态地加入了一句变量的定义，而你就可以直接在JS中引用这个变量了。下面是JS部分：

var element = document.createElement&#40;&#34;script&#34;&#41;;
function createScript&#40;compId,dataId&#41;&#123;        
        element.src = &#34;http://www.moondyzone.com/json.php&#34;;//这里是你需要跨域读取的URL
        element.type = &#34;text/javascript&#34;;
      [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/532.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>迷你且高效的WEB编辑器——xheditor</title>
		<link>http://www.moondyzone.com/js/522.html</link>
		<comments>http://www.moondyzone.com/js/522.html#comments</comments>
		<pubDate>Thu, 30 Jul 2009 10:28:59 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[juqery]]></category>
		<category><![CDATA[xheditor]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=522</guid>
		<description><![CDATA[很久很久以前，我刚接触到这一行的时候，用的是一款名叫webedit的WEB在线编辑器。当时并不了解什么WEB标准，后来才发现在非IE的浏览器下都用不了。其实抛开兼容性的话，这一款还算是蛮不错的在线编辑器了。
再后来，就用到了所谓大名鼎鼎的FCK。FCK功能的确是不错，但我实在没法称赞它好用，他真的很难用，或者说是不适合中国人的使用习惯吧。像我们一些开发人员自己用还没什么，如果给客户做的程序用的是FCK，那么一个上传图片的模式就会搞得人摸不着头脑。
然后我不停地在找，终于碰到了一款近乎完美的WEB在线编辑器——xheditor。没有说它完美，因为它还有一个前提条件，是用jquery框架开发的。不过就算项目用的不是jquery框架，加上一个50K的JS包，它的体积还是非常小的，调用相当方便不像以前的那些需要插入一个iframe而是一个textarea就可以了，而且非常适合国人的使用习惯。详细介绍我这里就不写了，大家可以去谷歌代码上去看，他们的开发团队一直都有更新版本。
http://code.google.com/p/xheditor/

相关文章一个挺酷的星级投票效果使用动态scritp标签解决跨域读数据的问题JQuery LightBox Plugin]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/522.html/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>JQuery LightBox Plugin</title>
		<link>http://www.moondyzone.com/js/502.html</link>
		<comments>http://www.moondyzone.com/js/502.html#comments</comments>
		<pubDate>Mon, 13 Jul 2009 07:20:00 +0000</pubDate>
		<dc:creator>Moondy</dc:creator>
				<category><![CDATA[JS/Ajax]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[lightbox]]></category>

		<guid isPermaLink="false">http://www.moondyzone.com/?p=502</guid>
		<description><![CDATA[说到lightbox，做这行的人应该都不陌生，想当年那牛逼哄哄的效果着实让我眼前一亮。不过原版的lightbox是用Prototype框架写的，但本民工只懂得少许的jquery，总不能同一个项目中用两个框架吧，还好牛人们已经做出了基于jquery的lightbox的插件了。其实wordpress里就有很多lightbox的插件，不过这东西可不是只用在博客里，还是整理一个能通用的吧。
jQuery lightBox 0.5,是当前最新的版本了，在这里本民工稍微修改了一下，去掉了点击时的虚线框，以及修改了有关中文的样式。
    
    
    $(function() {
        $('#gallery a').lightBox();
    });
    

	#gallery {padding: 10px;width: 520px;}
	#gallery ul { list-style: none;overflow:hidden; }
	#gallery ul li { display: inline;float:left; }
	#gallery ul img {
		border: 5px solid #F2F2F2;
		border-width: 5px 5px [...]]]></description>
		<wfw:commentRss>http://www.moondyzone.com/js/502.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

