WEB前端开发

google提供的10个javascript Frameworks 外连：

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jquery UI

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Chrome Frame

<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js"></script>

swfobject

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

mootools

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Yahoo! UI

<script src="http://ajax.googleapis.com/ajax/libs/yui/2.8.1/build/yuiloader/yuiloader-min.js"></script>

Prototype

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js"></script>

Ext.JS

<script src="http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>

Dojo

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>

Scriptaculous

<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>

昨天写了《用jq做的一个简单的折叠效果》结果发现了一个问题：

$(".acc_container:not(:first)").hide();

悲剧发生了，所有.acc_container类都被隐藏了，

尝试了很多方法之后页面找到问题所在，更加悲剧的事$(“.acc_container:not(:last)”).hide();在chrome下能运行，在ie下却不行，$(“.acc_container:not(:odd)”).hide();却能正常运行，悲剧了！

幸好jq森林群里的jackie给出了一个解决的方案：

$(".acc_container:not('.acc_container:first')").hide();

这样就能正常运行了。感谢jackie！

====================2010.5.14更新==================

redky在留言中也给出了一个新方法：

$('.acc_container').not(':first').hide();

经测试，jQuery1.3.2也存在这个问题！

今天看到了一个简单的折叠效果：http://www.sohtanaka.com/web-design/examples/accordion/

不过个人认为这个demo还有一点瑕疵，就是当该项已经展示的时侯，再次点击该项，那么该项应该关闭；所以做了个简单的demo。

查看demo：http://www.css88.com/demo/accordion/

Raphaël是一个小型的Javascript库，它能够简化你为网页上的矢量图所作的工作。如果你想创建你自己的特定的图表或者图片剪裁和旋转部件，你可以用这个库简单轻松地实现它。

Raphaël使用SVG W3C推荐标准和VML作为创建图形的标准。这意味着你创建的每一个图形对象也是一个DOM对象，因此，您可以附加JavaScript的事件处理程序或以后修改它们。Raphaël的目标是提供一种适配器，使绘画艺术载体轻松做到跨浏览器兼容

Raphaël currently supports Firefox3.0+, Safari 3.0+, Opera 9.5+, Chrome 2.0+ and Internet Explorer 6.0+. Raphaël现在支持Firefox 3.0以上版本，Safari 3.0以上版本, Opera 9.5以上版本 , Chrome 2.0以上版本以及IE6.0以上版本。

官方网站：http://raphaeljs.com/

官方文档：http://raphaeljs.com/reference.html

一些插件：http://g.raphaeljs.com/

一个打分效果：

$("#numberBox").grade({

addNum:5,

speed:300,

fontStyle:{                 "width":"100px",                 "height":"100px",                 "position":"absolute",                 "top":"0", "left":"0",                 "font-size":"36px",                 "font-weight":"700",                 "text-align":"center",                 "line-height":"100px"},

gradetype:"upmove"//默认“zoom”

})

addNum：加分的数值，可以为负数

speed：动画执行的速度

fontStyle：执行动画的层样式

gradetype：动画的类型，有:”upmove”何“zoom”（默认）

演示地址：http://www.css88.com/demo/grade/

下载地址：http://www.css88.com/demo/grade/grade.rar

一个文字向上滚动的插件。

调用代码：

$(document).ready(function(){
$(“#scrollDiv”).textSlider({
line:4,
speed:500,
timer:3000
});
});

其中：
line：滚动几行；
speed：滚动速度；
timer：自动滚动间隔；
演示地址：http://www.css88.com/demo/textSlider/textSlider.html

下载地址：http://www.css88.com/demo/textSlider/textSlider.rar

更多参考：http://www.css88.com/archives/717

表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；

通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。

HTML代码如下：

<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>

这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。

注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input type=”file”的宽度

CSS代码如下：

.type-file-box{ position:relative;width:260px}

input{ vertical-align:middle; margin:0; padding:0}

.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}

.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }

$(function(){
var textButton="<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value='浏览...' class='type-file-button' />"
$(textButton).insertBefore("#fileField")；
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);

一个广告轮播效果,这个插件也曾经写过，参见：http://www.css88.com/archives/722

不过这次表现上和上个例子有些不同，其实是一样的代码。

插件的调用：

$(“#myjQuery”).ADSlide({
speed : “normal”,//动画效果的速度
num : 4,//广告个数
timer : 3000,//动画效果的时间间隔
flowSpeed :300//滑块的延迟时间
});

今天网上看到了一个冒泡效果，所以自己照着样子重新写了一个，基本和原来的保持一直。

基本的使用方法：

$("div#demo ul#menu li img").bubbleup({
tooltip: false,//是否提示文本
scale:120,//放大后的图片宽度
fontFamily:'Helvetica, Arial, sans-serif',//提示文本字体
color:'#333333',//提示文本字体颜色
fontSize:12,//提示文本字体大小
fontWeight:'bold',//提示文本字体粗细
inSpeed:'fast',//鼠标划过放大时的速度
outSpeed:'fast'//鼠标已出缩小时时的速度
});

演示地址：http://www.css88.com/demo/bubbleup/

原文地址：http://aext.net/2010/04/bubbleup-jquery-plugin/