Jquery对象原型设置在自定义对象上

时间:2014-06-20 00:35:52

标签: jquery object scope prototype

我认为我对此范围感到困惑。这是我的代码:

Object.defineProperty(jQuery.fn, "Horiz", {//Gets or sets the element's ControlType to: "Grid" 
    get: function () {
        Debug.WriteLine("Get");
        Debug.WriteLine($(this).attr("class"));
    },
    set: function () {
        return $(this).attr("data-ControlType","Grid")
    }
}).bind(this);

当我从函数中调用它时,我会在undefined中声明它。但是,如果我使用$(.UI.SearchBox).Horiz;在另一个函数中通过jquery搜索它,horiz函数将对象定义为this

function pagePop() {
    Debug.WriteLine("PagePop init...");
    var pageHeader = Header("PageTitle", "Receiving Report >");//Creates the page header
    var subHeader = Header("PageSubTitle","Container Search")
    Debug.WriteLine("Header:  "+$(pageHeader).html());
    $("#pageCanvas").append(pageHeader);
    $("#pageCanvas").append(subHeader);

    var PageGrid = new System.UI.Control.Grid();
    $(PageGrid.Node).appendTo("#pageCanvas");
    PageGrid.Width = 1280;

    var searchBoxRow = new System.UI.Control.RowDefinition();
    searchBoxRow.Width = 1280;
    searchBoxRow.Height=100;
    $(searchBoxRow.Node).appendTo(PageGrid.Node);

    var deatilsGridRow = new System.UI.Control.RowDefinition();
    deatilsGridRow.Width = 1280;
    deatilsGridRow.Height = 560;
    $(PageGrid.Node).append(deatilsGridRow.Node);

    var ContainerSearchBox = new SearchBox();
    $(searchBoxRow.Node).append(ContainerSearchBox.Node);
    ContainerSearchBox.Width = 1080;
    ContainerSearchBox.Height = 40;
    ContainerSearchBox.PlaceholderText = "Container Number";
    $(ContainerSearchBox).Horiz;//Calls the horiz function through object properties

    test();
}

function test() {
    Debug.WriteLine("Test init");
    $(".UI_SearchBox").Horiz;
}

为什么当我从$(ContainerSearchBox).Horiz函数调用pagePop()时,this函数中horiz未定义test()。然而,当我从horiz函数调用它时,this函数可以正确地将对象视为System.UI.Control = {}; SearchBox: function () {//Creates a default styled searchbox this.Node; //Creates the wrapper for the textbox and the button this.nodeCreate=function(){ var wrapper = $("<div/>", { class: "UI_SearchBox" }); var inputField = $("<input/>", { type: "text", class: "UI_SearchBox_Input" }); $(inputField).appendTo(wrapper); var searchBtn = $("<div/>", { class: "UI_SearchBox_Button" }); //Adds Mouse event behaviors $(searchBtn).mousedown(function () { $(this).css("background-image","url("+System.UI.Graphics.Icon("Search","PNG","Light")+")") $(this).css("background-color", SystemTheme); }) $(searchBtn).mouseup(function () { $(this).css("background-image", "url(" + System.UI.Graphics.Icon("Search", "PNG", "Dark") + ")"); $(this).css("background-color", "white"); }) $(searchBtn).mouseleave(function () { $(this).css("background-image", "url(" + System.UI.Graphics.Icon("Search", "PNG", "Dark") + ")") $(this).css("background-color", "white"); }) $(searchBtn).appendTo(wrapper); this.Node=wrapper; } this.nodeCreate(); } 。有人可以向我解释一下吗?另外我如何修复代码以使其完成我想要的操作?任何帮助,将不胜感激。感谢。

编辑:这是containerSearchBox的代码:

{{1}}

0 个答案:

没有答案