虾米窝窝 » Jquery
Subscribe RSS

关于"Jquery"的文章

写了一个Jquery的Image resize小插件 06月 22

     IE6就是坏,在编辑器里插入图片宽度和外层容器差不多,然后在同一行再输入点东西的话,前台页面就会完全乱套,用word-break:break- all;之类的CSS也不行。Firefox和IE7还比较好,知道自动换行自己调整一下。CSS我是调的很厌烦了,索性搞了个简单的图片缩放:
      用法很简单,第一个参数就是图片所在的父级容器id,第二个是允许的图片宽度,默认是父级容器宽度的80%,第三个是图片高度,,默认是父级容器高度的80%。
     要使用的话这样就好了:

JavaScript代码
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $.imgResize('blog_content',600,480);  
  4. });  
  5. </script> 
分类: JavaScript  | 标签: , , ,  | 暂无留言 | 640次阅读
Jquery 修改版消息提醒框 06月 09

恩,原版是在www.corrie.net.cn下载的,所有用法大家可以直接去那里看。

原版的消息提示框不能跟随窗口滚动而滚动,我主要是加了个这个功能。

首先是将最外层那个div的positioin属性设置为了fixed,然后为兼容ie6在第37行this.rmjq_messager(this.time);下添加了:

//hacked by sharmy
/*FF and IE7 can use 'position:fixed',but ie6 need to set window top dynamically.*/
if($.browser.msie && $.browser.version == 6) {
    $('#jq_messager').css('position','absolute');
    $(window).scroll(function(){
        var f_top = $(window).scrollTop() + $(window).height() - ($("#jq_messager").outerWidth()/2);
        $('#jq_messager').css( 'top' , f_top );
    });
}

附上修改后的文件:jquery.messager.hackBySharmy.7z

分类: JavaScript  | 标签: ,  | 暂无留言 | 681次阅读
Jquery Datapicker汉化版 06月 09

       前两天项目的测试给我报了个Bug,说我的datepicker不对,上面的字是英文的……我就想怎么以前我没有发现呢。后来才想起来以前貌似在公司做的都是国外的项目,人家要汉化做什么,汗……….

      上个图:
                       datepicker_chinese

分类: JavaScript  | 标签: , , , ,  | 暂无留言 | 438次阅读
转:jQuery性能优化指南 05月 20

1,总是从ID选择器开始继承
在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。

例如有一段HTML代码:

<div id="content">

<form method="post" action="#">

<h2>交通信号灯</h2>

<ul id="traffic_light">

<li><input type="radio" class="on" name="light" value="red" /> 红色</li>

<li><input type="radio" class="off" name="light" value="yellow" /> 黄色</li>

<li><input type="radio" class="off" name="light" value="green" /> 绿色</li>

</ul>

<input class="button" id="traffic_button" type="submit" value="Go" />

</form>

</div>

如果采用下面的选择器,那么效率是低效的。
var traffic_button = $("#content .button");

因为button已经有ID了,我们可以直接使用ID选择器。如下所示:
var traffic_button = $("#traffic_button");

当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,
为了提高性能,建议从最近的ID开始继承。
如下所示:
var traffic_lights = $("#traffic_light input");

分类: JavaScript  | 标签: ,  | 暂无留言 | 311次阅读
Thickbox 操作父窗口 04月 17

    今天又用到了,想了半天才想起来以前怎么做的,所以做个记录,以后待用。
   
    在子窗口调用父窗口的js:parent.functionname();或者:self.parent.functionname();
    Jquery选择父窗口元素:$('#nodeIdInParentDocument', window.parent.document)

分类: WEB2.0学习  | 标签: , ,  | 暂无留言 | 657次阅读
HTML未载入导致JS报错 04月 01

        Js代码在所需的HTML单元未载入之前就执行,导致在执行的时候发生错误。最显著的情况是用Ajax动态载入一些东西然后显示在某个单元之 中,但是由于JS代码是写在了单元前面,所以虽然数据已经顺利得到了,但是并不能写到单元里面。
解决办法是把JS代码写在所需要的HTML的单元的后面,当然用Jquery的
    $(document).ready(function() {
         // do stuff when DOM is ready//当文档载入后从此处开始执行代码
     });
也可以实现

分类: WEB2.0学习  | 标签: , ,  | 暂无留言 | 1694次阅读
Jquery 1.2新特性 04月 01

jQuery正在迅速成为许多人所选用的Ajax类库。它的API看起来很简单, 它对多个浏览器是一致的、有好的文档记录,它支持许多特性,这些特性是开发者期望中的类库所能提供的特性,它有一个引人注目的plugin架构,它令jQuery以一种应对未来变化的方式进行扩展,而且它有活跃的开发周期和开发社区。

当距离上一个版本1.1.4发行不到3个星期就宣布了jQuery 1.2 版本时,上述最后一点被真正突显出来。开发团队有非常清楚的开发目标,并在jQuery 1.2 路线图中描绘了许多特性,最终使其包含到目标版本中。新特性包括:

  • 局部装载 —— “Partial.load() 允许你装载HTML文档块到你的页面里,页面经jQuery选择器过滤。这项工作就像一个普通的Ajax.load(),但是你只需在你所获取的URL之后指定一个选择器即可。”
分类: WEB2.0学习  | 标签: , , , , , ,  | 1条留言 | 2068次阅读
Jquery插件(2) 03月 12

Sliding Panels -滑动门控制
1) Sliding Panels For jQuery -元素可以展开或关闭,创建出手风琴的滑动效果。

(2) jQuery Collapse -这个jQuery插件同样点击后滑动展开或关闭DIV层。
Menu - 菜单
3) LavaLamp

menu

分类: WEB2.0学习  | 标签: , , , , , , , , , , , , , , ,  | 暂无留言 | 2129次阅读
Jquery插件(1) 03月 12

图象幻灯片展示和画廊插件

1) Galleria -这是一个用jQuery编写的javascript图像画廊插件。之前帕兰已经做过介绍。


分类: WEB2.0学习  | 标签: , , , , , , , , , , , ,  | 暂无留言 | 1466次阅读
JQuery操作Select下拉列表 12月 01
<select name=’sel’ id=’sel’> <option value=’1′>1</option> <option value=’2′ selected=’selected’>我被选中了</option> <option value=’3′>2</option> </select> <script> alert($("select[@name='sel'] option[@selected]").text()); $("#sel").val(’2′); alert($("select[@name='sel'] option[@selected]").text()); </script> 查询被选中的option中的内容当然也可以用 alert($("#sel option[@selected]").text()); 稍微解释一下: select[@name='sel'] option[@selected] 表示具有name 属性,并且该属性值为’sel’ 的select元素 里面的具有selected 属性的option 元素;可以看出有@开头的就表示后面跟的是属性。
分类: WEB2.0学习  | 标签:  | 暂无留言 | 9272次阅读