JQuery 知识点
2014-04-25 14:17
435 查看
1:animate 动画效果
效果:
2:二选一功能
问题是这样的:当我点击编辑按钮时会出现编辑的输入框,但是当我点击其它编辑按钮时,先前的那个输入框没有消失而再次点击的输入框也显示,如图:
想通过jquery实现:点击其它编辑按钮时,先前的编辑输入框消失而再次点击的输入框显示,这就是二选一功能,实现代码如下:
……
……
漂亮,成功实现了功能,其实之前也实现过类似的功能只是没有记录博客,以防下次会用到,这次参考的是csdn的代码(有csdn博客的朋友可以看看)。
$(function () { $(".sidebar-nav a").mouseover(function () { $(this).animate({ paddingLeft: "+=8px" },200); }); $(".sidebar-nav a").mouseout(function () { $(this).animate({ paddingLeft: "-=8px" }, 200); }); });
效果:
参数 | 描述 |
---|---|
styles | 必需。规定产生动画效果的 CSS 样式和值。 可能的 CSS 样式值(提供实例): backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth font fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。 |
speed | 可选。规定动画的速度。默认是 "normal"。 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" |
easing | 可选。规定在不同的动画点中设置动画速度的 easing 函数。 内置的 easing 函数: swing linear 扩展插件中提供更多 easing 函数。 |
callback | 可选。animate 函数执行完之后,要执行的函数。 如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。 |
2:二选一功能
问题是这样的:当我点击编辑按钮时会出现编辑的输入框,但是当我点击其它编辑按钮时,先前的那个输入框没有消失而再次点击的输入框也显示,如图:
想通过jquery实现:点击其它编辑按钮时,先前的编辑输入框消失而再次点击的输入框显示,这就是二选一功能,实现代码如下:
……
{ sTitle: "操作", mData: null, sClass: "lClass", fnRender: function (oObj) { return '<a href="#" onclick="javascript:edit(this)">编辑</a> | <a href="javascript:void(0)" onclick="del_click(\'' + oObj.aData.Id + '\')" class="editor_remove">删除</a>'; } }
……
var e_tr = ""; function edit(e) { cancelEdit(); e_tr = $(e).parent().parent(); var val = $(e).parent().parent().children("td:eq(0)").children().html(); $(e).parent().parent().children("td:eq(0)").children().attr("style", "display:none"); $(e).parent().parent().children("td:eq(0)").append("<span><input style='margin:0;padding:0 0 0 10px;height:20px;width:140px;border-radius:20px;font-size:10px;' type='text' onkeydown=' ' maxlength=30 value='" + val + "' />" + " <a href='#' class='button' onclick='return false;'>保存</a>" + " <a href='#' class='button red' onclick='javascript:cancelEdit();return false;'>取消</a></span>"); } function cancelEdit() { if (e_tr) { e_tr.children("td:eq(0)").children("span:eq(0)").attr("style", "display:inline"); e_tr.children("td:eq(0)").children("span:eq(1)").remove(); } e_tr = null; }
漂亮,成功实现了功能,其实之前也实现过类似的功能只是没有记录博客,以防下次会用到,这次参考的是csdn的代码(有csdn博客的朋友可以看看)。
相关文章推荐
- JQuery学习总结知识点
- [复习]jQuery知识点
- 【整理】jQuery知识点2
- JQuery零碎知识点归纳2
- jQuery 重新温习 遗忘知识点
- Jquery知识点三 jquery表单对象操作
- Jquery 随便写些知识点
- Javascript与Jquery知识点
- jQuery中一些必须要知道的知识点总结--20个(上)
- Jquery知识点
- 【Web】锋利的jquery知识点总结
- 【整理】jQuery知识点3
- Jquery知识点
- jQuery工作中常用知识点整理(一)
- JQuery相关的知识点
- 初窥JQuery(一)jquery选择符 必备知识点
- JQuery Pagenation 知识点整理——$.extend(),与$.fn.extend()应用(20150517)
- jQuery基础_入门必看知识点
- js、jquery常用知识点
- 【知识点总结】jQuery的扩展方法