2015-04-18 2 views
0

Я создал графический компонент JQuery, но я понятия не имею, как даже поиск на Google ...Связи с Jquery компонентом

Идея была бы 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 и получить ответ.

+2

Вы можете уточнить свой вопрос? неясно, чего вы на самом деле хотите достичь. – thrau

+0

Я хочу запросить некоторую информацию по функции в моем pluggin. Но я не знаю, как доступ к моей функции за пределами – YannickIngenierie

+0

Я нахожу часть ** $. Fn.TableFullOption.GetInfo = function() {return true; }; ** и ouside call ** $ ('# div1'). TableFullOption.GetInfo() ** Теперь моя проблема заключается в том, как я могу получить доступ к информации моего конкретного div1 (а не другого div), я пробую $ (this) но не запускать – YannickIngenierie

ответ

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> 
Смежные вопросы