<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
<title><![CDATA[哭笑不得 - 代码编程]]></title>
<link>http://www.kxbd.com/</link>
<description><![CDATA[让你笑不是我的本意，让你哭才是我的目的。]]></description>
<language>zh-cn</language>
<copyright><![CDATA[Copyright 2005 PBlog3 v2.8]]></copyright>
<webMaster><![CDATA[forfun77@gmail.com(没有想法)]]></webMaster>
<generator>PBlog2 v2.4</generator> 
<image>
	<title>哭笑不得</title>
	<url>http://www.kxbd.com/images/logos.gif</url>
	<link>http://www.kxbd.com/</link>
	<description>哭笑不得</description>
</image>

			<item>
			<link>http://www.kxbd.com/article.asp?id=302</link>
			<title><![CDATA[[PV3D]三维图片展示]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Tue,27 Jul 2010 16:11:30 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=302</guid>
		<description><![CDATA[示例页：<br/><a target="_blank" href="http://www.kxbd.com/mylab_as/100527mickey/" rel="external">http://www.kxbd.com/mylab_as/100527mickey/</a><br/><br/>点击舞台可变换图形组合，目前只有三种。<br/><br/>这是我用PV3D做的第二个东西，原来提案用的，现在没有用了，就拿出来晒下。<br/><br/>原来用AWAY3D做过几个小东西，结果这半年里看了好几本PV3D的书，也做了一些东西之后，基本上就只用PV3D了。<br/><br/>AWAY3D坏就坏在学习的资料太少，我又没有什么时间去研究，所以PV3D就成了做东西的首选。<br/><br/>目前市面上有好几本PV3D的书，简单介绍一下：<br/><br/>Flash 3D 特效宅急便<br/><br/>这本是台湾人写的，是一本以实例讲解为主的书，非常适合新手入门，淘宝有售。<br/><br/>台湾人写的书大多是轻松易懂，与大陆人写的大多是书册不一样，我看过好几本台湾人的书，做为入门书都很不错，不过要想进一步就得再看看别的。<br/><br/>Papervision3D Essentials<br/><br/>这书对PV3D讲解的更深入了一些，同时书中示例也全面，我做这个图片展示就是把从书中学到的东西用了出来，此书有国人翻译的电子版。<br/><br/>Professional Papervision3D<br/><br/>我到目前也没有找到电子版，只有书的的源代码，研究了一下，确实更深入。原本想去AMAZON上买本的，一算下来居然要五百多，又舍不得了，所以还是等以后再说了。]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=297</link>
			<title><![CDATA[Flash又要死了？]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Mon,08 Feb 2010 23:46:30 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=297</guid>
		<description><![CDATA[这不知道是我第几次听到这个说法了，狼来了叫多了真的来了，FLASH死了叫多了，真的死了？<br/><br/>最近IPad的发布，乔布斯为IPad不支持Flash而发表的一通言论，以及HTML5的推广，让一些互联网开发人员认为在不远的将来就可以对Flash说不，我得说他们想错了。<br/><br/>不管是互联网的纷纷扰扰，还是世界上的一切活动，无不围绕着一个“利”字，乔布斯这么说，是怕Flash攻陷Apple封闭的开发圈，HTML5是一个标准不错，但也不过是其他公司用来围攻FLASH的一个工具，归根到底还是市场利益决定了他们的行动。<br/><br/>对一个普通开发者来说，开放的心态要比执著于某一项技术要来得更重要，毕竟任何技术都不过是解决问题的工具，工具的好坏并不是决定你是否使用它的最大理由，做出为市场所普遍接受的产品才是你选用此项技术的最终目的，最大的原因可能还是在于你的老板决定使用哪个技术。<br/><br/>对于初学者来说，他们经常做的事情就是比较，PHP，JSP哪个好？AS，JS哪个有发展？我的回答是，随便选一个方向做下去，都很好。只精通某项技术的人我见的很少，做的好的大多都是杂家，各门技术都有涉猎，一专多能才是公司所喜欢的人才，他们才是活学活用的典范。<br/><br/>专注没错，但是眼界一样也要开阔。<br/><br/>再转回到HTML和FLASH，至少目前我看来，他们仍然是处于互补的状态，FLASH目前没有取代HTML的可能，但是HTML5想要取代FLASH也并非一朝一夕所能完成，不论是DHTML，XHTML还是AJAX，名称变来变去，他们最终也没有将FLASH致于死地。<br/><br/>我从来都不是一个技术至上的支持者，科技是第一生产力没错，但是得加上定语，转化了的科技才是第一生产力，从技术到生产要走的路还很长，HTML5也是如此。谁都没有必要妄自菲薄，做好手上的事，跟着市场走就好。]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=294</link>
			<title><![CDATA[[Actionscript][Away3D]Flash 3D相册]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Fri,11 Dec 2009 14:22:59 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=294</guid>
		<description><![CDATA[在写<a target="_blank" href="http://www.kxbd.com/article.asp?id=262" rel="external">我的第一个Away3D应用</a>时，曾说打算写个3D相册，但实在是心无长性，没多久就抛之脑外，这次写Flash图片轮换，对Away3D又来了兴致，刚好在网上看到一个图片展示感觉不错，于是就用Away3D写了一个类似的。<br/><br/>用Flash也写了几个简单的3D应用了，目前感觉最主要的问题还是在于FLASH的执行效率，很多3D应用都占用大量CPU，用户体验并不好，另外还有一点很重要的是，很多情况是一味为了3D而3D，视觉效果做的不到位，反而不如传统的平面好看。<br/><br/>感觉目前使用3D就象当初让静止不动的网页动起来的阶段，用技术来吸引眼球，不过，可以预见的未来是，随着Flash技术的不断完善，3D应用将大量充斥网络，更多成熟且好玩的案例会不断出现，因此是值得继续在3D上下功夫的。<br/><br/>Demo在此：<a target="_blank" href="http://www.kxbd.com/mylab_as/091202Album3D/" rel="external">Flash 3D相册</a>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=293</link>
			<title><![CDATA[[Javascript][Mootools]IntoTheSky JS版本]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Thu,26 Nov 2009 15:22:37 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=293</guid>
		<description><![CDATA[在用AS写了上个<a target="_blank" href="http://www.kxbd.com/article.asp?id=292" rel="external">Flash小游戏</a>之后，我闲来无事，决定用Javascript将这个游戏重写一下，而使用的JS类库就是Mootools，因为Mootools在OOP式开发上提代了大量支持，尤其是Class.Extras中的Events类，让事件驱动开发成为可能。<br/><br/>由于JS和AS的同宗同源，把AS改成JS，并没有改动多少代码，如果对比这个游戏的JS和AS源码，就会发现游戏里的各个类结构基本是一样的。最主要的变化在于，将FLASH中的显示对象(DisplayObject)改成DOM对象显示，因此改写游戏并没有花费我多少时间。<br/><br/>最终游戏效果在IE下执行效率不好，在FF/Chrome下还可以，基本上和Flash相差不大，由于JS在图形处理上并不如Flash一般强大，所以游戏中的元素只是使用是最基本的DIV来意思一下。<br/><br/>这个游戏只是我个人一时冲动写来玩玩的，在目前各种浏览器执行效率相差迥异的情况下，用JS来写游戏是吃力不讨好的事情。但是，我仍然看到有人用Mootools写出了MMORPG在线游戏，<a target="_blank" href="http://vanthia.com/" rel="external">vanthia</a>就是这样的一个游戏，这真是让我敬佩，该游戏目前仍未正式发布，所以我很是期待看到他们完成的那一天。<br/><br/>游戏在这：<a target="_blank" href="http://www.kxbd.com/mylab/091125IntoTheSky/" rel="external">IntoTheSky Javascript版</a>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=292</link>
			<title><![CDATA[[Actionscript][Flash游戏]IntoTheSky]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Tue,24 Nov 2009 15:19:45 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=292</guid>
		<description><![CDATA[前阵子因为有一阵子没有写AS，想要写点东西来暖下手，于是就想要模仿着写个游戏，这个游戏是<a target="_blank" href="http://www.kxbd.com/article.asp?id=165" rel="external">几年前我提过的</a>，当时就被作者所折服，那时对AS也不算很熟悉，虽然也有些想法研究下这游戏，但是一拖再一拖，直到AS3都出来这几年了，现在终于是决定用AS3将这游戏用自己的方法写一遍。<br/><br/>游戏所用元素以及游戏逻辑全与原作一样，因为只是自己写着玩，不会发布到其他网站，应该不会有什么问题。写这个游戏过程中，又因为工作原因去写了两个FLASH广告轮换，前后也花了我两周的时间，和以往以样，测试也占据大量时间。<br/><br/>原作者功底很扎实，虽然是使用AS2所写，也没有通过类的方式，但是游戏设计很精巧，图形以及音乐都浑然一体，对种细节的把握都恰到好处。对于游戏开发我的看法是，游戏策划是灵魂，而灵魂的好坏决定了游戏的品质。原作者还有<a target="_blank" href="http://www.ferryhalim.com/orisinal/" rel="external">大量精致的小游戏</a>，以后有机会再细细体会。<br/><br/>用OOP的方式来写游戏的好处有很多，最基本的好处是有利于代码的维护修改，有利于多人协同开发，其实用OOP的方式来写游戏，更符合我们对世界日常的看法，一个游戏就是解决多个物体之间的互动关系，更容易理解代码。<br/><br/>我重写的这个，代码还是很粗糙，没有使用其他开源类库或框架，也没有使用设计模式，最基本的数据设定文件也没有做，不过也算是我对游戏开发所迈出的第一步，就象我给这游戏所取的名字一样，IntoTheSky, 开始起飞，希望自己将来能写出一些更好玩的东西。<br/><br/>游戏在这：<a target="_blank" href="http://www.kxbd.com/mylab_as/091028IntoTheSky/" rel="external">IntoTheSky</a>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=291</link>
			<title><![CDATA[[Actionscript][Away3D]Flash 3D图片轮换]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Tue,17 Nov 2009 12:11:57 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=291</guid>
		<description><![CDATA[使用Away3D制作的图片轮换，由于对Away3D了解不多，制作过程中花了一些时间。<br/><br/>Away3D相对于PV3D来说，资料与例子要少得多，再加上不知道为何，Away3D的官网都被墙，导致我制作之前为了下载一个最新的版本都很是费了一些功夫。而且通过Google查找资料也经常是打不开网页，让我经常的遭受打击。<br/><br/>制作过程中碰到的一些问题记录如下：<br/>1、使用MovieMaterial做贴图将会占用不少CPU，为了效率考虑，尽可能的使用BitmapMaterial。<br/><br/>2、使用多个View3D共用一个Scene3D时，将Scene3D的autoUp&#100;ate设为false，然后在View3D.render()之前，使用Scene3D.up&#100;ate();<br/><br/>这次制作倒影就是两个view共用了一个scene，但是带来的麻烦是倒影也具有了的点击行为。<br/><br/>3、MouseEvent3D的冒泡是设为false的，因此不能抓取事件来绑定行为。<br/><br/>4、通过Matrix来进行BitmapData变换时，并没有改变原始的像素点，要进行背面贴图，简单的方法是用PS来反转图片。<br/><br/>效果展示：<a target="_blank" href="http://www.kxbd.com/mylab_as/091106FlashRotator3D/" rel="external">Flash 3D图片轮换</a>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=290</link>
			<title><![CDATA[[Actionscript]Flash图片轮换]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Mon,16 Nov 2009 15:57:11 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=290</guid>
		<description><![CDATA[上周做的一个FLASH图片轮换，很常见的东西，没有什么可说的。<br/><br/>制作过程中，被IE会屏蔽弹出窗口困扰了一下，最后是使用调用JS的window.open()来解决。<br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.kxbd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>if (Capabilities.playerType == &#34;ActiveX&#34; &amp;&amp; ExternalInterface.available) {<br/>&#160;&#160;&#160;&#160;ExternalInterface.call(&#39;window.open(&#34;&#39; +evt.target.urlLink + &#39;&#34;, &#34;_blank&#34;)&#39;);<br/>}else {<br/>&#160;&#160;&#160;&#160;navigateToURL(new URLRequest(evt.target.urlLink));<br/>}<br/></div></div><br/><br/>效果展示：<a target="_blank" href="http://www.kxbd.com/mylab_as/091109FlashRotator/" rel="external">Flash图片轮换</a>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=289</link>
			<title><![CDATA[[Javascript]Closure——Google Javascript Library]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Fri,06 Nov 2009 11:37:17 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=289</guid>
		<description><![CDATA[一直走在Web Ajax应用开发前列的Google发布了他们所使用的<a target="_blank" href="http://code.google.com/closure/" rel="external">Javascript类库——Closure</a>。<br/><br/>这名字就很有JS特色，正是无比强大的Closure让JS拥有了让人欲罢不能的魔力。<br/><br/>这套类库包括三个部分，一个是代码压缩（Closure optimizer），一个是类库（Closure Library），还有一个是模板（Closure Templates），用来动态生成HTML代码。<br/><br/>Closure Library包括大量的可重用的UI组件，以及初级的JS实用函数，如DOM操作，AJAX，动画，单元测试等，我们可以从<a target="_blank" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/index.html" rel="external">API 文档</a>中得到更多的信息与示例。<br/><br/>我们可以通过研究源码得到更多的启发与帮助。<br/>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=287</link>
			<title><![CDATA[[Javascript][jQuery]kxbdTabs和kxbdAccordion]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Tue,03 Nov 2009 16:10:24 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=287</guid>
		<description><![CDATA[又写了一个选项卡和Accordion，这次是用jQuery完成的，这两个plugin内部实现其实基本一样，连应用也基本一致，之所以分成了两个，主要是因为前台代码结构并不由我控制，kxbdAccordion是适用于当前的业务需求，而我为了更多的适应将来的需求而重构了一下，写了kxbdTabs，一般情况下，使用kxbdTabs就好。<br/><br/>两个plugin区别在于kxbdAccordion要求是固定的DOM结构，而kxbdTabs通过传入选项卡数组和内容数组，可以更灵活的适应于大多数情况。在具体应用上，kxbdAccordion要实现选项卡的效果，也必须在CSS上多编写些代码，<br/><br/>功能不多，就是常用的展示，包括轮换，一些效果的设定，能通过事件callback来应对更多特殊的要求。<br/><br/><a target="_blank" href="http://www.kxbd.com/mylab/091030Tabs/index.html" rel="external">kxbdAccordion　Demo示例</a><br/><br/><a target="_blank" href="http://www.kxbd.com/mylab/091030Tabs/index1.html" rel="external">kxbdTabs Demo示例</a><br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.kxbd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>/**<br/> * @description kxbdTabs<br/> * @author Aken Li(www.kxbd.com)<br/> * @date 2009-11-2<br/> * @dependence jQuery 1.3.2<br/> * @version 3.0<br/> */<br/>;(function($){<br/><br/>&#160;&#160;&#160;&#160;$.fn.kxbdTabs = function(options){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var opts = $.extend({},$.fn.kxbdTabs.defaults, options),<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$tabs = this,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$navs = (opts.nav!=false)?$tabs.find(opts.nav):$tabs.children().eq(0).children(),<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents = (opts.content!=false)?$tabs.find(opts.content):$tabs.children().eq(1).children(),<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;current = opts.startIndex-1,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autoId,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;length = $navs.length;<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(opts.isAuto){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;startAuto();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$tabs.hover( stopAuto, startAuto );<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return this.each(function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents.each(function(i){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(this).bind(&#39;show&#39;,{index:i},opts.funcShow).bind(&#39;hide&#39;,{index:i},opts.funcHide);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(i==current){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;show(i);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$navs.each(function(i){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var timeoutId;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(this).bind(opts.tabEvent,function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(opts.tabEvent!=&#39;click&#39;){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;timeoutId = setTimeout(function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;showHide(i);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}, 1000*opts.delay);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}else{<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;showHide(i);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(opts.tabEvent!=&#39;click&#39;){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(this).bind(&#39;mouseleave&#39;,function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;clearTimeout(timeoutId);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;})<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function showHide(i){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(i==current) return;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;hide(current);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;current = i;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;show(current);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function show(i){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$navs.eq(i).addClass(opts.currentCss);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents.eq(i).addClass(opts.currentCss).trigger(&#39;show&#39;).hide();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents.eq(i)[opts.effects[0]]();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function hide(i){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$navs.eq(i).removeClass(opts.currentCss);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents.eq(i).removeClass(opts.currentCss).trigger(&#39;hide&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$contents.eq(i)[opts.effects[1]]();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function startAuto(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;autoId = setInterval(function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;showHide(current+1==length?0:current+1);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},1000*opts.timeAuto);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;function stopAuto(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;clearInterval(autoId);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/>&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;$.fn.kxbdTabs.defaults = {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//funcShow:function(e){console.log(&#39;show&#39;+e.data.index)},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//funcHide:function(e){console.log(&#39;hide&#39;+e.data.index)},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;funcShow:function(){},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;funcHide:function(){},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;isAuto:false,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;timeAuto:3,&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//seconds<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;delay:0.1,&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//seconds<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;nav:false,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;content:false,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;currentCss:&#39;current&#39;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;effects:[&#39;slideDown&#39;,&#39;slideUp&#39;], //[&#39;show&#39;,&#39;hide&#39;] o&#114; [&#39;fadeIn&#39;,&#39;fadeOut&#39;] o&#114; [&#39;slideDown&#39;,&#39;slideUp&#39;]<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;startIndex:1,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;tabEvent:&#39;click&#39;<br/>&#160;&#160;&#160;&#160;};<br/>&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;$.fn.kxbdTabs.setDefaults = function(settings) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.extend( $.fn.kxbdTabs.defaults, settings );<br/>&#160;&#160;&#160;&#160;};<br/>&#160;&#160;&#160;&#160;<br/>})(jQuery);<br/></div></div>]]></description>
		</item>
		
			<item>
			<link>http://www.kxbd.com/article.asp?id=286</link>
			<title><![CDATA[[Javascript][jQuery]kxbdLayout——可拖动的100%布局]]></title>
			<author>forfun77@gmail.com(勤卓)</author>
			<category><![CDATA[代码编程]]></category>
			<pubDate>Fri,23 Oct 2009 17:06:27 +0800</pubDate>
			<guid>http://www.kxbd.com/default.asp?id=286</guid>
		<description><![CDATA[在昨天完成的hLayout的基础上，加上了纵向拖拉布局的功能，其实纵向与横向完成的思路完全一致，只要将与方向有关的代码换下既可。<br/><br/>新的widget能设定上下左右四个方向，也能互相嵌套，有点要注意的是当父级容器有同方向（横向或者纵向）的Layout时，要加上父级Layout的ID。<br/><br/>在FF3.5和Chrome2下没看出来什么问题，在IE下还是有些小问题，主要在滚动条上，实际运用中应该能够避免。<br/><br/><a target="_blank" href="http://www.kxbd.com/mylab/091023Layout/index2.html" rel="external">示例Demo1</a> <a target="_blank" href="http://www.kxbd.com/mylab/091023Layout/index3.html" rel="external">示例Demo2</a><br/><br/>$Up&#100;ated:2009-10-26<br/>新添两个参数设定：１、是否能拖动，２、是否能点击收起或打开<br/><br/><a target="_blank" href="http://www.kxbd.com/mylab/091023Layout/index4.html" rel="external">示例Demo3</a><br/><br/><br/><div class="UBBPanel codePanel"><div class="UBBTitle"><img src="http://www.kxbd.com/images/code.gif" style="margin:0px 2px -3px 0px" alt="程序代码"/> 程序代码</div><div class="UBBContent"><br/>;(function($){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;/*<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;* Author: Aken Li<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;* Dependencies: jQuery1.32, jQueryUi1.72:core.js, draggable.js<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;* Date:2009-10-23<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;*/<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.ui.draggable.prototype._setContainment = function() {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var o = this.options;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(o.containment == &#39;parent&#39;) o.containment = this.helper[0].parentNode;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(o.containment == &#39;document&#39; || o.containment == &#39;window&#39;) this.containment = [<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;0 - this.offset.relative.left - this.offset.parent.left,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;0 - this.offset.relative.top - this.offset.parent.top,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(o.containment == &#39;document&#39; ? document : window).width() - this.helperProportions.width - this.margins.left,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;($(o.containment == &#39;document&#39; ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;];<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(!(/^(document|window|parent)$/).test(o.containment) &amp;&amp; o.containment.constructor != Array) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var ce = $(o.containment)[0]; if(!ce) return;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var co = $(o.containment).offset();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var over = ($(ce).css(&#34;overflow&#34;) != &#39;hidden&#39;);<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.containment = [<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.left + (parseInt($(ce).css(&#34;borderLeftWidth&#34;),10) || 0) + (parseInt($(ce).css(&#34;paddingLeft&#34;),10) || 0) - this.margins.left,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.top + (parseInt($(ce).css(&#34;borderTopWidth&#34;),10) || 0) + (parseInt($(ce).css(&#34;paddingTop&#34;),10) || 0) - this.margins.top,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css(&#34;borderLeftWidth&#34;),10) || 0) - (parseInt($(ce).css(&#34;paddingRight&#34;),10) || 0) - this.helperProportions.width - this.margins.left,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css(&#34;borderTopWidth&#34;),10) || 0) - (parseInt($(ce).css(&#34;paddingBottom&#34;),10) || 0) - this.helperProportions.height - this.margins.top<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;];<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//Add By Aken, let the containment can be relative to parent.<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(o.relativeContain.constructor == Array){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.containment = [<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.left+o.relativeContain[0],<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.top+o.relativeContain[1],<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.left+o.relativeContain[2],<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;co.top+o.relativeContain[3]<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;];<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;} else if(o.containment.constructor == Array) {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.containment = o.containment;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.ui.kxbdLayoutManager = {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;layout:[],<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;setLayout:function(pId){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.each(this.layout, function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this[0]==pId){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(&#39;#&#39;+this[1]).kxbdLayout(&#39;setSize&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if($(&#39;#&#39;+this[1]).kxbdLayout(&#39;option&#39;,&#39;fixed&#39;)==&#39;right&#39;||$(&#39;#&#39;+this[1]).kxbdLayout(&#39;option&#39;,&#39;fixed&#39;)==&#39;bottom&#39;) $(&#39;#&#39;+this[1]).kxbdLayout(&#39;setContainment&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.ui.kxbdLayoutManager.setLayout(this[1]);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;};<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.widget(&#34;ui.kxbdLayout&#34;, $.extend({},$.ui.mouse, {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_init:function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.ui.kxbdLayoutManager.layout.push([this.options.parent,this.element.attr(&#39;id&#39;)]);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.type = (this.options.fixed == &#39;left&#39; || this.options.fixed == &#39;right&#39;)?&#39;width&#39;:&#39;height&#39;;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.style = (this.options.fixed == &#39;left&#39; || this.options.fixed == &#39;right&#39;)?&#39;h&#39;:&#39;v&#39;;<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.element.addClass(&#39;ui-&#39;+this.style+&#39;Layout-wrapper&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child1 = this.element.children().eq(0).addClass(&#39;ui-&#39;+this.style+&#39;Layout-holder&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child2 = this.element.children().eq(1).addClass(&#39;ui-&#39;+this.style+&#39;Layout-holder&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter = $(&#39;&lt;div&gt;&lt;/div&#39;).appendTo(this.element).addClass(&#39;ui-&#39;+this.style+&#39;Layout-splitter&#39;);<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.splitterSize = this.$splitter[this.type]();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.currentSize = this.options.defaultSize;<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._setStyle(this.currentSize);<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _self = this;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$(window).bind(&#39;resize&#39;,function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self._setFluitSize(_self.currentSize);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._makeDraggable();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._mouseInit();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;setSize:function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._setStyle(this.currentSize);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;setContainment:function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter.draggable(&#39;option&#39;,&#39;relativeContain&#39;,this._countContainment());<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;destroy: function() {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(!this.element.data(&#39;kxbdLayout&#39;)) return;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.element<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;.removeData(&#39;kxbdLayout&#39;)<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;.unbind(&#39;.kxbdLayout&#39;)<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;.removeClass(&#39;ui-&#39;+this.style+&#39;Layout-wrapper&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child1.removeClass(&#39;ui-&#39;+this.style+&#39;Layout-holder&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child2.removeClass(&#39;ui-&#39;+this.style+&#39;Layout-holder&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter.remove();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._mouseDestroy();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_getFluidSize:function(pNum){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _size = this.element[this.type]() - this.splitterSize - pNum;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;return _size&gt;0?_size:0;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_setStyle:function(pNum){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _w1 = (this.options.fixed == &#39;right&#39;||this.options.fixed == &#39;bottom&#39;) ? this._getFluidSize(pNum):pNum;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _w2 = (this.options.fixed == &#39;right&#39;||this.options.fixed == &#39;bottom&#39;) ? pNum:this._getFluidSize(pNum);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this.type==&#39;width&#39;){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child1.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;left&#39;:0,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;width&#39;:_w1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;})<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;left&#39;:_w1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;})<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child2.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;left&#39;:_w1+this.splitterSize,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;width&#39;:_w2<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}else{<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child1.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;top&#39;:0,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;height&#39;:_w1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;})<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;top&#39;:_w1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;})<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$child2.css({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;top&#39;:_w1+this.splitterSize,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#39;height&#39;:_w2<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_setFluitSize:function(pNum){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._setStyle(pNum);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.setContainment();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._trigger(&#39;resize&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_resetStyle:function(pNum){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._setStyle(pNum);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this._trigger(&#39;reset&#39;);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_countContainment:function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this.options.fixed==&#39;left&#39;) return [this.options.minSize,0,this.options.maxSize,0];<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this.options.fixed==&#39;top&#39;) return [0,this.options.minSize,0,this.options.maxSize];<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _size = this.element[this.type]();<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _w1 = _size-this.options.maxSize-this.splitterSize;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _w2 = _size-this.options.minSize-this.splitterSize;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_w1 = _w1&gt;0?_w1:0;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_w2 = _w2&gt;0?_w2:0;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this.options.fixed==&#39;right&#39;) return [_w1,0,_w2,0];<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;if(this.options.fixed==&#39;bottom&#39;) return [0,_w1,0,_w2];<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_makeDraggable:function(){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _self = this;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;this.$splitter.draggable({<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;axis: this.type==&#39;width&#39;?&#39;x&#39;:&#39;y&#39;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;helper: &#39;clone&#39;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;opacity:0.5,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;containment:&#39;parent&#39;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;relativeContain:this._countContainment(),<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;start:function(evt,ui){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self._trigger(&#34;start&#34;, evt);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;drag:function(evt,ui){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self._trigger(&#34;drag&#34;, evt);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;stop:function(evt,ui){<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self._trigger(&#34;stop&#34;, evt);<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;var _pos = _self.type==&#39;width&#39;?ui.position.left:ui.position.top;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self.currentSize = (_self.options.fixed == &#39;right&#39;|| _self.options.fixed == &#39;bottom&#39;) ? _self._getFluidSize(_pos):_pos;<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;_self._resetStyle(_self.currentSize);<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.ui.kxbdLayoutManager.setLayout(_self.element.attr(&#39;id&#39;));<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}));<br/><br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;$.extend($.ui.kxbdLayout, {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;version: &#34;0.3&#34;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;eventPrefix: &#34;kxbdLayout&#34;,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;defaults: {<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//start:function(){console.log(&#39;start&#39;)},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//drag:function(){console.log(&#39;drag&#39;)},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;//stop:function(){console.log(&#39;stop&#39;)},<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;fixed:&#39;left&#39;, //&#39;left&#39; o&#114; &#39;right&#39; o&#114; &#39;top&#39; o&#114; &#39;bottom&#39; to be fixed with a height<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;defaultSize:120,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;minSize:90,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;maxSize:150,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;parent:&#39;window&#39;,//只要设定同类Layout的父级，如同为横向或同为纵向时的父级<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;cancel:null,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;delay:0,<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;distance:1<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;}<br/>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;});<br/>&#160;&#160;&#160;&#160;})(jQuery);<br/></div></div><br/><br/>]]></description>
		</item>
		
</channel>
</rss>
