论坛首页 Web前端技术论坛

在网上收集的一些很有用的小工具

浏览 13261 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2006-12-20  

thinkbox

ThickBox 2.0——JS展示脚本  


 
Cody Lindley 使用 jQuery 开发
译: croc
阅读原文

ThickBox 是基于 jQuery 用 JavaScript 编写的网页UI对话窗口小部件. 它可以用来展示单一图片, 若干图片, 内嵌的内容, iframed的内容, 或以 AJAX 的混合 modal 提供的内容.

查看实例演示

特性:

ThickBox 是用超轻量级的 jQuery 库 编写的. 压缩过 jQuery 库只15k, 未压缩过的有39k.
ThickBox 的 JavaScript 代码和 CSS 文件只占12k. 所以压缩过的 jQuery 代码和 ThickBox 总共只有27k.
ThickBox 能重新调整大于浏览器窗口的图片.
ThickBox 的多功能性包括(图片,iframed 的内容,内嵌的内容,AJAX 的内容).
展示单一图片(single image)
展示图片集(multiple images)
展示内嵌内容(inline content)
展示被iFrame的内容(iframed content)
展示AJAX内容(AJAX content)
其他:教程本身还自带了一个很酷的JS跳转脚本
ThickBox 能隐藏 Windows IE 6 里的元素.
ThickBox 能在使用者滚动页面或改变浏览器窗口大小的同时始终保持居中. 点击图片, 覆盖层, 或关闭链接能移除 ThickBox.
ThickBox 的创作者决定动画应该因人而异, 所以 ThickBox 不再使用动画了. 这是特性吗? 哦, 有人说是呀. 


如何实现 ThickBox :

1. ThickBox 要求使用 jQuery JavaScript 库; 正因如此, 你需要外调 jquery.js 文件在你的网页的 head 元素内, 接着还要外调 thickbox.js 文件 (注意: jquery.js 必须放在调用资源的第一位). 例子如下:

<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>
一旦你外调了 .js 文件, 打开 thickbox.js 并寻找加载图片的名字 (loadingAnimation.gif). 找到后, 根据它在你服务器上的位置确定更改它的路径.

2. 在你的网页中外调 ThickBox CSS 文件. 例子如下:

<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

<style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>
或, 打开 thickbox.css 文件并复制粘贴样式到你现有的样式表中.

3. 观看例子, 学习使用不同的方法调用 ThickBox 的功能.

支持的和经测试过的浏览器:

Windows IE 6.0, Windows FF 1.5.0.5, Windows Opera 9.0, Macintosh Safari 1.3.2 & 2.0.3, Macintosh FF 1.5

MIT 许可
http://www.opensource.org/licenses/mit-license.php

许可特此批出, 免费, 给任何人提供此软件的拷贝和他相关文档中的("软件"), 使用此软件不受任何限制, 所不受的限制包括: 有权利使用, 拷贝, 修改, 合并, 出版, 分发, 颁发从属许可, 和/或买卖该软件的拷贝.
 

   发表时间:2006-12-20  
lightbox
概要:

Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.thinkbox的改善版本

最新更新 Version 2.0

图片集: 分组相关的图片并且能轻松的导航它们
视觉特效: 奇特的自适应调整
向后兼容: yes!


如何使用:

步骤 1 - 安装

1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2、外调 Lightbox CSS 文件 (或添加 Lightbox 样式到你现行的样式表中).
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3、检查 CSS 并确定调用的 prev.gif 和 next.gif 文件在正确的位置. 同样要确定调用的 loading.gif 和 close.gif 文件及 lightbox.js 文件在正确的位置.

步骤 2 - 激活

1、添加 rel="lightbox" 属性到任何一个链接标签去激活lightbox. 例如:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
可选择项: 使用 title 属性加上说明.

2、如果你有一套你想分组的相关图片, 接着上一部并且又在 rel 属性中添加一个带方括号的组名. 例如:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
3、没有限定每个页面的图片组数量和每个图片组图片的数量. 疯了!
0 请登录后投票
   发表时间:2006-12-20  
ppjoke及时通
声明
下载,使用,二次开发请标明版权.
版权归谷祖林(llinzzi http://onewww.net)所有
任个人和集体都可以随意更改,但请标明版权.
需要针对开发请联系
最近发现相当多数量的朋友修改了程序的名字就以原创的名义发布销售

PPJOKE是一套基于AJAX技术网页嵌入聊天程序,目前提供asp版下载,.Net版本的负载量更高,不过还在调试中,拖了很长时间了,最近一直忙着学习,没有更新,这里先提供下载。
此外最近一直在研究持续连接技术,也就是所谓的推技术,还有jssocket等企业级的类AJAX技术,希望有经验的朋友交流。

屁屁聊天 PPJoke
功能/特点
基于Ajax技术
运用了成熟稳定的prototype/scriptaculous框架
数据传送量小
页面嵌入聊天
自定义强突出个性化
支持换肤
支持表情
支持拖动 放大
更改颜色
0 请登录后投票
   发表时间:2006-12-20  
xmlhttprequest打包类
在给blog加上无刷新搜索和即时验证检测后,又看了下代码,感觉太过麻烦,就把XMLHttpRequest请求封装到一个类里面,用起来方便多了,不用记那么多代码,什么创建XMLHttpRequest对象什么的,这部分代码也是重用性比较高的~已经打包,在日志的末尾下载。

要看效果的话点左侧边栏里的日志搜索,里面有一个无刷新搜索,就是了,或者在阅读日志或留言簿里的注册码那里有即时检测,如果不输入验证码或者输错了验证码,输入框都会变红的

类名:AJAXRequest

创建方法:var ajaxobj=new AJAXRequest;,如果创建失败则返回false

属性:

method  -  请求方法,字符串,POST或者GET,默认为POST
url         -  请求URL,字符串,默认为空
async     -  是否异步,true为异步,false为同步,默认为true
content -  请求的内容,如果请求方法为POST需要设定此属性,默认为空
callback  - 回调函数,即返回响应内容时调用的函数,默认为直接返回,回
函数有一个参数为XMLHttpRequest对象,即定义回调函数时要这样:function mycallback(xmlobj)
方法:send     -  发送请求,无参数

例子:


<script type="text/javascript" src="ajaxrequest.js"></script>

<script type="text/javascript">

var ajaxobj=new AJAXRequest;    // 创建AJAX对象

ajaxobj.method="GET";   // 设置请求方式为GET

ajaxobj.url="default.asp"  // URL为default.asp

// 设置回调函数,输出响应内容

ajaxobj.callback=function(xmlobj) {

     document.write(xmlobj.responseText);

}

ajaxobj.send();    // 发送请求


0 请登录后投票
   发表时间:2006-12-20  
彪哥1.1——智能表格
下载,使用,二次开发请标明版权.
版权归llinzzi (http://onewww.net) 所有
任个人和集体都可以随意更改,但请标明版权.



演示:http://onewww.net/code/table/1.1

作品名称:彪哥
版本:1.1
网名:llinzzi
网址:http://onewww.net

代码特点
整个程序基于Ajax技术制作
代码基于prototype1.4.(时间关系并没完全移植完全)
代码分离 js css html 代码分离,可以用以任何自定义表格;

操作方法

一 编辑操作
    <一> 键盘操作
        1.Insert键增加一行,并复制最后一行内容,Delete键删除最后一行,该操作用以调节表格总大小;
        2.Tab键横向移动光标,Enter键纵向移动光标,符合Excle用户习惯;
    <二> 页面操作
        1.全选 选择全部行,再次执行释放全部行;
        2.复制所选 复制已经选择的行及其内容;
        3.删除所选 删除已经选择的行;
        4.清空所选 清除所有单元格(input)中的内容;
        5.提交 利用ajax技术发送数据内容到服务器

二 文件操作 (此处完全ajax技术完成)
    <一> 保存
        输入名字就可以进行保存操作
        数据基于ajax技术传送到服务器,并有进度显示
    <二> 打开
        点击打开就可以打开文件列表,再次单击项目,就可以打开表格
   
三 智能操作
    此功能为本作品的重点和特点
    双击单元格将弹出菜单,菜单自动收集该列上所有不重复的已输入内容,为重复输入数据提供了方便;

用途
适合多用户大规模BS模式系统的录入,如业务订单等


  • demo.rar (48.2 KB)
  • 描述: 彪哥1.1——智能表格
  • 下载次数: 258
0 请登录后投票
   发表时间:2006-12-20  
强.....
0 请登录后投票
   发表时间:2007-03-06  
太强了
0 请登录后投票
   发表时间:2007-03-06  
在下不是泼冷水
以上的大部分东东 除了即时聊天 一个EXT足可以搞掂
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics