Pipeworks | New-Region And JQueryUI

New-Region And JQueryUI

1 of 10

New-Region makes it simple to create sites that use JQueryUI to add a little extra kick.

New-Region takes a simple table in PowerShell containing a layer name and content.

By using several different switches, you can customize how this is laid out in JQueryUI.

New-Region -LayerId SimpleTabs -Layer @{            
    "-AsTab"= "If you use -AsTab, the Region will be created as a tab"            
    "Makes Tabs Easy" = "Did you know you can add hashtables together in PowerShell?  This can make really cool layout really simple."            
    "Tabs Will Be Alphabetized" = "By Default, the Layers will be alphabetized"            
    "Unless You Say So" = "But you can specify your own layer order with -Order"            
} -AsTab

-AsTab
Makes Tabs Easy
Tabs Will Be Alphabetized
Unless You Say So

If you use -AsTab, the Region will be created as a tab

Did you know you can add hashtables together in PowerShell? This can make really cool layout really simple.

By Default, the Layers will be alphabetized

But you can specify your own layer order with -Order

2 of 10

-AsAccordian will create a JQueryUI accordian instead

New-Region -LayerId SimpleAccordian -Layer @{            
    "-AsAccordian"= "If you use -AsAccordian, the Region will be created as an accordian"            
    "Makes Accordians Easy" = "Did you know you can add hashtables together in PowerShell?  This can make really cool layout really simple."            
    "Tabs Will Be Alphabetized" = "By Default, the Layers will be alphabetized"            
    "Unless You Say So" = "But you can specify your own layer order with -Order"            
} -AsAccordian

-AsAccordian

If you use -AsAccordian, the Region will be created as an accordian

Makes Accordians Easy

Did you know you can add hashtables together in PowerShell? This can make really cool layout really simple.

Tabs Will Be Alphabetized

By Default, the Layers will be alphabetized

Unless You Say So

But you can specify your own layer order with -Order

3 of 10

-AsPopup will create Popups.

New-Region -LayerId SimplePopup -Layer @{            
    "-AsPopup"= "If you use -AsPopup, the Region will be created as a popup.<br/>
Please, remember that most users really hate popups, but, in case you need it, here it is."            
} -AsPopup

-AsPopup

4 of 10

-AsPopout might be a better alternative. It pops the content out directly below a wide button.

New-Region -LayerId SimplePopout -Layer @{            
    "-AsPopout"= "If you use -AsPopout, then a wide button will toggle if the region is displayed."            
} -AsPopout

-AsPopout

5 of 10

-AsPopdown will create a small button that pops out content directly below.

If multiple items are expanded, they will be stacked.

New-Region -LayerId SimplePopdown -Layer @{            
    "-AsPopdown"= "If you use -AsPopdown, then a button will toggle if the region is displayed, and all displayed regions will be stacked"            
    "A Second Region"= "Here's a second region, so you can see how multiple popdowns expand"            
} -AsPopdown

A Second Region -AsPopdown

6 of 10

-AsWidget will create a widget with a simple header.

New-Region -LayerId SimpleWidget -Layer @{            
    "-AsWidget"= "Makes simple JQueryUI Widgets."                
} -AsWidget

-AsWidget

Makes simple JQueryUI Widgets.

7 of 10

You can also make a region resizable

New-Region -LayerId SimpleResizable -Style @{            
    width='300px';            
    height='300px'            
} -layer @{            
    "-AsResizable"= "-AsResizable makes resizable items."            
} -asresizable

-AsResizable

-AsResizable makes resizable items.

8 of 10

By using the -Content parameter, the layer can avoid having a header.

New-Region -LayerId SimpleResizableWithContent -Style @{            
    width='300px';            
    height='300px'            
} -Content "-AsResizable does not need a layer name." -asresizable

-AsResizable does not need a layer name.

9 of 10

-AsDraggable will let you create drag and drop widgets

New-Region -LayerId SimpleResizableWithContent -Style @{            
    width='300px';            
    height='300px'            
} -Layer @{"Drag Me"= "-AsDraggable lets you make draggable widgets"} -asdraggable

Drag Me

-AsDraggable lets you make draggable widgets

10 of 10

You can combine -AsResizable and -AsDraggable for resizable, draggable widget

New-Region -LayerId SimpleResizableWithContent -Style @{            
    width='300px';            
    height='300px'            
} -Layer @{"Drag Me and Resize Me"= "-AsDraggable and -AsResizable are not exclusive"} -asdraggable -asresizable

Drag Me and Resize Me

-AsDraggable and -AsResizable are not exclusive