文章标签 ‘jQuery’
如图所示slide box的应用比较常见，把这个功能做成插件用的时候方便调用自然很好，但是插件的制作会考虑通用性，复用性代码一般情况下都比较长，如果直接用jQuery来实现这种功能比较方便，代码也比较简单，是一种比较实际的选择。下面的例子就是通过jQuery实现slide box 凤凰网博客功能演示地址为 http://blog.ifeng.com/ 我们最终实现的效果如下： 最终jQuery代码,rn $(document).ready(function(){ var lis = $("#imagewapHandler li"); var divs = $("#imagewapBox .bigPic"); $(lis).each(function(i){ $(this).mouseover(function(){ lis.removeClass("current"); divs.hide(); divs.eq(i).show(); $(this).addClass("current"); }) }) }) demo地址www.radys.cn/demos/jQuery-ifeng-slide-box.html
导航菜单中实用jQuery可以做出非常酷的效果下面几个例子，当然还要举出很多 Pufferfish – labs.dragoninteractive.com Tab-Navigation Sliding Navigation – www.kriesi.at CSS Dock Menu – www.ndesign-studio.com Flyout Menu – iPod-Style – www.filamentgroup.com (mb)Menu 2.6 (New!) – pupunzi.wordpress.com jSlickmenu – www.marcofolio.net 转载自http://guidesigner.net/ajax/best-jquery-collections-the-easy-way-to-navigate/
一个jquery easing实现动态菜单的例子 demo 在线演示 http://www.radys.cn/demos/jQuery-menu/ 你也可以这个网站看看 http://www.kriesi.at/
HTML结构 <select id="pagelist"> <option value="1">第一页</option> <option value="2">第二页</option> <option value="3">第三页</option> <option value="4">第四页</option> </select> 功能要求： 1.给select在绑定change事件在改变select的时候转到指定页，页码参数为page（?page=1,?page=N）; 2.select根据页码数选中指定值，当页码为空或0时选择最后一页 jQuery实现 1. //转到指定页处理 $("#pagelist").change( function() { location.href = "/?page=" + $(this).val(); } ) 2. //转换URL中的参数 function getQueryStringByRegExp(name) { var reg = new RegExp("(^|\\?|&)" [...]
jquery.com首页的thumbnail效果非常不错，自己写了一个类似的DEMO，HTML的结构是一样的，但是jQuery代码却相去甚远。 主要的HTML代码： <ul class="jq-checkpoints"> <li><a href="http://docs.jquery.com/Tutorials" title="Lightweight Footprint" class="jq-thickbox">Lightweight Footprint</a> <div class="jq-checkpointSubhead"> <p>About 19KB in size <em>(Minified and Gzipped)</em></p> </div> </li> <li><a href="http://docs.jquery.com/Tutorials" title="CSS3 Compliant" class="jq-thickbox">CSS3 Compliant</a> <div class="jq-checkpointSubhead"> <p>Supports CSS 1-3 selectors and more!</p> </div> </li> <li><a href="http://docs.jquery.com/Tutorials" title="Cross-browser" class="jq-thickbox">Cross-browser</a> [...]
之前没有用到过is方法，很多时候jquery的is方法会很多的解决你的问题，比如判断一个元素是不是显示，可以用 is(“:visible”)，判断一个元素是不是有那个classs用 is(“.classname”)其实has方法就是has(“classname”)与is(‘.classname’)等价 我们可以使用的还很多比如 is(“div”),is(“button”),is(“form”) 让我们更多的表达式放里面 is(“input[@name]”)判断是否带有name的input is(“#youridname”),判断是否为这个ID的对象 看来可用的还有很多很多，JQuery is true或false，慢慢体会。。 你可能对以下内容也感兴趣： jquery分页插件，ajax中不可少的小东西 jQuery插件,N多可用插件收集备用（转帖） jquery validator errorPlacement demo
最近公司开发的项目中很多地方需要跨域ajax请求，比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息，然后再对数据进行处理，起初我和同事们试了很多种方法，使用$.ajax() 无论是get或post方法都会引起uri deny的错误。一番GG之后发现了解决方法，也了解其中的原因。 jquery从1.2开始，.getJSON就支持跨域操作了。使用jquery.getJSON()方法可以解决跨域问题。实例如下 前台 HTML中JS代码 var url =’http://www.radys.cn/ajax.ashx?callback=?’ $.getJSON(url); alert(data.MAX); ASPX.cs文件中处理为 string jsoncall = Request.QueryString(“callback”); Response.Write(jsoncall+””({MAX:1000,OTHER:’其它值’})”); 这种处理方法叫JSONP，原理是动态创建一个<script>标签，从而在 JSONP http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ 你可能对以下内容也感兴趣： jQuery插件,N多可用插件收集备用（转帖） jquery validator errorPlacement demo
Jquery的ThickBox插件非常好用，可以显示一张图片、多张图处、AJAX和IFrame等多种样式的内容到ThickBox,都要A click触发，而有的时候后台程序根据不同权限显示不同内容，这时希望加载的时候就显示ThickBox的内容，改变这个只要在两步。 第一，利用tb_show()重新构造一个函数。 例如 //////// demo url//var urls = "this place is for your show content url";// #TB_inline? height=150&width=400&inlineId=myOnPageContentfunction load_show(urls){ //调用tb_show显示ThickBox tb_show(‘title’,urls,"thickbox");//调用thickbox之必需} 第二，在页面加载过程调用这个函数 $.ready( function() { //调用显示 load_show(); }) 这样后台程序分析完成后，写URLS就可以在载入页面的同时显示你想要的ThickBox了。＾＾
