与jquery组件通信答案

【问题标题】：Communication with jquery component与jquery组件通信
【发布时间】：2015-04-18 12:45:59
【问题描述】：

我创建了一个 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 并得到我的回应。

【问题讨论】：

你能澄清你的问题吗？目前尚不清楚您真正想要实现什么
我想通过插件中的一个函数询问一些信息。但我不知道如何在外面访问我的功能
我找到了一部分$.fn.TableFullOption.GetInfo = function () {return true; }; 和 ouside 调用 $('#div1').TableFullOption.GetInfo() 现在我的问题是如何访问我的特定 div1（而不是其他 div）的信息我尝试 $(this) 但不要运行
我尝试构建一个简单的示例here 在我的示例中，当我单击按钮时，我希望 getInfo 返回“蓝色”。也许最好解释一下我想要什么......

标签： jquery call

【解决方案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>

【讨论】：