笑的自然技术博客

SAP部署 连接sap系统需要通过sap javaconnect来连接，对于sapjco.jar系列文件有32位与64位之分。即对jdk有严格要求。现说明客户端部署及服务端部署两种情况： 一、 部署客户端(基本没啥用,我现在已经部署到服务端了) a) 确定本机使用JDK版本，一般均为32位。 b) 将相对应位数的librfc32.dll、sapjcorfc.dll、msvcp71.dll、msvcr71.dll四个文件拷贝至system32，其中前两个文件是必须拷贝。 c) 将相对应位数sapjco.jar拷贝至对应模块lib下，然后将其部署好。 d) 这步很重要，若只是执行java最简单的main方法倒没影响，若是plugin工程，必须配置classpath，具体是找到fragment.xml中的runtime将sapjco.jar加载进来。 二、 部署服务端(正常都应该部署在服务端) a) 确定服务器上的应用服务器是32位还是64位(一般服务器、应用服务器、JDK是绑定位数的) b) 将相对应位数的librfc32.dll、sapjcorfc.dll、msvcp71.dll、msvcr71.dll四个文件拷贝至system32及SysWOW64文件夹下 c) 将相对应位数的sapjco.jar拷贝至服务端的lib下，然后将其部署好

目录...................................................................................................................................- 2 - 1．简介...............................................................................................................................................- 4 - 1.1. 背景.....................................................................................................................................- 4 - 1.2. 目的.....................................................................................................................................- 4 - 1.3. 范围.....................................................................................................................................- 4 - 1.4. 对象.....................................................................................................................................- 5 - 1.5. 如何阅读............................................................................................................................. - 5 - 1.6. 参考.....................................................................................................................................- 5 - 1.7. 修订历史............................................................................................................................. - 5 - 2．工作流系统简介...........................................................................................................................- 6 - 2.1. 什么是工作流（workflow）.............................................................................................. - 6 - 2.1.1. 建立时期功能..........................................................................................................- 7 - 2.1.2. 运行时期过程控制功能...........................................................................................- 8 - 2.1.3. 运行时期活动交互..................................................................................................- 8 - 2.1.4. 分配与系统接口......................................................................................................- 8 - 2.2. 工作流的发展.....................................................................................................................- 9 - 2.3. 产品实现模型.....................................................................................................................- 9 - 2.4. 可选择的实现方式（Alternative Implementation Scenarios）.......................................- 14 - 2.5. 对标准化的需要（The Need for Standardization）........................................................- 17 - 3．工作流参考模型（Workflow Reference Model）.....................................................................- 18 - 3.1. 简介...................................................................................................................................- 18 - 3.2. 工作流模型（The Workflow Model）............................................................................- 18 - 3.3. 工作流执行服务器（Workflow Enactment Services）................................................... - 19 - 3.3.1. 什么是工作流执行服务器？................................................................................. - 19 - 3.3.2. 工作流机（The Workflow Engine）.....................................................................- 20 - 3.3.3. 同种 和 异种的工作流执行服务器（Homogeneous & Heterogeneous Workflow Enactment Services）........................................................................................................ - 21 - 3.3.4. 工作流应用编程接口与数据交换（Workflow Application programming Interface & Interchange）.................................................................................................................... - 23 -

jQuery-ui-1.8.16 全功能全主题

一个非常不错的图片播放器，使用起来非常简单，做前台的你懂的

Ubuntu自带的FTP服务器是vsftpd. 安装使用 1、安装vsftpd sudo apt-get install vsftpd 安装了之后会在/home/下建立一个ftp目录。这时候你可以试着访问下ftp://IP地 址。应该可以看到一个空白内容的ftp空间。 默认设置下匿名用户可以下载，但不能写入或是上传 2、设置 vsftpd.conf文件 现在我们要让匿名用户无法访问，并且得输入linux上的用户密码后才能访问到他们自己目录里的内容。

Jquery ready function Tester Source！

linux-command.png Linux 命令简表

JVM参数设置详细说明、JVM 参数设置详细说明 1: heap size a: -Xmx 指定jvm的最大heap大小，如：-Xmx=2g b: -Xms 指定jvm的最小heap大小，如：-Xms=2g，高并发应用，建议和-Xmx一样，防止因为内存收缩/突然增大带来的性能影响。 c: -Xmn 指定jvm中New Generation的大小，如：-Xmn256m。这个参数很影响性能，如果你的程序需要比较多的临时内存，建议设置到512M，如果用的少，尽量降低这个数值，一般来说128/256足以使用了。 d: -XX:PermSize= 指定jvm中Perm Generation的最小值，如：-XX:PermSize=32m。这个参数需要看你的实际情况，可以通过jmap命令看看到底需要多少。 e: -XX:MaxPermSize= 指定Perm Generation的最大值，如：-XX:MaxPermSize=64m f: -Xss 指定线程桟大小，如：-Xss128k，一般来说，webx框架下的应用需要256K。如果你的程序有大规模的递归行为，请考虑设置到512K/1M。这个需要全面的测试才能知道。不过，256K已经很大了。这个参数对性能的影响比较大的。 g: -XX:NewRatio= 指定jvm中Old Generation heap size与New Generation的比例，在使用CMS GC的情况下此参数失效，如：-XX:NewRatio=2 h: -XX:SurvivorRatio= 指定New Generation中Eden Space与一个Survivor Space的heap size比例，-XX:SurvivorRatio=8，那么在总共New Generation为10m的情况下，Eden Space为8m i: -XX:MinHeapFreeRatio= 指定jvm heap在使用率小于n的情况下，heap进行收缩，Xmx==Xms的情况下无效，如：-XX:MinHeapFreeRatio=30 j: -XX:MaxHeapFreeRatio= 指定jvm heap在使用率大于n的情况下，heap 进行扩张，Xmx==Xms的情况下无效，如：-XX:MaxHeapFreeRatio=70 k: -XX:LargePageSizeInBytes= 指定Java heap的分页页面大小， 如：-XX:LargePageSizeInBytes=128m 2: garbage collector a: -XX:+UseParallelGC 指定在New Generation使用parallel collector，并行收集，暂停，app threads，同时启动多个垃圾回收thread，不能和CMS gc一起使用。系统吨吐量优先，但是会有较长长时间的app pause，后台系统任务可以使用此 gc b: -XX:ParallelGCThreads= 指定parallel collection时启动的thread个数，默认是物理processor的个数 c: -XX:+UseParallelOldGC 指定在Old Generation使用parallel collector d: -XX:+UseParNewGC 指定在New Generation使用parallel collector，是UseParallelGC的gc的升级版本，有更好的性能或者优点，可以和CMS gc一起使用 e: -XX:+CMSParallelRemarkEnabled 在使用UseParNewGC的情况下，尽量减少mark的时间 f: -XX:+UseConcMarkSweepGC 指定在Old Generation使用concurrent cmark sweep gc、gc thread和app thread并行（在init-mark和remark时pause app thread）。app pause时间较短，适合交互性强的系统，如web server g: -XX:+UseCMSCompactAtFullCollection 在使用concurrent gc的情况下，防止memory fragmention，对live object进行整理，使memory 碎片减少 h: -XX:CMSInitiatingOccupancyFraction= 指示在old generation 在使用了n%的比例后，启动concurrent collector，默认值是68，如：-XX:CMSInitiatingOccupancyFraction=70 有个bug，在低版本（1.5.09 and early）的jvm上出现， http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=6486089 i: -XX:+UseCMSInitiatingOccupancyOnly 指示只有在old generation在使用了初始化的比例后concurrent collector启动收集 3:others a: -XX:MaxTenuringThreshold= 指定一个object在经历了n次young gc后转移到old generation区，在linux64的java6下默认值是15，此参数对于throughput collector无效，如：-XX:MaxTenuringThreshold=31 b: -XX:+DisableExplicitGC 禁止java程序中的full gc，如System.gc()的调用。最好加上么，防止程序在代码里误用了。对性能造成冲击。 c: -XX:+UseFastAccessorMethods get、set方法转成本地代码 d: -XX:+PrintGCDetails 打应垃圾收集的情况如： [GC 15610.466: [ParNew: 229689K->20221K(235968K), 0.0194460 secs] 1159829K->953935K(2070976K), 0.0196420 secs] e: -XX:+PrintGCTimeStamps 打应垃圾收集的时间情况，如： [Times: user=0.09 sys=0.00, real=0.02 secs] f: -XX:+PrintGCApplicationStoppedTime 打应垃圾收集时，系统的停顿时间，如： Total time for which application threads were stopped: 0.0225920 seconds 4: a web server product sample and process JAVA_OPTS=" -server -Xmx2g -Xms2g -Xmn256m -XX:PermSize=128m -Xss256k -XX:+DisableExplicitGC -XX:+UseConcMarkSweepGC -XX:+UseParNewGC -XX:+CMSParallelRemarkEnabled -XX:+UseCMSCompactAtFullCollection -XX:LargePageSizeInBytes=128m -XX:+UseFastAccessorMethods -XX:+UseCMSInitiatingOccupancyOnly -XX:CMSInitiatingOccupancyFraction=70 " 最初的时候我们用UseParallelGC和UseParallelOldGC，heap开了3G，NewRatio设成1。这样的配置下young gc发生频率约12、3秒一次，平均每次花费80ms左右，full gc发生的频率极低，每次消耗1s左右。从所有gc消耗系统时间看，系统使用率还是满高的，但是不论是young gc还是old gc，application thread pause的时间比较长，不合适 web 应用。我们也调小New Generation的，但是这样会使full gc时间加长。 后来我们就用CMS gc（-XX:+UseConcMarkSweepGC），当时的总heap还是3g，新生代1.5g后，观察不是很理想，改为jvm heap为2g新生代设置-Xmn1g，在这样的情况下young gc发生的频率变成7、8秒一次，平均每次时间40-50毫秒左右，CMS gc很少发生，每次时间在init-mark和remark（two steps stop all app thread）总共平均花费80-90ms左右。 在这里我们曾经New Generation调大到1400m，总共2g的jvm heap，平均每次ygc花费时间60-70ms左右，CMS gc的init-mark和remark之和平均在50ms左右，这里我们意识到错误的方向，或者说CMS的作用，所以进行了修改。 最后我们调小New Generation为256m，young gc 2、3秒发生一次，平均停顿时间在25毫秒左右，CMS gc的init-mark和remark之和平均在50ms左右，这样使系统比较平滑，经压力测试，这个配置下系统性能是比较高的。 在使用CMS gc的时候他有两种触发gc的方式：gc估算触发和heap占用触发。我们的1.5.0.09 环境下有次old 区heap占用在30%左右，她就频繁gc，个人感觉系统估算触发这种方式不靠谱，还是用 heap 使用比率触发比较稳妥。 这些数据都来自64位测试机，过程中的数据都是我在jboss log找的，当时没有记下来，可能存在一点点偏差，但不会很大，基本过程就是这样。 5: 总结 web server作为交互性要求较高的应用，我们应该使用Parallel+CMS，UseParNewGC这个在jdk6 -server上是默认的new generation gc，新生代不能太大，这样每次pause会短一些。CMS mark-sweep generation可以大一些，可以根据pause time实际情况控制。

总目录 ■前言 ■第1章 SQLite介绍 ■第2章 入门 ■第3章 关系模型 ■第4章 SQL ■第5章 设计和概念 ■第6章 核心C API ■第7章 扩充C API ■第8章 语言扩展 ■第9章 SQLite内核 ■附录A SQL参考 ■附录B C API参考 ■附录C Codd的12条准则 ■索引

利用Google Map解析中国大陆4095个省市县的默认地理位置，获取地理坐标

Google Map API中文文档,完美压缩,30分钟快速上手!

ico图标转换工具，简单，小巧，是开发必备工具之一。

关于本CHM手册 jQuery 1.3自从2008年1月14日发布后，后引来了各界的关注。我们也随即投入到翻译文档的工作中来。经过4天的努力，终于完工了。 由于赶上中国农历新年，本人未能及时制作成CHM版本，特意在开工的当天将其整理完成，由于时间赶的比较急，难免会有错误，如发现错误，请联系本人，我将会及时修正。 自从jQuery面世以来，它以其快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果等打动着所有关注它的人的心，本人也不例外，但长期以来，类似与本手册的(带查询功能)，仅仅只有kuomart(这里不太清楚具体名称，仅仅从本人拥有的手册上找到这个名称，暂时先这样称呼，如有知道请告知！)制作的，但长期没有更新，给大家学习jQuery带来不便。为方便自己也为方便所有爱好jQuery的朋友，本人将CHM重新整理，并和jQuery中文API的整理者 Shawphy 同步更新本CHM手册，以便大家能及时了解其最新资讯！由于本人精力有限，难免出现差错，请谅解并告知 Email ！ 本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。 以上内容来自本版的原作者一揪，下面说说做这版的原因。 一直以来我都是1.1和1.2版的手册同时使用，不肯放弃1.1版的原因是因为他查函数很方便，知道函数，很快就可以查到他的具体用法。而1.2版是从功能来查函数，首先确定要实现什么样的功能，然后再来看有哪些函数可以用。两个的侧重点不同，个人认为1.2版的很适合新手，从效果来查函数用法，而1.1版的更适合有一定基础的朋友，突然忘了这函数怎么用，直接按名称查就可以了，按效果？有的函数确实不好确定该属于哪个效果！无奈1.2版并没有按名称查函数的手册，所以便做了这个，两种查找方式都有，方便各位朋友使用。 jQuery 1.3出了，所以更新到最新。 基础版本：900205 2010年1月22日，更新至JQuery 1.4版本，本版是参考shawphy的1.4在线版本（http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml）制作，更新了好多以前的内容，以前没仔细核对过，发现之前网上流行的chm版本基本都基于1.2的，1.3的内容很多都没加进去，这次都补全了。用*标注了1.3版本新加的内容，@标注1.4新加的内容，方便大家查看。 如果发现什么错误，请联系我：www.ajaxa.cn，QQ:274430124

jquery 图片播放器插件 作者：笑的自然 我的博客：http://blog.youkuaiyun.com/xxd851116 我的邮箱: xingxiudong@gmail.com 下载： 项目地址：http://code.google.com/p/imgplayer/ 历史下载: http://code.google.com/p/imgplayer/downloads/list jquery.fn.imgplayer.js最新下载地址：http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.js jquery.fn.imgplayer.min.js最新下载地址：http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js 说明： 1. 项目编码为GBK 2. 目前播放模式支持 1:溶解，2:挂历模式，3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左)，善不支持随机模式 3. 在IE6，IE8，FF下测试通过 4. 支持任意数量图片，使用简单 5. 考虑到图片占用空间较多，示例中图片来自网络，离线状态下需要自定义图片 由于采用纯JavaScript实现，动画效果比较简单，目前善不支持随机播放模式，希望广大编程爱好者提出建议和不足。 参数： imgCSS : 用户自定义图片样式 transition : 播放模式选项 1:溶解，2:挂历模式，3:滑动(从左到右),4:滑动(从上到下),5:滑动(从下到上),6:滑动(从右到左),23:随机 width : 播放器div容器的宽度 height : 播放器div容器的高度 time : 图片播放间隙时间,单位：毫秒 duration : 图片播放时间,单位：毫秒 onStart : 开始播放时执行的函数 onStop : 停止播放时执行的函数 onShow : 每页图片显示时执行的函数 onHide : 每页图片隐藏时执行的函数 使用示例: 1. 容器代码 <div id="imgContainer" style="margin-left:auto;margin-right:auto;margin-top:5px;display:none;"> <a href="" target="_blank" title=""><img src="" title="" /></a> ...... </div> 2. 导入jquery包(http://code.jquery.com/jquery-1.4.2.min.js) <script type="text/javascript" src="jquery-1.4.2.min.js"></script> 3. 导入imgplayer插件(http://imgplayer.googlecode.com/svn/trunk/imgplayer/src/jquery.fn.imgplayer.min.js) <script type="text/javascript" src="jquery.fn.imgplayer.min.js"></script> 4. 绑定播放函数(参数说明详见上述) var player = $("#imgContainer").playImgs({ imgCSS : {'width' : '800px', 'height' : '600px'}, width : '800px', height: '600px', time : '5000', transition : 1, duration : 2000 }).start(); 更新日志： v1.2(2010-02-24): 1.修改了标题栏右侧冲出容器的bug 2.添加了duration参数，可自定义图片动画效果时间 v1.1(2009-09-23): 1.修改了鼠标停留播放器和序号标签上图片继续播放的问题

Javascript浮动广告图片代码，已封装！兼容性强！使用简单！

/** * jQuery lightbox plugin : simple lightbox implements * http://blog.youkuaiyun.com/xxd851116 * * @Copyright (c) 2009 XingXiuDong * * @Date: 2009-09-20 * @author: XingXiuDong * @version: 1.0 simple drag and drop implements * @version: 1.1 add move area, x, y * @version: 1.2 update mouseup don't capture exception in intenet explore * @version: 1.3 update range error when lockedR is defalut value: false @date: 2009.09.22 22:33 */

做过大型网站前台的Web开发程序员最头疼的事情就是前台首页的布局，这其中最最头疼的就是标题字符的截取的问题，虽然有fn:substring，但表现率以及对中文的支持均不够完善，其实最终还是归结为客户要求太高了，不过做事情就应该严谨嘛，尤其干我们这一行。。在我们老大的指点下，了解了如何自定义EL函数，哈哈，今天实现了它。

在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图...

Jquery实现的图片预览插件完整实例 Jquery-1.3.2 + imgpreview.0.22.js

Ajax模仿google提示输入框 使用说明 v1.8 本程序由飞飞asp乐园编写 ************************************************* 特别感谢： 一杯白开水 网友 的帮助 版本所提的修改建议 ************************************************* 飞飞Asp乐园 www.ffasp.com QQ:276230416 QQ:72840059 ********************************************* 程序介绍： 本程序官网演示地址：http://www.ffasp.com/content.asp?newsid=1376 转载请注明出处 此小程序是模仿Google(sgguest)输入提示框所编写 亦可用于用户注册邮箱时的提示 此程序使用方便简单、易用灵活 且不限Asp、php、net 更新说明： 1.支持xhtml 2.兼容IE6,IE7,FF 3.支持input显示与value分离【以隐藏域方式提交数据】 4.支持下拉框按钮 5.支持显示结果数量 6.可以一个页面多次使用 7.模拟下拉框不会被select遮挡 8.调用更方便（内核已改为jq插件） 9.皮肤修改方便 ，外置的css样式文件，带有注释说明，任意修改 10.支持键盘方向键按住不放选择 11.解决了延时卡死的现象 12.解决了在有滚动条时，ie6下被表单遮挡的问题 13.支持回调函数。当该插件执行完毕时，执行另外一个指定函数 ######V1.7解决问题############ 14.可以自己设置提示框的长度 15.解决了无法获取用户填写默认值的问题 16.当输入框失去焦点时，提示框会自动隐藏 ######V1.8解决问题############ 17.解决了鼠标无法选择的问题 ****************************************************************** 文件使用说明： 在需要使用的页面首先要引用2个js文件 <script src="jquery1.2.6.min.js"></script> <script src="search_suggest.js"></script> 此二文件必须放于调用函数之前 *****************************以下是调用示例*************************： var option = { inputName : "test2", inputText : "测试字符串4", inputValue: "我是值", inputlength:1, url : "search.asp", arrow :1, arrowUrl :"search.asp?aa=nowitest", zIndex:7, fns:function(){alert(3)} } $("#test").suggestShow(option) +++++++解释说明+++++++++++++++++++++++++++++++++++++++++++++++++++++++++ option:为参数设置对象。option内的所有参数可以省略 inputName 表单input的name.即 提交时获取input的name。也为search.asp页面获取input的name inputText inputName 所显示的数据 inputValue inputName 所提交的数据，当inputValue省略时，inputValue则与inputText相等 url 远程执行获取数据的url arrow 模仿select，使用下拉按钮。固定值。为1则显示下拉箭头 为0则不显示 arrowUrl 当arrow为1时 ，默认情况下点击下拉按钮所执行的远程搜索页面 zIndex z-index值 inputlength inputName中输入数据的最小长度 suggestWidth 提示框的长度 fns 当执行完该插件时，执行的回调函数 ************************************************************************ search.asp页面介绍： 该页面返回数据必须是xml格式,输出数据数据必须符合以下格式 <response value="1" result ="共2个结果">显示信息</response> 属性介绍： 1.value aa的value值，可以不填。不填value值则取"显示信息" 2.result 显示远程获取的统计结果，可以不填。 3.显示信息 即aa的显示值text值 ************************************************************************

效果： <<>>2021年 5月 日 一 二 三 四 五 六 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 30 31 程序说明 【Date】 这个日历控件运用了很多Date相关操作和方法。 先说说Date对象几个有用的属性： getFullYear：返回年份值 getMonth：返回月份值 getDate：返回一个月中的日期值 getDay：返回一周中的日期值 其中对getDay可能比较陌生，下面列出值对应的星期： 值 星期 0 星期天 1 星期一 2 星期二 3 星期三 4 星期四 5 星期五 6 星期六 这几个属性都是根据本地时间获取的，还有getUTCFullYear、getUTCMonth、getUTCDate、getUTCDay这几个属性是全球标准时间对应的值。 下面说说获取日期对象，获取当前日期很简单： new Date() 获取指定日期： new Date(this.options.SelectDay) 获取指定年月日的日期： new Date(this.Year, this.Month - 1, d) 下面是几个比较有技巧的地方： 首先，做日历控件时需要知道该月第一天离星期天的天数，参照getDay对应值，发现这刚好等于该月第一天的getDay值，所以可以这样获得： new Date(this.Year, this.Month - 1, 1).getDay() 还有是获取该月的天数，这里比较精妙，通过获取该月最后一天的getDate值就可以得到该月的天数，但没有办法直接获取该月最后一天。 这里有一个方法，当获取指定年月日的日期时，设置日参数为0，就可以获取上一个月的最后一天，所以可以这样获取： new Date(this.Year, this.Month, 0).getDate() 这个方法是很久以前在别人代码中发现的。 使用说明： 首先是实例化一个Calendar，并设置参数。 参数说明： Year:要显示的年份 Month:要显示的月份 SelectDay:选择日期 onSelectDay:在选择日期触发 onToday:在当天日期触发 onFinish:日历画完后触发 一般SelectDay设置成选择了的日期，并在onSelectDay中设置一个函数用来设置这个日期的样式， 例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect： SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; }, 而onToday就用来设置今日日期的样式， 例如实例里面把今天的日期的样式设为onToday： onToday: function(o){ o.className = "onToday"; }, 在onFinish中可以放需要设置日历的程序。 可以通过this.Year和this.Month获取当前日历显示的年份和月份。 对有数据的日期的也在这里设置，例如实例中是有一个当前月份的有数据的日期列表，然后根据这个列表对相应的日期进行设置： Code var flag = [10,15,20]; for(var i = 0, len = flag.length; i < len; i++){ this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>"; } 实例中是固定了这个日期列表，实际应用中可以根据年份月份获取对应的日期列表， 个人推荐用年份月份通过ajax获取。 程序还有下面这几个方法： NowMonth：显示当前月 PreMonth：显示上一月 NextMonth：显示下一月 PreYear：显示上一年 NextYear：显示下一年 PreDraw：根据日期参数画日历 程序代码： Code var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } var Calendar = Class.create(); Calendar.prototype = { initialize: function(container, options) { this.Container = $(container);//容器(table结构) this.Days = [];//日期对象列表 this.SetOptions(options); this.Year = this.options.Year || new Date().getFullYear(); this.Month = this.options.Month || new Date().getMonth() + 1; this.SelectDay = this.options.SelectDay ? new Date(this.options.SelectDay) : null; this.onSelectDay = this.options.onSelectDay; this.onToday = this.options.onToday; this.onFinish = this.options.onFinish; this.Draw(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Year: 0,//显示年 Month: 0,//显示月 SelectDay: null,//选择日期 onSelectDay: function(){},//在选择日期触发 onToday: function(){},//在当天日期触发 onFinish: function(){}//日历画完后触发 }; Extend(this.options, options || {}); }, //当前月 NowMonth: function() { this.PreDraw(new Date()); }, //上一月 PreMonth: function() { this.PreDraw(new Date(this.Year, this.Month - 2, 1)); }, //下一月 NextMonth: function() { this.PreDraw(new Date(this.Year, this.Month, 1)); }, //上一年 PreYear: function() { this.PreDraw(new Date(this.Year - 1, this.Month - 1, 1)); }, //下一年 NextYear: function() { this.PreDraw(new Date(this.Year + 1, this.Month - 1, 1)); }, //根据日期画日历 PreDraw: function(date) { //再设置属性 this.Year = date.getFullYear(); this.Month = date.getMonth() + 1; //重新画日历 this.Draw(); }, //画日历 Draw: function() { //用来保存日期列表 var arr = []; //用当月第一天在一周中的日期值作为当月离第一天的天数 for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push(0); } //用当月最后一天在一个月中的日期值作为当月的天数 for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); } //清空原来的日期对象列表 this.Days = []; //插入日期 var frag = document.createDocumentFragment(); while(arr.length){ //每个星期插入一个tr var row = document.createElement("tr"); //每个星期有7天 for(var i = 1; i <= 7; i++){ var cell = document.createElement("td"); cell.innerHTML = " "; if(arr.length){ var d = arr.shift(); if(d){ cell.innerHTML = d; this.Days[d] = cell; var on = new Date(this.Year, this.Month - 1, d); //判断是否今日 this.IsSame(on, new Date()) && this.onToday(cell); //判断是否选择日期 this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay(cell); } } row.appendChild(cell); } frag.appendChild(row); } //先清空内容再插入(ie的table不能用innerHTML) while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); } this.Container.appendChild(frag); //附加程序 this.onFinish(); }, //判断是否同一日 IsSame: function(d1, d2) { return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate()); } }

拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。 跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本上靠自己摸索，走了不少弯路，现在总算把自己想要的效果做出来了，程序跟上一个版本比较也已经“面目全非”，还是觉得有很多需要改进的地方，就像永远没有最完美的土耳其地毯。 这里也有一个简化版的SimpleResize，方便学习。 效果预览 程序说明 其中用到的鼠标捕获、清除选择等，在拖放效果中有说明的这里就略过。下面以SimpleResize为例说一下基本原理。 【程序原理】 程序需要用Set来添加触发对象（就是用来拖拉的对象，详细看使用说明），主要是设置mousedown事件来触发Start程序开始缩放。 Start程序主要用来设置缩放程序_fun和缩放需要的参数，最后设置mousemove事件触发Resize程序进行缩放，mouseup事件中执行取消缩放Stop程序。 Resize程序的任务是执行缩放程序_fun和设置整理后的样式，这里为了简化程序样式是全部一起设置的，这样程序的注意流程就完成了。 ps：设置样式的值必须是大于0的数，否则ie会报错。 下面说说缩放的原理，先以右边拖拉为例，右边拖拉一般是以左边为固定点，右边进行缩放。 首先记录左边定位参数_sideLeft： this._sideLeft = e.clientX - this._styleWidth; 在拖拉时，就可以根据这个参照值计算拖拉后要设置的样式参数_styleWidth： this._styleWidth = Math.max(e.clientX - this._sideLeft, 0); 上面的程序能保证样式是大于等于0的数。 至于左边就麻烦一点，因为左边拖拉是以右边为固定点，这就必须在设置宽度的同时设置left才能，保证右边固定。 首先记录右边定位参数_sideRight： this._sideRight = e.clientX + this._styleWidth; 还有left的定位参数_fixLeft： this._fixLeft = this._styleWidth + this._styleLeft; 在拖拉时，计算_styleWidth： this._styleWidth = Math.max(this._sideRight - e.clientX, 0); 在根据_styleWidth设置_styleLeft： this._styleLeft = this._fixLeft - this._styleWidth; 上下同理，至于斜角的四个方向只是同时执行两个方向，例如右下就是同时执行右边和下边： this.Right(e); this.Down(e); 【程序结构】 在更详细的程序说明之前，先了解一下程序结构。 当点击触发点，就会根据设置给缩放程序_fun设置为八个方向的缩放程序的其中一个。 八个缩放程序分别是：Up（上）、Down（下）、Right（右）、Left（左）、RightDown（右下）、RightUp（右上）、LeftDown（左下）和LeftUp（左上）。 在这些缩放程序，首先会进行宽和高的设置，由于宽和高的设置还需要经过范围限制和比例缩放的修正，而这些会在修正程序中处理。 修正程序包括几个部分： RepairX：水平方向修正（左右方向）； RepairY：垂直方向修正（上下方向）； RepairAngle：对角方向修正（右下、右上、左下、左上）； RepairTop：top修正（用于以右边为固定点定位）； RepairLeft：left修正（用于以下边为固定点定位）； RepairHeight：高度修正； RepairWidth：宽度修正。 如果没有设置最小范围限制，当缩放超过定位边时就会自动转向，例如右边缩放，左边定位，当拖动到左边定位的左边时，就会切换成左边缩放，右边定位，而这个切换是在转向程序中进行的。 转向程序包括几个部分： TurnRight：右转程序； TurnLeft：左转程序； TurnUp：上转程序； TurnDown：下转程序。 基本结构了解后，下面就开始介绍程序细节。 【最小范围限制】 最小范围限制就是限制缩放的宽和高，程序中把Min设为true，就可以通过minWidth和minHeight属性进行限制。 单是限制很简单，只要超过限制就把值设成限制值就行了，这个主要是在修正程序RepairHeight和RepairWidth中修正： 例如RepairWidth中： iWidth = Math.max(this.Min ? this.minWidth : iWidth, iWidth, 0); 注意这里带了个0，保证最小值大于等于0。 【最大范围限制】 最大范围限制，复杂一点，是固定一个（矩形）范围，然后把缩放限制在范围内。 这个范围限制跟拖放效果的类似，有四个范围属性：上(mxTop)、下(mxBottom)、左(mxLeft)、右(mxRight)。 程序中把Max设为true就可以设置。 然后根据这四个范围属性设置四个范围参数，_mxRightWidth、_mxDownHeight、_mxUpHeight和_mxLeftWidth。 这四个围参数代表的是相对于定位边的最大宽度或高度，例如_mxRightWidth就是当右边缩放时（左边固定），宽度可以设置的最大值： this._mxRightWidth = Math.max(mxRight - this._styleLeft - this._borderX, this.Min ? this.minWidth : 0); 这里要小心的是不要把边框忽略了。 然后在Right缩放程序中，把这个参数传递给RepairX，而RepairX把参数传递给RepairWidth并在里面修正宽度： iWidth = Math.min(this.Max ? mxWidth : iWidth, iWidth); 还有容器范围限制，这个跟拖放效果的差不多，这里就不重复了。此外在Start程序中还会对异常的范围参数进行修正，不过这里考虑的不多，估计并不很完善，最好还是不要设一些奇怪的参数。 【比例缩放】 比例缩放就是缩放的时候同时设置宽和高，使用宽和高按照一定的比例显示。 程序中把Scale设为true就可以启用，并且Ratio可以设置比例大小（宽/高），如果不设置的话就会自动取当前的宽/高比例。 对于对角方向，在比例缩放的情况下宽和高就不能同时设置，而必须有一个优先另一个参照比例设置了。 这个要注意，否则很容易进入死胡同。RepairAngle修正程序中就是宽度优先的，高度再按比例修正（参考代码）。 而左右上下四个方向，是以缩放对象对称轴为中心缩放的。 以左右方向为例，要实现这个效果，首先在Start程序中设置中心定位坐标_scaleTop： this._scaleTop = this._styleTop + this._styleHeight / 2; 当修正好高之后，再用这个坐标设置_styleTop值： this._styleTop = this._scaleTop - iHeight / 2; 其实就是设置高之后再修正top，使缩放之后的缩放对象中心的水平坐标保持不变，就做出以缩放对象的水平对称轴为中心的缩放了。 还有两个比例设置程序RepairScaleHeight和RepairScaleWidth，在这两个程序分别按比例设置高和宽。 这里必须留意一个问题，程序在计算样式参数的时候，是不计算边框的，但比例计算时应该把边框算进去。 例如RepairScaleHeight程序中： return Math.max(Math.round((iWidth + this._borderX) / this.Ratio - this._borderY), 0); 注意，因为这样计算的结果可能会小于0，所以用Math.max保证结果大于0（上面已经说了样式值必须大于0）。 【范围限制下的比例缩放】 一般的比例缩放很简单，在宽或高取值之后，按比例设置另一个值就行了。 但如果有了范围限制有可能按比例缩放后，就超过范围限制了。 如果只考虑最大范围限制的话，可以再修正，每次修正的范围会越来越小，没有问题。 但加上最小范围限制，就可能这边已经到了最小范围了，但另一边还在最大范围限制之外了。 这个时候就必须小心细心处理了，当两个范围限制发生冲突时，要放弃其中一个，程序中是优先考虑最大范围限制，放弃最小范围限制，这个看起来没什么但如果思想转不过来，就很容易钻入死胡同去了（经验教训T_T）。 例如用宽度和RepairScaleHeight程序已经获得了高的值iHeight，可以这样设置宽和高： Code if(this.Max && iHeight > this._mxScaleHeight){ iHeight = this._mxScaleHeight; iWidth = this.RepairScaleWidth(iHeight); }else if(this.Min && iHeight < this.minHeight){ var tWidth = this.RepairScaleWidth(this.minHeight); if(tWidth < mxWidth){ iHeight = this.minHeight; iWidth = tWidth; } } 说明一下这段代码： 首先判断iHeight是否超过最大值，是的话就根据最大值设置宽和高，由于优先考虑最大范围所以宽是否超过最小范围就不用再考虑了； 如果没有超过最大值，再判断是否小于最小值，是的话用高度最小值和RepairScaleWidth程序取要设置的宽赋给一个临时变量tWidth，然后判断tWidth是否超过最大范围，不是的话就可以进行赋值，否则就放弃修改。 【自动转向】 如果没有设置最小范围限制，当超过改方向能设置宽高的范围就会自动转向。 转向程序中需要一个参数表示转向后要执行的缩放程序，并重新设置几个属性。 以左转程序TurnLeft为例： _fun：设置为转向后要执行的缩放程序； _sideRigh：设置为当前的_sideLeft，即以把右边定位左边设置成原来的左边定位坐标（形象点说就是原来是左边不动，改成右边不动）； _fixLeft：左转后的定位需要_fixLeft，设置为_styleLeft，本来是left加width的，由于左转时width是0，所以只要left就够了。 如果设置了最大范围限制，还需要设置一下范围参数，为了方便，程序使用了一个_mxSet方法重新设置范围参数。 程序如下： Code if(!(this.Min || this._styleWidth)){ this._fun = fun; this._sideRight = this._sideLeft; this._fixLeft = this._styleLeft; this.Max && this._mxSet(); return true; } 如果发生了转向就返回true，这个主要是用在对角方向的转向。 对于对角方向，可能会转向两个方向，但同一时间最多只能设置一个转向（同时转两个可能会造成混乱）， 而且在按比例缩放时，程序规定只进行水平方向的转向（比例缩放中已说明）。 例如对于RightDown转向，可以这样满足这两个需求： this.TurnLeft(this.LeftDown) || this.Scale || this.TurnUp(this.RightUp); 【样式修正】 由于offset获取的值跟style设置的值并不是一样的，例如offsetWidth包括padding、border和width。 所以在获取和设置时必须做一些修正，例如用offsetWidth获取宽度，要设置width时必须减去padding和border等等。 程序中有_borderX和_borderY属性分别是缩放对象的左右和上下边框宽度： Code var _style = CurrentStyle(this._obj); this._borderX = (parseInt(_style.borderLeftWidth) || 0) + (parseInt(_style.borderRightWidth) || 0); this._borderY = (parseInt(_style.borderTopWidth) || 0) + (parseInt(_style.borderBottomWidth) || 0); 程序中主要是修正了border，对于padding、margin都没有考虑，如果设置了这些属性的要注意一下哦。 【样式设置】 首先缩放对象必须是绝对定位，如果有范围限制容器就必须把容器设置成相对定位： Code this._obj.style.position = "absolute"; !this._mxContainer || CurrentStyle(this._mxContainer).position == "relative" || (this._mxContainer.style.position = "relative"); 推荐根据拖拉的方向设置拖拉对象的鼠标样式，其中右下和左上是nw-resize，左下和右上是ne-resize，上和下是n-resize，左和右是e-resiz。 至于拖拉对象的定位就有技巧一点，绝对定位到四个角比较简单，适当设置top，left，right和height到为0就行了，例如右上角是right和top为0。 四个边就难一点，参考这里的居中显示效果，利用定位样式和margin就能做到居中了。 例如右边设置top为50%，margin-top为高度的负的一半就能在右边上下居中了。 程序说明就到这里了，还有一些结构上的东西以我的能力还是比较难写出来，还是看代码来领会吧。 程序有很多相似的结构，总感觉可以整理得更好，等以后自己的编写水平高点的时候再来看拉。 使用说明 首先实例化一个拖拉缩放对象： var rs = new Resize("dragDiv"); 有以下这些可选参数和属性： Max: false,//是否设置范围限制(为true时下面mx参数有用) mxContainer:"",//指定限制在容器内 mxLeft: 0,//左边限制 mxRight: 9999,//右边限制 mxTop: 0,//上边限制 mxBottom: 9999,//下边限制 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) onResize: function(){}//缩放时执行 然后使用Set程序添加拖拉对象，Set程序需要两个参数，第一格是拖拉对象，第二个是缩放参数。 其中缩放参数可以是"right-down"、"left-down"、"right-up"、"left-up"、"right"、"left"、"up"和"down"其中之一。 像这样添加就行了： rs.Set("rDown", "down"); ps：如果跟跟拖放效果配合使用时，要禁止冒泡，否则一点拖拉对象就冒泡到拖放了。

一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code 1 2 3 4 给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 ps：该效果用来做tr的拖动会很方便。 接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如： Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。 用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。 程序说明 【克隆table】 克隆一个元素用cloneNode就可以了，它有一个bool参数，表示克隆是否包含子节点。 程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突 要注意虽然ie的cloneNode参数是可选的（默认是false），但在ff是必须的，建议使用时都写上参数。 还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不了样式了。 克隆之后再设置样式： this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果，但table比较特别，测试下面的代码： Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

序一（08/07/21） 很久之前就在一个网站的截取相片的功能中看到这个效果，也叫图片裁剪、图片剪切（设置一下也可以做出放大镜等类似的效果）。 当时觉得很神奇，碍于水平有限，没做出来。 前些日子突然想做一个透镜效果，就突然想到了这个效果，于是找出当年“珍藏”的代码决定一尝所愿。 序二（08/12/06） 自上一个版本的图片切割效果出来后，虽然也经常看到“框架开发这个如何如何容易”之类的评论，但也受到很多人的肯定，小弟在此感谢大家的支持。 上一个版本由于是初次接触这类效果，而且是三个大功能一起开发，能力所限，所以仅仅是实现了效果就完成了。 后来我知道这个效果叫ImageCropper，找了些这类效果参考，完善了切割的部分。 近来我把其中的拖放效果和缩放效果单独出来研究，经过整理和完善，再套进切割效果，个人感觉效果已经不错了。 要说明的是这个只是一个效果，并不是真正的切割图片，要获取真正的切割图片请参考图片切割系统。 先看看效果： 图片地址： 程序说明 这个效果主要分三个部分：层的拖放、层的缩放、图片切割（包括预览）。 其中层的拖放和层的缩放我已经在其他两篇文章中有详细说明，这里就说说图片切割这部分吧。 【图片切割】 关于图片切割的设计，有三个方法： 1.定位四个半透明层，遮住要盖住的部分，没试过，感觉比较麻烦； 2.把图片设为背景图，通过设置背景图的位置来实现，但这样的缺点是只能按图片的正常比例实现，不够灵活； 3.把图片放到切割对象里面，通过设置图片的top和left实现，这个方法是可行，但下面有更简单的方法实现； 4.通过设置图片的clip来实现。 这里介绍方法4的实现方法，这个方法是从当年“珍藏”的代码中看到的，先说说clip： clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。” 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如： div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); } 注意position:absolute的设置是必须的（详细看手册）。 下面说说具体实现原理： 首先需要一个容器(_Container)，容器里面会插入三个层： 底图层(_layBase)：那个半透明的图片； 切割层(_layCropper)：正常显示的那个部分； 控制层(_layHandle)：就是控制显示的那个部分。 其中为了底图层和切割层是程序自动创建的图片，控制层是自己定义的层（程序中是一个div）。 底图层和切割层必须完全重合，程序中把这两个层都绝对定位到了左上角： this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0; 层叠顺序也要设置一下保证各层顺序。 下面说说各部分的作用： 容器：除了容器本身的作用，通过设置其背景色来设置透明的渐变色，由于图片本身没有背景色所以要通过容器来设置； 底图层：在容器最底部，作用是显示非选择区域的图片，透明效果就是在这层设置； 切割层：最关键的一个层，在底图层和控制层之间，在这个层通过clip设置其可视区域来实现切割图片的效果； 控制层：位于顶部，拖放(_drag)和缩放(_resize)效果就是在这个层实现，根据其拖放和缩放的结果控制切割层的切割效果。 这里要注意的是控制层的_drag拖放效果的Transparent要设为true（详细看拖放效果的透明背景bug部分）。 要使用缩放需要把Resize设为true，并设置各个拖拉对象，程序通过_resize设置缩放的比例和最少范围（详细看拖拉缩放效果）。 下面说说控制层如何控制切割效果： 控制层的拖放和缩放过程中加入了SetPos设置切割样式程序，在SetPos程序中根据控制层的样式设置切割层的可视区域范围： var p = this.GetPos(); this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)"; 其中GetPos程序，它可以把当前控制层的样式参数作为一个对象返回： with(this._layHandle){ return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight } } 如果理解了的话就会觉得其实原理挺简单的，不过要想出来还是要一定创意才行，为想出这个方法的人致敬！ 【切割预览】 预览效果需要设置Preview属性为预览容器对象，程序会自动给容器插入一个预览对象（图片）。 预览效果的关键在于如何根据控制层的数据来给预览对象定位，这个主要在SetPreview预览效果程序中处理。 首先根据控制层的高宽比置预览对象显示的宽和高（不是图片本身的宽高哦），这里可以用GetSize程序获取： var p = this.GetPos(), s = this.GetSize(p.Width, p.Height, this.viewWidth, this.viewHeight), scale = s.Height / p.Height; 其中GetSize获取尺寸程序可以根据图片实际大小按比例缩放到要设置的大小： Code var iWidth = nowWidth, iHeight = nowHeight, scale = iWidth / iHeight; //按比例设置 if(fixHeight){ iWidth = (iHeight = fixHeight) * scale; } if(fixWidth && (!fixHeight || iWidth > fixWidth)){ iHeight = (iWidth = fixWidth) / scale; } //返回尺寸对象 return { Width: iWidth, Height: iHeight } 可以看出如果后两个参数（viewWidth和this.viewHeight）都不设置就会按原来大小显示了， 然后再按预览图跟控制层的比例设置预览图的样式参数： var pHeight = this._layBase.height * scale, pWidth = this._layBase.width * scale, pTop = o.Top * scale, pLeft = o.Left * scale; 最后根据参数对预览对象进行样式设置和切割： Code with(this._view.style){ //设置样式 width = pWidth + "px"; height = pHeight + "px"; top = - pTop + "px "; left = - pLeft + "px"; //切割预览图 clip = "rect(" + pTop + "px " + (pLeft + s.Width) + "px " + (pTop + s.Height) + "px " + pLeft + "px)"; } 这里有点烦乱，但应该不难理解就不详细说明了。 【图片大小】 容器的大小一般是固定的，但图片的大小就不是固定的，这里又可以使用SetSize程序用来设置图片大小： Code var s = this.GetSize(this._tempImg.width, this._tempImg.height, this.Width, this.Height); //设置底图和切割图 this._layBase.style.width = this._layCropper.style.width = s.Width + "px"; this._layBase.style.height = this._layCropper.style.height = s.Height + "px"; 有了图片大小就可以用来设置拖放和缩放的范围限制了： Code this._drag.mxRight = s.Width; this._drag.mxBottom = s.Height; if(this.Resize){ this._resize.mxRight = s.Width; this._resize.mxBottom = s.Height; } ps：程序中的Init程序是用来把个性设置呈现出来，所以一般设置过属性之后（例如图片地址、透明度等）就执行一次Init程序就可以显示效果了。 【ie6渲染bug】 在拖放效果中说到插入一个div解决ie的透明背景bug，这里就需要修复这个bug。 跟缩放效果配合使用时，不得不说ie6的一个渲染bug，用下面的代码测试（ie6）： Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <div id="aa" style="width:300px;height:100px;border:1px solid;"><div style="background:#00f;height:100%;"></div></div> <script>setTimeout("aa.style.height=200",0)</script> </body> </html> 可以对比ie7的效果，可以看出里面的div虽然高度设置了100%，但在外面的div修改高度之后，却不知什么原因没有填充了（外面的div渲染后，没有触发里面的div再渲染）。 解决这个bug的关键是使里面的div能再渲染，这里有几个方法可以解决： 1，设置控制层的overflow为hidden，好处是只需要设置一次，但这个样式会影响其他效果，当然在不影响效果的情况下这个是最好的方法； 2，在缩放的时候，通过修改控制层的某些样式，使里面的div再渲染，这样的样式包括zoom，display（应该还有其他吧）； 3，在缩放的时候，通过修改插入div的某些样式，使其再渲染，这样的样式包括display（zoom也不行）； 程序中是通过修改_layHandle的zoom解决的： if(isIE6){ with(this._layHandle.style){ zoom = .9; zoom = 1; }; }; ps：这个bug的原因貌似跟ie的layout有关，但我查了一下还是没弄清楚，谁有详细的介绍或解析务必跟我分享一下啊。 使用说明 实例化时有三个必要参数：容器对象、控制层、图片地址： var ic = new ImgCropper("bgDiv", "dragDiv", "1.jpg"); 有以下这些可选参数和属性： 属性:默认值//说明 Opacity: 50,//透明度(0到100) Color: "",//背景色 Width: 0,//图片高度 Height: 0,//图片高度 //缩放触发对象 Resize: false,//是否设置缩放 Right: "",//右边缩放对象 Left: "",//左边缩放对象 Up: "",//上边缩放对象 Down: "",//下边缩放对象 RightDown: "",//右下缩放对象 LeftDown: "",//左下缩放对象 RightUp: "",//右上缩放对象 LeftUp: "",//左上缩放对象 Min: false,//是否最小宽高限制(为true时下面min参数有用) minWidth: 50,//最小宽度 minHeight: 50,//最小高度 Scale: false,//是否按比例缩放 Ratio: 0,//缩放比例(宽/高) //预览对象设置 Preview: "",//预览对象 viewWidth: 0,//预览宽度 viewHeight: 0//预览高度

程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative， 滑动对象会设置为绝对定位： var p = CurrentStyle(this._container).position; p == "relative" || p == "absolute" || (this._container.style.position = "relative"); this._container.style.overflow = "hidden"; this._slider.style.position = "absolute"; 如果没有设置Change切换参数属性，会自动根据滑动对象获取： this.Change = this.options.Change ? this.options.Change : this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; 执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引： index == undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); == undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0); 之后就到设置使用tween缓动时需要的参数了， 包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)： Code this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]); this._c = this._target - this._b; 还有Duration(持续时间)是自定义属性。 参数设置好后就执行Move程序开始移动了。 里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration， 未满足条件就继续移动，否则直接移动到目标值并进行下一次切换： Code if (this._c && this._t < this.Duration) { this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration))); this._timer = setTimeout(Bind(this, this.Move), this.Time); }else{ this.MoveTo(this._target); this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); } 使用说明 实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行： new SlideTrans("idContainer", "idSlider", 3).Run(); 还有以下可选属性： Vertical: true,//是否垂直方向（方向不能改） Auto: true,//是否自动 Change: 0,//改变量 Duration: 50,//滑动持续时间 Time: 10,//滑动延时 Pause: 2000,//停顿时间(Auto为true时有效) onStart: function(){},//开始转换时执行 onFinish: function(){},//完成转换时执行 Tween: Tween.Quart.easeOut//tween算子 其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。 还有提供了以下方法： Next: 切换下一个 Previous: 切换上一个 Stop: 停止自动切换 还有上面说到的Run

总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。 效果有两种，分部是：鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。 根据效果可以看出，滑动对象有三种宽度一个是默认宽度，最大宽度和最小宽度。 这些宽度都可以在初始化时设置

引子 编程世界里只存在两种基本元素，一个是数据，一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。 数据天生就是文静的，总想保持自己固有的本色；而代码却天生活泼，总想改变这个世界。 你看，数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的，如果没有代码来施加外力，她总保持自己原来的状态。而代码就象能量，他存在的唯一目的，就是要努力改变数据原来的状态。在代码改变数据的同时，也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下，数据可以转变为代码，而代码却又有可能被转变为数据，或许还存在一个类似E=MC2形式的数码转换方程呢。然而，就是在数据和代码间这种即矛盾又统一的运转中，总能体现出计算机世界的规律，这些规律正是我们编写的程序逻辑。

【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长 度，不会撑开TD，也不会影响其他TD，点击某行会按照本行所有单元格中行数最多的单元格的长度伸长行高。用户体验很好。 【优点】 1、对开发人员指定的表格没有任何影响； 2、使用简单； 3、被定义的表格样式可以随意的定制你的样式，不对你的样式构成影响； 4、移植性好，扩展性好。 【缺点】 目前用IE7测试正常，但不支持FireFox，工作比较忙，没时间更正，希望网友更正，俺在此谢过。^_^ 【使用方法】 1、将AutoTableSize.js包文件[点击这儿下载源代码]导入到你的web应用目录中； 2、引入包AutoTableSize.js，页面body底部加入： 3、编写你的脚本调用： new AutoTableSize(); 当DOM对象中只有一个Table的时候不用指定Table的ID属性； new AutoTableSize(table); table:既可以是表格的ID属性，也可以是表格对象；

jQueryAPI目前中文最新版 版本：900205 适应Jquery最新版本：Jquery1.3 + jQuery 1.3 中文速查表 版本号：090223

为了有效保护软件作者的知识产权，软件作者可以根据用户所用机器的硬件信息产生注册码，并在软件中对某些先进或常用功能进行限制。如果用户要使用其全部功能，必须将软件采集的相关硬件信息反馈给开发者，并交一定的注册费才可获得该软件的注册码，才能正常使用。本课题就是研究如何以1-W器件的序列号作为硬件信息，并且设计一个好的软件注册算法，以实现对软件作者的知识产权的有效保护，促进共享软件的发展。 本设计探讨了基于1-W器件的软件保护技术的软件保护方案的实现。其实质就是一个软件狗的设计。本设计完成了对1-W器件DS2431唯一序列号的读取和对其存储器的读写，最终实现了利用DS2431芯片制作一个软件狗的设计。本设计同时也让我了解了当前软件加密技术的基本现状。硬件加密和软件加密相比，其安全性更好，实现了优于“一机一码”制的“一户一码”制加密思想，使得软件保护具有方便、安全、可靠、价格低廉和随身携带的特点，给软件加密提供了新的方案。 本设计利用当前流行的开发语言Java进行代码设计，同时也体现了RSA加密算法在本设计中的应用。同时也让我懂得了在对事物从未知到感知再到有知的过程中，循序渐进的学习是万事万物的基石。目前在加密领域采用基于1-W器件序列号进行软件加密的几乎没有，在软件加密所取的材料上处于国内未涉及课题。目前对利用外围设备进行加密的有一些软件保护方案，如基于U盘等，但都没有成本低廉、序列号唯一等特点。本设计成功实现了基于1-W器件是软件加密技术的研究方案，论证了利用1-W器件作为软件加密技术的“软件狗”和其硬件序列号作为软件加密机器码的可行性和可靠性，是作为共享软件加密方的良好方案。 关键词：软件保护；1-Wire；DS2431；软件加密；RSA；注册码

正则表达式30分钟入门教程 版本：v2.3 (2008-4-13更新) 笑的自然整理：http://blog.youkuaiyun.com/xxd851116

随着B/S模式应用开发的发展，使用这种模式编写应用程序的程序员也越来越多。但是由于这个行业的入门门槛不高，程序员的水平及经验也参差不齐，相当大一部分程序员在编写代码的时候，没有对用户输入数据的合法性进行判断，使应用程序存在安全隐患。用户可以提交一段数据库查询代码，根据程序返回的结果，获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 SQL注入是从正常的WWW端口访问，而且表面看起来跟一般的Web页面访问没什么区别，所以目前市面的防火墙都不会对SQL注入发出警报，如果管理员没查看IIS日志的习惯，可能被入侵很长时间都不会发觉。 但是，SQL注入的手法相当灵活，在注入的时候会碰到很多意外的情况。能不能根据具体情况进行分析，构造巧妙的SQL语句，从而成功获取想要的数据，是高手与“菜鸟”的根本区别。 根据国情，国内的网站用ASP+Access或SQLServer的占70%以上，PHP+MySQ占L20%，其他的不足10%。在本文，我们从分入门、进阶至高级讲解一下ASP注入的方法及技巧，PHP注入的文章由NB联盟的另一位朋友zwell撰写，希望对安全工作者和程序员都有用处。了解ASP注入的朋友也请不要跳过入门篇，因为部分人对注入的基本判断方法还存在误区。大家准备好了吗？Let's Go...

一个不错的条纹表格，鼠标移动到某行上可以高显当前行。 文档首次转载的时候可以出现奇偶相间的条纹效果，便于阅读。 下载后你就知道啦。。。哈哈。。

1）下载sapjco.jar 请到service.sap.com/connectors，下载sapjco.jar，本案下载的是sapjco-linuxintel-2.1.8.zip 2）解压zip文件，将其中librfccm.so、libsapjcorfc.so两个文件，拷贝复制到$JAVA_HOME/jre/lib/i386/server，并将sapjco.jar复制到特定目录下，然后设置CLASSPATH变量即可，本案export CLASSPATH=.:/usr/java/jdk1.5.0_16/lib:/usr/java/jdk1.5.0_16/jre/lib:/usr/wuxq/sapjco.jar 3）在进行sap rfc连接的时候，需要libstdc+-libc6.2-2.so.3库文件，可从csdn上下载，http://download.youkuaiyun.com/source/648150，将libstdc+-libc6.2-2.so.3库文件复制到librfccm.so、libsapjcorfc.so文件所在的目录即可； 4）至此，已经完成jco在linux下的安装，下一步工作就是写一个测试用例，本案调用了一个sap的RFC函数，该函数传如一个字符串参数，返回一个整形值； ·创建JCO.Client，并连接 public boolean connect(){ boolean rtn = false; try{ client = JCO.createClient(sid, username, password,language,host,系统编号); //sid-集团号；language-ZH,EN等；系统编号-00等 client.connect(); rtn = true; }catch(Exception e){ e.printStackTrace(); } return rtn; }

Installing SAP JCo on AIX The SAP Java Connector Library can be installed on a computer that is running an AIX? operating system. Procedure Extract the sapjco-rs6000-2.x.xx.tgz file to a temporary directory. Copy the sapjco.jar file to the <VVM>/jre/lib/ext directory, where <VVM> is the root directory of your Cognos? Virtual View Manager server. Copy the librfccm.so and libsapjcorfc.so files into the <VVM>/jre/lib/ppc directory, where <VVM> is the root directory of your Cognos Virtual Manager server. Important: In some SAP JCo versions, the libsapjcorfc.so file is incorrectly named. Make a copy of the incorrectly named file libsapjcorfc.o and rename the copy of the file to libsapjcorfc.so. Parent topic: Install SAP JCo on UNIX or Linux Computers