Question

我有一个包含多个元素的页面，需要一个插件应用于它们，虽然配置几乎相同，但它并不相同。是否有更紧凑的方法，不会复制所有脚本？

$('#phone').editable({
    type: 'text',
    title: 'Phone Number',
    inputclass: 'phone',
    placement: 'right',
    params:{task:'savePhone',controller:'detail',cid:ayb.component.id,CSRF:ayb.CSRF},
    url: 'index.php',
    pk: function(){return $('#id').val();},
    validate: function(value) {if($.trim(value) == '') {return 'This field is required';}}
    }
);
$('#fax').editable({
    type: 'text',
    title: 'Fax Number',
    inputclass: 'phone',
    placement: 'right',
    params:{task:'saveFax',controller:'detail',cid:ayb.component.id,CSRF:ayb.CSRF},
    url: 'index.php',
    pk: function(){return $('#id').val();},
    validate: function(value) {if($.trim(value) == '') {return 'This field is required';}}
    }
);

根据Rick的回答，这似乎有效。 https://jsfiddle.net/L13ntntv/2/我希望会有更简单的方法......

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled</title>
        <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"></script>
        <link href= "https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"></script>
        <script type="text/javascript"> 
            $(function() {
                var defaults= {
                    type: 'text',
                    url: 'editable_post.php',
                    pk: 1
                }

                $('#phone').editable($.extend(true, {}, defaults, {
                    title: 'Phone Number',
                    params: {task: 'savePhone'}
                }));

                $('#fax').editable($.extend(true, defaults, {
                    title: 'Fax Number',
                    params: {task: 'saveFax'}
                }));
            });
        </script>

    </head>
    <body>
        <dl>
            <dt>PHONE:</dt><dd><a href="javascript:void(0)" id="phone">555.111.2222</a></dd>
            <dt>FAX:</dt><dd><a href="javascript:void(0)" id="fax">444.333.5555</a></dd>
        </dl>

    </body>
</html>

或者延伸时可能不深入？ https://jsfiddle.net/L13ntntv/4/

Answer 1

我会采用模块化方法。创建一个使用默认属性调用editable的函数，默认属性使用特定于每个元素的属性进行扩展。

这样的事情：

function setup(obj, options) {
  var defaults= {
        type: 'text',
        placement: 'right',
        params: {
          controller:'detail',
          cid:ayb.component.id,
          CSRF:ayb.CSRF
        },
        url: 'index.php',
        pk: function(){return $('#id').val();},
        validate: function(value) {
                    if($.trim(value) == '') {
                      return 'This field is required';
                    }
                  }
        }
  obj.editable($.extend(true, defaults, options));
} //setup

setup($('#phone'), {
        title: 'Phone Number',
        inputclass: 'phone',
        params: {
          task: 'savePhone'
        }
      }
     );

setup($('#fax'), {
        title: 'Fax Number',
        inputclass: 'phone',
        params: {
          task: 'saveFax'
        }
      }
     );

<小时/> 要避免使用命名函数，请执行以下操作：

var defaults= {
      type: 'text',
      placement: 'right',
      params: {
        controller:'detail',
        cid:ayb.component.id,
        CSRF:ayb.CSRF
      },
      url: 'index.php',
      pk: function(){return $('#id').val();},
      validate: function(value) {
                  if($.trim(value) == '') {
                    return 'This field is required';
                  }
                }
    }

$('#phone').editable($.extend(true, {}, defaults, {
  title: 'Phone Number',
  inputclass: 'phone',
  params: {
    task: 'savePhone'
  }
}));

$('#fax').editable($.extend(true, {}, defaults, {
  title: 'Fax Number',
  inputclass: 'phone',
  params: {
    task: 'saveFax'
  }
}));

在多个元素上使用jquery插件稍作修改

1 个答案: