是否可以在Blazor应用程序中集成jQuery UI组件? [英] Is this possible to integrate jQuery UI components inside Blazor application?

问题描述

我想将jQuery UI组件集成到Blazor客户端应用程序中. Spinner组件在jQuery UI中看起来更好.这可能吗?如何整合呢?

I want to integrate the jQuery UI component within the Blazor client-side application. The Spinner component looks better in jQuery UI. is this possible? how to integrate it?

我希望将此Spinner组件集成到我的Blazor客户端应用程序中吗?

I expect to integrate this Spinner component into my Blazor client-side application?

https://jqueryui.com/spinner/

推荐答案

这是为JQuery或JS控件创建包装的方法:

This is the way to create a wrapper for a JQuery or JS control:

1.-在函数中包含JS行为:

1.- Enclose JS behavior in functions:

<script>
  var spinner = null;
  window.myWrapperKSUIfunctions = {

    initialize: function () {
        spinner = $( "#spinner" ).spinner();
        $( "button" ).button();
    },

    dissableclick: function () {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    },

    destroyclick: function () {
      if ( spinner.spinner( "instance" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    },

    getvalueclick: function () {
      alert( spinner.spinner( "value" ) );
    },

    setvalueclick: function () {
      spinner.spinner( "value", 5 );
    },    
  };
</script>

别忘了包括其他JS/JQuery库.

2.-从blazor初始化控件:

2.- Initialize control from blazor:

@code {

    protected async override Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JsRuntime.InvokeAsync<object>("myWrapperKSUIfunctions.initialize");
        }
    }

3.-从blazor调用JS函数:

3.- Call JS function from blazor:

  <button id="disable" 
          @onclick="@( ()=>JustCall("dissableclick") )" >
     Toggle disable/enable
  </button>

@code {

    ...
    protected async Task JustCall(string f)
    {
        wait JsRuntime.InvokeAsync<object>($"myWrapperKSUIfunctions.{f}"); 
    }

在blazorfiddle中查看.

此外，请查看 MatBlazor 控件.

这篇关于是否可以在Blazor应用程序中集成jQuery UI组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！