Javascript/Ajax | Heluyao's Blog

订阅此博客

Archive for the ‘Javascript/Ajax’ Category

基于jQuery实现自动轮换的选项卡

2009-10-26 上午 - Javascript/Ajax - JQuery

想写个这样的东西很久了，恰巧项目中要用到，就下了点功夫。利用模拟鼠标事件来做轮换…

模拟鼠标事件的函数：trigger(type,[data]) 在每一个匹配的元素上触发某类事件。

点击预览效果

点击下载代码

3 Comments » | 443 Views |

基于jQuery实现星级评分效果

2009-10-13 下午 - Javascript/Ajax - JQuery

仿照『口碑』的评星级效果做的一点小东西，测试下自己这段时间的学习成果···

看图知效果：

星级评分

预览效果：星级评分

下载文件：star-Level.rar

口碑的代码：starLevel-koubei.rar[提取自口碑网]

html

<div class="selectStar">
<ul class="clearfix">
<li>
<span class="red">*</span>
<span class="zi">服务　　</span>
<span id="dpCont1" class="dpCont"></span>
<em id="dpStar1" class="">
<a href="#" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4</a>
<a href="#" id="5">5</a>
</em>
</li>
</ul>
</div>

javascript:

$(function(){
var className;
var classID;
var dpText="";
var dpTextC="";
$(".selectStar em a").bind("click",function(){
className = "selectS" + $(this).attr("id");
classID = $(this).parent().attr("id");
$(this).parent().removeClass().addClass(className);
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpTextC = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpTextC = "中评";}
if($(this).attr("id") == 5) {dpTextC = "好评";}
$(this).parent().prev(".dpCont").text(dpTextC);
return false;
})
.bind("mouseover",function(){
if($(this).attr("id") == 1 || $(this).attr("id") == 2) {dpText = "差评";}
if($(this).attr("id") == 3 || $(this).attr("id") == 4) {dpText = "中评";}
if($(this).attr("id") == 5) {dpText = "好评";}
$(this).parent().removeClass().addClass("selectS" + $(this).attr("id"));
$(this).parent().prev(".dpCont").text(dpText);
})
.bind("mouseout",function(){
$(this).parent().removeClass("selectS" + $(this).attr("id"));
if($(this).parent().attr("id") == classID){
$(this).parent().addClass(className);
}
$(this).parent().prev(".dpCont").text(dpTextC);
});
});

1 Comment » | 505 Views |

妙招解决jquery中$和其他库的冲突

2009-10-13 下午 - Javascript/Ajax - JQuery

方法一：

jQuery.noConflict(); //将变量$的控制权让渡给其他js库
jQuery(function($){ //使用jQuery设定页面加载是执行的函数
$("p").click(function(){ //函数内部使用$()方法
alert($(this).text());
});
});
$("p").style.display = "none"; //使用其他js库

————————- 分界 ————————

方法二：

jQuery.noConflict(); //将变量$的控制权让渡给其他js库
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用$()方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("p").style.display = "none"; //使用其他js库

1 Comment » | 339 Views |

给Dreamweaver安装jQuery插件jQuery_API.mxp

2009-09-10 下午 - Javascript/Ajax - DW - JQuery - 插件

要让Dreamweaver支持jQuery自动提示代码功能，方法很简单，下载一个插件—jQuery_API.mxp[点击下载]。

在Dreamweaver里依次选择“命令” -> “扩展管理” -> “安装扩展” -> …，就会自动安装了。

成功后重启Dreamweaver，就大功告成了。

注意：如果您安装的是精简版的Dreamweaver，那么请先下载Adobe Extension Manager 插件管理器[点击下载]，我自己是cs3的，因此该处链接也是适用于cs3，请根据自己相应版本选择下载。

4 Comments » | 1,096 Views |

YUI Compressor online在线压缩js

2009-08-28 下午 - Javascript/Ajax - javascript - js - 优化 - 压缩

分享一个利用YUI Compressor在线压缩js的网页。

链接地址：YUI Compressor online

之前推荐过的TBCompressor其实就是这款压缩工具，只是TBueder将其封装了一下。该工具本地安装需要java的支持，有点麻烦，今天发现一个在线的，挺方便了！只是目前还不能压缩css，挺遗憾的~~！

No Comments » | 464 Views |

简单解决“丑陋”的select下拉框

2009-01-9 上午 - Javascript/Ajax - javascript - select

　　准备做为偶Blog的demo频道下的number one。代码就不在此处贴了，专门做了示范的页面。就请舞动你的鼠标，按得更深一点吧！

一个Page只有一个需要美化的Select：美化单个select下拉框
这个自然就是多个咯：美化多个select下拉框

　　有点仿tudou.com那个search select的原理，照着她的html结构写的代码，但是偶为了简便，value放在了input里，而土豆的是放进一个a标签的href属性里，说明她更充分的考虑了“预留退路”问题，深情的赞美一下！

　　不多说了，偶要睡觉去袅，直接看代码，懒得做rar下载了，“另存为”一下，即OK!最后声明，用偶代码，很欢迎，转载偶的文章，别忘了留个链接哦！-_-!

No Comments » | 560 Views |

预留退路+分离javascript+向后兼容性

2008-12-15 下午 - Javascript/Ajax - javascript - 兼容性 - 分离 - 预留退路

　　谈谈这两天学到的一些新东西，就算是做个记录，自己也好随时来看看，增强记忆；同时也让喜欢js的朋友们也多了解一些有用的东西。

预留退路：确保网页在没有JavaScript的情况下也能正常工作。

分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。

向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死机。

　　其实这些东西说来说去也就是一条：养成良好的JavaScript编程习惯(事实上也并非一件简单的事)。

　　预留退路，如果你正确地给JavaScript考虑了“退路”问题，就可以让用户在浏览器不支持或已关闭JavaScript的情况下也能够顺利浏览到原本该有的信息(虽然某些功能不可用，但至少保证内容是可见的)。

　　分离javascript：顾名思义，就是将js脚本完完全全的迁移出html/xhtml文档，这样做是只有利而无弊的。可能在某些程度上会使得js脚本变得稍显复杂，但这些都是可以接受的。

　　向后兼容性：现在，绝大多数的浏览器都能或多或少的支持JavaScript，同时对DOM的支持也都是很不错滴。但还是存在一些比较古老的浏览器，而正好它们却有可能无法理解DOM提供的方法和属性。解决方法比较容易实现，通过if语句，判断出结果从而选择该采取怎样的行动——这种检测叫做对象检测(object detection)。

　　由于时间关系，该文章未提及解决方法的具体案例，网上有很多类似的例子可以查阅的，多多利用Google和百度吧！

1 Comment » | 1,025 Views |

两本新书到手，继续学习

2008-12-15 下午 - Javascript/Ajax, 乱七八糟 - javascript - 书籍

　　前几天去逛当当网，看中两本书，一时冲动就买了。现在当当的发货速度比以前快多了，赞一个！下面就所说这两本书吧！

　　两本都是“图灵”的，WEB开发系列。喜欢他家的书，不是一两次买了，推荐大家想买这类书籍的都可以选择“图灵”的。

《JavaScript DOM 编程艺术》— Jeremy Keith著
《JavaScript 高级程序设计》— Nicholas C.Zakas著

　　前者已经看得差不多了，从中确实受益不浅。对DOM又一个比较完善的理解了，也似乎明白究竟如何做到“预留退路”、“代码分离”、“向后兼容”着三点要素，但还需要更多的开发经验。

　　后者我还没开始学习，准备先好好消化了前者的精华后再陆续跟进。留更多的时间给这本书，很明显后者的难度要大很多。

　　同时我也会通过博客与大家一起分享我的学习成果，一起进步！理想万岁！-_-~!

2 Comments » | 1,281 Views |