与 jquery 组件通信

Question

我创建了一个 jquery 图形组件，但我不知道如何搜索 Google ...

我的想法是一个 javascript 函数来调用我的组件的一个函数。

下面是结构的简化创建：

(function ($, w) {

$.fn.TableFullOption = function (options) {
    var settings = $.extend(true, {}, { FiltreGeneral: false, BtnReset: false, Datas: {}, Head: "", Body: "", Delete: "", Add: "", Modify: "", Details: "", AvecPager: false, Selectable: false, LstPageSize: '10;20;30;40', Default: [], LargeurColonne: [], HauteurTotale: 800, FiltreColonne: [], TriColonne: [], NomColonne: [], ObligColonne: [], ModifColonne: [], AddColonne: [] }, options);
    if ((settings.Head == "") || (settings.Body == "")) { $(this).html('Erreur de paramétrage'); }
    else {
       ...
    }
};
 function GetInfo(){return true;}
}(jQuery));

调用我的组件

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="/CSS/ui-lightness/jquery-ui.min.css" rel="stylesheet" />
<link href="/TableFullOptionPlugin/Table.css" rel="stylesheet" />
<script type="text/javascript" src="/script/jquery.js"></script>
<script type="text/javascript" src="/script/jquery-ui.min.js"></script>
<script type="text/javascript" src="/script/MsgResult.js"></script>
<script type="text/javascript" src="/TableFullOptionPlugin/eleve.js">    </script>
<script type="text/javascript" src="/TableFullOptionPlugin/TFOPlugin.js"></script>
<script type="text/javascript">
    $(function () {
        $('#divTable').TableFullOption({
            BtnReset: true,
            FiltreGeneral: true,
            Head: '/TableFullOptionPlugin/TFOPlugin.aspx/GetStructTable',
            Body: '/TableFullOptionPlugin/TFOPlugin.aspx/GetlstEleve',
            Delete: '/TableFullOptionPlugin/TFOPlugin.aspx/DeleteEleve',
            Add: '/TableFullOptionPlugin/TFOPlugin.aspx/AddEleve',
            Modify: '/TableFullOptionPlugin/TFOPlugin.aspx/ModEleve',
            Details: '/TableFullOptionPlugin/Details.aspx',
            Selectable: true,
            AvecPager: true,
            LstPageSize: '10;20;30;40',
            LargeurColonne: [60, 100, 80, 80, 80, 90, 70, 110, 110, 75, 75],
            FiltreColonne: [true, true, true, true, true, false, false, false, true, true, true],
            TriColonne: [true, true, true, true, false, false, false, false, true, true, true],
            ObligColonne: [false, true, true, false, false, false, false, false, true, false, false],
            ModifColonne: [false, true, true, true, false, true, false, false, true, false, false],
            AddColonne: [false, true, true, true, true, false, false, false, true, false, false],
            Default: [null, null, null, null, null, null, null, null, null, false, ValdefManu],
            NomColonne: ["Logo", "Eleve", "Majeur", "Sexe", "Anglais", "Japonais", "Calcul", "Géométrie", "Dte Naissance", "Auto", "Manuel"],
            HauteurTotale: 700
        });

    });
</script>
</head>
<body>
 <div id="divTable"></div>

</body>
</html>

我尝试了 $('#divTable').TableFullOption().GetInfo();，但没有运行。我不知道如何创建一个函数或调用我的函数 GetInfo 并得到我的回应。

Answer 1

借助其他论坛的帮助我的示例插件 (Plugin.js) 是

(function ($, w) {
$.fn.BK = function (options) {
    if (typeof options === "string") {
        return $(this).data("BK")[options].apply(this, [].splice.call(arguments, 1));
    }
    var settings = $.extend(true, {}, {
        BkG: 'yellow',
        GetInfo: function () { return $(this).data("BK").BkG }
    }, options);


    $(this).data("BK", settings).css("background", settings.BkG);
    return this
};
}(jQuery));

然后调用：eleve.js

$(function () {
$('#btnGetSel').button().click(function () {
    alert($('#div1').BK("GetInfo"))
    alert($("#div2").data("BK").BkG)
    return false;
});
});

还有我的 html 页面：

<head runat="server">

<script type="text/javascript" src="/script/jquery.js"></script>
<script type="text/javascript" src="/PluginJquery/eleve.js"></script>
<script type="text/javascript" src="/PluginJquery/Plugin.js"></script>
<script type="text/javascript">
    $(function () {
        $('#div').BK({
            BkG: 'red'
        });

        $('#div1').BK({
            BkG: 'blue'
        });
        $('#div2').BK();
    });
</script>
</head>
<body>
<div id="div">blabla</div>
<div id="div1">blabla</div>
<div id="div2">blabla</div>
<div style="margin-top: 50px;">
    <button id="btnGetSel">Valider</button>
</div>
</body>

与 jquery 组件通信

Communication with jquery component

jquery

call