button 实现这个效果

宏哥 发布于 2013/07/21 18:14
阅读 497
收藏 2

@mark35 , 我实现的就是这个效果:

加载中
0
mark35
mark35

可以这样绑定,以form基础来组织:

$(document).ready(function() {
  //var el_body = $(document.body);
  $('#edit_form').on('click', function(e) {
    var el_name = $(e.target).attr('name'); // 假定以name属性判断
    switch (el_name) {
      case 'edit':
        // do something
      break;
      case 'save':
        // do something
      break;
    }
  });

});

集中到一起处理方便以后维护。然后把这段代码添加到初始化该页面的js文件中。

如果这些按钮及其操作是多处复用,那也可以按钮(功能)为基础来组织:

$(document).ready(function() {
  $('#bt_edit').on('click', function() {  // 推荐以按钮的id来绑定
    // do something;
  });
  $('#bt_save').on('click', function() {
    // do something;
  });
});
然后把这段代码添加到全局加载的js文件中



0
宏哥
宏哥

引用来自“mark35”的答案

可以这样绑定,以form基础来组织:

$(document).ready(function() {
  //var el_body = $(document.body);
  $('#edit_form').on('click', function(e) {
    var el_name = $(e.target).attr('name'); // 假定以name属性判断
    switch (el_name) {
      case 'edit':
        // do something
      break;
      case 'save':
        // do something
      break;
    }
  });

});

集中到一起处理方便以后维护。然后把这段代码添加到初始化该页面的js文件中。

如果这些按钮及其操作是多处复用,那也可以按钮(功能)为基础来组织:

$(document).ready(function() {
  $('#bt_edit').on('click', function() {  // 推荐以按钮的id来绑定
    // do something;
  });
  $('#bt_save').on('click', function() {
    // do something;
  });
});
然后把这段代码添加到全局加载的js文件中



function ajax_action_button(e){
    btn = $(this);
    //Add prescript
    if(pre_script = btn.attr("pre_script")){
        eval(pre_script);
    }
    var btn_action = btn.attr('value');
    if(btn_action){
        $(this).parents('form').data('btn_action',
            { name:'btn_action',value:btn_action }
            );
    }
}
0
宏哥
宏哥

如上, 我是通过button的value来设定行为

这样就实现分支. 不同的action只要在 button里面设置不同的value即可

0
宏哥
宏哥

在form的处理, 将额外的数据也填充表单

这样由服务端自由处理

0
mark35
mark35

引用来自“宏哥”的答案

如上, 我是通过button的value来设定行为

这样就实现分支. 不同的action只要在 button里面设置不同的value即可

现在已不建议使用eval,可以把按钮值赋值为(回调)函数名来执行

/*if(pre_script = btn.attr("pre_script")){
        eval(pre_script);
}*/
var callback = btn.attr('pre_script') ;
callback && (typeof window[callback] === 'function') && window[callback]();


0
宏哥
宏哥

引用来自“mark35”的答案

引用来自“宏哥”的答案

如上, 我是通过button的value来设定行为

这样就实现分支. 不同的action只要在 button里面设置不同的value即可

现在已不建议使用eval,可以把按钮值赋值为(回调)函数名来执行

/*if(pre_script = btn.attr("pre_script")){
        eval(pre_script);
}*/
var callback = btn.attr('pre_script') ;
callback && (typeof callback === 'function') && callback();


上面那个我直接修改为:

pre_script = btn.attr('pre_script');

pre_script(); 

Ok了, 下面这个

var msg = eval("json.data."+p);

这种情况如何修改?

0
宏哥
宏哥
test = $("form").attr("pre_script");
"editor.save();"
test();
TypeError: string is not a function
0
mark35
mark35

引用来自“宏哥”的答案

test = $("form").attr("pre_script");
"editor.save();"
test();
TypeError: string is not a function

editor.save这个是pre_script的值么?

var fn = $("form").attr("pre_script"); // "edittor.save" 没有后面的()
fn && fn();


mark35
mark35
哈哈,我明白为啥要用eval了,因为你保存的值是“edittor.save()”。去掉后面的函数括弧然后就可以用调用函数的方式来执行即可
0
mark35
mark35

引用来自“宏哥”的答案

引用来自“mark35”的答案

引用来自“宏哥”的答案

如上, 我是通过button的value来设定行为

这样就实现分支. 不同的action只要在 button里面设置不同的value即可

现在已不建议使用eval,可以把按钮值赋值为(回调)函数名来执行

/*if(pre_script = btn.attr("pre_script")){
        eval(pre_script);
}*/
var callback = btn.attr('pre_script') ;
callback && (typeof callback === 'function') && callback();


上面那个我直接修改为:

pre_script = btn.attr('pre_script');

pre_script(); 

Ok了, 下面这个

var msg = eval("json.data."+p);

这种情况如何修改?

对于msg,ajax提交方式设定为json,那么返回值就是个js对象,你就可以直接访问了。

不知道后面这个p是什么意思

0
宏哥
宏哥

引用来自“mark35”的答案

引用来自“宏哥”的答案

引用来自“mark35”的答案

引用来自“宏哥”的答案

如上, 我是通过button的value来设定行为

这样就实现分支. 不同的action只要在 button里面设置不同的value即可

现在已不建议使用eval,可以把按钮值赋值为(回调)函数名来执行

/*if(pre_script = btn.attr("pre_script")){
        eval(pre_script);
}*/
var callback = btn.attr('pre_script') ;
callback && (typeof callback === 'function') && callback();


上面那个我直接修改为:

pre_script = btn.attr('pre_script');

pre_script(); 

Ok了, 下面这个

var msg = eval("json.data."+p);

这种情况如何修改?

对于msg,ajax提交方式设定为json,那么返回值就是个js对象,你就可以直接访问了。

不知道后面这个p是什么意思

那个p是取出的动态熟悉值, 这个json是返回的. 

我仔细研究了这里提到的案例. 这种情况, 好像eval没有替代方法.

这个pre_script在此处可以, 但是其他地方不行. 有诸多限制. 特别是当操作变量是来自于作用域的时候.

eval是最灵活的.

宏哥
宏哥
回复 @mark35 : 代码楼下
宏哥
宏哥
回复 @mark35 : 因为这个p是动态产生的.
mark35
mark35
eval是最灵活,不过“eval is evil”能不用就别用,无论js还是php
mark35
mark35
var msg = eval("json.data."+p); 这个获得的是一个字符串信息吧,为啥要用eval来取值呢? 如果返回对象是json格式,可采用 var msg = json.data[p] 的方式来访问的
返回顶部
顶部