JQuery 知识点

1：animate 动画效果

$(function () {

    $(".sidebar-nav a").mouseover(function () {

        $(this).animate({ paddingLeft: "+=8px" },200);

    });

    $(".sidebar-nav a").mouseout(function () {

        $(this).animate({ paddingLeft: "-=8px" }, 200);

    });

});

效果：

JQuery 知识点

参数	描述
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 知识点

想通过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;

}

JQuery 知识点

漂亮，成功实现了功能，其实之前也实现过类似的功能只是没有记录博客，以防下次会用到，这次参考的是csdn的代码(有csdn博客的朋友可以看看)。

相关文章