我创建了一个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
并得到我的回复。
答案 0 :(得分:0)
在其他论坛的帮助下 我的示例插件(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>