前端框架

前端框架

使用JSONP跨域

由 愚人码头 撰写  |  2010/07/02 18:24 发表在 JS与RIA, 前端框架  |  评论 (0)

从 1.2 版本开始，jQuery 拥有对 JSONP 回调的本地支持。如果指定了 JSONP 回调，就可以加载位于另一个域的 JSON 数据，回调的语法为：url?callback=?。jQuery 自动将 ? 替换为要调用的生成函数名。

我们使用 ? 作为回调函数名，而非真实的函数名。因为 jQuery 会用生成的函数名替换 ?。

这里做了一个简单的flickr照片的跨域处理：


$(function() {
$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&tagmode=any&format=json&jsoncallback=?', function(data) {
$.each(data.items, function(i, item) {
$(item.description).appendTo("body")
});
});
});

http://api.flickr.com/services/feeds/photos_public.gne?id=51666465@N04&tagmode=any&format=json

是我照片的json数据，加上callback回调函数 Read More »

该日志被浏览1196次 标签：:, | 阅读全文

jQuery广告轮播插件-ADRoll

由 愚人码头 撰写  |  2010/04/25 13:35 发表在 JS与RIA, 前端框架  |  评论 (3)

一个广告轮播效果,这个是应冰剑的要求写的一个滚动效果，不知道冰剑提的是不是这样。

大家可以看看上一个效果：jQuery广告轮播插件-ADSlide

插件的调用：


$(“#myjQuery”).ADRoll({
speed : “normal”,//动画效果的速度
num : 4,//广告个数
timer : 3000,//动画效果的时间间隔
imgHeight:"289"//图片的高度
});
该日志被浏览1886次 标签：:, , | 阅读全文

jQuery广告轮播插件-ADSlide

由 愚人码头 撰写  |  2010/04/23 20:52 发表在 JS与RIA, 前端框架  |  评论 (5)

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

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

插件的调用：


$(“#myjQuery”).ADSlide({
speed : “normal”,//动画效果的速度
num : 4,//广告个数
timer : 3000,//动画效果的时间间隔
flowSpeed :300//滑块的延迟时间
});
该日志被浏览1878次 标签：:, , | 阅读全文

【jQuery插件】冒泡效果

由 愚人码头 撰写  |  2010/04/13 00:16 发表在 JS与RIA, 前端框架  |  评论 (3)

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

基本的使用方法：


$("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/

该日志被浏览1979次 标签：:, | 阅读全文

【jQuery插件】Twitter Search

由 愚人码头 撰写  |  2010/04/11 22:31 发表在 JS与RIA, 前端框架  |  评论 (2)

前几天网上看到一个Twitter Search的jQuery插件。

比如我们要列出Twitter上的关于“jQuery”的条目我们可以使用：

$(‘#id’).twitterSearch(‘jQuery’);

当然你还可以设置一些参数，比如：


$('#twitter-jQuery').twitterSearch({

term:'jQuery',

title:'jQuery Chatter',

titleLink:'http://www.jquery.com',

birdLink:'http://twitter.com/jquery',

css:{

img: {width: '30px', height: '30px' }

}
});

还可以设置设置一些动画等效果：


$('#twitter3').twitterSearch({
term:   'Butler basketball',
// no fade
animOut: { opacity: 1 },
avatar:  false,
anchors: false,
bird:    false,
colorExterior: '#ddd',
colorInterior: 'white',
pause:   true,
time:    false,
timeout: 2000
});

demo：http://www.css88.com/demo/jquery_twitter/

官方网站：http://jquery.malsup.com/twitter/

该日志被浏览1568次 标签：:, | 阅读全文

Dom Ready和Dom Load

由 愚人码头 撰写  |  2010/01/17 17:02 发表在 JS与RIA, 前端框架  |  评论 (2)

1、Dom Ready

真不知道这个标题该怎么取，暂时就先凑活着用了。

用jQ的人很多人都是这么开始写脚本的：


$(function(){

// do something

});

其实这个就是jq ready()的简写，他等价于：


$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情，比如：


window.onload=function(){
//do something
}
//或者经常用到的图片，假设这个
document.getElementById("imgID").onload=function(){
//do something
}
这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。 Read More »
该日志被浏览2608次 标签：:, | 阅读全文

推荐一个js框架——Como JS

由 愚人码头 撰写  |  2009/12/23 19:17 发表在 前端框架  |  评论 (2)

como1

  • 对原生对象如String扩展常用函数
  • 支持类的声明与继承，简易Ajax
  • 简约而快速的CSS选择器
  • 高效、易操作的动画执行
  • 强大的JS包扩展机制，支持CSS按需加载
  • 非侵入式切换调用，与第三方框架并存
    • Como是一款代码简易而功能强大的Javascript框架，这也是开发者在工作过程中的经验总结，实用性强；通过它，能够简化Javascript代码开发，增强代码重用性，能够异步按需加载js和css文件，增强page的加载速度； Read More »
    该日志被浏览2558次 标签： | 阅读全文

    MTJS DOM部分封装基本结束

    由 愚人码头 撰写  |  2009/08/29 16:12 发表在 JS与RIA, 前端框架  |  评论 (0)

    MTJS从开始到现在差不多一个月了，DOM部分封装基本结束，接下来就要封装事件了。

    http://code.google.com/p/mtjs/source/browse/trunk/MT.core.js

    文档页面是：

    http://mtjs.googlecode.com/svn/trunk/MT.core_docs/index.html

    欢迎大家提出宝贵的意见和建议！

    该日志被浏览1387次 标签： | 阅读全文

    MTJS中的元素显示和隐藏的封装

    由 愚人码头 撰写  |  2009/08/19 12:51 发表在 JS与RIA, 前端框架  |  评论 (1)

    页面元素的显示和隐藏在前端开发中经常用到的，原来我是这样写的，

    
hide: function(el) {
       el.style.display = "none";
}
show: function(el) {
        el.style.display = "block";
    }

    这里在show函数上就有个问题，如果元素是display:inline话就有问题了，然后我又改成了：

    
hide: function(el) {
        el.style.display = "none";
}
show: function(el) {
        el.style.display = " ";
    }

    Read More »

    该日志被浏览1214次 标签：: | 阅读全文

    像写css选择器一样写jQuery选择器（三）【jQuery入门六】

    由 愚人码头 撰写  |  2009/07/06 14:49 发表在 前端框架  |  评论 (2)

    接《像写css选择器一样写jQuery选择器（二）》

    五、Jquery的子元素选择器

    1. :first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(“ul li:first-child”)；
    2. :last-child ：匹配每个父元素的最后一个子元素，例如：$(“ul li: last -child”)；
    3. :nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(“ul li:nth-child(2)”)；
    4. :o nly-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(“ul li:only-child”)；

    六、子元素选择器和过滤性选择器的一些区别

    :first-child和:first：

    :first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。

    :last-child和:last的区别道理也是一样的； Read More »

    该日志被浏览2649次 标签：:, | 阅读全文