Page 1 of 1
BlockUI
Posted: Thu Jun 08, 2017 10:09 am
by Peter
Hello,
if you want to block your UI (because you have a long running background process like HttpRequest or something else) you can use the $.blockUI() - Command (in JavaScript mode).
Here is a sample code how to use it:
Code: Select all
Enumeration
#Window
#Button
#Timer
EndEnumeration
Procedure BlockUI(Message.s)
! $.blockUI({ message: v_message });
EndProcedure
Procedure UnblockUI()
! $.unblockUI();
EndProcedure
Procedure TimerEvent()
UnblockUI()
RemoveWindowTimer(#Window, #Timer)
EndProcedure
Procedure ButtonEvent()
BlockUI("<h1>Waiting 3 seconds...</h1>")
AddWindowTimer(#Window, #Timer, 3000) ; Wait 3 Seconds...
BindEvent(#PB_Event_Timer, @TimerEvent(), #Window)
EndProcedure
OpenWindow(#Window, 0, 0, 300, 100, "BlockUI example", #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_ScreenCentered)
ButtonGadget(#Button, 10, 10, 200, 30, "Block UI for 3 seconds")
BindGadgetEvent(#Button, @ButtonEvent())
You can get further informations here:
http://malsup.com/jquery/block/
Greetings ... Peter
Re: BlockUI
Posted: Mon Dec 18, 2017 8:50 am
by SparrowhawkMMU
+1 very useful and cleaner than what I am currently using.
Re: BlockUI
Posted: Tue Jan 02, 2018 9:21 pm
by bbanelli
Fantastic trick n' tip, Peter, as always!!!
Re: BlockUI
Posted: Sat Jun 23, 2018 12:50 pm
by munfraid
Thanks very much for this great Tip, Peter! It's so easy and works like charme. I put a spinner using this code:
Code: Select all
BlockUI("<p><i class='fa fa-spinner fa-spin fa-4x' aria-hidden='true'></i></p>")
The spinner is shown, but any idea how I can remove the white box in the background? Would like to show just the spinner itself.
Re: BlockUI
Posted: Tue Oct 15, 2019 9:40 am
by Peter
Hallo,
besides the possibility to block the entire screen, you can also block individual windows or gadgets.
The following code shows how to do this:
Code: Select all
Procedure BlockUI(Message.s)
! $.blockUI({ message: v_message });
EndProcedure
Procedure UnblockUI()
! $.unblockUI();
EndProcedure
Procedure BlockWindow(Window, Message.s)
If IsWindow(Window)
Protected WID = WindowID(Window)
! $(v_wid.content.parentElement.parentElement).block({ message: v_message });
EndIf
EndProcedure
Procedure UnblockWindow(Window)
If IsWindow(Window)
Protected WID = WindowID(Window)
! $(v_wid.content.parentElement.parentElement).unblock();
EndIf
EndProcedure
Procedure BlockGadget(Gadget, Message.s)
If IsGadget(Gadget)
Protected GID = GadgetID(Gadget)
! $(v_gid.div).block({ message: v_message });
EndIf
EndProcedure
Procedure UnblockGadget(Gadget)
If IsGadget(Gadget)
Protected GID = GadgetID(Gadget)
! $(v_gid.div).unblock();
EndIf
EndProcedure
; Demo
CompilerIf #PB_Compiler_IsMainFile
Enumeration
#Window
#btnBlockScreen
#btnBlockWindow
#btnBlockGadget
#Gadget
EndEnumeration
Enumeration
#timBlock
EndEnumeration
Global BlockType.s
Procedure timBlockEvent()
Select BlockType
Case "Screen"
UnblockUI()
Case "Window"
UnblockWindow(#Window)
Case "Gadget"
UnblockGadget(#Gadget)
EndSelect
RemoveWindowTimer(#Window, #timBlock)
DisableGadget(#btnBlockScreen, #False)
DisableGadget(#btnBlockWindow, #False)
DisableGadget(#btnBlockGadget, #False)
EndProcedure
Procedure BlockIt()
Select BlockType
Case "Screen"
BlockUI("<h1>Waiting 2 seconds....</h1>")
Case "Window"
BlockWindow(#Window, "<h2>Waiting 2 seconds....</h2>")
Case "Gadget"
BlockGadget(#Gadget, "<h3>Waiting 2 seconds....</h3>")
EndSelect
AddWindowTimer(#Window, #timBlock, 2000)
BindEvent(#PB_Event_Timer, @timBlockEvent(), #Window, #timBlock)
DisableGadget(#btnBlockScreen, #True)
DisableGadget(#btnBlockWindow, #True)
DisableGadget(#btnBlockGadget, #True)
EndProcedure
; --
Procedure btnBlockScreenEvent()
BlockType = "Screen"
BlockIt()
EndProcedure
Procedure btnBlockWindowEvent()
BlockType = "Window"
BlockIt()
EndProcedure
Procedure btnBlockGadgetEvent()
BlockType = "Gadget"
BlockIt()
EndProcedure
; --
OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 420, 400, "BlockUI-Demo", #PB_Window_ScreenCentered)
ButtonGadget(#btnBlockScreen, 10, 10, 400, 50, "Block screen")
ButtonGadget(#btnBlockWindow, 10, 70, 400, 50, "Block window")
ButtonGadget(#btnBlockGadget, 10, 130, 400, 50, "Block gadget")
ListIconGadget(#Gadget, 10, 190, 400, 200, "Col1", 100, #PB_ListIcon_GridLines)
AddGadgetColumn(#Gadget, 1, "Col2", 100)
AddGadgetItem(#Gadget, -1, "Foo" + #LF$ + "Bar")
BindGadgetEvent(#btnBlockScreen, @btnBlockScreenEvent())
BindGadgetEvent(#btnBlockWindow, @btnBlockWindowEvent())
BindGadgetEvent(#btnBlockGadget, @btnBlockGadgetEvent())
CompilerEndIf
Greetings ... Peter
Re: BlockUI
Posted: Fri Apr 28, 2023 12:36 pm
by Dirk Geppert
Hi guys,
does anyone know how to design the BlockUI message?
I would prefer to just display the spinner, with no border and transparent background.
It seems defined inside jquery.blockUI.min.js under e.blockUI.defaults = {} ... but I have no clue
Code: Select all
BlockGadget(#Gadget, "<p><i class='fa fa-spinner fa-spin fa-4x' aria-hidden='true'></i></p>")
Re: BlockUI
Posted: Fri Apr 28, 2023 2:00 pm
by Peter
You can overwrite the default options like this:
Code: Select all
! $.blockUI.defaults.css.backgroundColor = 'transparent';
! $.blockUI.defaults.css.border = 'none';
! $.blockUI.defaults.css.color = 'lightgreen';
For the full list of options see:
https://malsup.com/jquery/block/#options
Re: BlockUI
Posted: Sat Apr 29, 2023 12:02 pm
by Dirk Geppert
Thank you, Peter!