使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍

简介

在Asp.net Mvc3应用中，使用JQuery UI Widgets可以非常方便地增强页面功能，而我们可以借助Razor视图方式对JQuery UI Widgets进行扩展，以满足更多需求。

方法介绍

步骤1：创建MVC项目

首先，我们需要创建一个MVC3项目，选择Razor视图语法。

步骤2：添加JQuery UI

在项目中添加JQuery UI文件（.css和.js），可以直接引用CDN地址。

步骤3：创建扩展函数

在项目中新建一个JavaScript文件，并定义一个扩展函数，例如我们要扩展一个对话框的关闭按钮：

$.widget("ui.dialog", $.ui.dialog, {
    options: {
        closeText: "关闭"
    },
    _create: function () {
        this._super();
        var buttons = this.uiDialogButtonPane.find("button");
        buttons.each(function () {
            var closeButton = $("<a>")
                .prop("href", "#")
                .addClass("ui-dialog-titlebar-close ui-corner-all")
                .click(function (event) {
                    event.preventDefault();
                    $(this).closest(".ui-dialog-content").dialog("close");
                });
            $("<span>")
                .addClass("ui-icon ui-icon-closethick")
                .appendTo(closeButton);
            $(this).button("option", "icons", { primary: "ui-icon-minusthick" })
                .prepend(closeButton);
        });
    }
});

上述代码中，我们扩展了对话框的关闭按钮，并添加了关闭图标。

步骤4：调用扩展函数

在页面加载时，调用扩展函数：

<script>
    $(function() {
        $("#dialog").dialog();
    });
</script>
<div id="dialog" title="Dialog Title">Test Dialog</div>

创建一个对话框，调用扩展函数。

示例说明

示例1：JQuery UI日历控件

我们可以通过扩展JQuery UI日历控件，在弹出框中显示日历。首先，我们需要在JavaScript文件中创建一个扩展函数，以增加日历显示功能：

$.widget("ui.datepicker", $.ui.datepicker, {
    options: {
        showOn: 'button',
        buttonText: '日历选择',
        buttonImageOnly: false,
        buttonImage: ''
    },
    _create: function() {
        this._super();
        var self = this;
        this.dpDiv.after($('<button>eXtend DatePicker</button>').click(function() {
            $(self._input)
                .datepicker('hide')
                .blur();
            $('<div id="win"></div>')
                .html(self.dpDiv)
                .dialog({
                    title: '日历',
                    modal: true
                });
        }));
    }
});

上述代码中，我们扩展了日历控件，增加了一个“eXtend DatePicker”的按钮，点击该按钮，可以引用JQuery的对话框组件，并将日历控件显示在弹出框中。在页面中，调用日历控件：

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/extendUI.js"></script>
<h2>Extending jQuery UI datepicker</h2>
<input type="text" id="datepicker" />
<script>
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

示例2：表格排序

我们也可以扩展JQuery UI的表格排序功能。首先，我们需要在JavaScript文件中创建一个函数：

$.widget("ui.sortable", $.ui.sortable, {
    _mouseStart: function(event, overrideHandle, noActivation) {
        var i, body,
            o = this.options;
        this.currentContainer = this;

        //Create and append the visible helper
        this.helper = this._createHelper(event);

        //Cache the helper size
        this._cacheHelperProportions();

        //If ddmanager is used for droppables droppable hover class (ui-state-hover) shouldn't be added
        //    since this helper is never moved out of the current container
        if($.ui.ddmanager) {
            $.ui.ddmanager.current = this;
        }

        //Prepare variables for position generation
        this._cacheMargins();

        //The element's absolute position on the page minus margins
        this.cssPosition = this.helper.css("position");
        this.scrollParent = this.helper.scrollParent(true);
        this.offset = this.currentItem.offset();
        this.offset = {
            top: this.offset.top - this.margins.top,
            left: this.offset.left - this.margins.left
        };

        //Store helper option to later restore after canceling mousecapture
        this.originalPosition = this._generatePosition(event);
        this.originalPageX = event.pageX;
        this.originalPageY = event.pageY;

        //Adjust the mouse offset relative to the helper if 'cursorAt' is supplied
        if(o.cursorAt) {
            this._adjustOffsetFromHelper(o.cursorAt);
        }

        //Cache the former DOM position
        this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };

        //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
        if(this.helper[0] !== this.currentItem[0]) {
            this.currentItem.hide();
        }

        //Create the placeholder
        this._createPlaceholder();

        //Only after we got the placeholder, force creation of the helper in case we need to
        // adjust the placeholder offset to it
        if(o.helper === "original" && !overrideHandle) {
            this._setPositionRelativeToSegment(this._generatePosition(event, true));
        }

        if(!noActivation) {
            for(i = this.containers.length - 1; i >= 0; i--){
                this.containers[i]._trigger("activate", event, this);
            }
        }

        //Prepare possible droppables
        if($.ui.ddmanager) {
            $.ui.ddmanager.dragStart(this, event);
        }

        this.helper.addClass("ui-sortable-helper");
        this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
        return true;
    },
});

上述代码中，我们扩展了表格排序控件，以满足更多的需求。

为了使用该扩展函数，在页面中需要调用表格排序控件：

@{
    ViewBag.Title = "Sortable table";
}
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<script src="~/Scripts/extendUI.js"></script>
<h2>Sortable table</h2>
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Date</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Test 1</td>
            <td>Test 1 type</td>
            <td>2018-01-01</td>
            <td>$100.00</td>
        </tr>
        <tr>
            <td>Test 2</td>
            <td>Test 2 type</td>
            <td>2018-02-02</td>
            <td>$200.00</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test 3 type</td>
            <td>2018-03-03</td>
            <td>$300.00</td>
        </tr>
        <tr>
            <td>Test 4</td>
            <td>Test 4 type</td>
            <td>2018-04-04</td>
            <td>$400.00</td>
        </tr>
    </tbody>
</table>
<script>
    $(function () {
        $("#table tbody").sortable({
            helper: function (event, ui) {
                ui.children().each(function () {
                    $(this).width($(this).width());
                });
                return ui;
            },
            stop: function (event, ui) {
                ui.item.children("td").each(function () {
                    $(this).width($(this).width());
                });
            }
        });
    });
</script>

上述代码中，我们使用了自定义的helper函数和stop函数，以满足我们的需求。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：使用Asp.net Mvc3 Razor视图方式扩展JQuery UI Widgets方法介绍 - Python技术站