JavaScript is required. Please enable it to continue.
Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
<span id="UInvDropdown1" data-uinv="dropdown" class="UInvDropdown" data-bagname="Items" data-label="''UInv Dropdown List 1 (autofocus):''" oninput="inputevent(event, this)" autofocus></span>test <span id="UInvDropdown2" data-uinv="dropdown" data-optgroup="type" class="UInvDropdown" data-bagname="Items" data-label="''UInv Dropdown List 2 (autogroup):''" oninput="inputevent(event, this)"></span>test <span id="UInvDropdown3" data-uinv="dropdown" data-optgroup="type { weapon: Weapons, clothing: Clothes, *: Other Items }" class="UInvDropdown" data-bagname="Items" data-label="''UInv Dropdown List 3 (custom groups):''" oninput="inputevent(event, this)"></span>test <span id="UInvDropdown4" data-uinv="dropdown" data-optgroup="type { weapon: Weapons }" class="UInvDropdown" data-bagname="Items" data-label="''UInv Dropdown List 4 (weapons only):''" oninput="inputevent(event, this)"></span>test <span id="UInvDropdown5" data-uinv="dropdown" data-optgroup="type { clothing: Clothes, weapon: Weapons, *: Other Items }" class="UInvDropdown" data-bagname="Items" data-itemdescriptionproperty="image" data-itemnameproperty="singular" data-label="''UInv Dropdown List 5 (alternate labels):''" oninput="inputevent(event, this)"></span>test <span id="event"></span> <<button "delete suit">> <<run UInv.DeleteItem("Items", "suit")>> <<run $(".UInvDropdown").each(function () { this.refresh(); })>> <</button>> <<set _weapons = ["dagger", "heavy mace", "shortsword"]>><<button "delete random weapon">><<if _weapons.length > 0>> <<run UInv.DeleteItem("Items", _weapons.pluck())>> <<run $(".UInvDropdown").each(function () { this.refresh(); })>> <</if>><</button>> <<button "delete random item">><<if UInv.GetItemCount("Items") > 0>> <<run UInv.DeleteItem("Items", UInv.GetRandomItem("Items"))>> <<run $(".UInvDropdown").each(function () { this.refresh(); })>> <</if>><</button>> <<button "add a dagger">> <<run UInv.AddItem("Items", "dagger")>> <<run $(".UInvDropdown").each(function () { this.refresh(); })>> <</button>> <<button "toggle autofocus property">><<run $("#UInvDropdown1")[0].autofocus = !$("#UInvDropdown1")[0].autofocus>><</button>> <<button "get selectedIndex">><<run alert($("#UInvDropdown1")[0].selectedIndex)>><</button>> <<button "set selectedIndex to 1">><<set $("#UInvDropdown1")[0].selectedIndex = 1>><</button>> <<button "set selectedIndex to 2">><<set $("#UInvDropdown1")[0].selectedIndex = 2>><</button>> <<button "toggle disabled on option 2">><<set $("#UInvDropdown1")[0].item(2).disabled = !$("#UInvDropdown1")[0].item(2).disabled>><</button>> <<button "toggle disabled on all options">> <<for _i = 0; _i < $("#UInvDropdown1")[0].length; _i++>> <<set $("#UInvDropdown1")[0].item(_i).disabled = !$("#UInvDropdown1")[0].item(_i).disabled>> <</for>> <</button>> <<button "toggle control disabled">><<set $("#UInvDropdown2")[0].disabled = !$("#UInvDropdown2")[0].disabled>><</button>> <<button "test scroll up">><<set $("#UInvDropdown1")[0].selectedIndex-->><</button>> <<button "test scroll down">><<set $("#UInvDropdown1")[0].selectedIndex++>><</button>> <<button "get aria-activedescendant">><<run alert($("#UInvDropdown1")[0]["aria-activedescendant"])>><</button>> <<button 'console.log($("#UInvDropdown1"))'>><<run console.log($("#UInvDropdown1"))>><</button>> <<button 'console.log($("#UInvDropdown1")[0].item(2))'>><<run console.log($("#UInvDropdown1")[0].item(2))>><</button>> <span id="UInvDropdown6" data-uinv="dropdown" class="UInvDropdown" data-bagname="X" data-label="''UInv Dropdown List 6 (empty):''" oninput="inputevent(event, this)"></span>test ---- ''Standard HTML dropdown and listbox {{{<select>}}} elements:'' Required + values + "Pick" selcted + midsize disabled: <select id="car-type1" oninput="inputevent(event, this)" required aria-label="Standard dropdown example"> <option value="" selected>Pick an option</option> <option value="1">Compact car</option> <option value="2" disabled>Midsize car</option> <option value="3">Full size car</option> <option value="4">SUV</option> <option value="5">Luxury</option> <option value="6">Truck</option> <option value="7">Van</option> </select> Multiple + size="5" + "Pick" selected + midsize disabled: <select id="car-type2" oninput="inputevent(event, this)" multiple size="5" aria-label="Multiselect listbox example"> /* autofocus */ <option selected>Pick an option</option> <option>Compact car</option> <option disabled>Midsize car</option> <option>Full size car</option> <option>SUV</option> <option>Luxury</option> <option>Truck</option> <option>Van</option> </select> <<button "toggle disabled on option 2">><<set $("#car-type2")[0].item(2).disabled = !$("#car-type2")[0].item(2).disabled>><</button>> <<button 'toggle $("#car-type2") focus'>><<run $("#car-type2")[0].autofocus = !$("#car-type2")[0].autofocus>><</button>> <<button 'get $("#car-type2")'>><<run console.log($("#car-type2"))>><</button>> <<button 'err $("#car-type2")'>><<run $("#car-type2").oninput = "alert('hello')">><</button>> Fonts set: <select id="FontName" oninput="inputevent(event, this)" aria-label="Dropdown with option groups example"> /* Intentionally left out "Comic Sans" and "Impact". */ <optgroup label="Sans-Serif Fonts (recommended)"> <option style="font-family:Arial" value="Arial" selected="selected">Arial</option> <option style="font-family:'Arial Black'" value="'Arial Black'">Arial Black</option> <option style="font-family:Helvetica" value="Helvetica">Helvetica</option> <option style="font-family:'Lucida Sans Unicode'" value="'Lucida Sans Unicode'">Lucida Sans Unicode</option> <option style="font-family:Tahoma" value="Tahoma">Tahoma</option> <option style="font-family:'Trebuchet MS'" value="'Trebuchet MS'">Trebuchet MS</option> <option style="font-family:Verdana" value="Verdana">Verdana</option> </optgroup> <optgroup label="Serif Fonts"> <option style="font-family:Bookman" value="Bookman">Bookman</option> <option style="font-family:Garamond" value="Garamond">Garamond</option> <option style="font-family:Georgia" value="Georgia">Georgia</option> <option style="font-family:Palatino" value="Palatino">Palatino</option> <option style="font-family:'Palatino Linotype'" value="'Palatino Linotype'">Palatino Linotype</option> <option style="font-family:Times" value="Times">Times</option> <option style="font-family:'Times New Roman'" value="'Times New Roman'">Times New Roman</option> </optgroup> <optgroup label="Monospace Fonts"> <option style="font-family:Courier" value="Courier">Courier</option> <option style="font-family:'Courier New'" value="'Courier New'">Courier New</option> <option style="font-family:'Lucida Console'" value="'Lucida Console'">Lucida Console</option> </optgroup> </select> ---- ''CheckboxPlus:'' <<set $checked = true>><<checkboxPlus "$checked" "CheckboxPlus is awesome!">>
/* <<checkboxPlus>> widget This widget allows you to display a custom checkbox which sets a SugarCube variable, displays a (clickable) label, and satisfies accessibility guidelines for users with impairments (usable via the keyboard with TAB, SHIFT+TAB, and SPACE keys). The checkboxes are also larger, to make them easier to see and to click on for mobile devices. Usage: <<checkboxPlus "variableName" "text" ["className"]>> The value of the checkbox would then be tied to a variable, which is passed to the widget as a string. All story variables passed to the widget will be set to either a Boolean true or false. If the variable had a "truthy" value, then the checkbox will be checked. The "className" is an optional parameter, which adds that CSS class to the text. Example: <<checkboxPlus "$EnabledOp" "Enable Option" "blueText">> */ <<widget "checkboxPlus">> /* Make sure the variable passed in is a boolean. */ <<set State.setVar($args[0], !!State.getVar($args[0]))>> <<if ndef _checkboxIDno>> /* Start checkbox IDs at 1. */ <<set _checkboxIDno = 1>> <<else>> /* Next checkbox ID. */ <<set _checkboxIDno++>> <</if>> <<set _checkboxData = "'" + $args[0] + "'">> <<if def $args[2]>> <<set _cbStyle = " " + $args[2]>> <<else>> <<set _cbStyle = "">> <</if>> /* Display checkbox. */ <span class="chkbox" tabindex="0" onkeypress="if ((event.key == ' ') || (event.key == 'Spacebar')) { $(this).find('input[type=\'checkbox\']').trigger('click'); return false; }"> <<print '<input type="checkbox" id="checkbox_' + _checkboxIDno + '" tabindex="-1" class="cbhidden" onchange="SugarCube.State.setVar(' + _checkboxData + ', this.checked)" data-var="' + $args[0] + '"' + (State.getVar($args[0]) ? ' checked' : '') + '>'>> <label @for="'checkbox_' + _checkboxIDno" @class="'chklabel' + _cbStyle"> $args[1] </label> </span> <</widget>> /* <<checkboxPlus>> Widget - End */
<<if !UInv.BagExists("Items")>> <<run UInv.CreateBag("Items")>> <<run UInv.AddItem("Items", "belt")>> <<run UInv.AddItem("Items", "dagger", 2)>> <<run UInv.AddItem("Items", "gold coin", 50)>> <<run UInv.AddItem("Items", "heavy mace")>> <<run UInv.AddItem("Items", "pants")>> <<run UInv.AddItem("Items", "shoes")>> <<run UInv.AddItem("Items", "shortsword")>> <<run UInv.AddItem("Items", "suit")>> <</if>>