散人笔记 » 兼容 http://www.uideas.cn 生活来源于创意,所以我懂生活 Sun, 22 Aug 2010 07:17:13 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 一款灵活性很强的日历代码 http://www.uideas.cn/post/365.html http://www.uideas.cn/post/365.html#comments Mon, 19 Apr 2010 08:56:59 +0000 kos http://www.uideas.cn/?p=365 　　工作之余，因个人对js的爱好，写了一款日历，综合了以往工作中遇到的与日历选择相关的很多功能。由于个人技能欠缺，可能会有一些地方处理得不够好，有意一起研究者可以与本人联系，把这个日历做得更好，声明一下：此日历着重点在功能上，而不在特殊效果上，为了让此代码更为简洁，代码量更小，无须加任务特效。
　　下面做点简单的介绍：

 

一、日历目录存放
　　|– [Calendar]
　　　　|– [style]
　　　　　　|– [blue]
　　　　　　　　|– [images]
　　　　　　　　|– Calendarstyle.css
　　　　　　|–[demo]
　　　　　　　　|– [images]
　　　　　　　　|– Calendarstyle.css
　　　　|– Calendar.js
　　　　|– Calendarcov.css

 

注意：1、调用js时在<head>区域引用Calendar/Calendar.js和Calendarcov.css即可。
　　　2、记住要把images同时放到相应的文件夹下面

 

二、日历皮肤更换
　　支持自定义皮肤，本日历已给出两套模版，自己制作皮肤时可以对照demo.html模版中的class进行制作
　　制作好的皮肤存放目录要注意，自定义一个皮肤文件夹（如已有的[demo]）放到[style]文件夹里面，然后把你要用到的图片放到你的皮肤文件夹里面的[images]文件夹里面，css样式文件命名为Calendarstyle.css与[images]文件夹同级。

　　css样式说明：
　　#calendarCov .calenCovbody：弹出层的总体框架样式，主要设置主题背景颜色
　　#calendarCov .calenCov：弹出层的总体框架样式，设置头部边框
　　#calendarCov .calenTitle：顶部年月样式和总体背景图片样式
　　#calendarCov a;#calendarCov td：通用样式
　　#calendarCov th：周的单元格样式
　　#calendarCov .calenHead：周所在行的样式：主要设置背景
　　#calendarCov .calenYlast：上一年的按钮样式
　　#calendarCov .calenMlast：上一月的按钮样式
　　#calendarCov .calenYnext：下一年的按钮样式
　　#calendarCov .calenMnext：下一月的按钮样式
　　#calendarCov .calenBody：日历体的样式，主要设置层次感
　　#calendarCov .calenBodyCov：日历体的样式，主要设置层次感和边框
　　#calendarCov .calenday td：日期单元格样式
　　#calendarCov .calenday td a：当月存在日期单元格样式
　　#calendarCov .calenday td a:hover:当月存在日期单元格鼠标指向样式
　　#calendarCov .calenday .weekend：日期单元格周末样式
　　#calendarCov .calenday .weekday：日期单元格非周末样式
　　#calendarCov .calenday .weeknull：空白日期单元格样式
　　#calendarCov .calenday .current默认日期样式，主要设置边框和背景
　　#calendarCov .calenday .current a默认日期样式，主要设置字体颜色
　　#calendarCov .calenButton：日历下面部分三个按钮样式，主要设置与日历体间距
　　#calendarCov .calenButton div：日历下面部分三个按钮样式，主要设置按钮背景#calendarCov .calenButton div a：日历下部分三个按钮样式，主要设置按钮字体
　　calenSetnull：清空按钮样式
　　calenSetoday：今天按钮样式
　　calenClosefl：确定按钮样式

 

三、调用格式
　　先举几个例子：

 

1、普通调用
　　<input type=”text” onFocus=”showCalendarControl(this)” readonly=”">
　　用onFocus方法调用是为了方便使用键盘获取焦点，showCalendarControl()是执行的方法，传递的this是当前对象，要把选择的日期返回给当前对象所以需要传递当前获取焦点的对象，readonly表明此控件为只读，用户不能手动输入，此日历为了方便使用，所以限制做得很少，同时为了不让用户手动输入不合法的日期格式，所以最好把控件设置成不能手动输入状态；

 

2、有样式的调用
　　<input type=”text” onFocus=”showCalendarControl(this,’class:demo’)” readonly=”">
　　demo就是你要调用的样式文件夹，注意格式’class:demo’,必须在demo前加是class:，然后用单引号引起来，并且与this用逗号隔开，并且要注意顺序：this参数放到前面，以后的每个方法传递参数时都是this放到最前面，其余的可以颠倒；

 

3、限定日期调用
　　<input type=”text” onFocus=”showCalendarControl(this,’minDate:2010-01-01′)” readonly=”">
　　minDate:2010-01-01的意思是设定当前对象选择的最小时间值是2010年01月01日，注意年月日要用‘-’号连接，若要设定最大值，则用maxDate:datevalue，这里的datevalue就是你想设定的日期值了。如果设定最大值或最小值为今天，则表达为showCalendarControl(this,’minDate:#today’)或showCalendarControl(this,’maxDate:#today’)；

 

4、限定日期同时并有天数限定
　　<input type=”text” onFocus=”showCalendarControl(this,’minDate:#today(d:20)’)” readonly=”">
　　这里的minDate:#today(d:20)的意思是最小值比今天大20天，若要设定最小值比今天小20天则表达示为minDate:#today(d:-20),d表示设定的限定为天数，同理，年:y,月:m；

 

5、限定日期与其它控件日期做对比
　　<input type=”text” id=”date1″ value=”2010-04-19″ onFocus=”showCalendarControl(this)” readonly=”">
　　<input type=”text” onFocus=”showCalendarControl(this,’minDate:date1(d:20)’)” readonly=”">
　　用法是第4个例子差不多，不同的是today前面加了个#，（即#today和date1的区别而已），同时两个日期还可以做想到限制，使得关系更为紧密；

 

6、同时限定最大值的最小值
　　<input type=”text” onFocus=”showCalendarControl(this,’minDate:#today(d:-20))^maxDate:#today(d:(20)’)”　readonly=”">
　　 ‘^’这个符号是用来连接最大值和最小值的，这里的minDate和maxDate限定可以互换位置，但不要忘了打‘^’这个符号，这句话的意思是选定的日期范围为从过去20天到未来20天内；

 

7、同时有日期限定也有样式控制
　　<input type=”text” onFocus=”showCalendarControl(this,’minDate:#today’,'class:demo’)” readonly=”">
　　这时传递的参数有三个，第一个是当前对象，第二个是日期的限定，大于等于今天，第三上是引用样式，注意this必须放到第一个参数，后面两个参数可以互换位置，即上面这个调用与<input type=”text” onFocus=”showCalendarControl(this,’class:demo’,'minDate:#today’)” readonly=”">对等，注意引用样式也要用引号引起来；

 

8、更多灵活的调用方法尽在你的不自不觉发现中，同时期待你的宝贵意见

 

 

四：声明
　　1、此日历可能会出现一些异常情况，若要实际用此日历请多加调试，只是小弟反复测试暂时还没出现异常情况
　　2、为尊重小弟劳动成果，转载请注明来源，同时方便因我更新后能得到最新文件
　　3、此日历不含任务广告和恶意代码，若调试没有bug可以大胆使用
　　4、为了让大家得到更详细的介绍，请通过博客留言和E-mail方式与本人联系，小弟会尽快给予回复。

 

相关下载：
　　完整版附带调用实例下载：Koscalendar.rar
　　演示地址：查看演示样例

]]> http://www.uideas.cn/post/365.html/feed 2 js巧用scrollTop属性使滚动条以另一种方式表现（兼容） http://www.uideas.cn/post/128.html http://www.uideas.cn/post/128.html#comments Mon, 09 Nov 2009 17:16:49 +0000 kos http://www.uideas.cn/?p=128 　　很久没写东西了，最近网上到处找一些处理滚动的js
看来看去，看到恼火，都是些长篇大论，写得太多，本想在里面找个好用点的收集到起，结果不好用的归不好用，复杂的归复杂，最后还是自己动手写了一个简单的

先研究一下想法
　　在网页的很多地方可能大家都讨厌滚动条，比如页面上有背景颜色，而改变滚动条的样式只有ie6内核的浏览器支持，所以可以不要滚动条，而一样达到滚动的效果，这里有个例子是实现上下滚动
再来谈一下思路
　　1、点击一个按钮即让里面内容上下滚动其实就是让scrollTop的值发生改变
　　2、当内容顶对齐后就不再要向上点击的按钮，向下亦同，即判断scrollTop的值和内容的实际高度与外面容器的值的关系

来个例子让大家看看才是真的(兼容的哦)：

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

 

相关下载：
　　css下载：menuscroll.css
　　js下载：menuscroll.js

]]> http://www.uideas.cn/post/128.html/feed 0 巧用title属性做提示功能，兼容的js代码 http://www.uideas.cn/post/43.html http://www.uideas.cn/post/43.html#comments Wed, 14 Oct 2009 08:34:13 +0000 kos http://uideas.cn/?p=43 巧用title属性做提示功能，在此之前一直觉得title属性很好用，但依然存在一些小问题：
　　1、当鼠标指上去到提示有间隔时间；
　　2、在ie6或低版本浏览器中，此提示会被下拉菜单和一些优先级比较高的东西遮挡住；
　　3、默认的没有任何样式修饰，在此基础上加入样式，可以让提示更为醒目。
　　小弟在此做了一些优化！

代码如下：

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

　　想起这篇日志实在是惭愧，以前有个不好的习惯就是不怎么鼓劲动脑筋，一遇到问题马上到网上找，再加上基础差，所以懒惰的行为在所难免，就这个js而言，以前有点看得不是很懂，但功能实现了，后来因为事多，就没去想这个问题，呵呵，前几天，一朋友问到我，有些问题想一起研究下，结果看了半天觉得里面乱乱的，后来没招了，第二天下班后，自己再回头来想想以前不明白的地方，然后跟着原创的思路慢慢一步步把问题解决得差不多，当时我就汗了！以后会注意了！这也许是一种习惯吧！
　　现在已将最新版的js上传上去了，里面加了很大部分注释！谢谢你们的关注！

 

相关下载：
　　js下载：boxover.js

]]> http://www.uideas.cn/post/43.html/feed 5 透明的png网页背景图片 http://www.uideas.cn/post/9.html http://www.uideas.cn/post/9.html#comments Wed, 30 Sep 2009 07:45:15 +0000 kos http://uideas.cn/?p=9 　　在制作网页时，为了让网页达到一定的美观度，不得不加入一些图片”",”"，而时不时会用到一些半透明效果使网页显得更和谐些，而png格式的图片就占有这样一大优势，jpg格式的图片虽然清晰度高，但遇到这样的情况不能得以满足，保存为此格式的图片都不能让其任何一部分透明，gif格式的图片虽然可以设置透明但也有几个缺点，直角边缘透明倒很好用，但圆角边缘的话可能就会有毛刺，并且不支持半透明……而png可以任意设置透明度。
但是在网页中，直接用png图片做透明背景有一些低版本浏览器不支持，需要写滤镜。
代码如下：

CODE
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.uideas.cn/post/9.html/feed 2