Warning: Module 'xhprof' already loaded in Unknown on line 0 devwiki wiki http://.wmflabs.org/wiki/Main_Page MediaWiki 1.28.0-alpha first-letter Media Special Talk User User talk Testwiki Testwiki talk File File talk MediaWiki MediaWiki talk Template Template talk Help Help talk Category Category talk Module Module talk Main Page 0 1 1 2014-12-11T18:49:16Z MediaWiki default 0 wikitext text/x-wiki <strong>MediaWiki has been successfully installed.</strong> Consult the [//meta.wikimedia.org/wiki/Help:Contents User's Guide] for information on using the wiki software. == Getting started == * [//www.mediawiki.org/wiki/Special:MyLanguage/Manual:Configuration_settings Configuration settings list] * [//www.mediawiki.org/wiki/Special:MyLanguage/Manual:FAQ MediaWiki FAQ] * [https://lists.wikimedia.org/mailman/listinfo/mediawiki-announce MediaWiki release mailing list] * [//www.mediawiki.org/wiki/Special:MyLanguage/Localisation#Translation_resources Localise MediaWiki for your language] glba3g2evzm40dqnqxegze66eqibkvb 6 1 2014-12-11T18:59:48Z Admin 1 wikitext text/x-wiki OOjs UI Input widgets, which include '''TextInputWidget'''s, '''CheckboxInput'''s, and '''ButtonInput'''s, are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which checks the value of an input before it is accepted. An input widget that collects zip codes might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki name, an input filter could also be used to accept only values that start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the <code>inputFilter</code> config option, which takes the name of the filter function. InputWidgets support a number of methods, including <code>setRTL( isRTL )</code>, which can be used to set the direction of the input (left-to-right or right-to-left) and <code>setValue()</code> and <code>getValue()</code>, which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs == '''TextInputWidget'''s can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder copy or an initial value. Text inputs also be configured with an optional validation- pattern, which is used to determine if a value is valid or not. Create a text input with the '''TextInputWidget''' class: <ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> Create a multiline input with the '''multiline''' option: <ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> Create an autosized input with the '''autosize''' and '''maxRows''' options: <ooui-demo type="TextInput"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4 } </ooui-demo> Add placeholder copy with the '''placeholder''' option: <ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> Make the value read-only with the '''readOnly''' option: <ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> Change the type of the input with the '''type''' config: <ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> Specify a validation pattern with the '''validate''' config: <ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> Use '''icon''', '''indicator''', and '''disabled''' config options: <ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> '''TextInputWiget'''s support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInput code-level documentation]. == Checkbox inputs == Needs support for GroupElements == Button inputs == '''ButtonInputWidget'''s, together with '''FormLayout'''s, are used to submit HTML forms. By default, '''ButtonInputWidget'''s are rendered as an HTML <code><button/></code> and can be configured with options such as icons, indicators, and a value. ButtonInputs can also be rendered as an HTML <code><input/></code> using the '''useInputTag''' configuration. Widgets configured to be an <code><input/></code> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidget'''s should only be configured as an <code><input/></code> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: <ooui-demo type="ButtonInput"> { "label": "Input button", "icon": "check", "value": "Check", "type": "button" } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget code-level documentation]. == Popups == Not implemented in the PHP interface yet == ProgressBars == Progress bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes: * Determinate '''ProgressBarWidget'''s show the percent of an operation that is complete. Configure a progress bar with an initial percent-complete by setting the ‘<code>progress</code>’ option to an integer reflecting the desired percentage. * Indeterminate '''ProgressBarWidget'''s use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages. To create an indeterminate progress bar, set the ‘progress’ option to ‘false.’ Create a determinate progress bar with a '''ProgressBarWidget''' that uses a percentage: <ooui-demo type="ProgressBar" progress="33" /> Create an indeterminate progress bar by setting the <code>progress</code> option to ‘false’: <ooui-demo type="ProgressBar">{"progress": false}</ooui-demo> Use '''ProgressBarWidget''' methods to set and get the value of the progress (<code>setProgress()</code> and <code>getProgress()</code> ).  For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProgressBarWidget code-level documentation]. tmij4bpbdrd2wxlp0smgu2zdf8tn4x1 101 6 2015-01-29T18:07:58Z Admin 1 Redirected page to [[OOjs UI]] wikitext text/x-wiki #redirect [[OOjs UI]] 9dpsnlp8xmzxxgu68ean2mishypyqpb 152 101 2015-02-25T13:09:41Z Maintenance script 6 Vagrant import wikitext text/x-wiki '''Welcome to MediaWiki-Vagrant!''' * [//www.mediawiki.org/wiki/MediaWiki-Vagrant MediaWiki-Vagrant help] * [//www.mediawiki.org/wiki/Help:Contents MediaWiki help] == Help for enabled roles == :''(run <code>vagrant roles help</code> in the directory where you installed MediaWiki-Vagrant to get help about enabling roles)'' {{Special:Prefixindex/VagrantRole}} i95desbl1wpizqtoakfts6kc52kihvv 170 152 2015-02-27T10:49:50Z Admin 1 Redirected page to [[OOjs UI]] wikitext text/x-wiki #redirect [[OOjs UI]] 9dpsnlp8xmzxxgu68ean2mishypyqpb 181 170 2015-03-24T15:30:19Z Admin 1 Create skeleton wikitext text/x-wiki This is the home of the Living Style Guide * [[Introduction]] * [[Terminology]] * Elements ** [[Buttons]] ** [[Inputs]] ** [[Checks, radios and toggles]] ** [[Checkboxes]] * [[Guidance]] * [[Progress and loading indicators]] * [[Dialogs]] * [[Form layouts]] * [[Animation]] * [[Content views]] * [[FAQ]] 0ivvpo34jlcvanwckuy6pkn2739j4j2 183 181 2015-03-26T14:15:04Z Maintenance script 6 Vagrant import wikitext text/x-wiki <!-- If you are reading the source wikitext of the main page: This page is created by Vagrant, but it is safe to do changes by editing it. Automatic updates will happen via [[Template:Main Page]]. If you are reading puppet/modules/mediawiki/files/main_page.wiki: DO NOT MODIFY THIS FILE! Updates would cause all local changes to be overwritten. If you want to add content to the main page, use main_page_template.wiki instead. --> {{Main Page}} qaya2im49smft4no91oh1yq6d2bcedz Privacy policy 0 2 2 2013-04-26T16:10:46Z Admin 1 wikitext text/x-wiki This is a testing wiki governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]. afk29g4tw638nh1oanuo064ncsh397g Testwiki:Privacy policy 4 3 3 2013-04-26T16:10:23Z Admin 1 wikitext text/x-wiki This is a testing wiki governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]. afk29g4tw638nh1oanuo064ncsh397g Testwiki:Copyrights 4 4 4 2013-04-26T16:12:22Z Admin 1 Created page with "This is a testing wiki governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]." wikitext text/x-wiki This is a testing wiki governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]. afk29g4tw638nh1oanuo064ncsh397g MediaWiki:Copyrightwarning2 8 5 5 2013-04-28T14:31:30Z Admin 1 Created page with "Use of this wiki is governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]. Please note that all contributions to {{SITENAME..." wikitext text/x-wiki Use of this wiki is governed by the [https://www.mediawiki.org/wiki/Wikimedia_Labs/Terms_of_use Wikimedia Labs terms of Use]. Please note that all contributions to {{SITENAME}} may be edited, altered, or removed by other contributors. If you do not want your writing to be edited mercilessly, then do not submit it here.<br /> You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource (see $1 for details). '''Do not submit copyrighted work without permission!''' e7zs6nhitffcrt175x40fkrvg9sb530 OOjs 0 6 7 2015-01-15T22:41:47Z Krinkle 0 wikitext text/x-wiki '''OOjs''' (short for "Object-oriented JavaScript") is a JavaScript library for working with objects. Features include [[OOjs/Inheritance#Classes|inheritance]], [[OOjs/Inheritance#Mixins|mixins]], [[OOjs/Inheritance#Static methods and properties|static inheritance]] and additional utilities for working with objects and arrays. It also provides an [[OOjs/Events|EventEmitter]] mixin for event-driven programming, and a [[OOjs/Registries and factories|factory]] pattern for decoupling consumers of functionality from any particular class's implementation. == Features == [[OOjs/Inheritance|'''Inheritance''']] <code>OO.inheritClass( childClass, parentClass )</code> Extend prototype and static methods and properties of child constructor from a parent constructor. <code>OO.mixinClass( childClass, parentClass )</code> Copy prototype and static methods and properties to a child constructor from a parent constructor. <code>OO.initClass( baseClass )</code> Initialize a base class to be inherited by, or mixed into, a child class. Only required for classes that do not inherit or mixin other classes. [[OOjs/Events|'''Events''']] <code>OO.EventEmitter</code> Allow event handlers to be attached, called when events occur, and detached. '''[[OOjs/Registries and factories|Registries and Factories]]''' <code>OO.Registry</code> Provide a simple map interface for associating arbitrary data with a symbolic name. <code>OO.Factory</code> Registry of classes with instantiation abstraction. '''Utilities''' See the [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO API documentation] for a complete reference of available utilities. == Compatibility == OOjs requires an '''ECMAScript 3''' compliant environment. Polyfills are used when needed to provide some ECMAScript 5 features. It is packaged to be run in either Web browsers or Node.js. While not dependent on jQuery, there is an optimized package that uses some of jQuery's features, resulting in less code being sent to the client. ==Namespace== In the presence of a module system, such as when using with Node.js, OOjs exports all of its classes and methods. In other environments, such as Web browsers, a global variable is created named <code>OO</code>. You may access <code>OO</code> the same way you would access <code>jQuery</code> or <code>mediaWiki.</code> If you are using jsHint, you should add the following to your <tt>.jshintrc</tt> file. <source lang="javascript"> "predef": [ "OO" ] </source> == See also == * [[OOjs UI]] ==External links== * [https://git.wikimedia.org/tree/?r=oojs/core.git Source code on git.wikimedia.org] ([https://github.com/wikimedia/oojs GitHub mirror]) * [https://npmjs.org/package/oojs Package on npmjs.org] * [[phab:tag/oojs|Phabricator project (issue tracker)]] * [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO API Documentation] __NOTOC__ qh8mho31vm6j9d0z12rhxx4xjkbelrr 8 7 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki '''OOjs''' (short for "Object-oriented JavaScript") is a JavaScript library for working with objects. Features include [[OOjs/Inheritance#Classes|inheritance]], [[OOjs/Inheritance#Mixins|mixins]], [[OOjs/Inheritance#Static methods and properties|static inheritance]] and additional utilities for working with objects and arrays. It also provides an [[OOjs/Events|EventEmitter]] mixin for event-driven programming, and a [[OOjs/Registries and factories|factory]] pattern for decoupling consumers of functionality from any particular class's implementation. == Features == [[OOjs/Inheritance|'''Inheritance''']] <code>OO.inheritClass( childClass, parentClass )</code> Extend prototype and static methods and properties of child constructor from a parent constructor. <code>OO.mixinClass( childClass, parentClass )</code> Copy prototype and static methods and properties to a child constructor from a parent constructor. <code>OO.initClass( baseClass )</code> Initialize a base class to be inherited by, or mixed into, a child class. Only required for classes that do not inherit or mixin other classes. [[OOjs/Events|'''Events''']] <code>OO.EventEmitter</code> Allow event handlers to be attached, called when events occur, and detached. '''[[OOjs/Registries and factories|Registries and Factories]]''' <code>OO.Registry</code> Provide a simple map interface for associating arbitrary data with a symbolic name. <code>OO.Factory</code> Registry of classes with instantiation abstraction. '''Utilities''' See the [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO API documentation] for a complete reference of available utilities. == Compatibility == OOjs requires an '''ECMAScript 3''' compliant environment. Polyfills are used when needed to provide some ECMAScript 5 features. It is packaged to be run in either Web browsers or Node.js. While not dependent on jQuery, there is an optimized package that uses some of jQuery's features, resulting in less code being sent to the client. ==Namespace== In the presence of a module system, such as when using with Node.js, OOjs exports all of its classes and methods. In other environments, such as Web browsers, a global variable is created named <code>OO</code>. You may access <code>OO</code> the same way you would access <code>jQuery</code> or <code>mediaWiki.</code> If you are using jsHint, you should add the following to your <tt>.jshintrc</tt> file. <source lang="javascript"> "predef": [ "OO" ] </source> == See also == * [[OOjs UI]] ==External links== * [https://git.wikimedia.org/tree/?r=oojs/core.git Source code on git.wikimedia.org] ([https://github.com/wikimedia/oojs GitHub mirror]) * [https://npmjs.org/package/oojs Package on npmjs.org] * [[phab:tag/oojs|Phabricator project (issue tracker)]] * [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO API Documentation] __NOTOC__ qh8mho31vm6j9d0z12rhxx4xjkbelrr OOjs UI 0 7 9 2015-01-15T02:33:30Z Jdforrester (WMF) 0 Restore to this version. wikitext text/x-wiki '''OOjs UI''' ([[OOjs|Object-Oriented JavaScript]] – User Interface) is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers. '''The OOjs UI library contains''' * a set of ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended, * a server-side component that generates compatible output in PHP for cases where JavaScript is not supported, * elements that can be easily mixed and matched to create custom user interfaces. OOjs UI is available as a library in [[Core|MediaWiki Core]] as of [[MediaWiki 1.23|version 1.23]]. The library was originally created for use by [[VisualEditor]], which uses it for its entire user interface. * [[OOjs UI/Documentation/About the library|About the Library]] * [[OOjs UI/Documentation/Creating interfaces programmatically|Creating interfaces programmatically]] * [[OOjs UI/Documentation/OOjs primer|OOjs Primer]] * [[OOjs UI/Documentation/Elements|Elements]] ** [[OOjs UI/Documentation/Elements/Groups|GroupElements]] * [[OOjs UI/Documentation/Widgets|Widgets]] ** [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels]] ** [[OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches]] ** [[OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options]] ** [[OOjs UI/Documentation/Widgets/Inputs|Inputs]] ** [[OOjs UI/Documentation/Widgets/Popups|Popups]] ** [[OOjs UI/Documentation/Widgets/Progress bars|Progress bars]] * [[OOjs UI/Documentation/Layouts|Layouts]] ** [[OOjs UI/Documentation/Layouts/Fields and Fieldsets|Fields and Fieldsets]] ** [[OOjs UI/Documentation/Layouts/Forms|Forms]] ** [[OOjs UI/Documentation/Layouts/Grids|Grids]] ** [[OOjs UI/Documentation/Layouts/Stacks and Panels|Stacks and Panels]] ** [[OOjs UI/Documentation/Layouts/Booklets and Pages|Booklets and Pages]] * [[OOjs UI/Documentation/Windows|Windows]] ** [[OOjs UI/Documentation/Windows/Dialogs|Dialogs]] ** [[OOjs UI/Documentation/Windows/Process Dialogs|Process Dialogs]] ** [[OOjs UI/Documentation/Windows/Message Dialogs|Message Dialogs]] * [[OOjs UI/PHP Examples|PHP examples]] 7t79q2egwdkbrj6yvnny0sn1ow68blb 10 9 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki '''OOjs UI''' ([[OOjs|Object-Oriented JavaScript]] – User Interface) is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers. '''The OOjs UI library contains''' * a set of ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended, * a server-side component that generates compatible output in PHP for cases where JavaScript is not supported, * elements that can be easily mixed and matched to create custom user interfaces. OOjs UI is available as a library in [[Core|MediaWiki Core]] as of [[MediaWiki 1.23|version 1.23]]. The library was originally created for use by [[VisualEditor]], which uses it for its entire user interface. * [[OOjs UI/Documentation/About the library|About the Library]] * [[OOjs UI/Documentation/Creating interfaces programmatically|Creating interfaces programmatically]] * [[OOjs UI/Documentation/OOjs primer|OOjs Primer]] * [[OOjs UI/Documentation/Elements|Elements]] ** [[OOjs UI/Documentation/Elements/Groups|GroupElements]] * [[OOjs UI/Documentation/Widgets|Widgets]] ** [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels]] ** [[OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches]] ** [[OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options]] ** [[OOjs UI/Documentation/Widgets/Inputs|Inputs]] ** [[OOjs UI/Documentation/Widgets/Popups|Popups]] ** [[OOjs UI/Documentation/Widgets/Progress bars|Progress bars]] * [[OOjs UI/Documentation/Layouts|Layouts]] ** [[OOjs UI/Documentation/Layouts/Fields and Fieldsets|Fields and Fieldsets]] ** [[OOjs UI/Documentation/Layouts/Forms|Forms]] ** [[OOjs UI/Documentation/Layouts/Grids|Grids]] ** [[OOjs UI/Documentation/Layouts/Stacks and Panels|Stacks and Panels]] ** [[OOjs UI/Documentation/Layouts/Booklets and Pages|Booklets and Pages]] * [[OOjs UI/Documentation/Windows|Windows]] ** [[OOjs UI/Documentation/Windows/Dialogs|Dialogs]] ** [[OOjs UI/Documentation/Windows/Process Dialogs|Process Dialogs]] ** [[OOjs UI/Documentation/Windows/Message Dialogs|Message Dialogs]] * [[OOjs UI/PHP Examples|PHP examples]] 7t79q2egwdkbrj6yvnny0sn1ow68blb OOjs UI/Documentation/Elements 0 8 11 2015-01-15T00:12:37Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Elements]] to [[OOjs UI/Elements]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Elements]] s1gnwng4c4sd2s9dpv8f1gacuzxqew8 12 11 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Elements]] s1gnwng4c4sd2s9dpv8f1gacuzxqew8 OOjs UI/Documentation/Elements/Groups 0 9 13 2015-01-15T00:12:37Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Elements/Groups]] to [[OOjs UI/Elements/Groups]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Elements/Groups]] 65eg4484rgs7mwumgsyxrsjawdyqx7l 14 13 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Elements/Groups]] 65eg4484rgs7mwumgsyxrsjawdyqx7l OOjs UI/Documentation/Widgets 0 10 15 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets]] to [[OOjs UI/Widgets]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets]] ka8tp3pja1e4f6xfa1m75ykn99mtk62 16 15 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets]] ka8tp3pja1e4f6xfa1m75ykn99mtk62 OOjs UI/Documentation/Widgets/Inputs 0 11 17 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Inputs]] to [[OOjs UI/Widgets/Inputs]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Inputs]] kq253gk4vv99be0rwr2msc8t16ebk6q 18 17 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Inputs]] kq253gk4vv99be0rwr2msc8t16ebk6q OOjs UI/Documentation/Widgets/Popups 0 12 19 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Popups]] to [[OOjs UI/Widgets/Popups]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Popups]] cdwuv3cuy52nbtgjs3msuuk6lu8jzxp 20 19 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Popups]] cdwuv3cuy52nbtgjs3msuuk6lu8jzxp OOjs UI/Documentation/Layouts 0 13 21 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts]] to [[OOjs UI/Layouts]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts]] 1pp85ipi7o4z58378080jwwwdz6ge92 22 21 2015-01-16T13:27:33Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts]] 1pp85ipi7o4z58378080jwwwdz6ge92 OOjs UI/Documentation/Layouts/Forms 0 14 23 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Forms]] to [[OOjs UI/Layouts/Forms]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Forms]] 1olis078j37lladvbnmbgpmn2hndclo 24 23 2015-01-16T13:27:34Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Forms]] 1olis078j37lladvbnmbgpmn2hndclo OOjs UI/Documentation/Layouts/Grids 0 15 25 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Grids]] to [[OOjs UI/Layouts/Grids]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Grids]] gjyu97p4adoy1d2g8gxt3d5wcyenx5e 26 25 2015-01-16T13:27:34Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Grids]] gjyu97p4adoy1d2g8gxt3d5wcyenx5e OOjs UI/Documentation/Windows 0 16 27 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows]] to [[OOjs UI/Windows]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows]] bicgqnlfkv4s75qs3a4pcgwzv5y1ivr 28 27 2015-01-16T13:27:34Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows]] bicgqnlfkv4s75qs3a4pcgwzv5y1ivr OOjs UI/Documentation/Windows/Dialogs 0 17 29 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Dialogs]] to [[OOjs UI/Windows/Dialogs]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Dialogs]] dij4kkkydu8lzho7nqthpfzr8e33nnd 30 29 2015-01-16T13:27:34Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Dialogs]] dij4kkkydu8lzho7nqthpfzr8e33nnd OOjs UI/Documentation/About the library 0 18 31 2015-01-15T00:12:35Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/About the library]] to [[OOjs UI/About the library]] wikitext text/x-wiki #REDIRECT [[OOjs UI/About the library]] ou1u5dcuk0hq6wunhfy7jx1t3e9os8q 32 31 2015-01-16T13:29:29Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/About the library]] ou1u5dcuk0hq6wunhfy7jx1t3e9os8q OOjs UI/Documentation/Creating interfaces programmatically 0 19 33 2015-01-15T00:12:36Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Creating interfaces programmatically]] to [[OOjs UI/Creating interfaces programmatically]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Creating interfaces programmatically]] fofq9574uz8dlp4yhgl8818kfmkl2sx 34 33 2015-01-16T13:29:29Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Creating interfaces programmatically]] fofq9574uz8dlp4yhgl8818kfmkl2sx OOjs UI/Documentation/OOjs primer 0 20 35 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/OOjs primer]] to [[OOjs UI/OOjs primer]] wikitext text/x-wiki #REDIRECT [[OOjs UI/OOjs primer]] oiu1dq1qcmzah405x48mk01o182rbi5 36 35 2015-01-16T13:29:30Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/OOjs primer]] oiu1dq1qcmzah405x48mk01o182rbi5 OOjs UI/Documentation/Widgets/Buttons and Switches 0 21 37 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Buttons and Switches]] to [[OOjs UI/Widgets/Buttons and Switches]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Buttons and Switches]] ihm845laj5m1ubpzlkn1qppm286gdcm 38 37 2015-01-16T13:29:30Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Buttons and Switches]] ihm845laj5m1ubpzlkn1qppm286gdcm OOjs UI/Documentation/Widgets/Selects and Options 0 22 39 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Selects and Options]] to [[OOjs UI/Widgets/Selects and Options]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Selects and Options]] 9fu2hqyqtubpr72844bm2ycsto6r57w 40 39 2015-01-16T13:29:30Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Selects and Options]] 9fu2hqyqtubpr72844bm2ycsto6r57w OOjs UI/Documentation/Widgets/Progress bars 0 23 41 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Progress bars]] to [[OOjs UI/Widgets/Progress bars]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Progress bars]] 84ta2jyprx05dxbtd1i9c6y7st6vyhm 42 41 2015-01-16T13:29:30Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Progress bars]] 84ta2jyprx05dxbtd1i9c6y7st6vyhm OOjs UI/Documentation/Layouts/Fields and Fieldsets 0 24 43 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Fields and Fieldsets]] to [[OOjs UI/Layouts/Fields and Fieldsets]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Fields and Fieldsets]] k3uwb9ykxyrtmt17sy9m9thg2ou773o 44 43 2015-01-16T13:29:30Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Fields and Fieldsets]] k3uwb9ykxyrtmt17sy9m9thg2ou773o OOjs UI/Documentation/Layouts/Stacks and Panels 0 25 45 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Stacks and Panels]] to [[OOjs UI/Layouts/Stacks and Panels]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Stacks and Panels]] bbozh7zqj7pm47lae2t54vot1x43edi 46 45 2015-01-16T13:29:31Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Stacks and Panels]] bbozh7zqj7pm47lae2t54vot1x43edi OOjs UI/Documentation/Layouts/Booklets and Pages 0 26 47 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Booklets and Pages]] to [[OOjs UI/Layouts/Booklets and Pages]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Booklets and Pages]] 7lm5vvausph37p93vunyekdzl0o4ohd 48 47 2015-01-16T13:29:31Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Layouts/Booklets and Pages]] 7lm5vvausph37p93vunyekdzl0o4ohd OOjs UI/Documentation/Windows/Process Dialogs 0 27 49 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Process Dialogs]] to [[OOjs UI/Windows/Process Dialogs]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Process Dialogs]] nihyqdczc5lqjvqksdn2joaz9lrhbxp 50 49 2015-01-16T13:29:31Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Process Dialogs]] nihyqdczc5lqjvqksdn2joaz9lrhbxp OOjs UI/Documentation/Windows/Message Dialogs 0 28 51 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Message Dialogs]] to [[OOjs UI/Windows/Message Dialogs]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Message Dialogs]] 9wgp49en61vq9ljrcv0m1lhi3j7450f 52 51 2015-01-16T13:29:31Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Windows/Message Dialogs]] 9wgp49en61vq9ljrcv0m1lhi3j7450f OOjs UI/PHP Examples 0 29 53 2015-01-15T00:13:45Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/PHP]] to [[OOjs UI/PHP Examples]] without leaving a redirect wikitext text/x-wiki There is a more extensive set of examples in the source code repository. First, clone the repo and install it using composer, then have a look at [[:toollabs:oojs-ui/oojs-ui/demos/widgets.php|<code>/demos/widgets.php</code>]]. If you wish to use the library in your project, run <code>composer require oojs/oojs-ui</code>. === Creating a button === To create a button, use the <code>OoUiButtonWidget</code> class. The first and only argument to a button's constructor is its configuration. <source lang="php"> $btn = new OoUiButtonWidget( array( 'label' => 'Click me!' ) ); </source> Before the button is converted to HTML and emitted, the label, target and href can be changed using the <code>setTarget</code> and <code>setHref</code> methods. <source lang="php"> $btn->setLabel( 'Still click me!' ); $btn->setTarget( 'blank' ); $btn->setHref( 'http://example.com' ); </source> The button is now created, and has a label which reads "Still click me!", but is not yet visible to the user, as it must first converted to HTML and echoed into the document: <source lang="php"> echo $btn; </source> <!-- CSA: Don't know how events work on the PHP side yet... maybe not at all? Replace with an example of processing a form submission? Buttons, like all widgets, mixin [[OOjs#Events|EventEmitter]]. To respond to the button being clicked, attach an event handler to the button's <code>click</code> event. <source lang="javascript"> btn.on( 'click', function() { alert( 'I was clicked!' ); } ); </source> --> [[Category:Frontend]] kyfvti8d6r6jmqvgv2d3puellyi5hzq 54 53 2015-01-16T13:29:31Z Admin 1 1 revision imported wikitext text/x-wiki There is a more extensive set of examples in the source code repository. First, clone the repo and install it using composer, then have a look at [[:toollabs:oojs-ui/oojs-ui/demos/widgets.php|<code>/demos/widgets.php</code>]]. If you wish to use the library in your project, run <code>composer require oojs/oojs-ui</code>. === Creating a button === To create a button, use the <code>OoUiButtonWidget</code> class. The first and only argument to a button's constructor is its configuration. <source lang="php"> $btn = new OoUiButtonWidget( array( 'label' => 'Click me!' ) ); </source> Before the button is converted to HTML and emitted, the label, target and href can be changed using the <code>setTarget</code> and <code>setHref</code> methods. <source lang="php"> $btn->setLabel( 'Still click me!' ); $btn->setTarget( 'blank' ); $btn->setHref( 'http://example.com' ); </source> The button is now created, and has a label which reads "Still click me!", but is not yet visible to the user, as it must first converted to HTML and echoed into the document: <source lang="php"> echo $btn; </source> <!-- CSA: Don't know how events work on the PHP side yet... maybe not at all? Replace with an example of processing a form submission? Buttons, like all widgets, mixin [[OOjs#Events|EventEmitter]]. To respond to the button being clicked, attach an event handler to the button's <code>click</code> event. <source lang="javascript"> btn.on( 'click', function() { alert( 'I was clicked!' ); } ); </source> --> [[Category:Frontend]] kyfvti8d6r6jmqvgv2d3puellyi5hzq OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels 0 30 55 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels]] to [[OOjs UI/Widgets/Icons, Indicators, and Labels]] wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Icons, Indicators, and Labels]] ts1ho59ouwevw9ilx0nrqdguiw5duvy 56 55 2015-01-16T13:30:42Z Admin 1 1 revision imported wikitext text/x-wiki #REDIRECT [[OOjs UI/Widgets/Icons, Indicators, and Labels]] ts1ho59ouwevw9ilx0nrqdguiw5duvy OOjs UI/About the library 0 31 57 2015-01-15T00:12:35Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/About the library]] to [[OOjs UI/About the library]] wikitext text/x-wiki '''OOjs UI''' ([[OOjs|Object-Oriented JavaScript]] – User Interface) is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers. '''The OOjs UI library contains''' * a set of ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended, * a server-side component that generates compatible output in PHP for cases where JavaScript is not supported, * elements that can be easily mixed and matched to create custom user interfaces. '''The library provides:''' * '''cross-browser compatibility.''' Interfaces built using library elements will look and act consistently across modern browsers. * '''understandability'''. Interfaces share a common API that is well documented and consistently used. Both the JavaScript and PHP components use the same class and method names. Basic elements are reused throughout the library, along with their APIs. * '''design'''. Themes specify how OOjs UI interfaces should look. A basic theme called Apex is provided by default. Interfaces built within MediaWiki will use the MediaWiki theme instead. This theme is updated to stay in sync with MediaWiki design changes. Additional themes can be created for a custom look and feel. * '''sensible event handling.''' OOjs UI components listen to low-level events and emit a meaningful event at the proper time (i.e., when something actually changes). * responsiveness. When the model changes, the view is updated automatically. * '''efficiency.''' The view is generated and updated client-side, requiring fewer road trips to the server. * '''object-oriented functionality.''' The library provides support for mixins and inheritance, including the inheritance of static properties. * '''openness.''' The library is open source and released under the MIT licence. OOjs UI is available as a library in [[Core|MediaWiki Core]] as of [[MediaWiki 1.23|version 1.23]]. The library was originally created for use by [[VisualEditor]], which uses it for its entire user interface. == Compatibility, Dependencies, and Installation == OOjs UI is compatible with most modern web browsers, and work toward supporting additional browsers is ongoing. See the [[VisualEditor/Target browser matrix|VisualEditor documentation]] to get a general sense for which browsers are currently supported. Note that OOjs UI supports a superset of these browsers, as VisualEditor compatibility is especially restricted due to its use of [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable contentEditable]. The OOjs UI library depends on [[OOjs]] and [http://jquery.com/ jQuery,] both of which are available in MediaWiki core. For instruction on using the library in an extension, please see [[Using the library with extensions]]. == Additional documentation == The following are useful resources: * [https://doc.wikimedia.org/oojs-ui/master/#!/api '''JavaScript code-level documentation''']''':''' The generated documentation for the JavaScript interface provides a complete API reference, containing a description of each class along with all supported configuration options and methods. Each description also includes a list of mixin classes and subclasses. * '''PHP documentation:''' The PHP API is documented using the [[Manual:Coding conventions/PHP#Comments and documentation|MediaWiki conventions]] and can be used to generate a readable reference (the PHP documentation may lack information on mixin methods). * [[toollabs:oojs-ui/oojs-ui/demos/index.html#widgets-apex-vector-ltr|'''Demos:''']] Additional demos. * [[OOjs|'''OOjs documentation:''']] The OOjs UI library is built on top of OOjs. The [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO code-generated documentation] might also prove useful. == Contact == You can find us on IRC: [http://webchat.freenode.net/?channels=#mediawiki-visualeditor '''#mediawiki-visualeditor''' on Freenode,] a great place to ask questions, get help, and meet other developers. Bugs can be posted to Phabricator: https://phabricator.wikimedia.org/maniphest/task/create/?projects=PHID-PROJ-dgmoevjqeqlerleqzzx5 If you’d like to get involved with the project, please say hello on IRC and feel free to jump right in! 871weh8y2im9rcuhbnzjfu4xlu3lhzu 58 57 2015-01-16T13:32:05Z Admin 1 1 revision imported wikitext text/x-wiki '''OOjs UI''' ([[OOjs|Object-Oriented JavaScript]] – User Interface) is a library that allows developers to rapidly create front-end web applications that operate consistently across a multitude of browsers. '''The OOjs UI library contains''' * a set of ready-to-use widgets, layouts, and windows that can be instantiated directly or easily extended, * a server-side component that generates compatible output in PHP for cases where JavaScript is not supported, * elements that can be easily mixed and matched to create custom user interfaces. '''The library provides:''' * '''cross-browser compatibility.''' Interfaces built using library elements will look and act consistently across modern browsers. * '''understandability'''. Interfaces share a common API that is well documented and consistently used. Both the JavaScript and PHP components use the same class and method names. Basic elements are reused throughout the library, along with their APIs. * '''design'''. Themes specify how OOjs UI interfaces should look. A basic theme called Apex is provided by default. Interfaces built within MediaWiki will use the MediaWiki theme instead. This theme is updated to stay in sync with MediaWiki design changes. Additional themes can be created for a custom look and feel. * '''sensible event handling.''' OOjs UI components listen to low-level events and emit a meaningful event at the proper time (i.e., when something actually changes). * responsiveness. When the model changes, the view is updated automatically. * '''efficiency.''' The view is generated and updated client-side, requiring fewer road trips to the server. * '''object-oriented functionality.''' The library provides support for mixins and inheritance, including the inheritance of static properties. * '''openness.''' The library is open source and released under the MIT licence. OOjs UI is available as a library in [[Core|MediaWiki Core]] as of [[MediaWiki 1.23|version 1.23]]. The library was originally created for use by [[VisualEditor]], which uses it for its entire user interface. == Compatibility, Dependencies, and Installation == OOjs UI is compatible with most modern web browsers, and work toward supporting additional browsers is ongoing. See the [[VisualEditor/Target browser matrix|VisualEditor documentation]] to get a general sense for which browsers are currently supported. Note that OOjs UI supports a superset of these browsers, as VisualEditor compatibility is especially restricted due to its use of [https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable contentEditable]. The OOjs UI library depends on [[OOjs]] and [http://jquery.com/ jQuery,] both of which are available in MediaWiki core. For instruction on using the library in an extension, please see [[Using the library with extensions]]. == Additional documentation == The following are useful resources: * [https://doc.wikimedia.org/oojs-ui/master/#!/api '''JavaScript code-level documentation''']''':''' The generated documentation for the JavaScript interface provides a complete API reference, containing a description of each class along with all supported configuration options and methods. Each description also includes a list of mixin classes and subclasses. * '''PHP documentation:''' The PHP API is documented using the [[Manual:Coding conventions/PHP#Comments and documentation|MediaWiki conventions]] and can be used to generate a readable reference (the PHP documentation may lack information on mixin methods). * [[toollabs:oojs-ui/oojs-ui/demos/index.html#widgets-apex-vector-ltr|'''Demos:''']] Additional demos. * [[OOjs|'''OOjs documentation:''']] The OOjs UI library is built on top of OOjs. The [https://doc.wikimedia.org/VisualEditor/master/#!/api/OO code-generated documentation] might also prove useful. == Contact == You can find us on IRC: [http://webchat.freenode.net/?channels=#mediawiki-visualeditor '''#mediawiki-visualeditor''' on Freenode,] a great place to ask questions, get help, and meet other developers. Bugs can be posted to Phabricator: https://phabricator.wikimedia.org/maniphest/task/create/?projects=PHID-PROJ-dgmoevjqeqlerleqzzx5 If you’d like to get involved with the project, please say hello on IRC and feel free to jump right in! 871weh8y2im9rcuhbnzjfu4xlu3lhzu OOjs UI/Creating interfaces programmatically 0 32 59 2015-01-15T00:12:36Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Creating interfaces programmatically]] to [[OOjs UI/Creating interfaces programmatically]] wikitext text/x-wiki The OOjs UI library provides the building blocks for building an object-oriented user interface. It includes many widgets and layouts that are ready to use, as well as basic elements that can be composed to build something of your own. Complex systems, such as windowing and toolbars, are also provided, and can be extended and composed to fit your application’s needs. User interfaces are created programmatically in OOjs UI, which abstracts away HTML markup entirely. This technique allows the markup to change, so long as the APIs that generate the markup remain stable. Markup may change when extending a class to support a new feature, or when fixing a bug to increase compatibility. Everything in OOjs UI that the user can see is built using elements, which are composed together to form discrete parts of a user interface, and also to bring those parts together. By maximizing element reuse, visual, behavioral, and API consistency is easier to maintain. == Getting started == If you are not yet familiar with how interfaces are created with OOjs UI, this section contains a quick tutorial on how to build a widget using the library. Creating a widget involves two basic steps: # The widget is created and configured # The widget is added to the DOM Note that OOjs UI objects must be added to the DOM before they are visible to the user. Developers writing code should account for the fact that a widget may or may not be attached to the DOM, and will never be attached to the DOM during the execution of the constructor. Even after an element has been attached, it may later become detached. You can check if the element is currently attached using the '''.isElementAttached()''' method. Remember to include the required libraries ([http://jquery.com/ jQuery] and [[OOjs]]) as well as the relevant style information (one of the OOjs UI themes, currently Apex or MediaWiki) and the OOjs UI library itself. <syntaxhighlight lang="html5"> <!DOCTYPE html> <html lang="en"> <head> <title>Things that must be included</title> <!-- include the APEX stylesheet--> <link rel="stylesheet" href="lib/oojs-ui/oojs-ui-apex.svg.css"> </head> <body> <!-- jQuery --> <script src="lib/jquery/jquery.js"></script> <!-- OOjs --> <script src="lib/oojs/oojs.js"></script> <!-- OOjs UI --> <script src="lib/oojs-ui/oojs-ui.js"></script> <script src="lib/oojs-ui/oojs-ui-apex.js"></script> </body> </html> </syntaxhighlight> == Creating and configuring a widget == Each widget is created and configured with either a configuration object that is passed to the widget constructor or by using methods to set the configurations (see example below). Many of the library’s methods are chainable, as illustrated in the example. Once the widget has been created and configured, it must be attached to the DOM in order to be visible to the user. Use the jQuery '''.append()''' method to insert the new widget into the DOM using its '''$element''' property. The following example demonstrates how to create and append a simple '''ButtonWidget''' that, when clicked, will open “http://www.mediawiki.org” in a new window. ‘button1’ is configured using a config object. ‘button2’ is configured using the widget’s methods: [[File:CreatingInterfacesProgrammatically1.png| Example: Creating and configuring a ButtonWidget]] <syntaxhighlight lang="javascript"> // Example: Creating and configuring a new ButtonWidget with a config object // (button1) or ButtonWidget methods (button2), and appending the buttons // to the DOM. // Button 1: Create a new button using the OO.ui.ButtonWidget class. // Configuration options (the label, href, and target in this example) // are specified with a configuration object. var button1 = new OO.ui.ButtonWidget( { label: 'Click me!', href: 'http://www.mediawiki.org', target: 'new' } ); // Button 2: Use ButtonWidget methods to configure the button. // Note that many methods are chainable. var button2 = new OO.ui.ButtonWidget() .setLabel( 'Click me!' ) .setHref( 'http://www.mediawiki.org' ) .setTarget( 'new' ); // Append the buttons to the DOM using the $element property and jQuery's .append() method. $( 'body' ).append( button1.$element, button2.$element ); </syntaxhighlight> Note that some get methods (e.g. '''getItemFromData()''' or '''getElementDocument()''' ) should not be chained. These methods may return ‘null’, and trying to call another method on ‘null’ will cause an error. == Connecting an event handler to a widget == Widgets emit events when they are interacted with or changed in an interesting way. These events can be listened to by connecting event handlers to the widget. The below example uses an event handler to display an alert when the button is clicked. When the button is clicked, its label will be reset to read ‘Do not click me!’ via the button’s '''setLabel()''' method. <syntaxhighlight lang="javascript"> // Example: Connecting an event handler to a button. // Create a new button. var button = new OO.ui.ButtonWidget( { label: 'I handle events' } ); // Set up event handlers. // Use the ButtonWidget's on() method to specify an event (e.g., click) // and an event handler. button.on( 'click', function () { alert( 'I was clicked!' ); button.setLabel( 'Do not click me!' ); } ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Event handling is provided by the '''EventEmitter''' class, which is “mixed in” to all widgets. For more information about '''EventEmitter''', please see [[OOjs UI/Documentation/OOjs primer|OOjs primer.]] == Understanding mixins == The concept of mixins is fundamental to the library, and many of the library’s elements can be customized via mixin functionality. For example, one can easily add an icon to a button widget by taking advantage of the fact that the '''IconElement''' class is mixed in to the '''ButtonWidget''' class. [[File:CreatingInterfacesProgrammatically3.png| Example: .]] <syntaxhighlight lang="javascript"> // Create a new button and add an icon using the configuration option provided // by the IconElement class. var button = new OO.ui.ButtonWidget( { label: 'Button with icon', icon: 'alert' } ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Mixin classes can be used to create and add new elements to a widget (such as the icon in the above example) or to add new behaviors (such as new methods for handling styling flags or titles). There are three kinds of element mixins, each identified with a naming convention: * '''Content:''' Content mixins generate elements by default (e.g., groups, icons, indicators and labels). The names of content mixins have no suffix (e.g., '''GroupElement''', '''IconElement''', etc.) * '''Attribute:''' Attribute mixins operate on '''$element''' by default (e.g., flags and titles). The names of attribute mixins have an "ed" suffix (e.g., '''FlaggedElement''', '''TitledElement''', etc.) * '''Behavior''': Behavior mixins operate on '''$element''' by default (e.g., clippable). Behavior mixins are identified with an ”able" suffix (e.g., '''ClippableElement''', etc.)'''<br>''' '''<nowiki/>'''Note that though a mixin class can create and initialize an object, it will not append it to the DOM. This must be done manually if you wish to manipulate the object directly. It is not uncommon to see widgets composed of multiple mixins: for example, the '''ButtonWidget''' class utilizes '''ButtonElement''' and '''IconElement''' mixins (and a few others). One can easily see which classes have been mixed and are available in the [https://doc.wikimedia.org/oojs-ui/master/#!/api code-level documentation] for each class. Mixin classes will always be displayed in the upper right of the documentation screen for each class. In addition, each configuration option notes the name of the class that defines it. ia9qo118qxgz4gizs0ykamfavyvfd82 60 59 2015-01-16T13:32:07Z Admin 1 1 revision imported wikitext text/x-wiki The OOjs UI library provides the building blocks for building an object-oriented user interface. It includes many widgets and layouts that are ready to use, as well as basic elements that can be composed to build something of your own. Complex systems, such as windowing and toolbars, are also provided, and can be extended and composed to fit your application’s needs. User interfaces are created programmatically in OOjs UI, which abstracts away HTML markup entirely. This technique allows the markup to change, so long as the APIs that generate the markup remain stable. Markup may change when extending a class to support a new feature, or when fixing a bug to increase compatibility. Everything in OOjs UI that the user can see is built using elements, which are composed together to form discrete parts of a user interface, and also to bring those parts together. By maximizing element reuse, visual, behavioral, and API consistency is easier to maintain. == Getting started == If you are not yet familiar with how interfaces are created with OOjs UI, this section contains a quick tutorial on how to build a widget using the library. Creating a widget involves two basic steps: # The widget is created and configured # The widget is added to the DOM Note that OOjs UI objects must be added to the DOM before they are visible to the user. Developers writing code should account for the fact that a widget may or may not be attached to the DOM, and will never be attached to the DOM during the execution of the constructor. Even after an element has been attached, it may later become detached. You can check if the element is currently attached using the '''.isElementAttached()''' method. Remember to include the required libraries ([http://jquery.com/ jQuery] and [[OOjs]]) as well as the relevant style information (one of the OOjs UI themes, currently Apex or MediaWiki) and the OOjs UI library itself. <syntaxhighlight lang="html5"> <!DOCTYPE html> <html lang="en"> <head> <title>Things that must be included</title> <!-- include the APEX stylesheet--> <link rel="stylesheet" href="lib/oojs-ui/oojs-ui-apex.svg.css"> </head> <body> <!-- jQuery --> <script src="lib/jquery/jquery.js"></script> <!-- OOjs --> <script src="lib/oojs/oojs.js"></script> <!-- OOjs UI --> <script src="lib/oojs-ui/oojs-ui.js"></script> <script src="lib/oojs-ui/oojs-ui-apex.js"></script> </body> </html> </syntaxhighlight> == Creating and configuring a widget == Each widget is created and configured with either a configuration object that is passed to the widget constructor or by using methods to set the configurations (see example below). Many of the library’s methods are chainable, as illustrated in the example. Once the widget has been created and configured, it must be attached to the DOM in order to be visible to the user. Use the jQuery '''.append()''' method to insert the new widget into the DOM using its '''$element''' property. The following example demonstrates how to create and append a simple '''ButtonWidget''' that, when clicked, will open “http://www.mediawiki.org” in a new window. ‘button1’ is configured using a config object. ‘button2’ is configured using the widget’s methods: [[File:CreatingInterfacesProgrammatically1.png| Example: Creating and configuring a ButtonWidget]] <syntaxhighlight lang="javascript"> // Example: Creating and configuring a new ButtonWidget with a config object // (button1) or ButtonWidget methods (button2), and appending the buttons // to the DOM. // Button 1: Create a new button using the OO.ui.ButtonWidget class. // Configuration options (the label, href, and target in this example) // are specified with a configuration object. var button1 = new OO.ui.ButtonWidget( { label: 'Click me!', href: 'http://www.mediawiki.org', target: 'new' } ); // Button 2: Use ButtonWidget methods to configure the button. // Note that many methods are chainable. var button2 = new OO.ui.ButtonWidget() .setLabel( 'Click me!' ) .setHref( 'http://www.mediawiki.org' ) .setTarget( 'new' ); // Append the buttons to the DOM using the $element property and jQuery's .append() method. $( 'body' ).append( button1.$element, button2.$element ); </syntaxhighlight> Note that some get methods (e.g. '''getItemFromData()''' or '''getElementDocument()''' ) should not be chained. These methods may return ‘null’, and trying to call another method on ‘null’ will cause an error. == Connecting an event handler to a widget == Widgets emit events when they are interacted with or changed in an interesting way. These events can be listened to by connecting event handlers to the widget. The below example uses an event handler to display an alert when the button is clicked. When the button is clicked, its label will be reset to read ‘Do not click me!’ via the button’s '''setLabel()''' method. <syntaxhighlight lang="javascript"> // Example: Connecting an event handler to a button. // Create a new button. var button = new OO.ui.ButtonWidget( { label: 'I handle events' } ); // Set up event handlers. // Use the ButtonWidget's on() method to specify an event (e.g., click) // and an event handler. button.on( 'click', function () { alert( 'I was clicked!' ); button.setLabel( 'Do not click me!' ); } ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Event handling is provided by the '''EventEmitter''' class, which is “mixed in” to all widgets. For more information about '''EventEmitter''', please see [[OOjs UI/Documentation/OOjs primer|OOjs primer.]] == Understanding mixins == The concept of mixins is fundamental to the library, and many of the library’s elements can be customized via mixin functionality. For example, one can easily add an icon to a button widget by taking advantage of the fact that the '''IconElement''' class is mixed in to the '''ButtonWidget''' class. [[File:CreatingInterfacesProgrammatically3.png| Example: .]] <syntaxhighlight lang="javascript"> // Create a new button and add an icon using the configuration option provided // by the IconElement class. var button = new OO.ui.ButtonWidget( { label: 'Button with icon', icon: 'alert' } ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Mixin classes can be used to create and add new elements to a widget (such as the icon in the above example) or to add new behaviors (such as new methods for handling styling flags or titles). There are three kinds of element mixins, each identified with a naming convention: * '''Content:''' Content mixins generate elements by default (e.g., groups, icons, indicators and labels). The names of content mixins have no suffix (e.g., '''GroupElement''', '''IconElement''', etc.) * '''Attribute:''' Attribute mixins operate on '''$element''' by default (e.g., flags and titles). The names of attribute mixins have an "ed" suffix (e.g., '''FlaggedElement''', '''TitledElement''', etc.) * '''Behavior''': Behavior mixins operate on '''$element''' by default (e.g., clippable). Behavior mixins are identified with an ”able" suffix (e.g., '''ClippableElement''', etc.)'''<br>''' '''<nowiki/>'''Note that though a mixin class can create and initialize an object, it will not append it to the DOM. This must be done manually if you wish to manipulate the object directly. It is not uncommon to see widgets composed of multiple mixins: for example, the '''ButtonWidget''' class utilizes '''ButtonElement''' and '''IconElement''' mixins (and a few others). One can easily see which classes have been mixed and are available in the [https://doc.wikimedia.org/oojs-ui/master/#!/api code-level documentation] for each class. Mixin classes will always be displayed in the upper right of the documentation screen for each class. In addition, each configuration option notes the name of the class that defines it. ia9qo118qxgz4gizs0ykamfavyvfd82 OOjs UI/OOjs primer 0 33 61 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/OOjs primer]] to [[OOjs UI/OOjs primer]] wikitext text/x-wiki The OOjs library provides some commonly used functionality to OOjs UI, most notably an API for handling events. If you are not familiar with OOjs, you may wish to take a moment to familiarize yourself with '''EventEmitter''', as it is a convenient and powerful tool that will often be used in examples. '''EventEmitter''' allows event handlers to be connected to an object, called when events occur, and disconnected when no longer needed. Events are tied to their context. For example, when a toggle button changes state, the event is not simply ‘change,’ but ‘change’ and the value of the toggle button’s state ( ‘on’ or ‘off’). The most basic way to connect and disconnect an event handler is with the '''EventEmitter'''’s '''on()''' and '''off()''' methods. In the following example, the '''on()''' method is used to connect an ‘onChange’ event handler to a toggle button, which is defined in the example as well. <syntaxhighlight lang="javascript"> // The following example uses the on() method to connect an event handler // to a toggle button widget. The off() method is later used to disconnect // the event handler. // Create a new toggle button var button = new OO.ui.ToggleButtonWidget( { label: 'I handle events' } ); // Set up the event handler. In this example, the event handler is a // function that will change the button label to 'All done!' when the // state of the button changes. The off() method is then used to // disconnect the event handler from the toggle button so that the // function will no longer be called. button.onChange = function () { button.setLabel( 'All done!' ); button.off('change', button.onChange); } // Use the ButtonWidget's on() method to connect an event handler // ('button.onChange', defined above) to the button for the specified // type of event ('change'). button.on( 'change', button.onChange ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Often, the '''connect()''' and '''disconnect()''' methods are used to connect and disconnect multiple event handlers to objects. The following example illustrates these methods. <syntaxhighlight lang="javascript"> // This example illustrates the connect() and disconnect() methods. // Here, the 'onChange' function, which changes the label of the toggle button // labeled 'try me!' to match the button's state ('on' or 'off') will be // executed whenever the state of the toggle button changes. The 'onToggleClick' // function, which writes 'Click!' each time the toggle button is clicked, is // also connected to the toggle button via the connect() method. The // disconnect() method, connected to the 'Disconnect EventHandlers' button, // is used to remove both event handlers from the toggle button. // Create buttons and add them to a button group. var toggle=new OO.ui.ToggleButtonWidget({ label : 'try me!' } ); var button=new OO.ui.ButtonWidget({ label : 'Disconnect EventHandlers' } ); var buttonGroup=new OO.ui.ButtonGroupWidget( { items: [toggle, button] } ); // Define the functions to connect (toggle.onChange, toggle.onToggleClick, and // button.onClick, in this example) toggle.onChange = function () { if ( toggle.getValue()==0 ) { toggle.setLabel('off'); } else { toggle.setLabel('on'); } }; toggle.onToggleClick = function () { $( 'body' ).append('<p>Click!</p>'); } button.onClick = function () { toggle.disconnect( toggle, { change: 'onChange', click: 'onToggleClick' } ); } // Bind the functions to the widgets for the specified events. toggle.connect( toggle, { change: 'onChange', click: 'onToggleClick'} ); button.connect( button, { click: 'onClick' } ); // Append the button group to the DOM. $( 'body' ).append( buttonGroup.$element ); </syntaxhighlight> Note: A convention of OOjs is that any method that begins with ‘on’ (e.g., '''onClick()''' and '''onKeyPress()''') is private, except for the '''on()''' method itself. For more details about '''EventEmitter,''' please see [[OOjs/Events.|https://www.mediawiki.org/wiki/OOjs/Events.]] mkodrsj1fvtcvx9inr5cffejymadjyz 62 61 2015-01-16T13:32:07Z Admin 1 1 revision imported wikitext text/x-wiki The OOjs library provides some commonly used functionality to OOjs UI, most notably an API for handling events. If you are not familiar with OOjs, you may wish to take a moment to familiarize yourself with '''EventEmitter''', as it is a convenient and powerful tool that will often be used in examples. '''EventEmitter''' allows event handlers to be connected to an object, called when events occur, and disconnected when no longer needed. Events are tied to their context. For example, when a toggle button changes state, the event is not simply ‘change,’ but ‘change’ and the value of the toggle button’s state ( ‘on’ or ‘off’). The most basic way to connect and disconnect an event handler is with the '''EventEmitter'''’s '''on()''' and '''off()''' methods. In the following example, the '''on()''' method is used to connect an ‘onChange’ event handler to a toggle button, which is defined in the example as well. <syntaxhighlight lang="javascript"> // The following example uses the on() method to connect an event handler // to a toggle button widget. The off() method is later used to disconnect // the event handler. // Create a new toggle button var button = new OO.ui.ToggleButtonWidget( { label: 'I handle events' } ); // Set up the event handler. In this example, the event handler is a // function that will change the button label to 'All done!' when the // state of the button changes. The off() method is then used to // disconnect the event handler from the toggle button so that the // function will no longer be called. button.onChange = function () { button.setLabel( 'All done!' ); button.off('change', button.onChange); } // Use the ButtonWidget's on() method to connect an event handler // ('button.onChange', defined above) to the button for the specified // type of event ('change'). button.on( 'change', button.onChange ); // Append the button to the DOM. $( 'body' ).append( button.$element ); </syntaxhighlight> Often, the '''connect()''' and '''disconnect()''' methods are used to connect and disconnect multiple event handlers to objects. The following example illustrates these methods. <syntaxhighlight lang="javascript"> // This example illustrates the connect() and disconnect() methods. // Here, the 'onChange' function, which changes the label of the toggle button // labeled 'try me!' to match the button's state ('on' or 'off') will be // executed whenever the state of the toggle button changes. The 'onToggleClick' // function, which writes 'Click!' each time the toggle button is clicked, is // also connected to the toggle button via the connect() method. The // disconnect() method, connected to the 'Disconnect EventHandlers' button, // is used to remove both event handlers from the toggle button. // Create buttons and add them to a button group. var toggle=new OO.ui.ToggleButtonWidget({ label : 'try me!' } ); var button=new OO.ui.ButtonWidget({ label : 'Disconnect EventHandlers' } ); var buttonGroup=new OO.ui.ButtonGroupWidget( { items: [toggle, button] } ); // Define the functions to connect (toggle.onChange, toggle.onToggleClick, and // button.onClick, in this example) toggle.onChange = function () { if ( toggle.getValue()==0 ) { toggle.setLabel('off'); } else { toggle.setLabel('on'); } }; toggle.onToggleClick = function () { $( 'body' ).append('<p>Click!</p>'); } button.onClick = function () { toggle.disconnect( toggle, { change: 'onChange', click: 'onToggleClick' } ); } // Bind the functions to the widgets for the specified events. toggle.connect( toggle, { change: 'onChange', click: 'onToggleClick'} ); button.connect( button, { click: 'onClick' } ); // Append the button group to the DOM. $( 'body' ).append( buttonGroup.$element ); </syntaxhighlight> Note: A convention of OOjs is that any method that begins with ‘on’ (e.g., '''onClick()''' and '''onKeyPress()''') is private, except for the '''on()''' method itself. For more details about '''EventEmitter,''' please see [[OOjs/Events.|https://www.mediawiki.org/wiki/OOjs/Events.]] mkodrsj1fvtcvx9inr5cffejymadjyz OOjs UI/Elements 0 34 63 2015-01-15T00:12:37Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Elements]] to [[OOjs UI/Elements]] wikitext text/x-wiki The most basic component of the OOjs UI library is called an element ('''OO.ui.Element'''), which is an object that represents a rendering in the DOM—a button or an icon, for example, or anything that is visible to a user. Unlike widgets, plain elements usually do not have events connected to them and can't be interacted with. Every OOjs UI element has an '''$element''' property, which is a jQuery selection of its rendered contents. Note that the OOjs UI uses the ‘$’ prefix for the names of all variables and properties that refer to jQuery selections of DOM elements. The '''$element''' property is extremely useful, and is used, for example, when creating OOjs widgets and appending them to the DOM. See [[OOjs UI/Documentation/Elements/Groups|Group elements]] for more information about '''GroupElements.''' nz4deqbe8n3wd3ftgna16w27kuqn78c 64 63 2015-01-16T13:32:07Z Admin 1 1 revision imported wikitext text/x-wiki The most basic component of the OOjs UI library is called an element ('''OO.ui.Element'''), which is an object that represents a rendering in the DOM—a button or an icon, for example, or anything that is visible to a user. Unlike widgets, plain elements usually do not have events connected to them and can't be interacted with. Every OOjs UI element has an '''$element''' property, which is a jQuery selection of its rendered contents. Note that the OOjs UI uses the ‘$’ prefix for the names of all variables and properties that refer to jQuery selections of DOM elements. The '''$element''' property is extremely useful, and is used, for example, when creating OOjs widgets and appending them to the DOM. See [[OOjs UI/Documentation/Elements/Groups|Group elements]] for more information about '''GroupElements.''' nz4deqbe8n3wd3ftgna16w27kuqn78c OOjs UI/Elements/Groups 0 35 65 2015-01-15T00:12:37Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Elements/Groups]] to [[OOjs UI/Elements/Groups]] wikitext text/x-wiki Any OOjs UI widget that contains other widgets (buttons, options, input fields, tools, etc.) mixes in '''GroupElement.''' Adding, removing, and clearing items is done through the interface '''GroupElement''' provides. '''[[OOjs UI/Documentation/Widgets/Selects and Options|SelectWidgets]]''', which contain mutually exclusive options, are a commonly used example of a class that mixes in '''GroupElement'''. '''ButtonGroupWidgets''', which are used when buttons are grouped logically, but are not mutually exclusive, are another example. '''[[OOjs UI/Documentation/Layouts/Stacks and Panels|StackLayouts]]''' are yet another example. All items in a group are addressed by a unique reference. If an item is added to a group that contains an item with the same reference, the existing item will be removed, and the new item will be added to the end of the array of items. The following example illustrates a '''ButtonGroupWidget''' that contains two buttons. Note that the buttons are created, but not appended to the DOM. Instead, they are added to the button group using the widget’s '''items''' configuration option. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonGroupWidget code-level documentation] for '''ButtonGroupWidget.''' [[File:ElementsGroupButtonGroupWidget2.png| An example of a ButtonGroupWidget ]] <syntaxhighlight lang="javascript"> // Example: A ButtonGroupWidget, which mixes in GroupElement. Other classes // that mix in GroupElement include SelectWidgets and StackLayouts. // Create buttons. Note that the buttons will be appended to the DOM later, // when the group is appended. var button1 = new OO.ui.PopupButtonWidget( { label : 'Select a category', icon : 'menu', popup : {   $content: $( '<p>List of categories...</p>' ), padded: true, align: 'left' } } ); var button2 = new OO.ui.ButtonWidget( { label : 'Add item' }) // Create a new button group and add the buttons to it via the // ButtonGroupWidget 'items' config option. var buttonGroup = new OO.ui.ButtonGroupWidget( { items: [button1, button2] } ); // Append the button group to the DOM. $('body').append(buttonGroup.$element); </syntaxhighlight> The '''GroupElement''' class provides many methods that can be used to add, remove, or clear buttons from a group. For a full list of supported methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.GroupElement code-level documentation] for '''GroupElement.''' isxxmureiygpswiug8srsx3siwvqi56 66 65 2015-01-16T13:32:08Z Admin 1 1 revision imported wikitext text/x-wiki Any OOjs UI widget that contains other widgets (buttons, options, input fields, tools, etc.) mixes in '''GroupElement.''' Adding, removing, and clearing items is done through the interface '''GroupElement''' provides. '''[[OOjs UI/Documentation/Widgets/Selects and Options|SelectWidgets]]''', which contain mutually exclusive options, are a commonly used example of a class that mixes in '''GroupElement'''. '''ButtonGroupWidgets''', which are used when buttons are grouped logically, but are not mutually exclusive, are another example. '''[[OOjs UI/Documentation/Layouts/Stacks and Panels|StackLayouts]]''' are yet another example. All items in a group are addressed by a unique reference. If an item is added to a group that contains an item with the same reference, the existing item will be removed, and the new item will be added to the end of the array of items. The following example illustrates a '''ButtonGroupWidget''' that contains two buttons. Note that the buttons are created, but not appended to the DOM. Instead, they are added to the button group using the widget’s '''items''' configuration option. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonGroupWidget code-level documentation] for '''ButtonGroupWidget.''' [[File:ElementsGroupButtonGroupWidget2.png| An example of a ButtonGroupWidget ]] <syntaxhighlight lang="javascript"> // Example: A ButtonGroupWidget, which mixes in GroupElement. Other classes // that mix in GroupElement include SelectWidgets and StackLayouts. // Create buttons. Note that the buttons will be appended to the DOM later, // when the group is appended. var button1 = new OO.ui.PopupButtonWidget( { label : 'Select a category', icon : 'menu', popup : {   $content: $( '<p>List of categories...</p>' ), padded: true, align: 'left' } } ); var button2 = new OO.ui.ButtonWidget( { label : 'Add item' }) // Create a new button group and add the buttons to it via the // ButtonGroupWidget 'items' config option. var buttonGroup = new OO.ui.ButtonGroupWidget( { items: [button1, button2] } ); // Append the button group to the DOM. $('body').append(buttonGroup.$element); </syntaxhighlight> The '''GroupElement''' class provides many methods that can be used to add, remove, or clear buttons from a group. For a full list of supported methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.GroupElement code-level documentation] for '''GroupElement.''' isxxmureiygpswiug8srsx3siwvqi56 OOjs UI/Widgets 0 36 67 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets]] to [[OOjs UI/Widgets]] wikitext text/x-wiki Widgets are compositions of one or more OOjs UI elements that users can both view and interact with. All widgets can be configured and modified via a standard API, and their state can change dynamically according to a model. The library handles the application’s low-level click events, filtering the ‘noise’ (e.g., a copy and paste of the same content that results in no actual change) and returning high-level, meaningful events to the application. The OOjs UI library contains a number of ready-to-customize widgets that fall into several main categories: [[OOjs UI/Documentation/Widgets/Buttons and Switches|buttons and switches]], [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|icons, indicators and labels]], [[OOjs UI/Documentation/Widgets/Selects and Options|selects and options]], [[OOjs UI/Documentation/Widgets/Inputs|input widgets]], [[OOjs UI/Documentation/Widgets/Popups|popups]], and [[OOjs UI/Documentation/Widgets/Progress bars|progress bars]]. When used together with layouts, these widgets can create high-level components like dialog or modal windows. Note that not every widget in the library is commonly used ‘out-of-the-box.’ Some widgets, such as '''[[OOjs UI/Documentation/Widgets/Selects and Options|MenuWidgets]]''', are designed to be extended and will rarely be instantiated on their own. See “[[OOjs UI/Documentation/Extending the Library|Extending the Library”]] (coming soon!) for more information about creating customized widgets. b6lyj0c5ymsqq6x2w2r15jw5etqztku 68 67 2015-01-16T13:32:08Z Admin 1 1 revision imported wikitext text/x-wiki Widgets are compositions of one or more OOjs UI elements that users can both view and interact with. All widgets can be configured and modified via a standard API, and their state can change dynamically according to a model. The library handles the application’s low-level click events, filtering the ‘noise’ (e.g., a copy and paste of the same content that results in no actual change) and returning high-level, meaningful events to the application. The OOjs UI library contains a number of ready-to-customize widgets that fall into several main categories: [[OOjs UI/Documentation/Widgets/Buttons and Switches|buttons and switches]], [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|icons, indicators and labels]], [[OOjs UI/Documentation/Widgets/Selects and Options|selects and options]], [[OOjs UI/Documentation/Widgets/Inputs|input widgets]], [[OOjs UI/Documentation/Widgets/Popups|popups]], and [[OOjs UI/Documentation/Widgets/Progress bars|progress bars]]. When used together with layouts, these widgets can create high-level components like dialog or modal windows. Note that not every widget in the library is commonly used ‘out-of-the-box.’ Some widgets, such as '''[[OOjs UI/Documentation/Widgets/Selects and Options|MenuWidgets]]''', are designed to be extended and will rarely be instantiated on their own. See “[[OOjs UI/Documentation/Extending the Library|Extending the Library”]] (coming soon!) for more information about creating customized widgets. b6lyj0c5ymsqq6x2w2r15jw5etqztku OOjs UI/Widgets/Icons, Indicators, and Labels 0 37 69 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels]] to [[OOjs UI/Widgets/Icons, Indicators, and Labels]] wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': [[File:WidgetsIconsExample.png| Example of an IconWidget .]] <syntaxhighlight lang="javascript"> // Create an IconWidget and label. Labels should be used unless space // is at a premium or the meaning of the icon in its context is very clear. // Create an icon. var removeIcon = new OO.ui.IconWidget({ icon: 'remove', iconTitle: 'Remove' }); // Create a label. var iconLabel = new OO.ui.LabelWidget({ label: 'Remove the items' }); // Append the icon and label to the DOM $('body').append(removeIcon.$element, iconLabel.$element); </syntaxhighlight> The following icons are included in the OOjs UI library: [[File:WidgetsIcons.png| Icons used in OOjs UI]] '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: [[File:WidgetsIndicatorExample.png| Example of an Indicator.]] <syntaxhighlight lang="javascript"> // Example: using an indicator to show the status of an element. var textInput=new OO.ui.TextInputWidget( { placeholder: 'This field is required', indicator: 'required' } ) $('body').append(textInput.$element); </syntaxhighlight> The following indicators are included in the OOjs UI library: [[File:WidgetsIndicators.png| Indicators used in OOjs UI.]] Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. [[File:WidgetsLabelsExample.png| Example of a LabelWidget .]] <syntaxhighlight lang="javascript"> // Examples of LabelWidgets // A plaintext label. var label1 = new OO.ui.LabelWidget({ label: 'This is a plaintext label' }); // A label with a jQuery selection of elements var label2 = new OO.ui.LabelWidget({ label: $( '<a href="default.html">This is a label with a link</a>' ) }); $( 'body' ).append( label1.$element, '<br>', label2.$element ); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. gcg4f323lv54tdgeg24483201dol2a6 70 69 2015-01-16T13:32:12Z Admin 1 1 revision imported wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': [[File:WidgetsIconsExample.png| Example of an IconWidget .]] <syntaxhighlight lang="javascript"> // Create an IconWidget and label. Labels should be used unless space // is at a premium or the meaning of the icon in its context is very clear. // Create an icon. var removeIcon = new OO.ui.IconWidget({ icon: 'remove', iconTitle: 'Remove' }); // Create a label. var iconLabel = new OO.ui.LabelWidget({ label: 'Remove the items' }); // Append the icon and label to the DOM $('body').append(removeIcon.$element, iconLabel.$element); </syntaxhighlight> The following icons are included in the OOjs UI library: [[File:WidgetsIcons.png| Icons used in OOjs UI]] '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: [[File:WidgetsIndicatorExample.png| Example of an Indicator.]] <syntaxhighlight lang="javascript"> // Example: using an indicator to show the status of an element. var textInput=new OO.ui.TextInputWidget( { placeholder: 'This field is required', indicator: 'required' } ) $('body').append(textInput.$element); </syntaxhighlight> The following indicators are included in the OOjs UI library: [[File:WidgetsIndicators.png| Indicators used in OOjs UI.]] Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. [[File:WidgetsLabelsExample.png| Example of a LabelWidget .]] <syntaxhighlight lang="javascript"> // Examples of LabelWidgets // A plaintext label. var label1 = new OO.ui.LabelWidget({ label: 'This is a plaintext label' }); // A label with a jQuery selection of elements var label2 = new OO.ui.LabelWidget({ label: $( '<a href="default.html">This is a label with a link</a>' ) }); $( 'body' ).append( label1.$element, '<br>', label2.$element ); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. gcg4f323lv54tdgeg24483201dol2a6 119 70 2015-01-29T21:47:31Z Admin 1 Convert to OOUIPlayground wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': <ooui-demo type="icon">{"icon":"remove","iconTitle":"Remove"}</ooui-demo> <ooui-demo type="label">{ "label": "Remove the items" }</ooui-demo> The following icons are included in the OOjs UI library: [[File:WidgetsIcons.png| Icons used in OOjs UI]] '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: <ooui-demo type="textinput">{"placeholder":"This field is required","indicator":"required"}</ooui-demo> The following indicators are included in the OOjs UI library: [[File:WidgetsIndicators.png| Indicators used in OOjs UI.]] Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. <ooui-demo type="label">{"label":"This is a plaintext label"}</ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. qglceeeoqebncpxa6sd4bphtb8m31tr 129 119 2015-01-29T22:57:21Z Admin 1 /* Icons */ Make icons render live wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': <ooui-demo type="icon">{"icon":"remove","iconTitle":"Remove"}</ooui-demo> <ooui-demo type="label">{ "label": "Remove the items" }</ooui-demo> The following icons are included in the OOjs UI library: {{icon|add}} {{icon|advanced}} {{icon|alert}} {{icon|check}} {{icon|clear}} {{icon|close}} {{icon|code}} {{icon|collapse}} {{icon|comment}} {{icon|expand}} {{icon|help}} {{icon|info}} {{icon|link}} {{icon|menu}} {{icon|next}} {{icon|picture}} {{icon|previous}} {{icon|redo}} {{icon|remove}} {{icon|search}} {{icon|settings}} {{icon|tag}} {{icon|undo}} {{icon|window}} '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: <ooui-demo type="textinput">{"placeholder":"This field is required","indicator":"required"}</ooui-demo> The following indicators are included in the OOjs UI library: [[File:WidgetsIndicators.png| Indicators used in OOjs UI.]] Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. <ooui-demo type="label">{"label":"This is a plaintext label"}</ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. eghb3gqzldux8b4714gm8ertc70k3fd 131 129 2015-01-29T22:59:30Z Admin 1 /* Indicators */ wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': <ooui-demo type="icon">{"icon":"remove","iconTitle":"Remove"}</ooui-demo> <ooui-demo type="label">{ "label": "Remove the items" }</ooui-demo> The following icons are included in the OOjs UI library: {{icon|add}} {{icon|advanced}} {{icon|alert}} {{icon|check}} {{icon|clear}} {{icon|close}} {{icon|code}} {{icon|collapse}} {{icon|comment}} {{icon|expand}} {{icon|help}} {{icon|info}} {{icon|link}} {{icon|menu}} {{icon|next}} {{icon|picture}} {{icon|previous}} {{icon|redo}} {{icon|remove}} {{icon|search}} {{icon|settings}} {{icon|tag}} {{icon|undo}} {{icon|window}} '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: <ooui-demo type="textinput">{"placeholder":"This field is required","indicator":"required"}</ooui-demo> The following indicators are included in the OOjs UI library: {{indicator|alert}} {{indicator|down}} {{indicator|next}} {{indicator|previous}} {{indicator|required}} {{indicator|up}} Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. <ooui-demo type="label">{"label":"This is a plaintext label"}</ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. kzowgyn32wvk4jkb567e4e7ban8alro 136 131 2015-02-20T15:30:05Z Admin 1 Use new template wikitext text/x-wiki Icon and indicator widgets contain small graphics (about the size of normal text) that efficiently convey information to help users interact with and understand an interface. Labels are also used to help identify interface components. The value of a label can be set to a  string, a label node, or a function that returns them. == Icons == The OOjs UI library contains a set of icons that can be used by '''IconWidgets''' to create small graphical elements that handle events. '''IconWidgets''' should rarely be used without a label, though a label may be omitted if space is at a premium (e.g., in a toolbar) or if the icon is used in a context where its meaning is very clear to the user. In these cases, consider using a frameless '''[[ButtonWidget]]''' instead (which can include a label and icon itself). {{described demo |description=To create an '''IconWidget''', use an '''IconWidget''' with a '''LabelWidget''': |demo= <ooui-demo type="icon">{"icon":"remove","iconTitle":"Remove"}</ooui-demo> <ooui-demo type="label">{ "label": "Remove the items" }</ooui-demo> }} The following icons are included in the OOjs UI library: {{icon|add}} {{icon|advanced}} {{icon|alert}} {{icon|check}} {{icon|clear}} {{icon|close}} {{icon|code}} {{icon|collapse}} {{icon|comment}} {{icon|expand}} {{icon|help}} {{icon|info}} {{icon|link}} {{icon|menu}} {{icon|next}} {{icon|picture}} {{icon|previous}} {{icon|redo}} {{icon|remove}} {{icon|search}} {{icon|settings}} {{icon|tag}} {{icon|undo}} {{icon|window}} '''IconWidgets''' support a number of methods that can be used to handle events and to get or set the value of contained elements. For example, '''getIcon()''' will return the name of the icon; '''setIcon()''', which takes either a symbolic icon name or a map of icon names keyed by language, will set the icon; and '''setIconTitle()''' will set the icon title. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IconWidget code-level documentation] for '''IconWidgets'''. == Indicators == Indicators are small graphics that are generally used in two ways: * To draw attention to the status of an item. For example, an indicator might be used to show that an item in a list has errors that need to be resolved. * To clarify the function of a control that acts in an exceptional way (a button that opens a menu instead of performing an action directly, for example). {{described demo |description= '''IndicatorWidgets''' are often used by other widgets (e.g., buttons, text inputs, dropdowns, decorated options). In the following example, a '''TextInputWidget''' uses an indicator to help clarify that the field is required: |demo=<ooui-demo type="textinput">{"placeholder":"This field is required","indicator":"required"}</ooui-demo> }} The following indicators are included in the OOjs UI library: {{indicator|alert}} {{indicator|down}} {{indicator|next}} {{indicator|previous}} {{indicator|required}} {{indicator|up}} Methods can be used to set or get the indicator title ('''setIndicatorTitle()''' and '''getIndicatorTitle()''', respectively) or to get the name of the indicator ('''getIndicator()'''). For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.IndicatorWidget code-level documentation] for IndicatorWidgets. == Labels == {{described demo |description= Labels help identify the function of interface elements. Each '''LabelWidget''' can be configured with a ‘label’ option that is set to a string, a label node, or a function: * String: a plaintext string * Label Node: a jQuery selection of elements. A jQuery selection is used for anything other than a plaintext label, e.g., a label that includes a link or special styling, such as a gray color or additional graphical elements. * Function: a function that will produce a string in the future. Functions are used in cases where the label value is not currently defined. See Extending the Library for more information. |demo=<ooui-demo type="label">{"label":"This is a plaintext label"}</ooui-demo> }} For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.LabelWidget code-level documentation] for '''LabelWidgets'''. sv9olum6i02soykk9duaq8hmrwzegfz OOjs UI/Widgets/Buttons and Switches 0 38 71 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Buttons and Switches]] to [[OOjs UI/Widgets/Buttons and Switches]] wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: [[File:ButtonsAndSwitchesButtons1.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Example: A ButtonWidget configured with an icon, label, and styling flag. // Create a new ButtonWidget. var button = new OO.ui.ButtonWidget(); // Configure the ButtonWidget. In this example, methods are used to configure the // button's icon, label, and styling flag. button.setIcon( 'info' ) .setLabel( 'Button with icon' ) .setFlags( 'progressive' ); // Append the button to the DOM.   $( 'body' ).append( button.$element ); </syntaxhighlight> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' [[File:ButtonsAndSwitchesButtons2.png| An example of href and target]] <syntaxhighlight lang="javascript"> // Assign a hyperlink to open when the button is clicked, as well as a target // window in which to open the link, using the 'href' and 'target' // options, respectively. The hyperlink and href can also be set using the // setTarget() and setHref() methods. var buttonOpen = new OO.ui.ButtonWidget( { label: 'Click Me!', href: 'http://www.mediawiki.org', target: '_blank' } );     $( 'body' ).append( buttonOpen.$element ); </syntaxhighlight> Add a label with the '''label''' option: [[File:ButtonsAndSwitchesButtons3.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Set the 'label' option to plain text, a jQuery selection of elements, // or a function. var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( 'body' ).append( buttonWithLabel.$element ); </syntaxhighlight> Use styling '''flags''' to customize the look and feel: [[File:ButtonsAndSwitchesButtons4.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use styling flags to customize the look and feel of a button widget. // Flags include: constructive, destructive, and progressive. // Constructive styling is applied to convey that the widget will create something. var buttonC = new OO.ui.ButtonWidget( { label : 'Constructive', flags :'constructive' } ); // Destructive styling is applied to convey that the widget will remove something. var buttonD = new OO.ui.ButtonWidget( { label : 'Destructive', flags :'destructive' } ); // Progressive styling is applied to convey that the widget will move the user // forward in whatever process they are in. var buttonP = new OO.ui.ButtonWidget( { label : 'Progressive', flags :'progressive' } ); $( 'body' ).append( buttonC.$element, buttonD.$element, buttonP.$element ); </syntaxhighlight> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] h3mj81hjqg633z784rcwr46rtuzjwnl 72 71 2015-01-16T13:32:20Z Admin 1 1 revision imported wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: [[File:ButtonsAndSwitchesButtons1.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Example: A ButtonWidget configured with an icon, label, and styling flag. // Create a new ButtonWidget. var button = new OO.ui.ButtonWidget(); // Configure the ButtonWidget. In this example, methods are used to configure the // button's icon, label, and styling flag. button.setIcon( 'info' ) .setLabel( 'Button with icon' ) .setFlags( 'progressive' ); // Append the button to the DOM.   $( 'body' ).append( button.$element ); </syntaxhighlight> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' [[File:ButtonsAndSwitchesButtons2.png| An example of href and target]] <syntaxhighlight lang="javascript"> // Assign a hyperlink to open when the button is clicked, as well as a target // window in which to open the link, using the 'href' and 'target' // options, respectively. The hyperlink and href can also be set using the // setTarget() and setHref() methods. var buttonOpen = new OO.ui.ButtonWidget( { label: 'Click Me!', href: 'http://www.mediawiki.org', target: '_blank' } );     $( 'body' ).append( buttonOpen.$element ); </syntaxhighlight> Add a label with the '''label''' option: [[File:ButtonsAndSwitchesButtons3.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Set the 'label' option to plain text, a jQuery selection of elements, // or a function. var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( 'body' ).append( buttonWithLabel.$element ); </syntaxhighlight> Use styling '''flags''' to customize the look and feel: [[File:ButtonsAndSwitchesButtons4.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use styling flags to customize the look and feel of a button widget. // Flags include: constructive, destructive, and progressive. // Constructive styling is applied to convey that the widget will create something. var buttonC = new OO.ui.ButtonWidget( { label : 'Constructive', flags :'constructive' } ); // Destructive styling is applied to convey that the widget will remove something. var buttonD = new OO.ui.ButtonWidget( { label : 'Destructive', flags :'destructive' } ); // Progressive styling is applied to convey that the widget will move the user // forward in whatever process they are in. var buttonP = new OO.ui.ButtonWidget( { label : 'Progressive', flags :'progressive' } ); $( 'body' ).append( buttonC.$element, buttonD.$element, buttonP.$element ); </syntaxhighlight> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] h3mj81hjqg633z784rcwr46rtuzjwnl 102 72 2015-01-29T18:36:48Z Prtksxna 3 /* Buttons */ Use styling flags to customize the look and feel wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: [[File:ButtonsAndSwitchesButtons1.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Example: A ButtonWidget configured with an icon, label, and styling flag. // Create a new ButtonWidget. var button = new OO.ui.ButtonWidget(); // Configure the ButtonWidget. In this example, methods are used to configure the // button's icon, label, and styling flag. button.setIcon( 'info' ) .setLabel( 'Button with icon' ) .setFlags( 'progressive' ); // Append the button to the DOM.   $( 'body' ).append( button.$element ); </syntaxhighlight> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' [[File:ButtonsAndSwitchesButtons2.png| An example of href and target]] <syntaxhighlight lang="javascript"> // Assign a hyperlink to open when the button is clicked, as well as a target // window in which to open the link, using the 'href' and 'target' // options, respectively. The hyperlink and href can also be set using the // setTarget() and setHref() methods. var buttonOpen = new OO.ui.ButtonWidget( { label: 'Click Me!', href: 'http://www.mediawiki.org', target: '_blank' } );     $( 'body' ).append( buttonOpen.$element ); </syntaxhighlight> Add a label with the '''label''' option: [[File:ButtonsAndSwitchesButtons3.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Set the 'label' option to plain text, a jQuery selection of elements, // or a function. var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( 'body' ).append( buttonWithLabel.$element ); </syntaxhighlight> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] fyfcumkt2xuf0yrmqgeqwxenz2p7j3o 103 102 2015-01-29T18:40:52Z Prtksxna 3 /* Buttons */ create a basic button use the ButtonWidget class wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' [[File:ButtonsAndSwitchesButtons2.png| An example of href and target]] <syntaxhighlight lang="javascript"> // Assign a hyperlink to open when the button is clicked, as well as a target // window in which to open the link, using the 'href' and 'target' // options, respectively. The hyperlink and href can also be set using the // setTarget() and setHref() methods. var buttonOpen = new OO.ui.ButtonWidget( { label: 'Click Me!', href: 'http://www.mediawiki.org', target: '_blank' } );     $( 'body' ).append( buttonOpen.$element ); </syntaxhighlight> Add a label with the '''label''' option: [[File:ButtonsAndSwitchesButtons3.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Set the 'label' option to plain text, a jQuery selection of elements, // or a function. var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( 'body' ).append( buttonWithLabel.$element ); </syntaxhighlight> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 771dnknuos8ukfofic1m0h5nvn1py09 104 103 2015-01-29T18:50:53Z Prtksxna 3 /* Buttons */ Click me with href wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: [[File:ButtonsAndSwitchesButtons3.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Set the 'label' option to plain text, a jQuery selection of elements, // or a function. var buttonWithLabel = new OO.ui.ButtonWidget( { label: 'Button Label' } ); $( 'body' ).append( buttonWithLabel.$element ); </syntaxhighlight> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] makjklcr9ldow4fsbr4l39jab47nuyq 105 104 2015-01-29T18:52:23Z Prtksxna 3 /* Buttons */ button with label wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': [[File:ButtonsAndSwitchesButtons5.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // A button can be framed (the default) or frameless. // Set the 'framed' option to 'false' to remove the border. var buttonNF = new OO.ui.ButtonWidget( { label : 'Frameless Constructive Button', flags : 'constructive', framed : false } );     $( 'body' ).append( buttonNF.$element ); </syntaxhighlight> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 0qealpqz4o6e713ui3qv79v4ttsrye3 106 105 2015-01-29T18:54:27Z Prtksxna 3 /* Buttons */ frameless constructive buton wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: [[File:ButtonsAndSwitchesButtons6.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign a button title with the 'title' option. var buttonWithTitle = new OO.ui.ButtonWidget( { label : 'Button with Title', title : 'I am a button' } ); $( 'body' ).append( buttonWithTitle.$element ); </syntaxhighlight> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] hm1nxc1bliiy0238lrk29dh2zf1vmly 107 106 2015-01-29T18:56:04Z Prtksxna 3 /* Buttons */ button with title wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': [[File:ButtonsAndSwitchesButtons7.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // To disable a button, set the 'disabled' option to 'true'. var buttonDisabled = new OO.ui.ButtonWidget( { label : 'Disabled Constructive Button', flags : 'constructive', disabled : true } ); $( 'body' ).append( buttonDisabled.$element ); </syntaxhighlight> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] naajk9wfumpz1yf5o22xffgqfj4dt5w 108 107 2015-01-29T18:57:31Z Prtksxna 3 /* Buttons */ disabled button wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: [[File:ButtonsAndSwitchesButtons8.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an icon and icon title with the 'icon' and 'iconTitle' // options, respectively. var buttonIcon = new OO.ui.ButtonWidget( { label : 'Button with Icon', icon : 'remove', iconTitle : 'Remove' } );     $( 'body' ).append( buttonIcon.$element ); </syntaxhighlight> Add an indicator with the '''indicator''' option: [[File:ButtonsAndSwitchesButtons9.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Assign an indicator with the 'indicator' option. // Indicators include: down, next, previous, required, up, alert. var buttonIndicator = new OO.ui.ButtonWidget( { label : 'Button with Indicator', indicator : 'down' } ); $( 'body' ).append( buttonIndicator.$element ); </syntaxhighlight> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 58qb3ch7t4p5acxvi7cai16v0e48kmw 109 108 2015-01-29T19:01:22Z Prtksxna 3 /* Buttons */ with icons and indicators wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 2a3yjrnn1nr0wnx21xmnbdse2ggkvhh 110 109 2015-01-29T19:03:39Z Prtksxna 3 /* Buttons */ fix ordering of file and syntaxhighlight wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: [[File:ButtonsAndSwitchesButtons11.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Specify a tab order with the 'tabIndex' option. var button1 = new OO.ui.ButtonWidget( { label : 'fourth', tabIndex : 4 } ); var button2 = new OO.ui.ButtonWidget( { label : 'second', tabIndex : 2 } ); var button3 = new OO.ui.ButtonWidget( { label : 'third', tabIndex : 3 } ); var button4 = new OO.ui.ButtonWidget( { label : 'first',   tabIndex : 1 } );    $( 'body' ).append( button1.$element, button2.$element, button3.$element, button4.$element ); </syntaxhighlight> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] l0omn6ezu70zt3f5d1xg1gtxnnofc36 111 110 2015-01-29T19:06:34Z Prtksxna 3 /* Buttons */ tabindex buttons wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: [[File:ButtonsAndSwitchesButtons12.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="javascript"> // Use the 'accessKey' option to assign a keyboard shortcut to a button widget. var buttonWithKey = new OO.ui.ButtonWidget( { label : 'My keyboard shortcut is: m', href :'http://www.mediawiki.org', accessKey : 'm' } ); $( 'body' ).append( buttonWithKey.$element ); </syntaxhighlight> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] hkeibs8e950ce2hu9ekt0y4hq97jn4e 112 111 2015-01-29T19:08:04Z Prtksxna 3 /* Buttons */ accesskey wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: [[File:ButtonsAndSwitchesButtons10.png| An example of a configured ButtonWidget ]] <syntaxhighlight lang="html5"> <style> .my-button .oo-ui-buttonElement-button { color: purple; } .my-button-pretty { border: solid 1px pink; } </style> <script> // Assign additional CSS styles to a button widget with the 'classes' option. // Note that CSS styles are added to the top level (e.g., the outermost div) // of the element. To style a nested element, such as a link, specify the // relevant class name (e.g., .oo-ui-buttonElement-button, in the above CSS) // in the style sheet. var buttonClassy = new OO.ui.ButtonWidget( { label : 'Pretty, pretty', classes : [ 'my-button',  'my-button-pretty' ] } );     $( 'body' ).append( buttonClassy.$element ); </script>   </syntaxhighlight> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: <ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] cyv9rf434zfguh4pomwsmufsfsl9yq7 113 112 2015-01-29T19:13:46Z Prtksxna 3 /* Buttons */ pretty pretty wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: <ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: <ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: [[File:ButtonsAndSwitchesToggleButtons1.png| An example of a ToggleButtonWidget ]] <syntaxhighlight lang="javascript"> // Toggle buttons in the 'off' and 'on' state. By default, the button // is in the 'off' state. var toggleButton1 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button off' } ); var toggleButton2 = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button on', value: true } ); // Append the buttons to the DOM. $( 'body' ).append( toggleButton1.$element, toggleButton2.$element ); </syntaxhighlight> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] ns9y6wadldhhuzkos2cjkrxhsz0kq2g 120 113 2015-01-29T21:50:20Z Admin 1 /* Toggle buttons */ Convert to OOUI-Demo wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: <ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: <ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: <ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: [[File:ButtonsAndSwitchesToggleSwitch1.png| An example of a ToggleSwitchWidget ]] <syntaxhighlight lang="javascript"> // This example shows toggle switches in the off and on position. // Note that the example uses a FieldsetLayout to format the toggle switches // and to add labels to identify each ('On' and 'Off'). For more information // about fieldset layouts, please see the Layout section. // Create the toggle switches. var toggleSwitch1 = new OO.ui.ToggleSwitchWidget({ value: false } ); var toggleSwitch2 = new OO.ui.ToggleSwitchWidget({ value: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Toggle switches' } ); // Add the toggle switches to FieldLayouts, which are added to the FieldsetLayout // using the addItems() method. fieldset.addItems( [ new OO.ui.FieldLayout( toggleSwitch1, {label : 'Off', align : 'top'}), new OO.ui.FieldLayout( toggleSwitch2, {label : 'On', align : 'top'}) ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 1gjw3ftdp7vbtcdynu8t2m710ip5j32 121 120 2015-01-29T21:54:38Z Admin 1 /* Toggle switches */ Convert to OOUI-Demo wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags":"progressive", "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: <ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: <ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: <ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: <ooui-demo type="deferred"> { "label":"Toggle switches", "class":"FieldsetLayout", "items":[ {"class":"FieldLayout","label":"Off","align":"top","items":[{"value":false,"class":"ToggleSwitchWidget"}]}, {"class":"FieldLayout","label":"On","align":"top","items":[{"value":true,"class":"ToggleSwitchWidget"}]} ] } </ooui-demo> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 5vhhbqbpy33yg6ilcoqsc5g06d8yv91 133 121 2015-02-18T14:42:23Z Prtksxna 3 /* Buttons */ wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == To create a basic button use the '''ButtonWidget''' class: <ooui-demo type="button"> { "label":"Button with icon", "flags": ["progressive", "primary"], "icon":"info" } </ooui-demo> Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. Assign a hyperlink to open and a target''' with '''href''' and '''target:''' <ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> Add a label with the '''label''' option: <ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> Use styling '''flags''' to customize the look and feel: <ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> To remove a button frame (create a frameless button), set the '''framed''' option to 'false': <ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: <ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> To disable a button, set the '''disabled''' option to 'true': <ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: <ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> Add an indicator with the '''indicator''' option: <ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> Add additional CSS styling with the '''classes''' option: <ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> Specify a tab order with the '''tabIndex''' option: <ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: <ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. To create a toggle button use the '''ToggleButtonWidget''' class: <ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. To create a toggle-switch button use the '''ToggleSwitchWidget''' class: <ooui-demo type="deferred"> { "label":"Toggle switches", "class":"FieldsetLayout", "items":[ {"class":"FieldLayout","label":"Off","align":"top","items":[{"value":false,"class":"ToggleSwitchWidget"}]}, {"class":"FieldLayout","label":"On","align":"top","items":[{"value":true,"class":"ToggleSwitchWidget"}]} ] } </ooui-demo> '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] ekmgwg35oypeuo4gkg1z05ugx6slote 137 133 2015-02-20T15:35:02Z Admin 1 Convert to the new format wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=To create a basic button use the '''ButtonWidget''' class: |demo=<ooui-demo type="button"> { "label":"Button with icon", "flags": ["progressive", "primary"], "icon":"info" } </ooui-demo> }} Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. {{described demo |description=Assign a hyperlink to open and a target''' with '''href''' and '''target:''' |demo=<ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> }} {{described demo |description=Add a label with the '''label''' option: |demo=<ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> }} {{described demo |description=Use styling '''flags''' to customize the look and feel: |demo=<ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> }} {{described demo |description=To remove a button frame (create a frameless button), set the '''framed''' option to 'false': |demo=<ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> }} {{described demo |description=Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> }} {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> }} {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Add additional CSS styling with the '''classes''' option: |demo=<ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> }} {{described demo |description=Specify a tab order with the '''tabIndex''' option: |demo=<ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: [[File:ButtonsAndSwitchesPopupButtons1.png| An example of a PopupButtonWidget ]] <syntaxhighlight lang="javascript"> // Create a popup button. The 'popup' config contains the // configurations that will be passed to the popup. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button with options',   icon : 'menu', popup : { $content: $( '<p>Additional options here.</p>' ), padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); </syntaxhighlight> Popup buttons can be configured in the same ways that basic buttons can be. Use the '''getPopup()''' method to return the popup so that can be interacted with: <syntaxhighlight lang="javascript"> // This example illustrates creating a popup button and then use getPopup() // to get it. The getLabel() method gets the popup label ('This is the popup'), // which is written to the console log. var popupButton = new OO.ui.PopupButtonWidget( { label: 'Popup button', icon : 'menu', popup : { $content: $( '<p>Add additional content or options here.</p>' ), label: 'This is the popup', padded: true, align: 'left' } } ); // Append the button to the DOM. $( 'body' ).append( popupButton.$element ); // getPopup() console.log( 'The popup label:', popupButton.getPopup().getLabel() ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="deferred"> { "label":"Toggle switches", "class":"FieldsetLayout", "items":[ {"class":"FieldLayout","label":"Off","align":"top","items":[{"value":false,"class":"ToggleSwitchWidget"}]}, {"class":"FieldLayout","label":"On","align":"top","items":[{"value":true,"class":"ToggleSwitchWidget"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 9ymrsdeox5rqa2cvxmshymgn8dxh067 155 137 2015-02-25T14:46:39Z Admin 1 /* Popup buttons */ wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=To create a basic button use the '''ButtonWidget''' class: |demo=<ooui-demo type="button"> { "label":"Button with icon", "flags": ["progressive", "primary"], "icon":"info" } </ooui-demo> }} Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. {{described demo |description=Assign a hyperlink to open and a target''' with '''href''' and '''target:''' |demo=<ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> }} {{described demo |description=Add a label with the '''label''' option: |demo=<ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> }} {{described demo |description=Use styling '''flags''' to customize the look and feel: |demo=<ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> }} {{described demo |description=To remove a button frame (create a frameless button), set the '''framed''' option to 'false': |demo=<ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> }} {{described demo |description=Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> }} {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> }} {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Add additional CSS styling with the '''classes''' option: |demo=<ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> }} {{described demo |description=Specify a tab order with the '''tabIndex''' option: |demo=<ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="deferred"> { "label":"Toggle switches", "class":"FieldsetLayout", "items":[ {"class":"FieldLayout","label":"Off","align":"top","items":[{"value":false,"class":"ToggleSwitchWidget"}]}, {"class":"FieldLayout","label":"On","align":"top","items":[{"value":true,"class":"ToggleSwitchWidget"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] dcnsi1g0te9to9zu6sw5ftfnmny1kn6 156 155 2015-02-25T14:47:55Z Admin 1 /* Toggle switches */ Fix for deferred wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=To create a basic button use the '''ButtonWidget''' class: |demo=<ooui-demo type="button"> { "label":"Button with icon", "flags": ["progressive", "primary"], "icon":"info" } </ooui-demo> }} Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. {{described demo |description=Assign a hyperlink to open and a target''' with '''href''' and '''target:''' |demo=<ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> }} {{described demo |description=Add a label with the '''label''' option: |demo=<ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> }} {{described demo |description=Use styling '''flags''' to customize the look and feel: |demo=<ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> }} {{described demo |description=To remove a button frame (create a frameless button), set the '''framed''' option to 'false': |demo=<ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> }} {{described demo |description=Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> }} {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> }} {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Add additional CSS styling with the '''classes''' option: |demo=<ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> }} {{described demo |description=Specify a tab order with the '''tabIndex''' option: |demo=<ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo> { "label":"Toggle switches", "type":"FieldsetLayout", "items":[ {"type":"FieldLayout","label":"Off","align":"top","items":[{"value":false,"type":"ToggleSwitchWidget"}]}, {"type":"FieldLayout","label":"On","align":"top","items":[{"value":true,"type":"ToggleSwitchWidget"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 35tsacve6ot1ks27fawcsbyj12wp654 157 156 2015-02-25T14:48:46Z Admin 1 /* Toggle switches */ wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=To create a basic button use the '''ButtonWidget''' class: |demo=<ooui-demo type="button"> { "label":"Button with icon", "flags": ["progressive", "primary"], "icon":"info" } </ooui-demo> }} Configuration settings can be passed to the widget in the form of a configuration object or set using the widget’s methods. The examples below use a configuration object, but the settings could just have easily been specified with methods. {{described demo |description=Assign a hyperlink to open and a target''' with '''href''' and '''target:''' |demo=<ooui-demo type="button"> { "label": "Click Me!", "href": "http://www.mediawiki.org", "target": "_blank" } </ooui-demo> }} {{described demo |description=Add a label with the '''label''' option: |demo=<ooui-demo type="button"> { "label": "Button Label" } </ooui-demo> }} {{described demo |description=Use styling '''flags''' to customize the look and feel: |demo=<ooui-demo type="button"> { "label" : "Constructive", "flags" :"constructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Destructive", "flags" :"destructive" } </ooui-demo> <ooui-demo type="button"> { "label" : "Progressive", "flags" :"progressive" } </ooui-demo> }} {{described demo |description=To remove a button frame (create a frameless button), set the '''framed''' option to 'false': |demo=<ooui-demo type="button"> { "label" : "Frameless Constructive Button", "flags" : "constructive", "framed" : false } </ooui-demo> }} {{described demo |description=Assign a button title (displayed when the user hovers the mouse pointer over it) with the '''title''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Title", "title" : "I am a button" } </ooui-demo> }} {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Disabled Constructive Button", "flags" : "constructive", "disabled" : true } </ooui-demo> }} {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Add additional CSS styling with the '''classes''' option: |demo=<ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> }} {{described demo |description=Specify a tab order with the '''tabIndex''' option: |demo=<ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] pvjlexje2wz2za4tlmy2uf3wmdch8zp 172 157 2015-02-28T09:43:24Z Jaredzimmerman (WMF) 5 /* Buttons */ wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label": "Normal Button" } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label": "Toolbar Button" } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button" } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label": "Stacked Button" } </ooui-demo> }} ===Button Intentions === {{described demo |description=Neutral buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags" :"neutral" } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description=Constructive buttons are used so show the user what action will happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags" :"constructive" } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags" :"constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description=Progressive buttons are used so show the user they are at the beginning or middle of a muli-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags" :"progressive" } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description=Destructive buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags" :"destructive" } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Add additional CSS styling with the '''classes''' option: |demo=<ooui-demo type="button"> { "label" : "Pretty, pretty", "classes" : "my-button" } </ooui-demo> }} {{described demo |description=Specify a tab order with the '''tabIndex''' option: |demo=<ooui-demo type="button"> { "label":"fourth", "tabIndex": 4 } </ooui-demo> <ooui-demo type="button"> { "label":"second", "tabIndex": 2 } </ooui-demo> <ooui-demo type="button"> { "label":"three", "tabIndex": 3 } </ooui-demo> <ooui-demo type="button"> { "label":"first", "tabIndex": 1 } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} '''ButtonWidgets''' define the following public methods: '''setHref(), setTarget(), getHref(), getTarget(),''' but many additional methods are inherited or mixed in from other classes. For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonWidget code-level documentation.] == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 4q68ugtmo9c3wtou85sak4zs35h5egf 173 172 2015-02-28T10:45:49Z Jaredzimmerman (WMF) 5 /* Buttons */ wikitext text/x-wiki Button widgets are generally created with the '''ButtonWidget''' class, and a wide variety of looks, feels, and functionality can be customized via configuration options and methods. By default, a rendered button is link that has no ‘href’.  HTML form buttons should use the '''[[OOjs UI/Documentation/Widgets/Inputs#Button inputs|ButtonInputWidget]]''' class. Toggle switches, which have either an ‘on’ or ‘off’ state, are created with the '''[[#Toggle switches|ToggleSwitchWidget]]''' class. The library also contains a '''[[#Toggle buttons|ToggleButtonWidget]]''' that has this same behavior. Popup buttons, created with the '''[[#Popup buttons|PopupButtonWidget]]''' class, are also available. == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 7392iznpnogplemcy18pqsfzr3a3nxi 174 173 2015-02-28T10:48:43Z Jaredzimmerman (WMF) 5 wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 2dcshz94z8xgkjb4zrydqwa5725wbv4 176 174 2015-03-10T01:55:09Z Prtksxna 3 /* Popup buttons */ wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" "frameless": "true" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] qgsfn4a5h03q28vphdigiulr05o97s6 177 176 2015-03-10T01:55:52Z Prtksxna 3 /* Popup buttons */ wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left", "frameless": "true" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] eq4hwr4tpal8j434http610y63ctbmq 178 177 2015-03-10T01:56:28Z Prtksxna 3 /* Popup buttons */ wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "frameless": "true" "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 2dmhzw1tyjhaj3dlv753hq9k8wxeou2 179 178 2015-03-10T01:56:53Z Prtksxna 3 /* Popup buttons */ wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "frameless": "true", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 88vxqj1rwi7gewbli79bd0fhjgi0lgy 180 179 2015-03-10T01:57:12Z Prtksxna 3 /* Popup buttons */ wikitext text/x-wiki == Buttons == {{described demo |description=Buttons are one of the most common interface elements, they are used to guide users through multi-step processes, as well as acting the navigation in screen based process flows. For any grouping of Buttons the Control ordering is important, interfaces should read top to bottom, left to right. With the Primary Action appearing at the righthand side of the interface, At the top in the case of dialogs and small screen interfaces such as phone or tablet, and either the top or bottom in the case of large screen interfaces. For desktop/large screen interfaces top or bottom orientation should be based on whether the contents of the screen or dialog is optional to interact with, but endeavour to not move the controls from top to bottom within a particular process as this can be distracting to users. Button heights are fixed, and have an automatic minimum width, their maximum width is defined by their content. '''Acceptable Modifiers : Style, Intention, Importance, Size''' <br><br> |demo=<ooui-demo type="button"> { "label":"Hi, I'm a Button", "flags": ["progressive", "primary"], } <br><br><br> </ooui-demo> }} ===Button Styles === ====Normal==== {{described demo |description= Normal buttons can come in many styles. They can have text labels, text and icon, or icon only. They can be Primary and be colored with Intention or not. |demo=<ooui-demo type="button"> { "label" : "Normal Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Toolbar==== {{described demo |description= Buttons with the Toolbar Style do not have rounded corners and fill the space which they are placed, most commonly a toolbar, because of this they may have increased width beyond that of the label. |demo=<ooui-demo type="button"> { "label" : "Toolbar Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Stacked==== {{described demo |description= Button with the Stacked style fill up the full width of the form element they are contained in respective of their label content width. The Stacked style is most commonly used with vertically oriented forms or mobile interfaces where there is a single action available to the user. |demo=<ooui-demo type="button"> { "label" : "Stacked Button", "flags": ["constructive", "primary"], } </ooui-demo> }} ====Quiet==== {{described demo |description= Buttons in the Quiet style do not display the Intention color or draw a button boundary unless the user interacts with them via hover or focus. Due to a lack of Hover state in most touch interfaces on touch devices Quiet buttons are always shown in their Hover state on devices which touch support is the primary interface |demo=<ooui-demo type="button"> { "label": "Quiet Button", "framed" : false } </ooui-demo> }} ===Button Intentions === {{described demo |description='''Neutral''' buttons are used in conjunction with primary buttons in button groups or when the button is not the primary action. |demo=<ooui-demo type="button"> { "label" : "Say Hello", "flags": ["neutral", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Say Hello, Quietly", "flags" :"neutral", "framed" : false } </ooui-demo> }} {{described demo |description='''Constructive''' buttons are used to show the user what action ''will'' happen, saving a page, posting a message, etc. |demo=<ooui-demo type="button"> { "label" : "Make it So", "flags": ["constructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Let's Do This", "flags": "constructive", "framed" : false, "title" : "This button is constructive, yet quiet" } </ooui-demo> }} {{described demo |description='''Progressive''' buttons are used to show the user they are at the beginning or middle of a multi-step process, like building a reference, or creating an account. |demo=<ooui-demo type="button"> { "label" : "Next", "flags": ["progressive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Onward", "flags" :"progressive", "framed" : false, "title" : "This button is progressive, yet quiet" } </ooui-demo> }} {{described demo |description='''Destructive''' buttons are used so show the user they are deleting data, such as discarding an edit in progress, or deleting an account. |demo=<ooui-demo type="button"> { "label" : "Destroy!", "flags": ["destructive", "primary"], } </ooui-demo> }} {{described demo |description= |demo=<ooui-demo type="button"> { "label" : "Poof!", "flags" :"destructive", "framed" : false, "title" : "This button is destructive, yet quiet" } </ooui-demo> }} ===Button States === ==== Normal ==== ==== Hover ==== ==== Active ==== ==== Focus ==== ==== Disabled ==== {{described demo |description=To disable a button, set the '''disabled''' option to 'true': |demo=<ooui-demo type="button"> { "label" : "Coming Soon", "flags" : "normal", "disabled" : true } </ooui-demo> }} ==== Other Things ==== {{described demo |description=Add an icon and icon title with the '''icon''' and '''iconTitle''' options, respectively: |demo=<ooui-demo type="button"> { "label" : "Button with Icon", "icon" : "remove", "iconTitle" :"Remove" } </ooui-demo> }} {{described demo |description=Add an indicator with the '''indicator''' option: |demo=<ooui-demo type="button"> { "label" : "Button with Indicator", "indicator" : "down" } </ooui-demo> }} {{described demo |description=Use the '''accessKey''' option to assign a keyboard shortcut to a button widget: |demo=<ooui-demo type="button"> { "label" : "My keyboard shortcut is: m", "href" :"http://www.mediawiki.org", "accessKey" : "m" } </ooui-demo> }} == Toggle buttons == Toggle buttons are buttons that have a state (‘on’ or ‘off’) which is represented by a Boolean value. The state of the button can be gotten with the '''getValue()''' method which will return ‘true’ if the button is ‘on’ and ‘false’ otherwise (the default). ‘Change’ events contain the value of the toggle button’s  state, which allows applications to easily respond to the events asynchronously. {{described demo |description=To create a toggle button use the '''ToggleButtonWidget''' class: |demo=<ooui-demo type="deferred"> {"label":"Toggle Button off","class":"ToggleButtonWidget"} </ooui-demo> <ooui-demo type="deferred"> {"label":"Toggle Button on","class":"ToggleButtonWidget", "value": true} </ooui-demo> }} Like basic buttons, toggle buttons can be configured with icons, indicators, titles, styling flags, and labels. In addition to the methods supported by basic buttons, the class supports a '''getValue()''' and '''setValue()''' method, which are used to get and set the value of the button, respectively: <syntaxhighlight lang="javascript"> // In this example, the setValue() method is // used to change the button's state to 'on'. var toggleButton = new OO.ui.ToggleButtonWidget( { label: 'Toggle Button' } ); // Change the button state to 'on'. toggleButton.setValue(true); $( 'body' ).append( toggleButton.$element ); // The getValue() method returns the state of the button: console.log( 'The button is:', toggleButton.getValue()); </syntaxhighlight> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleButtonWidget code-level documentation] for the '''ToggleButtonWidget''' class. == Popup buttons == Popup buttons toggle the visibility of a contained '''[[PopupWidget,|PopupWidget]]'''[[PopupWidget,|,]] which is used to display additional information or options. The popup itself can be accessed using the '''getPopup()''' method. To create a popup button use the '''PopupButtonWidget''' class: <ooui-demo type="popupbutton"> { "label": "Popup button with options", "icon": "menu", "popup": { "label" : "This is my label", "$content": "<p>Some popup content</p>", "padded": "true", "align": "left" } } </ooui-demo> For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupButtonWidget code-level documentation] for the '''PopupButtonWidget''' class. == Toggle switches == Like toggle buttons, toggle switches have an on/off state, which is represent by a Boolean value (‘true’ for ‘on’, and ‘false’ otherwise, the default). The ‘off’ state is represented visually by a slider in the leftmost position. Toggle switches do not have a label config option. {{described demo |description=To create a toggle-switch button use the '''ToggleSwitchWidget''' class: |demo=<ooui-demo type="fieldsetlayout"> { "label":"Toggle switches", "items":[ {"type":"fieldlayout","label":"Off","align":"top","items":[{"value":false,"type":"toggleswitch"}]}, {"type":"fieldlayout","label":"On","align":"top","items":[{"value":true,"type":"toggleswitch"}]} ] } </ooui-demo> }} '''ToggleSwitchWidgets''' can be disabled or configured with additional CSS classes. Each also has a state value (‘false’ by default), which can be set via a config option or the '''setValue()''' method. The '''getValue()''' method will get the state value. For a complete list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ToggleSwitchWidget code-level documentation.] 2dcshz94z8xgkjb4zrydqwa5725wbv4 OOjs UI/Widgets/Selects and Options 0 39 73 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Selects and Options]] to [[OOjs UI/Widgets/Selects and Options]] wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. [[File:WidgetsSelectsAndOptionsButtons.png| An example of a ButtonSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ButtonSelectWidget that contains ButtonOptionWidgets // Note that when rendered, ButtonOptionWidgets might look like ButtonWidgets, // but the two are different. // Although optional, data is almost always specified (e.g., 1, 2, and // 3 in this example). var option1 = new OO.ui.ButtonOptionWidget( { data: 1, label: 'Option 1', title:'Button option 1' } ); var option2 = new OO.ui.ButtonOptionWidget( { data: 2, label: 'Option 2', title:'Button option 2' } ); var option3 = new OO.ui.ButtonOptionWidget( { data: 3, label: 'Option 3', title:'Button option 3' } ); // Create a new ButtonSelectWidget and add the button options to it // via the ButtonSelectWidget's 'items' config option. var buttonSelect=new OO.ui.ButtonSelectWidget( { items: [option1, option2, option3] } ); // Append the ButtonSelectWidget to the DOM. $('body').append(buttonSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. [[File:WidgetsSelectsAndOptionsRadio.png| An example of a RadioSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a RadioSelectWidget with RadioOptions. // Create options to populate the RadioSelectWidget. var option1 = new OO.ui.RadioOptionWidget( { data: 'a', label: 'Selected radio option' } ); var option2 = new OO.ui.RadioOptionWidget( { data: 'b', label: 'Unselected radio option' } ); // Create a new RadioSelectWidget and add the radio options to it // via the 'items' config option. var radioSelect=new OO.ui.RadioSelectWidget( { items: [option1, option2] } ); // Select 'option 1' using the RadioSelectWidget's selectItem() method. radioSelect.selectItem( option1 ); // Append the widget to the DOM. $('body').append(radioSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: [[File:WidgetsSelectsAndOptionsDropdown1.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: A DropdownWidget that contains a menu of options. // Note that the DropdownWidget is not a menu itself, but a container for a menu. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', // The menu is composed within the DropdownWidget menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second (disabled option)', disabled: true } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ), new OO.ui.MenuOptionWidget( { data: 'd', label: 'The fourth option has a long label' } ), new OO.ui.MenuOptionWidget( { data: 'e', label: 'Fifth' } ) ] } } ); // Append the menu to the DOM. $('body').append(dropDown.$element); </syntaxhighlight> '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' [[File:WidgetsSelectsAndOptionsDropdown2.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: [[File:WidgetsSelectsAndOptionsComboBox.png| An example of a ComboBoxWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ComboBoxWidget. Users can type 'Option Four' in the text // field to make that option appear selected, or choose 'Option Four' from the // menu, in which case, the Option Four data will appear in the text field. var comboBox=new OO.ui.ComboBoxWidget( { label: 'ComboBoxWidget', input: 'Option One', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'Option 1', label: 'Option One' } ), new OO.ui.MenuOptionWidget( { data: 'Option 2', label: 'Option Two' } ), new OO.ui.MenuOptionWidget( { data: 'Option 3', label: 'Option Three'} ), new OO.ui.MenuOptionWidget( { data: 'Option 4', label: 'Option Four' } ), new OO.ui.MenuOptionWidget( { data: 'Option 5', label: 'Option Five' } ) ] } } ); $('body').append(comboBox.$element); </syntaxhighlight> '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. rzof9eerhpidxm9nfrnrg2z2d5hdek1 74 73 2015-01-16T13:32:24Z Admin 1 1 revision imported wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. [[File:WidgetsSelectsAndOptionsButtons.png| An example of a ButtonSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ButtonSelectWidget that contains ButtonOptionWidgets // Note that when rendered, ButtonOptionWidgets might look like ButtonWidgets, // but the two are different. // Although optional, data is almost always specified (e.g., 1, 2, and // 3 in this example). var option1 = new OO.ui.ButtonOptionWidget( { data: 1, label: 'Option 1', title:'Button option 1' } ); var option2 = new OO.ui.ButtonOptionWidget( { data: 2, label: 'Option 2', title:'Button option 2' } ); var option3 = new OO.ui.ButtonOptionWidget( { data: 3, label: 'Option 3', title:'Button option 3' } ); // Create a new ButtonSelectWidget and add the button options to it // via the ButtonSelectWidget's 'items' config option. var buttonSelect=new OO.ui.ButtonSelectWidget( { items: [option1, option2, option3] } ); // Append the ButtonSelectWidget to the DOM. $('body').append(buttonSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. [[File:WidgetsSelectsAndOptionsRadio.png| An example of a RadioSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a RadioSelectWidget with RadioOptions. // Create options to populate the RadioSelectWidget. var option1 = new OO.ui.RadioOptionWidget( { data: 'a', label: 'Selected radio option' } ); var option2 = new OO.ui.RadioOptionWidget( { data: 'b', label: 'Unselected radio option' } ); // Create a new RadioSelectWidget and add the radio options to it // via the 'items' config option. var radioSelect=new OO.ui.RadioSelectWidget( { items: [option1, option2] } ); // Select 'option 1' using the RadioSelectWidget's selectItem() method. radioSelect.selectItem( option1 ); // Append the widget to the DOM. $('body').append(radioSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: [[File:WidgetsSelectsAndOptionsDropdown1.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: A DropdownWidget that contains a menu of options. // Note that the DropdownWidget is not a menu itself, but a container for a menu. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', // The menu is composed within the DropdownWidget menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second (disabled option)', disabled: true } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ), new OO.ui.MenuOptionWidget( { data: 'd', label: 'The fourth option has a long label' } ), new OO.ui.MenuOptionWidget( { data: 'e', label: 'Fifth' } ) ] } } ); // Append the menu to the DOM. $('body').append(dropDown.$element); </syntaxhighlight> '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' [[File:WidgetsSelectsAndOptionsDropdown2.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: [[File:WidgetsSelectsAndOptionsComboBox.png| An example of a ComboBoxWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ComboBoxWidget. Users can type 'Option Four' in the text // field to make that option appear selected, or choose 'Option Four' from the // menu, in which case, the Option Four data will appear in the text field. var comboBox=new OO.ui.ComboBoxWidget( { label: 'ComboBoxWidget', input: 'Option One', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'Option 1', label: 'Option One' } ), new OO.ui.MenuOptionWidget( { data: 'Option 2', label: 'Option Two' } ), new OO.ui.MenuOptionWidget( { data: 'Option 3', label: 'Option Three'} ), new OO.ui.MenuOptionWidget( { data: 'Option 4', label: 'Option Four' } ), new OO.ui.MenuOptionWidget( { data: 'Option 5', label: 'Option Five' } ) ] } } ); $('body').append(comboBox.$element); </syntaxhighlight> '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. rzof9eerhpidxm9nfrnrg2z2d5hdek1 114 74 2015-01-29T20:42:47Z Admin 1 /* Button selects and options */ fda wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. [[File:WidgetsSelectsAndOptionsButtons.png| An example of a ButtonSelectWidget ]] <ooui-demo type="deferred"> {"class": "ButtonSelectWidget", "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "class": "ButtonOptionWidget"}, {"data":2,"label":"Option 2","title":"Button option 2", "class": "ButtonOptionWidget"}, {"data":3,"label":"Option 3","title":"Button option 3", "class": "ButtonOptionWidget"} ] } </ooui-demo> <syntaxhighlight lang="javascript"> // Example: Creating a ButtonSelectWidget that contains ButtonOptionWidgets // Note that when rendered, ButtonOptionWidgets might look like ButtonWidgets, // but the two are different. // Although optional, data is almost always specified (e.g., 1, 2, and // 3 in this example). var option1 = new OO.ui.ButtonOptionWidget( { data: 1, label: 'Option 1', title:'Button option 1' } ); var option2 = new OO.ui.ButtonOptionWidget( { data: 2, label: 'Option 2', title:'Button option 2' } ); var option3 = new OO.ui.ButtonOptionWidget( { data: 3, label: 'Option 3', title:'Button option 3' } ); // Create a new ButtonSelectWidget and add the button options to it // via the ButtonSelectWidget's 'items' config option. var buttonSelect=new OO.ui.ButtonSelectWidget( { items: [option1, option2, option3] } ); // Append the ButtonSelectWidget to the DOM. $('body').append(buttonSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. [[File:WidgetsSelectsAndOptionsRadio.png| An example of a RadioSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a RadioSelectWidget with RadioOptions. // Create options to populate the RadioSelectWidget. var option1 = new OO.ui.RadioOptionWidget( { data: 'a', label: 'Selected radio option' } ); var option2 = new OO.ui.RadioOptionWidget( { data: 'b', label: 'Unselected radio option' } ); // Create a new RadioSelectWidget and add the radio options to it // via the 'items' config option. var radioSelect=new OO.ui.RadioSelectWidget( { items: [option1, option2] } ); // Select 'option 1' using the RadioSelectWidget's selectItem() method. radioSelect.selectItem( option1 ); // Append the widget to the DOM. $('body').append(radioSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: [[File:WidgetsSelectsAndOptionsDropdown1.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: A DropdownWidget that contains a menu of options. // Note that the DropdownWidget is not a menu itself, but a container for a menu. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', // The menu is composed within the DropdownWidget menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second (disabled option)', disabled: true } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ), new OO.ui.MenuOptionWidget( { data: 'd', label: 'The fourth option has a long label' } ), new OO.ui.MenuOptionWidget( { data: 'e', label: 'Fifth' } ) ] } } ); // Append the menu to the DOM. $('body').append(dropDown.$element); </syntaxhighlight> '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' [[File:WidgetsSelectsAndOptionsDropdown2.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: [[File:WidgetsSelectsAndOptionsComboBox.png| An example of a ComboBoxWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ComboBoxWidget. Users can type 'Option Four' in the text // field to make that option appear selected, or choose 'Option Four' from the // menu, in which case, the Option Four data will appear in the text field. var comboBox=new OO.ui.ComboBoxWidget( { label: 'ComboBoxWidget', input: 'Option One', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'Option 1', label: 'Option One' } ), new OO.ui.MenuOptionWidget( { data: 'Option 2', label: 'Option Two' } ), new OO.ui.MenuOptionWidget( { data: 'Option 3', label: 'Option Three'} ), new OO.ui.MenuOptionWidget( { data: 'Option 4', label: 'Option Four' } ), new OO.ui.MenuOptionWidget( { data: 'Option 5', label: 'Option Five' } ) ] } } ); $('body').append(comboBox.$element); </syntaxhighlight> '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. ro7sj40toyzxlbl3mi466ylykjqcfqx 115 114 2015-01-29T21:33:29Z Admin 1 /* Button selects and options */ Remove old style docs wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo type="deferred"> {"class": "ButtonSelectWidget", "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "class": "ButtonOptionWidget"}, {"data":2,"label":"Option 2","title":"Button option 2", "class": "ButtonOptionWidget"}, {"data":3,"label":"Option 3","title":"Button option 3", "class": "ButtonOptionWidget"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. [[File:WidgetsSelectsAndOptionsRadio.png| An example of a RadioSelectWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a RadioSelectWidget with RadioOptions. // Create options to populate the RadioSelectWidget. var option1 = new OO.ui.RadioOptionWidget( { data: 'a', label: 'Selected radio option' } ); var option2 = new OO.ui.RadioOptionWidget( { data: 'b', label: 'Unselected radio option' } ); // Create a new RadioSelectWidget and add the radio options to it // via the 'items' config option. var radioSelect=new OO.ui.RadioSelectWidget( { items: [option1, option2] } ); // Select 'option 1' using the RadioSelectWidget's selectItem() method. radioSelect.selectItem( option1 ); // Append the widget to the DOM. $('body').append(radioSelect.$element); </syntaxhighlight> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: [[File:WidgetsSelectsAndOptionsDropdown1.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: A DropdownWidget that contains a menu of options. // Note that the DropdownWidget is not a menu itself, but a container for a menu. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', // The menu is composed within the DropdownWidget menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second (disabled option)', disabled: true } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ), new OO.ui.MenuOptionWidget( { data: 'd', label: 'The fourth option has a long label' } ), new OO.ui.MenuOptionWidget( { data: 'e', label: 'Fifth' } ) ] } } ); // Append the menu to the DOM. $('body').append(dropDown.$element); </syntaxhighlight> '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' [[File:WidgetsSelectsAndOptionsDropdown2.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: [[File:WidgetsSelectsAndOptionsComboBox.png| An example of a ComboBoxWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ComboBoxWidget. Users can type 'Option Four' in the text // field to make that option appear selected, or choose 'Option Four' from the // menu, in which case, the Option Four data will appear in the text field. var comboBox=new OO.ui.ComboBoxWidget( { label: 'ComboBoxWidget', input: 'Option One', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'Option 1', label: 'Option One' } ), new OO.ui.MenuOptionWidget( { data: 'Option 2', label: 'Option Two' } ), new OO.ui.MenuOptionWidget( { data: 'Option 3', label: 'Option Three'} ), new OO.ui.MenuOptionWidget( { data: 'Option 4', label: 'Option Four' } ), new OO.ui.MenuOptionWidget( { data: 'Option 5', label: 'Option Five' } ) ] } } ); $('body').append(comboBox.$element); </syntaxhighlight> '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. du2qpfx7hw30jixyj47ph5jtds1g4ey 116 115 2015-01-29T21:35:48Z Admin 1 /* Radio selects and options */ Convert wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo type="deferred"> {"class": "ButtonSelectWidget", "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "class": "ButtonOptionWidget"}, {"data":2,"label":"Option 2","title":"Button option 2", "class": "ButtonOptionWidget"}, {"data":3,"label":"Option 3","title":"Button option 3", "class": "ButtonOptionWidget"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. <ooui-demo type="deferred"> {"class":"RadioSelectWidget", "items":[ {"data":"a","label":"Selected radio option", "class" : "RadioOptionWidget"}, {"data":"b","label":"Unselected radio option", "class" : "RadioOptionWidget"}, ] } </ouui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: [[File:WidgetsSelectsAndOptionsDropdown1.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: A DropdownWidget that contains a menu of options. // Note that the DropdownWidget is not a menu itself, but a container for a menu. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', // The menu is composed within the DropdownWidget menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second (disabled option)', disabled: true } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ), new OO.ui.MenuOptionWidget( { data: 'd', label: 'The fourth option has a long label' } ), new OO.ui.MenuOptionWidget( { data: 'e', label: 'Fifth' } ) ] } } ); // Append the menu to the DOM. $('body').append(dropDown.$element); </syntaxhighlight> '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' [[File:WidgetsSelectsAndOptionsDropdown2.png| An example of a DropdownWidget ]] <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: [[File:WidgetsSelectsAndOptionsComboBox.png| An example of a ComboBoxWidget ]] <syntaxhighlight lang="javascript"> // Example: Creating a ComboBoxWidget. Users can type 'Option Four' in the text // field to make that option appear selected, or choose 'Option Four' from the // menu, in which case, the Option Four data will appear in the text field. var comboBox=new OO.ui.ComboBoxWidget( { label: 'ComboBoxWidget', input: 'Option One', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'Option 1', label: 'Option One' } ), new OO.ui.MenuOptionWidget( { data: 'Option 2', label: 'Option Two' } ), new OO.ui.MenuOptionWidget( { data: 'Option 3', label: 'Option Three'} ), new OO.ui.MenuOptionWidget( { data: 'Option 4', label: 'Option Four' } ), new OO.ui.MenuOptionWidget( { data: 'Option 5', label: 'Option Five' } ) ] } } ); $('body').append(comboBox.$element); </syntaxhighlight> '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. 4ebjwsjt6e63etqsxrv404sznta7t6x 158 116 2015-02-25T14:56:57Z Admin 1 wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo> {"type": "ButtonSelect", "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "type": "ButtonOption"}, {"data":2,"label":"Option 2","title":"Button option 2", "type": "ButtonOption"}, {"data":3,"label":"Option 3","title":"Button option 3", "type": "ButtonOption"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. <ooui-demo type="radioselect"> { "items":[ {"data":"a","label":"Selected radio option", "type" : "RadioOption"}, {"data":"b","label":"Unselected radio option", "type" : "RadioOption"}, ] } </ouui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. {{described demo |description=To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: |demo= <ooui-demo type="dropdown"> { "label" : "Dropdown menu: Select one option", "menu" : { "items" : [ { "type" : "menuoption", "data" : "a", "label" : "First" }, { "type" : "menuoption", "data" : "b", "label" : "Second (disabled option)", "disabled" : true }, { "type" : "menuoption", "data" : "c", "label" : "Third" }, { "type" : "menuoption", "data" : "d", "label" : "The fourth option has a very long label" }, { "type" : "menuoption", "data" : "e", "label" : "Fifth" } ] } } </ooui-demo> }} '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' <ooui-demo> <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. {{described demo |description=To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: |demo= <ooui-demo type="combobox"> { "label" : "ComboBox Widget", "input" : "Option One", "menu" : { "items" : [ { "type" : "menuoption", "data" : "Option 1", "label" : "Option One" }, { "type" : "menuoption", "data" : "Option 2", "label" : "Option Two" }, { "type" : "menuoption", "data" : "Option 3", "label" : "Option Three" }, { "type" : "menuoption", "data" : "Option 4", "label" : "Option Four" }, { "type" : "menuoption", "data" : "Option 5", "label" : "Option Five" } ] } } </ooui-demo> }} '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. frw7xskwade587emf0r8kpt6x054ivp 159 158 2015-02-25T14:57:47Z Admin 1 /* Button selects and options */ wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo type="buttonselect"> { "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "type": "buttonoption"}, {"data":2,"label":"Option 2","title":"Button option 2", "type": "buttonoption"}, {"data":3,"label":"Option 3","title":"Button option 3", "type": "buttonoption"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. <ooui-demo type="radioselect"> { "items":[ {"data":"a","label":"Selected radio option", "type" : "RadioOption"}, {"data":"b","label":"Unselected radio option", "type" : "RadioOption"}, ] } </ouui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. {{described demo |description=To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: |demo= <ooui-demo type="dropdown"> { "label" : "Dropdown menu: Select one option", "menu" : { "items" : [ { "type" : "menuoption", "data" : "a", "label" : "First" }, { "type" : "menuoption", "data" : "b", "label" : "Second (disabled option)", "disabled" : true }, { "type" : "menuoption", "data" : "c", "label" : "Third" }, { "type" : "menuoption", "data" : "d", "label" : "The fourth option has a very long label" }, { "type" : "menuoption", "data" : "e", "label" : "Fifth" } ] } } </ooui-demo> }} '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' <ooui-demo> <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. {{described demo |description=To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: |demo= <ooui-demo type="combobox"> { "label" : "ComboBox Widget", "input" : "Option One", "menu" : { "items" : [ { "type" : "menuoption", "data" : "Option 1", "label" : "Option One" }, { "type" : "menuoption", "data" : "Option 2", "label" : "Option Two" }, { "type" : "menuoption", "data" : "Option 3", "label" : "Option Three" }, { "type" : "menuoption", "data" : "Option 4", "label" : "Option Four" }, { "type" : "menuoption", "data" : "Option 5", "label" : "Option Five" } ] } } </ooui-demo> }} '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. 2kv7qnbfjssjlzpl2h2byykzyqlw1j2 160 159 2015-02-25T14:59:46Z Admin 1 /* Radio selects and options */ Fix closing tag + other bits wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo type="buttonselect"> { "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "type": "buttonoption"}, {"data":2,"label":"Option 2","title":"Button option 2", "type": "buttonoption"}, {"data":3,"label":"Option 3","title":"Button option 3", "type": "buttonoption"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. <ooui-demo type="radioselect"> { "items":[ {"data":"a","label":"Selected radio option", "type" : "RadioOption"}, {"data":"b","label":"Unselected radio option", "type" : "RadioOption"}, ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. {{described demo |description=To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: |demo= <ooui-demo type="dropdown"> { "label" : "Dropdown menu: Select one option", "menu" : { "items" : [ { "type" : "menuoption", "data" : "a", "label" : "First" }, { "type" : "menuoption", "data" : "b", "label" : "Second (disabled option)", "disabled" : true }, { "type" : "menuoption", "data" : "c", "label" : "Third" }, { "type" : "menuoption", "data" : "d", "label" : "The fourth option has a very long label" }, { "type" : "menuoption", "data" : "e", "label" : "Fifth" } ] } } </ooui-demo> }} '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' <ooui-demo> <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. {{described demo |description=To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: |demo= <ooui-demo type="combobox"> { "label" : "ComboBox Widget", "input" : "Option One", "menu" : { "items" : [ { "type" : "menuoption", "data" : "Option 1", "label" : "Option One" }, { "type" : "menuoption", "data" : "Option 2", "label" : "Option Two" }, { "type" : "menuoption", "data" : "Option 3", "label" : "Option Three" }, { "type" : "menuoption", "data" : "Option 4", "label" : "Option Four" }, { "type" : "menuoption", "data" : "Option 5", "label" : "Option Five" } ] } } </ooui-demo> }} '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. c0c55hpgl8uyo919x5yi0afmjp36cax 161 160 2015-02-25T15:02:14Z Admin 1 /* Dropdown menus */ Remove stray <ooui-demo> wikitext text/x-wiki Any widget that provides mutually exclusive options should be built using a '''SelectWidget''' that contains instances of '''OptionWidget''' (e.g., a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Button selects and options|ButtonSelectWidget]]''' that contains '''ButtonOptionWidgets''', a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' that contains '''RadioOptionWidgets''', or a '''[[#Menu selects and options|MenuSelectWidget]]''' that contains '''MenuOptionWidgets'''). '''OptionWidgets''' are special elements that can be selected and (optionally, though almost always) configured with '''data''', which can be a string, object, or number. The data is often unique for each option, but it does not have to be. A widget used to select a city by ZIP code, for example, might have labeled options with the different numerical codes, but the same data value (e.g., ‘San Francisco’) for all codes that belong to that city. Note that if an '''OptionWidget''' is added to a '''SelectWidget''' that already contains an option with the same reference, the existing option will be removed, and the new option will be added to the end of the option array. '''SelectWidgets''' emit several types of events that have subtle but important differences: * '''highlight''' indicates which item may be selected when a user presses enter or clicks. When a user mouses over an item, it is highlighted. * '''press''' is a state that occurs when a user mouses down on an item, but has not yet let go of the mouse. The item may appear selected, but it will not be selected until the user releases the mouse. ‘press’ can be used to give feedback to a user between mousedown and mouseup. * '''choose''' is something that happens only when the user makes a selection. Choose is never modified programmatically. If a user chooses an item, it becomes selected. You might wish to use this event if you wish to close a menu when a user chooses an item. * '''select''' changes which item is currently selected. A select can be made programmatically or by a user (i.e., the user chooses an item and the item is then selected). '''SelectWidgets''' have a number of useful methods for finding items as well as getting and changing their state. In general, all modifications to the highlight or selection should be handled by the '''SelectWidget''' rather than by its individual options (e.g., use the '''SelectWidget'''’s '''highlightItem()''' method to set a highlighted option, not the option-level method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.SelectWidget the code-level documentation]. == Button selects and options == The following example demonstrates how to create and configure a '''ButtonSelectWidget''' that contains three options. Note that the '''ButtonOptionWidgets''' are created, but are not appended to the DOM. Instead, they are added to the '''ButtonSelect''' using the '''ButtonSelectWidget'''’s '''items''' configuration option. <ooui-demo type="buttonselect"> { "items":[ {"data":1,"label":"Option 1","title":"Button option 1", "type": "buttonoption"}, {"data":2,"label":"Option 2","title":"Button option 2", "type": "buttonoption"}, {"data":3,"label":"Option 3","title":"Button option 3", "type": "buttonoption"} ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonSelectWidget code-level documentation]. == Radio selects and options == The following example illustrates a '''RadioSelectWidget''' that contains two radio options. Note that the first option has been selected using the '''RadioSelectWidget'''’s '''selectItem()''' method. <ooui-demo type="radioselect"> { "items":[ {"data":"a","label":"Selected radio option", "type" : "RadioOption"}, {"data":"b","label":"Unselected radio option", "type" : "RadioOption"}, ] } </ooui-demo> For a full list of supported methods and configuration options, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioSelectWidget code-level documentation]. == Menu selects and options == The OOjs UI library contains two types of ready-to-use widgets that contain menus: '''DropdownWidgets''' and '''ComboBoxWidgets'''. Note that '''MenuSelectWidgets''' themselves are not designed to be instantiated directly, rather subclassed and customized to be opened, closed, and displayed as needed. See [[OOjs UI/Documentation/Extending the Library|‘Extending the library’]] for more information. By default, menus are clipped to the visible viewport and the toggle value is set to ‘false’ (i.e., the menu is not visible) when a user presses the mouse outside the menu. Menus also have support for keyboard interaction: * Enter/Return key: choose and select a menu option * Up-arrow key: highlight the previous menu option * Down-arrow key: highlight the next menu option * Esc key: hide the menu === Dropdown menus === '''DropdownWidgets''' are not menus themselves, rather they contain a menu, which can be accessed with the '''getMenu()''' method. The '''DropdownWidget''' takes care of opening and displaying the menu so that users can interact with it. {{described demo |description=To create a dropdown menu, use a '''DropdownWidget''' that contains a menu of options: |demo= <ooui-demo type="dropdown"> { "label" : "Dropdown menu: Select one option", "menu" : { "items" : [ { "type" : "menuoption", "data" : "a", "label" : "First" }, { "type" : "menuoption", "data" : "b", "label" : "Second (disabled option)", "disabled" : true }, { "type" : "menuoption", "data" : "c", "label" : "Third" }, { "type" : "menuoption", "data" : "d", "label" : "The fourth option has a very long label" }, { "type" : "menuoption", "data" : "e", "label" : "Fifth" } ] } } </ooui-demo> }} '''DropdownWidgets''' can be configured with icons, indicators, labels, and titles. By default, the widget will use a ‘down’ indicator. The class defines one public method, '''getMenu():''' <syntaxhighlight lang="javascript"> // Example: Create a DropdownWidget and use the getMenu() method to get the // contained menu and modify it. var dropDown=new OO.ui.DropdownWidget( { label: 'Dropdown menu: Select one option', menu: { items: [ new OO.ui.MenuOptionWidget( { data: 'a', label: 'First' } ), new OO.ui.MenuOptionWidget( { data: 'b', label: 'Second' } ), new OO.ui.MenuOptionWidget( { data: 'c', label: 'Third' } ) ] } } ); $('body').append(dropDown.$element); // Get the menu from the dropdown using the getMenu() method. // In this example, the getItemFromData() method returns a reference to the option // that contains the specified data (i.e., 'a', which is the first menu option). // This option is then disabled with the setDisabled() method. dropDown.getMenu().getItemFromData('a').setDisabled(true); </syntaxhighlight> For a complete list of supported configuration options and methods, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.DropdownWidget code-level documentation] for '''DropdownWidget.''' === ComboBox menus === '''ComboBoxWidgets''' combine a text input field (where a value can be entered manually) and a menu of options (from which a value can be chosen instead). Users can choose options from the combobox in one of two ways: # By typing a value in the text input field. If the value exactly matches the value of a menu option, that option will appear to be selected. # By choosing a value from the menu. The value of the chosen option will then appear in the text input field. To create a combobox with options populated by the server, which might be useful if you’d like to narrow down a long static list of options based on the characters the user types, use the '''LookupInputWidget''' mixin. Please see ‘Extending the Library’ for more information. {{described demo |description=To create a combobox widget use a '''ComboBoxWidget''' with a menu of options: |demo= <ooui-demo type="combobox"> { "label" : "ComboBox Widget", "input" : "Option One", "menu" : { "items" : [ { "type" : "menuoption", "data" : "Option 1", "label" : "Option One" }, { "type" : "menuoption", "data" : "Option 2", "label" : "Option Two" }, { "type" : "menuoption", "data" : "Option 3", "label" : "Option Three" }, { "type" : "menuoption", "data" : "Option 4", "label" : "Option Four" }, { "type" : "menuoption", "data" : "Option 5", "label" : "Option Five" } ] } } </ooui-demo> }} '''ComboBoxWidgets''' can be disabled or configured with CSS and initial values for the text input and menu options. For a complete list of supported configuration options and methods, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ComboBoxWidget the code-level documentation]. b79e6o4hysyz00uatwg44q6x6rvylqc OOjs UI/Widgets/Inputs 0 40 75 2015-01-15T00:12:40Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Inputs]] to [[OOjs UI/Widgets/Inputs]] wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: [[File:WidgetsInputsTextInputs1.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Creating a TextInputWidget. Specify a default value with the 'value' config. // A single-line TextInput (the default) var textInput=new OO.ui.TextInputWidget( { value: 'Text input' } ) $('body').append(textInput.$element); </syntaxhighlight> Create a multiline input with the '''multiline''' option: [[File:WidgetsInputsTextInputs2.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // A multiline TextInput var multilineInput=new OO.ui.TextInputWidget( { value: 'Multiline text input\n\nMore text in separate paragraph', multiline: true } ) $('body').append(multilineInput.$element); </syntaxhighlight> Create an autosized input with the  '''autosize''' and '''maxRows''' options: [[File:WidgetsInputsTextInputs3.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Autosize the input to fit the content. Configure the maximum number of rows to // display with the 'maxRows' config option. // By default, at most 10 rows will be made visible. var autosizeInput=new OO.ui.TextInputWidget( { value: 'Autosized text input, set to display a maximum of 4 rows', multiline: true, autosize: true, maxRows: 4 } ) $('body').append(autosizeInput.$element); </syntaxhighlight> Add placeholder copy with the '''placeholder''' option: [[File:WidgetsInputsTextInputs4.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Add placeholder copy using the 'placeholder' config. var textInputPlaceholder=new OO.ui.TextInputWidget( { placeholder: 'This is placeholder copy'   } )    $('body').append(textInputPlaceholder.$element); </syntaxhighlight> Make the value read-only with the '''readOnly''' option: [[File:WidgetsInputsTextInputs5.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Prevent users from changing the value of a text input with the 'readOnly' config. var textInputReadOnly=new OO.ui.TextInputWidget( { value: 'A read-only value, which cannot be changed by the user.', readOnly: true } ) $('body').append(textInputReadOnly.$element); </syntaxhighlight> Change the type of the input with the '''type''' config: [[File:WidgetsInputsTextInputs6.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Specify an input type (e.g., password or number) with the 'type' config. By default, the type is 'text'. Note that types such as 'search' and 'date' can be specified, but they are not rendered reliably across browsers. var textInputDate=new OO.ui.TextInputWidget( { type: 'password' } ) $('body').append(textInputDate.$element); </syntaxhighlight> Specify a validation pattern with the '''validate''' config: [[File:WidgetsInputsTextInputs9.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Specify a validation pattern. Validation patterns can be either a regular expression or the name of a pattern used by the library: 'non-empty' (the value cannot be an empty string) or 'integer' (the value must contain only numbers). When a validation pattern is specified, the isValid() method returns a promise that will resolve to a Boolean value: 'true', if the value is valid, or 'false' if not. var textInput=new OO.ui.TextInputWidget( { validate: 'integer' } ) $('body').append(textInput.$element); textInput.on( 'change', function () { textInput.isValid().then( function ( valid ) { console.log( valid ); } ); } ); </syntaxhighlight> Use '''icon''', '''indicator''', and '''disabled''' config options: [[File:WidgetsInputsTextInputs8.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Configuring a TextInputWidget to use an icon or indicator, or to disable it. // A TextInput with an icon. var textInputIcon=new OO.ui.TextInputWidget( { value: 'Text input with icon', label: 'default textInput', icon: 'search' } ) // A TextInput with an indicator. var textInputIndicator=new OO.ui.TextInputWidget( { value: 'Text input with indicator', label: 'textInput', indicator: 'required' } ) // A disabled TextInput. var textInputDisabled=new OO.ui.TextInputWidget( {   value: 'Disabled text input', label: 'textInput', disabled: true } ) $('body').append(textInputIcon.$element, textInputIndicator.$element, textInputDisabled.$element); </syntaxhighlight> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. [[File:WidgetsInputsCheckboxInputs.png| An example of a CheckboxInputWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // An example of checkboxes. Note that the checkboxes are laid out in fields in a fieldset layout, with a field alignment set to 'inline'. The 'inline' setting displays the checkbox to the left of the label, with both on the same line. // An example of an active checkbox. Use the 'selected' option to specify a checked state. var checkbox1=new OO.ui.CheckboxInputWidget({ value: 'a', selected: true }); // An example of an unselected checkbox. var checkbox2=new OO.ui.CheckboxInputWidget({ value: 'b' }); // An example of a disabled checkbox. var checkbox3=new OO.ui.CheckboxInputWidget( { value:'c', disabled: true } ); // Create a fieldset layout with fields for each checkbox. var fieldset = new OO.ui.FieldsetLayout( { label: 'Checkboxes' } ); fieldset.addItems( [ new OO.ui.FieldLayout( checkbox1, {label : 'Selected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox2, {label : 'Unselected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox3, {label : 'Disabled checkbox', align : 'inline'}), ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. suojag8ed1cuhfvdr0rt1b8gr21e4hl 76 75 2015-01-16T13:32:30Z Admin 1 1 revision imported wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: [[File:WidgetsInputsTextInputs1.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Creating a TextInputWidget. Specify a default value with the 'value' config. // A single-line TextInput (the default) var textInput=new OO.ui.TextInputWidget( { value: 'Text input' } ) $('body').append(textInput.$element); </syntaxhighlight> Create a multiline input with the '''multiline''' option: [[File:WidgetsInputsTextInputs2.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // A multiline TextInput var multilineInput=new OO.ui.TextInputWidget( { value: 'Multiline text input\n\nMore text in separate paragraph', multiline: true } ) $('body').append(multilineInput.$element); </syntaxhighlight> Create an autosized input with the  '''autosize''' and '''maxRows''' options: [[File:WidgetsInputsTextInputs3.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Autosize the input to fit the content. Configure the maximum number of rows to // display with the 'maxRows' config option. // By default, at most 10 rows will be made visible. var autosizeInput=new OO.ui.TextInputWidget( { value: 'Autosized text input, set to display a maximum of 4 rows', multiline: true, autosize: true, maxRows: 4 } ) $('body').append(autosizeInput.$element); </syntaxhighlight> Add placeholder copy with the '''placeholder''' option: [[File:WidgetsInputsTextInputs4.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript"> // Add placeholder copy using the 'placeholder' config. var textInputPlaceholder=new OO.ui.TextInputWidget( { placeholder: 'This is placeholder copy'   } )    $('body').append(textInputPlaceholder.$element); </syntaxhighlight> Make the value read-only with the '''readOnly''' option: [[File:WidgetsInputsTextInputs5.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Prevent users from changing the value of a text input with the 'readOnly' config. var textInputReadOnly=new OO.ui.TextInputWidget( { value: 'A read-only value, which cannot be changed by the user.', readOnly: true } ) $('body').append(textInputReadOnly.$element); </syntaxhighlight> Change the type of the input with the '''type''' config: [[File:WidgetsInputsTextInputs6.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Specify an input type (e.g., password or number) with the 'type' config. By default, the type is 'text'. Note that types such as 'search' and 'date' can be specified, but they are not rendered reliably across browsers. var textInputDate=new OO.ui.TextInputWidget( { type: 'password' } ) $('body').append(textInputDate.$element); </syntaxhighlight> Specify a validation pattern with the '''validate''' config: [[File:WidgetsInputsTextInputs9.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Specify a validation pattern. Validation patterns can be either a regular expression or the name of a pattern used by the library: 'non-empty' (the value cannot be an empty string) or 'integer' (the value must contain only numbers). When a validation pattern is specified, the isValid() method returns a promise that will resolve to a Boolean value: 'true', if the value is valid, or 'false' if not. var textInput=new OO.ui.TextInputWidget( { validate: 'integer' } ) $('body').append(textInput.$element); textInput.on( 'change', function () { textInput.isValid().then( function ( valid ) { console.log( valid ); } ); } ); </syntaxhighlight> Use '''icon''', '''indicator''', and '''disabled''' config options: [[File:WidgetsInputsTextInputs8.png| Example of a TextInputWidget .]] <syntaxhighlight lang="javascript" enclose="div"> // Configuring a TextInputWidget to use an icon or indicator, or to disable it. // A TextInput with an icon. var textInputIcon=new OO.ui.TextInputWidget( { value: 'Text input with icon', label: 'default textInput', icon: 'search' } ) // A TextInput with an indicator. var textInputIndicator=new OO.ui.TextInputWidget( { value: 'Text input with indicator', label: 'textInput', indicator: 'required' } ) // A disabled TextInput. var textInputDisabled=new OO.ui.TextInputWidget( {   value: 'Disabled text input', label: 'textInput', disabled: true } ) $('body').append(textInputIcon.$element, textInputIndicator.$element, textInputDisabled.$element); </syntaxhighlight> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. [[File:WidgetsInputsCheckboxInputs.png| An example of a CheckboxInputWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // An example of checkboxes. Note that the checkboxes are laid out in fields in a fieldset layout, with a field alignment set to 'inline'. The 'inline' setting displays the checkbox to the left of the label, with both on the same line. // An example of an active checkbox. Use the 'selected' option to specify a checked state. var checkbox1=new OO.ui.CheckboxInputWidget({ value: 'a', selected: true }); // An example of an unselected checkbox. var checkbox2=new OO.ui.CheckboxInputWidget({ value: 'b' }); // An example of a disabled checkbox. var checkbox3=new OO.ui.CheckboxInputWidget( { value:'c', disabled: true } ); // Create a fieldset layout with fields for each checkbox. var fieldset = new OO.ui.FieldsetLayout( { label: 'Checkboxes' } ); fieldset.addItems( [ new OO.ui.FieldLayout( checkbox1, {label : 'Selected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox2, {label : 'Unselected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox3, {label : 'Disabled checkbox', align : 'inline'}), ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. suojag8ed1cuhfvdr0rt1b8gr21e4hl 123 76 2015-01-29T22:26:11Z Admin 1 Apply OOUI Demo to text inputs wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: <ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> Create a multiline input with the '''multiline''' option: <ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> Create an autosized input with the '''autosize''' and '''maxRows''' options: <ooui-demo type="TextInput"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4 } </ooui-demo> Add placeholder copy with the '''placeholder''' option: <ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> Make the value read-only with the '''readOnly''' option: <ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> Change the type of the input with the '''type''' config: <ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> Specify a validation pattern with the '''validate''' config: <ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> Use '''icon''', '''indicator''', and '''disabled''' config options: <ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. [[File:WidgetsInputsCheckboxInputs.png| An example of a CheckboxInputWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // An example of checkboxes. Note that the checkboxes are laid out in fields in a fieldset layout, with a field alignment set to 'inline'. The 'inline' setting displays the checkbox to the left of the label, with both on the same line. // An example of an active checkbox. Use the 'selected' option to specify a checked state. var checkbox1=new OO.ui.CheckboxInputWidget({ value: 'a', selected: true }); // An example of an unselected checkbox. var checkbox2=new OO.ui.CheckboxInputWidget({ value: 'b' }); // An example of a disabled checkbox. var checkbox3=new OO.ui.CheckboxInputWidget( { value:'c', disabled: true } ); // Create a fieldset layout with fields for each checkbox. var fieldset = new OO.ui.FieldsetLayout( { label: 'Checkboxes' } ); fieldset.addItems( [ new OO.ui.FieldLayout( checkbox1, {label : 'Selected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox2, {label : 'Unselected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox3, {label : 'Disabled checkbox', align : 'inline'}), ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. mahuwqy3lvhv058fq8v51gr21jdteaq 124 123 2015-01-29T22:27:56Z Admin 1 /* Text inputs */ wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: <ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> Create a multiline input with the '''multiline''' option: <ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> Create an autosized input with the '''autosize''' and '''maxRows''' options: <ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> Add placeholder copy with the '''placeholder''' option: <ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> Make the value read-only with the '''readOnly''' option: <ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> Change the type of the input with the '''type''' config: <ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> Specify a validation pattern with the '''validate''' config: <ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> Use '''icon''', '''indicator''', and '''disabled''' config options: <ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. [[File:WidgetsInputsCheckboxInputs.png| An example of a CheckboxInputWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // An example of checkboxes. Note that the checkboxes are laid out in fields in a fieldset layout, with a field alignment set to 'inline'. The 'inline' setting displays the checkbox to the left of the label, with both on the same line. // An example of an active checkbox. Use the 'selected' option to specify a checked state. var checkbox1=new OO.ui.CheckboxInputWidget({ value: 'a', selected: true }); // An example of an unselected checkbox. var checkbox2=new OO.ui.CheckboxInputWidget({ value: 'b' }); // An example of a disabled checkbox. var checkbox3=new OO.ui.CheckboxInputWidget( { value:'c', disabled: true } ); // Create a fieldset layout with fields for each checkbox. var fieldset = new OO.ui.FieldsetLayout( { label: 'Checkboxes' } ); fieldset.addItems( [ new OO.ui.FieldLayout( checkbox1, {label : 'Selected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox2, {label : 'Unselected checkbox', align : 'inline'}), new OO.ui.FieldLayout( checkbox3, {label : 'Disabled checkbox', align : 'inline'}), ] ); $( 'body' ).append( fieldset.$element ); </syntaxhighlight> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. rbr2x7ydcibmcrs8huvxbo40t4ttoqa 125 124 2015-01-29T22:33:54Z Admin 1 /* Checkbox inputs */ Convert to OOUI-Demo wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: <ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> Create a multiline input with the '''multiline''' option: <ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> Create an autosized input with the '''autosize''' and '''maxRows''' options: <ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> Add placeholder copy with the '''placeholder''' option: <ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> Make the value read-only with the '''readOnly''' option: <ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> Change the type of the input with the '''type''' config: <ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> Specify a validation pattern with the '''validate''' config: <ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> Use '''icon''', '''indicator''', and '''disabled''' config options: <ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. <ooui-demo type="deferred"> {"label":"Checkboxes","class":"FieldsetLayout","items":[ {"class":"FieldLayout","label":"Selected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a","selected":true}]}, {"class":"FieldLayout","label":"Unselected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a"}]}, {"class":"FieldLayout","label":"Unselected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a", "disabled": true}]} ]} </ooui-demo> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. bo7eh34feocc19q1xpwv4dsynqfzf14 126 125 2015-01-29T22:35:15Z Admin 1 /* Checkbox inputs */ wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) Create a text input with the '''TextInputWidget''' class: <ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> Create a multiline input with the '''multiline''' option: <ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> Create an autosized input with the '''autosize''' and '''maxRows''' options: <ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> Add placeholder copy with the '''placeholder''' option: <ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> Make the value read-only with the '''readOnly''' option: <ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> Change the type of the input with the '''type''' config: <ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> Specify a validation pattern with the '''validate''' config: <ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> Use '''icon''', '''indicator''', and '''disabled''' config options: <ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in the below example. <ooui-demo type="deferred"> {"label":"Checkboxes","class":"FieldsetLayout","items":[ {"class":"FieldLayout","label":"Selected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a","selected":true}]}, {"class":"FieldLayout","label":"Unselected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a"}]}, {"class":"FieldLayout","label":"Disabled checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a", "disabled": true}]} ]} </ooui-demo> The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. c89nh24flybcg0ap65pn5vkvho5d1po 138 126 2015-02-23T15:22:04Z Admin 1 wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) {{described demo |description=Create a text input with the '''TextInputWidget''' class: |demo=<ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> }} {{described demo |description=Create a multiline input with the '''multiline''' option: |demo=<ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> }} {{described demo |description=Create an autosized input with the '''autosize''' and '''maxRows''' options: |demo=<ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> }} {{described demo |description=Add placeholder copy with the '''placeholder''' option: |demo=<ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> }} {{described demo |description=Make the value read-only with the '''readOnly''' option: |demo=<ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> }} {{described demo |description=Change the type of the input with the '''type''' config: |demo=<ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> }} {{described demo |description=Specify a validation pattern with the '''validate''' config: |demo=<ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> }} {{described demo |description=Use '''icon''', '''indicator''', and '''disabled''' config options: |demo=<ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> }} '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). {{described demo |description=Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in this example |demo=<ooui-demo type="deferred"> {"label":"Checkboxes","class":"FieldsetLayout","items":[ {"class":"FieldLayout","label":"Selected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a","selected":true}]}, {"class":"FieldLayout","label":"Unselected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a"}]}, {"class":"FieldLayout","label":"Disabled checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a", "disabled": true}]} ]} </ooui-demo> }} The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. Create an input button with the '''ButtonInputWidget''' class: [[File:WidgetsInputsButtonInputs.png| An example of ButtonInputWidgets ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates the two different types of ButtonInputs: button and input. The buttons are laid out with a FieldsetLayout, which is added to a FormLayout to create an HTML form. // An example of a ButtonInputWidget rendered as an HTML button, the default. var button1Input=new OO.ui.ButtonInputWidget({ label: 'Input button', icon: 'check', value: 'Check'      }); // An example of a ButtonInputWidget rendered as an HTML <input>. var button2Input=new OO.ui.ButtonInputWidget({ label: 'Input', useInputTag: true, icon: 'check', value: 'Check'       }); // The buttons are arranged using a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Input Buttons' }); fieldset.addItems( [ new OO.ui.FieldLayout( button1Input, { label: 'HTML <button>:' } ), new OO.ui.FieldLayout( button2Input, { label: 'HTML <input>:' } ) ] ); // Use a form layout to create a form. Add the fieldset to the form with the $content option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }); $( 'body' ).append( form.$element ); </syntaxhighlight> For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. k5vysiakh8wgn0010xrjdw3gpl2ps8d 153 138 2015-02-25T14:39:15Z Admin 1 /* Button inputs */ Convert to live demo wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) {{described demo |description=Create a text input with the '''TextInputWidget''' class: |demo=<ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> }} {{described demo |description=Create a multiline input with the '''multiline''' option: |demo=<ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> }} {{described demo |description=Create an autosized input with the '''autosize''' and '''maxRows''' options: |demo=<ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> }} {{described demo |description=Add placeholder copy with the '''placeholder''' option: |demo=<ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> }} {{described demo |description=Make the value read-only with the '''readOnly''' option: |demo=<ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> }} {{described demo |description=Change the type of the input with the '''type''' config: |demo=<ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> }} {{described demo |description=Specify a validation pattern with the '''validate''' config: |demo=<ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> }} {{described demo |description=Use '''icon''', '''indicator''', and '''disabled''' config options: |demo=<ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> }} '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). {{described demo |description=Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in this example |demo=<ooui-demo type="deferred"> {"label":"Checkboxes","class":"FieldsetLayout","items":[ {"class":"FieldLayout","label":"Selected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a","selected":true}]}, {"class":"FieldLayout","label":"Unselected checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a"}]}, {"class":"FieldLayout","label":"Disabled checkbox","align":"inline","items":[{"class":"CheckboxInputWidget","value":"a", "disabled": true}]} ]} </ooui-demo> }} The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. {{described demo |description=Create an input button with the '''ButtonInputWidget''' class: |demo= <ooui-demo type="fieldsetlayout"> { "label" : "Input buttons", "items" : [ { "type" : "fieldlayout", "label" : "HTML <button>", "items" : [ { "type": "buttoninput", "label": "Input button", "icon": "check", "value": "Check" } ] }, { "type" : "fieldlayout", "label" : "HTML <input>", "items" : [ { "type": "buttoninput", "label": "Input button", "icon": "check", "value": "Check", "useInputTag" : true } ] } ] } </ooui-demo> }} For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. 49qts7mk05kvweuvpuf5m8llhxopboy 154 153 2015-02-25T14:41:07Z Admin 1 /* Checkbox inputs */ Undefer wikitext text/x-wiki OOjs UI Input widgets, which include [[#Text inputs|text]], [[#Checkbox inputs|checkbox]], [[#Radio inputs|radio]], and [[#Button inputs|button inputs]], are a subset of HTML form elements (they are, in fact, wrappers around HTML inputs). They can be configured (to use an icon, for example) and have been designed to work reliably across browsers. Events, such as changes to the value of an input, are handled by the library, which takes care of the (often tedious) work of extracting a meaningful value. Optionally, input widgets can be configured with an input filter, which modifies the value of an input before it is accepted. An input widget that collects phone numbers might use an input filter to ignore values that contain non-numerical characters, for example. If the input value must be a MediaWiki page title, an input filter could also be used to convert values to start with an upper-case letter. Input filters are written by the developer and are assigned to an input widget via the '''inputFilter''' config option, which takes the name of the filter function. '''InputWidgets''' support a number of methods, including '''setRTL'''( <code>isRTL</code> ), which can be used to set the direction of the input (left-to-right or right-to-left) and '''setValue()''' and '''getValue()''', which set and get the value of the input, respectively. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.InputWidget the code-level documentation]. == Text inputs== '''TextInputWidgets''' can be configured with options that customize the size of the input field as well as its presentation. Text inputs can be set to be multiline or autosized, or assigned placeholder text or an initial value. Text inputs also be configured with an optional validation-pattern, which is used to determine if a value is valid or not. (This is distinct from the input filters, which modify incoming values rather than validate them.) {{described demo |description=Create a text input with the '''TextInputWidget''' class: |demo=<ooui-demo type="TextInput"> { "value": "Text input", "label": "basic textInput" } </ooui-demo> }} {{described demo |description=Create a multiline input with the '''multiline''' option: |demo=<ooui-demo type="TextInput"> { "value": "Multiline text input", "multiline": true } </ooui-demo> }} {{described demo |description=Create an autosized input with the '''autosize''' and '''maxRows''' options: |demo=<ooui-demo type="deferred"> { "value": "Autosized text input, set to display a maximum of 4 rows", "multiline": true, "autosize": true, "maxRows": 4, "class": "TextInputWidget" } </ooui-demo> }} {{described demo |description=Add placeholder copy with the '''placeholder''' option: |demo=<ooui-demo type="TextInput"> { "placeholder": "This is placeholder copy" } </ooui-demo> }} {{described demo |description=Make the value read-only with the '''readOnly''' option: |demo=<ooui-demo type="TextInput"> { "value": "A read-only value, which cannot be changed by the user.", "readOnly": true } </ooui-demo> }} {{described demo |description=Change the type of the input with the '''type''' config: |demo=<ooui-demo type="TextInput"> { "type": "password" } </ooui-demo> }} {{described demo |description=Specify a validation pattern with the '''validate''' config: |demo=<ooui-demo type="TextInput"> { "validate": "integer" } </ooui-demo> }} {{described demo |description=Use '''icon''', '''indicator''', and '''disabled''' config options: |demo=<ooui-demo type="TextInput"> { "value": "Text input with icon", "label": "default textInput", "icon": "search" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Text input with indicator", "label": "textInput", "indicator": "down" } </ooui-demo> <ooui-demo type="TextInput"> { "value": "Disabled text input", "label": "textInput", "disabled": true } </ooui-demo> }} '''TextInputWidgets''' support a number of methods that can be used to adjust the size of the text input, check validity, and handle events. For a complete list for supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.TextInputWidget the code-level documentation]. == Checkbox inputs == '''CheckboxInputWidgets''', like HTML checkboxes, can be selected and/or configured with a value. Use the '''setSelected()''' and '''getSelected()''' methods to set or get the checked state of the box. A checkbox can also be selected via its '''selected''' configuration option. A checkbox value, which is useful when the checkbox is part of an HTML <form> element, can be assigned or gotten with the '''setValue()''' and '''getValue()''' methods. A value can also be configured with the '''value''' configuration option (by default, the value is an empty string). {{described demo |description=Note that '''CheckboxInputWidgets''' are best laid out in '''[[OOjs UI/Documentation/Layouts|FieldLayouts]]''' that use the ‘inline’ alignment, as in this example |demo=<ooui-demo type="fieldsetlayout"> {"label":"Checkboxes","items":[ {"type":"fieldlayout","label":"Selected checkbox","align":"inline","items":[{"type":"CheckboxInput","value":"a","selected":true}]}, {"type":"fieldlayout","label":"Unselected checkbox","align":"inline","items":[{"type":"CheckboxInput","value":"a"}]}, {"type":"fieldlayout","label":"Disabled checkbox","align":"inline","items":[{"type":"CheckboxInput","value":"a", "disabled": true}]} ]} </ooui-demo> }} The '''getSelected()''' and '''setSelected()''' methods can be used to get or set the state of the checkbox. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.CheckboxInputWidget the code-level documentation]. == Radio inputs'''<nowiki/>''' == '''<nowiki/>''' Radio inputs are usually used as a set, and in most cases you will want to use a '''[[OOjs UI/Documentation/Widgets/Selects and Options#Radio selects and options|RadioSelectWidget]]''' with '''RadioOptionWidgets''' instead of the '''RadioInputWidget''' itself. However, if you have need for a single radio input, the '''RadioInputWidget''' works much as a '''[[#Checkbox inputs|CheckboxInputWidget]]''' does. The selected state can be set with either the '''setSelected()''' method or via the widget’s '''selected''' configuration option. '''<nowiki/>'''For more information about '''RadioInputWidgets''', please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.RadioInputWidget the code-level documentation].'''<nowiki/>''' == Button inputs == '''ButtonInputWidgets,''' together with '''FormLayouts''', are used to submit HTML forms. By default, '''ButtonInputWidgets''' are rendered as an HTML  <button/> and can be configured with options such as icons, indicators, and a value. If you don’t need the button to work with HTML forms, you probably want to use a '''[[OOjs UI/Documentation/Widgets/Buttons and Switches#Buttons|ButtonWidget]]''' instead. '''ButtonInputWidgets''' can also be rendered as an HTML <input/> using the '''useInputTag''' configuration. Widgets configured to be an <input/> do not support config options such as icons, indicators, and values, and can only use plaintext labels. In general, '''ButtonInputsWidgets''' should only be configured as an  <input/> when there’s need for IE6 support in a form with multiple buttons. {{described demo |description=Create an input button with the '''ButtonInputWidget''' class: |demo= <ooui-demo type="fieldsetlayout"> { "label" : "Input buttons", "items" : [ { "type" : "fieldlayout", "label" : "HTML <button>", "items" : [ { "type": "buttoninput", "label": "Input button", "icon": "check", "value": "Check" } ] }, { "type" : "fieldlayout", "label" : "HTML <input>", "items" : [ { "type": "buttoninput", "label": "Input button", "icon": "check", "value": "Check", "useInputTag" : true } ] } ] } </ooui-demo> }} For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ButtonInputWidget the code-level documentation]. nvtepu71mmb8s8kqsa1kanjhjur1126 OOjs UI/Widgets/Popups 0 41 77 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Popups]] to [[OOjs UI/Widgets/Popups]] wikitext text/x-wiki A '''PopupWidget''' is a container for content. Popups are overlaid and positioned absolutely.  By default, each has an ‘anchor,’ which is an arrow-like protrusion that points toward the popup’s origin. The width, height, and padding can be customized using configuration options. Create a popup and add content using the '''$content''' config: [[File:WidgetsPopups1.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates a simple popup. Width and height are specified in pixels. By default, the width is 320 pixels and the height is the automatic height. If 'padded' is set to 'true', padding will be added to the popup body. Content is appended to the popup body using the $content config. var popup=new OO.ui.PopupWidget({ $content: $( '<p>Hi there!</p>' ), padded: true, width: 300 } ); $('body').append(popup.$element); // To display the popup, toggle the visibility to 'true'. popup.toggle(true); </syntaxhighlight> Add a close button and label to the top of the popup with the '''head''' and '''label''' options: [[File:WidgetsPopups2.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // Set the 'head' config to 'true' to add a header that contains a label (when specified) and close button. var popup=new OO.ui.PopupWidget({ $content: $( '<p>This popup has a header that contains a label and a close button. Note that labels are only used in the popup head. If no label is set, only the close button will appear.</p>' ), padded: true, width: 300, head: true, label: 'The PopupWidget label' } ); $('body').append(popup.$element); popup.toggle(true); </syntaxhighlight> Specify whether the popup should have an anchor or not with the '''anchor''' option: [[File:WidgetsPopups3.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // Set the 'anchor' config option to 'false' to remove the triangular anchor that points toward the popup origin. var popup=new OO.ui.PopupWidget({ $content: $( '<p>This popup does not have an anchor. By default, popups have a triangular anchor, which points toward the popup origin.</p>' ), padded: true, height: 150, width: 300, anchor: false } ); $('body').append(popup.$element); popup.toggle(true); </syntaxhighlight> Align the popup from the left, right, or center with the '''align''' option: [[File:WidgetsPopups4.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- Align the popup from the center, left, or right. If the popup is right-aligned, the right edge of the popup is aligned with the anchor. For left-aligned popups, the left edge is aligned to the anchor (much like right- and left-aligned text behaves). The default alignment is center. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position1 { position: absolute; left: 300px; top: 250px; } .my-position2 { position: absolute; left: 300px; top: 300px; } .my-position3 { position: absolute; left: 300px; top: 350px; } </style> <script> var popup1=new OO.ui.PopupWidget({ $content: $( '<p><b>align=center</b>: the popup is centered to the anchor, the default.</p>' ), padded: true, width: 300, classes: [ 'my-position1' ], align: 'center' } ); var popup2=new OO.ui.PopupWidget({ $content: $( '<p><b>align=right</b>: the right edge of the popup is aligned to the anchor </p>' ), padded: true, width: 300, classes: [ 'my-position2' ], align: 'right' } ); var popup3=new OO.ui.PopupWidget({ $content: $( '<p><b>align=left</b>: the left edge of the popup is aligned to the anchor </p>' ), padded: true, width: 300, classes: [ 'my-position3' ], align: 'left' } ) $('body').append(popup1.$element, popup2.$element, popup3.$element); popup1.toggle(true); popup2.toggle(true); popup3.toggle(true); </script> </syntaxhighlight> Set a container and container padding with the '''$container''' and '''containerPadding''' options: [[File:WidgetsPopups5.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- Constrain a popup to the boundaries of a specified container using the $container option. The amount of padding between the edge of the popup and the container is specified with the 'containerPadding' option, which defaults to 10 pixels. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position1 { position: absolute; left: 300px; top: 10px; } .my-position2 { position: absolute; left: 300px; top: 100px; } .my-position3 { position: absolute; left: 300px; top: 220px; } .bluediv { width: 400px; height: 300px; background-color: #b0c4de; border-style: dotted; border-width: 1px; } </style> <div class="bluediv"></div> <script> // popup2 and popup3 are contained by the div specified as a jquery selection in the '$container' config. Note that the padding between the containing div and the popup is controlled with the 'containerPadding' option. var popup1=new OO.ui.PopupWidget({ $content: $( '<p>This popup extends beyond the edge of the blue div.</p>' ), padded: true, width: 300, classes: [ 'my-position1' ], align: 'center' } ); var popup2=new OO.ui.PopupWidget({ $content: $( '<p>This popup does not. It uses the $container config to set the blue div as a container. Note that \'containerPadding\' is set to \'0\'.</p>' ), $container: $(".bluediv"), containerPadding: 0, padded: true, width: 300, classes: [ 'my-position2' ], align: 'center' } ); var popup3=new OO.ui.PopupWidget({ $content: $( '<p>This popup also sets the blue div as its container. Here, \'containerPadding\' is set to \'10\', the default.</p>' ), $container: $(".bluediv"), containerPadding: 10, padded: true, width: 300, classes: [ 'my-position3' ], align: 'center' } ); $('body').append(popup1.$element, popup2.$element, popup3.$element ); popup1.toggle(true); popup2.toggle(true); popup3.toggle(true); </script> </syntaxhighlight> Automatically close the popup when it loses focus with the '''autoclose''' (and, optionally, '''$autoCloseIgnore''') options: [[File:WidgetsPopups6.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- This example uses the PopupWidget's 'autoClose' option to close the popup automatically when it loses focus. Note that the '$autoCloseIgnore' option is used to specify an element ( 'button') that should never impact the autoclose behavior. Were the '$autoCloseIgnore' option not set, all subsequent clicks to 'button' would rapidly close and then reopen the popup. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position { position: relative; left: 50px; top: 50px; } </style> <script> var button=new OO.ui.ButtonWidget({ label : 'Open the popup!', icon : 'menu' } ); var popup=new OO.ui.PopupWidget({ $autoCloseIgnore: button.$element, $content: $( '<p>This popup will close when it loses focus (\'autoclose\' is \'true\'), except when the \'Open the popup!\' button is clicked. This button is ignored, as specified in the $autoCloseIgnore config). </p>' ), padded: true, width: 300, align: 'right' } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { classes: [ 'my-position' ] } ); // Use the addItems() method to add Fields that contain the button and popup to the FieldsetLayout. fieldset.addItems( [ new OO.ui.FieldLayout( button ), new OO.ui.FieldLayout( popup ) ] ); // Define and attach the event handler to the button. button.onClick = function () { popup.toggle( true ); }; button.on( 'click', button.onClick); // Append the fieldset to the DOM. $( 'body' ).append( fieldset.$element ); </script> </syntaxhighlight> You can also achieve this effect using the built-in [[OOjs UI/Documentation/Widgets/Buttons and Switches#Popup buttons|PopupButtonWidget]] class. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupWidget the code-level documentation].'''<br>''' k8ix2si4eyvfnwnxdy5ld0rhc8zd5f8 78 77 2015-01-16T13:32:34Z Admin 1 1 revision imported wikitext text/x-wiki A '''PopupWidget''' is a container for content. Popups are overlaid and positioned absolutely.  By default, each has an ‘anchor,’ which is an arrow-like protrusion that points toward the popup’s origin. The width, height, and padding can be customized using configuration options. Create a popup and add content using the '''$content''' config: [[File:WidgetsPopups1.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // This example illustrates a simple popup. Width and height are specified in pixels. By default, the width is 320 pixels and the height is the automatic height. If 'padded' is set to 'true', padding will be added to the popup body. Content is appended to the popup body using the $content config. var popup=new OO.ui.PopupWidget({ $content: $( '<p>Hi there!</p>' ), padded: true, width: 300 } ); $('body').append(popup.$element); // To display the popup, toggle the visibility to 'true'. popup.toggle(true); </syntaxhighlight> Add a close button and label to the top of the popup with the '''head''' and '''label''' options: [[File:WidgetsPopups2.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // Set the 'head' config to 'true' to add a header that contains a label (when specified) and close button. var popup=new OO.ui.PopupWidget({ $content: $( '<p>This popup has a header that contains a label and a close button. Note that labels are only used in the popup head. If no label is set, only the close button will appear.</p>' ), padded: true, width: 300, head: true, label: 'The PopupWidget label' } ); $('body').append(popup.$element); popup.toggle(true); </syntaxhighlight> Specify whether the popup should have an anchor or not with the '''anchor''' option: [[File:WidgetsPopups3.png| An example of a PopupWidget ]] <syntaxhighlight lang="javascript" enclose="div"> // Set the 'anchor' config option to 'false' to remove the triangular anchor that points toward the popup origin. var popup=new OO.ui.PopupWidget({ $content: $( '<p>This popup does not have an anchor. By default, popups have a triangular anchor, which points toward the popup origin.</p>' ), padded: true, height: 150, width: 300, anchor: false } ); $('body').append(popup.$element); popup.toggle(true); </syntaxhighlight> Align the popup from the left, right, or center with the '''align''' option: [[File:WidgetsPopups4.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- Align the popup from the center, left, or right. If the popup is right-aligned, the right edge of the popup is aligned with the anchor. For left-aligned popups, the left edge is aligned to the anchor (much like right- and left-aligned text behaves). The default alignment is center. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position1 { position: absolute; left: 300px; top: 250px; } .my-position2 { position: absolute; left: 300px; top: 300px; } .my-position3 { position: absolute; left: 300px; top: 350px; } </style> <script> var popup1=new OO.ui.PopupWidget({ $content: $( '<p><b>align=center</b>: the popup is centered to the anchor, the default.</p>' ), padded: true, width: 300, classes: [ 'my-position1' ], align: 'center' } ); var popup2=new OO.ui.PopupWidget({ $content: $( '<p><b>align=right</b>: the right edge of the popup is aligned to the anchor </p>' ), padded: true, width: 300, classes: [ 'my-position2' ], align: 'right' } ); var popup3=new OO.ui.PopupWidget({ $content: $( '<p><b>align=left</b>: the left edge of the popup is aligned to the anchor </p>' ), padded: true, width: 300, classes: [ 'my-position3' ], align: 'left' } ) $('body').append(popup1.$element, popup2.$element, popup3.$element); popup1.toggle(true); popup2.toggle(true); popup3.toggle(true); </script> </syntaxhighlight> Set a container and container padding with the '''$container''' and '''containerPadding''' options: [[File:WidgetsPopups5.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- Constrain a popup to the boundaries of a specified container using the $container option. The amount of padding between the edge of the popup and the container is specified with the 'containerPadding' option, which defaults to 10 pixels. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position1 { position: absolute; left: 300px; top: 10px; } .my-position2 { position: absolute; left: 300px; top: 100px; } .my-position3 { position: absolute; left: 300px; top: 220px; } .bluediv { width: 400px; height: 300px; background-color: #b0c4de; border-style: dotted; border-width: 1px; } </style> <div class="bluediv"></div> <script> // popup2 and popup3 are contained by the div specified as a jquery selection in the '$container' config. Note that the padding between the containing div and the popup is controlled with the 'containerPadding' option. var popup1=new OO.ui.PopupWidget({ $content: $( '<p>This popup extends beyond the edge of the blue div.</p>' ), padded: true, width: 300, classes: [ 'my-position1' ], align: 'center' } ); var popup2=new OO.ui.PopupWidget({ $content: $( '<p>This popup does not. It uses the $container config to set the blue div as a container. Note that \'containerPadding\' is set to \'0\'.</p>' ), $container: $(".bluediv"), containerPadding: 0, padded: true, width: 300, classes: [ 'my-position2' ], align: 'center' } ); var popup3=new OO.ui.PopupWidget({ $content: $( '<p>This popup also sets the blue div as its container. Here, \'containerPadding\' is set to \'10\', the default.</p>' ), $container: $(".bluediv"), containerPadding: 10, padded: true, width: 300, classes: [ 'my-position3' ], align: 'center' } ); $('body').append(popup1.$element, popup2.$element, popup3.$element ); popup1.toggle(true); popup2.toggle(true); popup3.toggle(true); </script> </syntaxhighlight> Automatically close the popup when it loses focus with the '''autoclose''' (and, optionally, '''$autoCloseIgnore''') options: [[File:WidgetsPopups6.png| An example of a PopupWidget ]] <syntaxhighlight lang="html5" enclose="div"> <!-- This example uses the PopupWidget's 'autoClose' option to close the popup automatically when it loses focus. Note that the '$autoCloseIgnore' option is used to specify an element ( 'button') that should never impact the autoclose behavior. Were the '$autoCloseIgnore' option not set, all subsequent clicks to 'button' would rapidly close and then reopen the popup. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .my-position { position: relative; left: 50px; top: 50px; } </style> <script> var button=new OO.ui.ButtonWidget({ label : 'Open the popup!', icon : 'menu' } ); var popup=new OO.ui.PopupWidget({ $autoCloseIgnore: button.$element, $content: $( '<p>This popup will close when it loses focus (\'autoclose\' is \'true\'), except when the \'Open the popup!\' button is clicked. This button is ignored, as specified in the $autoCloseIgnore config). </p>' ), padded: true, width: 300, align: 'right' } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { classes: [ 'my-position' ] } ); // Use the addItems() method to add Fields that contain the button and popup to the FieldsetLayout. fieldset.addItems( [ new OO.ui.FieldLayout( button ), new OO.ui.FieldLayout( popup ) ] ); // Define and attach the event handler to the button. button.onClick = function () { popup.toggle( true ); }; button.on( 'click', button.onClick); // Append the fieldset to the DOM. $( 'body' ).append( fieldset.$element ); </script> </syntaxhighlight> You can also achieve this effect using the built-in [[OOjs UI/Documentation/Widgets/Buttons and Switches#Popup buttons|PopupButtonWidget]] class. For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PopupWidget the code-level documentation].'''<br>''' k8ix2si4eyvfnwnxdy5ld0rhc8zd5f8 OOjs UI/Widgets/Progress bars 0 42 79 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Widgets/Progress bars]] to [[OOjs UI/Widgets/Progress bars]] wikitext text/x-wiki Progress bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes: * Determinate '''ProgressBarWidgets''' show the percent of an operation that is complete. Configure a progress bar with an initial percent-complete by setting the '''progress''' option to an integer reflecting the desired percentage. * Indeterminate '''ProgressBarWidgets''' use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages. To create an indeterminate progress bar, set the '''progress''' option to ‘false.’ Create a determinate progress bar with a '''ProgressBarWidget''' that uses a percentage with the '''progress''' config: [[File:WidgetsProgressBars1.png| Example of a determinate progress bar .]] <syntaxhighlight lang="javascript"> // Example: A determinate progress bar. Set an initial percent with // the 'progress' configuration option. var progressBar=new OO.ui.ProgressBarWidget( { progress: 33 } ); $('body').append(progressBar.$element); </syntaxhighlight> Create an indeterminate progress bar by setting the progress option to ‘false’: [[File:WidgetsProgressBar2.png| Example of an indeterminate progress bar .]] <syntaxhighlight lang="javascript"> // Example: An indeterminate progress bar. 'progress' is set to 'false'. var progressBarI=new OO.ui.ProgressBarWidget( { progress: false } ); $('body').append(progressBarI.$element); </syntaxhighlight> Use '''ProgressBarWidget''' methods to set and get the value of the progress '''(setProgress()''' and '''getProgress()''' ).  For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProgressBarWidget the code-level documentation]. 1075ovd7vux5e910bclzo68iar6svku 80 79 2015-01-16T13:32:35Z Admin 1 1 revision imported wikitext text/x-wiki Progress bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes: * Determinate '''ProgressBarWidgets''' show the percent of an operation that is complete. Configure a progress bar with an initial percent-complete by setting the '''progress''' option to an integer reflecting the desired percentage. * Indeterminate '''ProgressBarWidgets''' use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages. To create an indeterminate progress bar, set the '''progress''' option to ‘false.’ Create a determinate progress bar with a '''ProgressBarWidget''' that uses a percentage with the '''progress''' config: [[File:WidgetsProgressBars1.png| Example of a determinate progress bar .]] <syntaxhighlight lang="javascript"> // Example: A determinate progress bar. Set an initial percent with // the 'progress' configuration option. var progressBar=new OO.ui.ProgressBarWidget( { progress: 33 } ); $('body').append(progressBar.$element); </syntaxhighlight> Create an indeterminate progress bar by setting the progress option to ‘false’: [[File:WidgetsProgressBar2.png| Example of an indeterminate progress bar .]] <syntaxhighlight lang="javascript"> // Example: An indeterminate progress bar. 'progress' is set to 'false'. var progressBarI=new OO.ui.ProgressBarWidget( { progress: false } ); $('body').append(progressBarI.$element); </syntaxhighlight> Use '''ProgressBarWidget''' methods to set and get the value of the progress '''(setProgress()''' and '''getProgress()''' ).  For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProgressBarWidget the code-level documentation]. 1075ovd7vux5e910bclzo68iar6svku 122 80 2015-01-29T22:18:01Z Admin 1 Convert to OOUI Demo wikitext text/x-wiki Progress bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes: * Determinate '''ProgressBarWidgets''' show the percent of an operation that is complete. Configure a progress bar with an initial percent-complete by setting the '''progress''' option to an integer reflecting the desired percentage. * Indeterminate '''ProgressBarWidgets''' use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages. To create an indeterminate progress bar, set the '''progress''' option to ‘false.’ Create a determinate progress bar with a '''ProgressBarWidget''' that uses a percentage with the '''progress''' config: <ooui-demo type="deferred"> {"progress":33, "class": "ProgressBarWidget"} </ooui-demo> Create an indeterminate progress bar by setting the progress option to ‘false’: <ooui-demo type="deferred"> {"progress":false, "class": "ProgressBarWidget"} </ooui-demo> Use '''ProgressBarWidget''' methods to set and get the value of the progress '''(setProgress()''' and '''getProgress()''' ).  For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProgressBarWidget the code-level documentation]. sz9x6tl4d0uxedm8jqbw327c0jtv98m 139 122 2015-02-23T15:23:08Z Admin 1 wikitext text/x-wiki Progress bars visually display the status of an operation, such as a download. They can be used to show information about both determinate and indeterminate processes: * Determinate '''ProgressBarWidgets''' show the percent of an operation that is complete. Configure a progress bar with an initial percent-complete by setting the '''progress''' option to an integer reflecting the desired percentage. * Indeterminate '''ProgressBarWidgets''' use a visual display of motion to indicate that an operation is taking place. Because the extent of an indeterminate operation is unknown, the bar does not use percentages. To create an indeterminate progress bar, set the '''progress''' option to ‘false.’ {{described demo |description=Create a determinate progress bar with a '''ProgressBarWidget''' that uses a percentage with the '''progress''' config: |demo=<ooui-demo type="deferred"> {"progress":33, "class": "ProgressBarWidget"} </ooui-demo> }} {{described demo |description=Create an indeterminate progress bar by setting the progress option to ‘false’: |demo=<ooui-demo type="deferred"> {"progress":false, "class": "ProgressBarWidget"} </ooui-demo> }} Use '''ProgressBarWidget''' methods to set and get the value of the progress '''(setProgress()''' and '''getProgress()''' ).  For a complete list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProgressBarWidget the code-level documentation]. a9bjox99oe7sjwiltwf6m61azvqu3s6 OOjs UI/Layouts 0 43 81 2015-01-15T00:12:37Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts]] to [[OOjs UI/Layouts]] wikitext text/x-wiki Layouts do not emit events, but instead are used to arrange other widgets of arbitrary type in a way that is centrally controlled and can be updated dynamically. Layouts can also be—and usually are—combined. A form can be created by combining a '''FormLayout''' with a '''FieldsetLayout''' and '''FieldLayouts''', for example, or a '''StackLayout''' can be used to display one '''PanelLayout''' at a time in the same region. The library’s layouts include: '''[[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldsetLayout,]] [[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldLayout]], [[OOjs UI/Documentation/Layouts/Forms|FormLayout]], [[OOjs UI/Documentation/Layouts/Grids|GridLayout]], [[OOjs UI/Documentation/Layouts/Stacks and Panels|PanelLayout]], [[OOjs UI/Documentation/Layouts/Stacks and Panels|StackLayout]], [[OOjs UI/Documentation/Layouts/Booklets and Pages|PageLayout]]''', and '''[[OOjs UI/Documentation/Layouts/Booklets and Pages|BookletLayout]]'''. q5g7l1s1mm5qkyq2as7vakbbyju9bbu 82 81 2015-01-16T13:32:35Z Admin 1 1 revision imported wikitext text/x-wiki Layouts do not emit events, but instead are used to arrange other widgets of arbitrary type in a way that is centrally controlled and can be updated dynamically. Layouts can also be—and usually are—combined. A form can be created by combining a '''FormLayout''' with a '''FieldsetLayout''' and '''FieldLayouts''', for example, or a '''StackLayout''' can be used to display one '''PanelLayout''' at a time in the same region. The library’s layouts include: '''[[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldsetLayout,]] [[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldLayout]], [[OOjs UI/Documentation/Layouts/Forms|FormLayout]], [[OOjs UI/Documentation/Layouts/Grids|GridLayout]], [[OOjs UI/Documentation/Layouts/Stacks and Panels|PanelLayout]], [[OOjs UI/Documentation/Layouts/Stacks and Panels|StackLayout]], [[OOjs UI/Documentation/Layouts/Booklets and Pages|PageLayout]]''', and '''[[OOjs UI/Documentation/Layouts/Booklets and Pages|BookletLayout]]'''. q5g7l1s1mm5qkyq2as7vakbbyju9bbu OOjs UI/Layouts/Fields and Fieldsets 0 44 83 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Fields and Fieldsets]] to [[OOjs UI/Layouts/Fields and Fieldsets]] wikitext text/x-wiki One of the most commonly used layouts is the '''FieldsetLayout,''' which is composed of one or more '''FieldLayouts''' that contain an individual widget, such as a form input. Both '''FieldsetLayouts''' and '''FieldLayouts''' can be configured with a label. A '''FieldLayout''' can also be configured with help text, which is accessed by the user via a help icon in the upper-right corner of the field. Note that each '''FieldLayout''' requires a widget object (e.g., a button or input field), which should be specified by reference before any optional configuration settings. A '''FieldsetLayout''' can only contain '''FieldLayouts''', and an error will be thrown if another type of object is included directly.'''<br>''' [[File:LayoutsFieldsAndFieldsets.png| An example of a Fieldset layout ]] <syntaxhighlight lang="html5"> <!-- This is an example of a FieldsetLayout that contains four FieldLayouts (one for each of the labeled form elements). Each field has been configured to illustrate a way in which labels can be aligned: left, right, top, or inline. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 600px; height: 300px; border-style: dotted; border-width: 1px; padding: 20px; } </style> <script> // Create form elements (text input, checkbox, submit button, etc.) var input1 = new OO.ui.TextInputWidget({ placeholder: 'A form text field' } ); var input2 = new OO.ui.TextInputWidget({ placeholder: 'A form text field' } ); var input3 = new OO.ui.TextInputWidget({ placeholder: 'A form text field with help' } ); var input4 = new OO.ui.CheckboxInputWidget({ selected: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'FieldsetLayout: Examples of label alignment and help text', classes: ["container"] } ); // Add field layouts that contain the form elements to the fieldset. Items can also be specified // with the FieldsetLayout's 'items' config option: fieldset.addItems( [ new OO.ui.FieldLayout( input1, { label : 'Left-aligned label, the default', align : 'left' }), new OO.ui.FieldLayout( input2, { label : 'Right-aligned label', align : 'right' }), new OO.ui.FieldLayout( input3, { label : 'Top-aligned label', align : 'top', help : 'A bit of help' }), new OO.ui.FieldLayout( input4, { label : 'Inline label', align : 'inline' }) ] ); $( 'body' ).append( fieldset.$element ); </script> </syntaxhighlight> Field labels are aligned in one of four ways: * '''left:''' The label is placed before the form field (or other object) and aligned with the left margin. A left-alignment is used for forms with many fields. * '''right:''' The label is placed before the form field and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label. * '''top:''' The label is placed above the form field. A top-alignment is used for brief forms that users fill out from top to bottom. * '''inline:''' The label is placed after the form field and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons. For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FieldsetLayout the code-level documentation for FieldsetLayouts] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FieldLayout FieldLayouts.] ngousa6dyfdzxtyoifac7t6895y6w6z 84 83 2015-01-16T13:32:36Z Admin 1 1 revision imported wikitext text/x-wiki One of the most commonly used layouts is the '''FieldsetLayout,''' which is composed of one or more '''FieldLayouts''' that contain an individual widget, such as a form input. Both '''FieldsetLayouts''' and '''FieldLayouts''' can be configured with a label. A '''FieldLayout''' can also be configured with help text, which is accessed by the user via a help icon in the upper-right corner of the field. Note that each '''FieldLayout''' requires a widget object (e.g., a button or input field), which should be specified by reference before any optional configuration settings. A '''FieldsetLayout''' can only contain '''FieldLayouts''', and an error will be thrown if another type of object is included directly.'''<br>''' [[File:LayoutsFieldsAndFieldsets.png| An example of a Fieldset layout ]] <syntaxhighlight lang="html5"> <!-- This is an example of a FieldsetLayout that contains four FieldLayouts (one for each of the labeled form elements). Each field has been configured to illustrate a way in which labels can be aligned: left, right, top, or inline. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 600px; height: 300px; border-style: dotted; border-width: 1px; padding: 20px; } </style> <script> // Create form elements (text input, checkbox, submit button, etc.) var input1 = new OO.ui.TextInputWidget({ placeholder: 'A form text field' } ); var input2 = new OO.ui.TextInputWidget({ placeholder: 'A form text field' } ); var input3 = new OO.ui.TextInputWidget({ placeholder: 'A form text field with help' } ); var input4 = new OO.ui.CheckboxInputWidget({ selected: true } ); // Create a Fieldset layout. var fieldset = new OO.ui.FieldsetLayout( { label: 'FieldsetLayout: Examples of label alignment and help text', classes: ["container"] } ); // Add field layouts that contain the form elements to the fieldset. Items can also be specified // with the FieldsetLayout's 'items' config option: fieldset.addItems( [ new OO.ui.FieldLayout( input1, { label : 'Left-aligned label, the default', align : 'left' }), new OO.ui.FieldLayout( input2, { label : 'Right-aligned label', align : 'right' }), new OO.ui.FieldLayout( input3, { label : 'Top-aligned label', align : 'top', help : 'A bit of help' }), new OO.ui.FieldLayout( input4, { label : 'Inline label', align : 'inline' }) ] ); $( 'body' ).append( fieldset.$element ); </script> </syntaxhighlight> Field labels are aligned in one of four ways: * '''left:''' The label is placed before the form field (or other object) and aligned with the left margin. A left-alignment is used for forms with many fields. * '''right:''' The label is placed before the form field and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label. * '''top:''' The label is placed above the form field. A top-alignment is used for brief forms that users fill out from top to bottom. * '''inline:''' The label is placed after the form field and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons. For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FieldsetLayout the code-level documentation for FieldsetLayouts] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FieldLayout FieldLayouts.] ngousa6dyfdzxtyoifac7t6895y6w6z OOjs UI/Layouts/Forms 0 45 85 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Forms]] to [[OOjs UI/Layouts/Forms]] wikitext text/x-wiki '''FormLayouts''' are used to wrap '''[[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldsetLayouts]]''' when you intend to use browser-based form submission for the fields, rather than handling them in JavaScript. The following example illustrates a simple login form: [[File:LayoutsForms.png| Example of a FormLayout.]] <syntaxhighlight lang="javascript"> // This example illustrates a FormLayout that contains a FieldsetLayout (which in // turn contains FieldLayouts for the text input fields and input button). <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; height: 230px; border-style: dotted; border-width: 1px; padding: 20px; } </style> <script> // Create form elements (two text inputs and the button input, in this example). var input1 = new OO.ui.TextInputWidget({ placeholder: 'Username' } ); var input2 = new OO.ui.TextInputWidget({ placeholder: 'Password', type: 'password' } ); var submit = new OO.ui.ButtonInputWidget({ label: 'Submit' } ); // Create a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Using a form layout with a fieldset layout', classes: ["container"] } ); // Use the addItems() method to add FieldLayouts that contain the form // elements (the text inputs and submit button) to the FieldsetLayout: fieldset.addItems( [ new OO.ui.FieldLayout( input1, { label : 'Username', align : 'top' }), new OO.ui.FieldLayout( input2, { label : 'Password', align : 'top' }), new OO.ui.FieldLayout( submit )     ] ); // Add the FieldsetLayout to a FormLayout. // Note that the fieldset is added using the $content config option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }) $( 'body' ).append( form.$element ); </syntaxhighlight> Form layouts can be configured with an HTML form action, an encoding type, and a method using the '''action''', '''enctype''', and '''method''' configs, respectively. For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FormLayout the code-level documentation.] 8ea9ruwbgvl3rtizh7sjy9lclgsvuna 86 85 2015-01-16T13:32:37Z Admin 1 1 revision imported wikitext text/x-wiki '''FormLayouts''' are used to wrap '''[[OOjs UI/Documentation/Layouts/Fields and Fieldsets|FieldsetLayouts]]''' when you intend to use browser-based form submission for the fields, rather than handling them in JavaScript. The following example illustrates a simple login form: [[File:LayoutsForms.png| Example of a FormLayout.]] <syntaxhighlight lang="javascript"> // This example illustrates a FormLayout that contains a FieldsetLayout (which in // turn contains FieldLayouts for the text input fields and input button). <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; height: 230px; border-style: dotted; border-width: 1px; padding: 20px; } </style> <script> // Create form elements (two text inputs and the button input, in this example). var input1 = new OO.ui.TextInputWidget({ placeholder: 'Username' } ); var input2 = new OO.ui.TextInputWidget({ placeholder: 'Password', type: 'password' } ); var submit = new OO.ui.ButtonInputWidget({ label: 'Submit' } ); // Create a FieldsetLayout. var fieldset = new OO.ui.FieldsetLayout( { label: 'Using a form layout with a fieldset layout', classes: ["container"] } ); // Use the addItems() method to add FieldLayouts that contain the form // elements (the text inputs and submit button) to the FieldsetLayout: fieldset.addItems( [ new OO.ui.FieldLayout( input1, { label : 'Username', align : 'top' }), new OO.ui.FieldLayout( input2, { label : 'Password', align : 'top' }), new OO.ui.FieldLayout( submit )     ] ); // Add the FieldsetLayout to a FormLayout. // Note that the fieldset is added using the $content config option. var form=new OO.ui.FormLayout(  { $content : fieldset.$element, action : '/api/formhandler', method : 'get' }) $( 'body' ).append( form.$element ); </syntaxhighlight> Form layouts can be configured with an HTML form action, an encoding type, and a method using the '''action''', '''enctype''', and '''method''' configs, respectively. For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.FormLayout the code-level documentation.] 8ea9ruwbgvl3rtizh7sjy9lclgsvuna OOjs UI/Layouts/Grids 0 46 87 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Grids]] to [[OOjs UI/Layouts/Grids]] wikitext text/x-wiki A '''GridLayout''' contains '''PanelLayouts''', which are arranged in rows and columns. The arrangement of the panels as well as their size can be updated dynamically with the '''update()''' method. The number of rows and columns in the grid is reflected in the grid’s '''widths''' and '''heights''' configuration options, which are also used to determine the relative size of each row and column. Both widths and heights are specified as ratios. To create a grid with two equal columns, for example, specify [ 1,1 ]—or [10, 10] or [1/2, 1/2], the numbers are internally scaled—for the '''widths''' config. To create a three by three grid, one could use the following settings: <syntaxhighlight lang="javascript"> var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4, panel5, panel6, panel7, panel8, panel9 ], { widths: [ 1/3 , 1/3, 1/3 ], heights: [ 1/2 , 1/4,  1/4 ] } ); </syntaxhighlight> Note that the '''GridLayout''' requires an array of panels, which must be specified before the other configuration settings. The length of the panel array must equal the number of grid cells (9, in this example). '''<br>'''Individual '''PanelLayouts''' can be configured as well. Add padding between the edge of the panel layout and its content by setting '''padded''' to ‘true’ or allow vertical scrolling by setting '''scrollable''' to ‘true’. By default, all '''PanelLayouts''' are expanded to fill their parent element. When the grid container resizes, the panels will resize to fill the new dimensions.''' ''' [[File:LayoutsGrids.png| Example of a GridLayout.]] <syntaxhighlight lang="html5"> <!-- An example of a grid layout with four panels. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { top: 20px; left: 20px; width: 400px; height: 300px; border-style: dotted; border-width: 1px; padding: 20px; } .blue { background-color: #ccccff; } .green { background-color: #ccffcc; } </style> <script> // Create PanelLayouts to add to the GridLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>'), classes: ['blue'] }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['green'] }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<nowiki><p>Panel Three</p>' ), classes: ['green'] }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<nowiki><p>Panel Four</p>' ), classes: ['blue'] }); // Create a GridLayout. var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4 ], { classes: [ 'container' ], widths: [ 1/2 , 1/2 ], heights: [ 1/2 ,  1/2 ] } ); $( 'body' ).append( grid.$element ); </script> </syntaxhighlight> '''GridLayout''' methods can be used to set the grid dimensions ('''layout()''' method), to get a panel at a specified position ('''getPanel()''' method), or to update the size of the cells or their position ('''update()''' method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.GridLayout the code-level documentation.] ghf4hckci1e4c7p3vubm3jvgcshi8k7 88 87 2015-01-16T13:32:37Z Admin 1 1 revision imported wikitext text/x-wiki A '''GridLayout''' contains '''PanelLayouts''', which are arranged in rows and columns. The arrangement of the panels as well as their size can be updated dynamically with the '''update()''' method. The number of rows and columns in the grid is reflected in the grid’s '''widths''' and '''heights''' configuration options, which are also used to determine the relative size of each row and column. Both widths and heights are specified as ratios. To create a grid with two equal columns, for example, specify [ 1,1 ]—or [10, 10] or [1/2, 1/2], the numbers are internally scaled—for the '''widths''' config. To create a three by three grid, one could use the following settings: <syntaxhighlight lang="javascript"> var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4, panel5, panel6, panel7, panel8, panel9 ], { widths: [ 1/3 , 1/3, 1/3 ], heights: [ 1/2 , 1/4,  1/4 ] } ); </syntaxhighlight> Note that the '''GridLayout''' requires an array of panels, which must be specified before the other configuration settings. The length of the panel array must equal the number of grid cells (9, in this example). '''<br>'''Individual '''PanelLayouts''' can be configured as well. Add padding between the edge of the panel layout and its content by setting '''padded''' to ‘true’ or allow vertical scrolling by setting '''scrollable''' to ‘true’. By default, all '''PanelLayouts''' are expanded to fill their parent element. When the grid container resizes, the panels will resize to fill the new dimensions.''' ''' [[File:LayoutsGrids.png| Example of a GridLayout.]] <syntaxhighlight lang="html5"> <!-- An example of a grid layout with four panels. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { top: 20px; left: 20px; width: 400px; height: 300px; border-style: dotted; border-width: 1px; padding: 20px; } .blue { background-color: #ccccff; } .green { background-color: #ccffcc; } </style> <script> // Create PanelLayouts to add to the GridLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>'), classes: ['blue'] }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['green'] }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<nowiki><p>Panel Three</p>' ), classes: ['green'] }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<nowiki><p>Panel Four</p>' ), classes: ['blue'] }); // Create a GridLayout. var grid = new OO.ui.GridLayout( [ panel1, panel2, panel3, panel4 ], { classes: [ 'container' ], widths: [ 1/2 , 1/2 ], heights: [ 1/2 ,  1/2 ] } ); $( 'body' ).append( grid.$element ); </script> </syntaxhighlight> '''GridLayout''' methods can be used to set the grid dimensions ('''layout()''' method), to get a panel at a specified position ('''getPanel()''' method), or to update the size of the cells or their position ('''update()''' method). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.GridLayout the code-level documentation.] ghf4hckci1e4c7p3vubm3jvgcshi8k7 OOjs UI/Layouts/Stacks and Panels 0 47 89 2015-01-15T00:12:39Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Stacks and Panels]] to [[OOjs UI/Layouts/Stacks and Panels]] wikitext text/x-wiki A '''StackLayout''' contains a series of '''PanelLayouts''' that, by default, are mutually exclusive. The '''PanelLayouts''' themselves expand to cover the entire area of their parent, and can be configured with scrolling and padding. Which panel to show can be modified programmatically with the '''setItem( item )''' method. [[File:LayoutsStacksAndPanels1.png| An example of a Stack layout ]] <syntaxhighlight lang="html5"> <!-- This is an example of a stack layout that contains five panel layouts. By default, only the first panel is displayed. In this example, 'Panel 2' is displayed instead, using the setItem() method. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; top: 20px; left: 20px; height: 230px; border-style: dotted; border-width: 1px; padding: 20px; } .one { background-color: #ccccff; } .two { background-color: #ffcccc; } .three { background-color: #ccffcc; } .four { background-color: #fcccfc; } .five { background-color: #ccfccf; } </style> <script> // Create PanelLayouts to add to the StackLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>' ), classes: ['one'], padded: true, scrollable: true, expanded: true }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['two'], padded: true, scrollable: true, expanded: true }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Three</p>' ), classes: ['three'], padded: true, scrollable: true, expanded: true }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Four</p>' ), classes: ['four'], padded: true, scrollable: true, expanded: true } ); var panel5 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Five</p>' ), classes: ['five'], padded: true, scrollable: true, expanded: true } ); // Create a StackLayout and add the panels. var stack = new OO.ui.StackLayout( { items: [ panel1, panel2, panel3, panel4, panel5 ], classes: [ 'container' ] } ); $( 'body' ).append( stack.$element ); // Use the setItem() method to select which panel to display. stack.setItem( panel2 ); </script> </syntaxhighlight> Set the '''continuous''' option to ‘true’ to display a stack of all contained panels: [[File:LayoutsStacksAndPanels2.png| An example of a Stack layout with 'continuous' set to 'true']] <syntaxhighlight lang="html5"> <!-- A stack layout in which 'continuous' is set to 'true'. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; top: 20px; left: 20px; height: 400px; border-style: dotted; border-width: 1px; padding: 20px; } .one { background-color: #ccccff; } .two { background-color: #ffcccc; } .three { background-color: #ccffcc; } .four { background-color: #fcccfc; } .five { background-color: #ccfccf; } </style> <script> // Create objects to add to the panel layouts. var icon1 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon2 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon3 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon4 = new OO.ui.IconWidget({ icon: 'advanced' } ); // Create PanelLayouts to add to the StackLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>' ), classes: ['one'], padded: true, scrollable: true, expanded: true }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['two'], padded: true, scrollable: true, expanded: true }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Three</p>' ), classes: ['three'], padded: true, scrollable: true, expanded: true }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Four</p>' ), classes: ['four'], padded: true, scrollable: true, expanded: true } ); var panel5 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Five</p>' ), classes: ['five'], padded: true, scrollable: true, expanded: true } ); // Create a StackLayout and add the panels. var stack = new OO.ui.StackLayout( { items: [ panel1, panel2, panel3, panel4, panel5], continuous: true, classes: ['container'] } ); $( 'body' ).append( stack.$element ); </script> </syntaxhighlight> Panels can be added, removed, displayed, and cleared with methods supported by the '''StackLayout'''. For a full list of methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.StackLayout the code-level documentation]. 4dhp5xzqdm6y9qqt0bh4buakgwr18ba 90 89 2015-01-16T13:32:39Z Admin 1 1 revision imported wikitext text/x-wiki A '''StackLayout''' contains a series of '''PanelLayouts''' that, by default, are mutually exclusive. The '''PanelLayouts''' themselves expand to cover the entire area of their parent, and can be configured with scrolling and padding. Which panel to show can be modified programmatically with the '''setItem( item )''' method. [[File:LayoutsStacksAndPanels1.png| An example of a Stack layout ]] <syntaxhighlight lang="html5"> <!-- This is an example of a stack layout that contains five panel layouts. By default, only the first panel is displayed. In this example, 'Panel 2' is displayed instead, using the setItem() method. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; top: 20px; left: 20px; height: 230px; border-style: dotted; border-width: 1px; padding: 20px; } .one { background-color: #ccccff; } .two { background-color: #ffcccc; } .three { background-color: #ccffcc; } .four { background-color: #fcccfc; } .five { background-color: #ccfccf; } </style> <script> // Create PanelLayouts to add to the StackLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>' ), classes: ['one'], padded: true, scrollable: true, expanded: true }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['two'], padded: true, scrollable: true, expanded: true }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Three</p>' ), classes: ['three'], padded: true, scrollable: true, expanded: true }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Four</p>' ), classes: ['four'], padded: true, scrollable: true, expanded: true } ); var panel5 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Five</p>' ), classes: ['five'], padded: true, scrollable: true, expanded: true } ); // Create a StackLayout and add the panels. var stack = new OO.ui.StackLayout( { items: [ panel1, panel2, panel3, panel4, panel5 ], classes: [ 'container' ] } ); $( 'body' ).append( stack.$element ); // Use the setItem() method to select which panel to display. stack.setItem( panel2 ); </script> </syntaxhighlight> Set the '''continuous''' option to ‘true’ to display a stack of all contained panels: [[File:LayoutsStacksAndPanels2.png| An example of a Stack layout with 'continuous' set to 'true']] <syntaxhighlight lang="html5"> <!-- A stack layout in which 'continuous' is set to 'true'. --> <style> body { font-family: sans-serif; font-size: 0.875em; } .container { width: 500px; top: 20px; left: 20px; height: 400px; border-style: dotted; border-width: 1px; padding: 20px; } .one { background-color: #ccccff; } .two { background-color: #ffcccc; } .three { background-color: #ccffcc; } .four { background-color: #fcccfc; } .five { background-color: #ccfccf; } </style> <script> // Create objects to add to the panel layouts. var icon1 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon2 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon3 = new OO.ui.IconWidget({ icon: 'advanced' } ); var icon4 = new OO.ui.IconWidget({ icon: 'advanced' } ); // Create PanelLayouts to add to the StackLayout. var panel1 = new OO.ui.PanelLayout( { $content: $( '<p>Panel One</p>' ), classes: ['one'], padded: true, scrollable: true, expanded: true }); var panel2 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Two</p>' ), classes: ['two'], padded: true, scrollable: true, expanded: true }); var panel3 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Three</p>' ), classes: ['three'], padded: true, scrollable: true, expanded: true }); var panel4 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Four</p>' ), classes: ['four'], padded: true, scrollable: true, expanded: true } ); var panel5 = new OO.ui.PanelLayout( { $content: $( '<p>Panel Five</p>' ), classes: ['five'], padded: true, scrollable: true, expanded: true } ); // Create a StackLayout and add the panels. var stack = new OO.ui.StackLayout( { items: [ panel1, panel2, panel3, panel4, panel5], continuous: true, classes: ['container'] } ); $( 'body' ).append( stack.$element ); </script> </syntaxhighlight> Panels can be added, removed, displayed, and cleared with methods supported by the '''StackLayout'''. For a full list of methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.StackLayout the code-level documentation]. 4dhp5xzqdm6y9qqt0bh4buakgwr18ba OOjs UI/Layouts/Booklets and Pages 0 48 91 2015-01-15T00:12:38Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Layouts/Booklets and Pages]] to [[OOjs UI/Layouts/Booklets and Pages]] wikitext text/x-wiki A '''BookletLayout''' is a rich layout that contains '''PageLayouts''' as well as an outline (generated by an '''OutlineSelectWidget''') that allows users to easily navigate through the pages and select which one to display. By default, only one page is displayed at a time and the outline is hidden. When a user navigates to a new page, the booklet widget automatically focuses on the first focusable element, unless the default setting is changed. Optionally, booklets can be configured to show controls for adding, moving, and removing items. In general, '''PageLayouts''' are highly customized for a specific application and are built by extending the class to include the desired functionality. The example below uses two very simple pages to illustrate the '''BookletLayout''' and its behavior. [[File:LayoutsBooklets2.png| Example of a BookletLayout.]] <syntaxhighlight lang="javascript"> // Example of a BookletLayout that contains two PageLayouts. // PageLayouts are extended so that the build-out of their content and the // behavior of interacting with the content is encapsulated. // Extend the PageLayout class to customize it. // Set a label for each page (e.g., 'Page One', in this example) function PageOneLayout( name, config ) { PageOneLayout.super.call( this, name, config ); this.$element.append( '<p>First page</p>' ); } OO.inheritClass( PageOneLayout, OO.ui.PageLayout ); PageOneLayout.prototype.setupOutlineItem = function () { this.outlineItem.setLabel( 'Page One' ); }; function PageTwoLayout( name, config ) { PageTwoLayout.super.call( this, name, config ); this.$element.append( '<p>Second page</p>' ); } OO.inheritClass( PageTwoLayout, OO.ui.PageLayout ); PageTwoLayout.prototype.setupOutlineItem = function () { this.outlineItem.setLabel( 'Page Two' ); }; // Create the pages var page1 = new PageOneLayout( 'one' ), page2 = new PageTwoLayout( 'two' ); // Create a booklet. Set 'outlined' to 'true' to display the // outline labels (e.g., 'Page One') on the left side of the booklet. var booklet = new OO.ui.BookletLayout( { outlined: true } ); // Add pages to the booklet with the addPages() method. booklet.addPages ( [ page1, page2 ] ); $( 'body' ).append( booklet.$element ); </syntaxhighlight>For more information, please see the code-generated documentation for [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.BookletLayout BookletLayouts] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PageLayout PageLayouts]. o5twxl9yt24uvnlamdr5zmhnupqaht6 92 91 2015-01-16T13:32:39Z Admin 1 1 revision imported wikitext text/x-wiki A '''BookletLayout''' is a rich layout that contains '''PageLayouts''' as well as an outline (generated by an '''OutlineSelectWidget''') that allows users to easily navigate through the pages and select which one to display. By default, only one page is displayed at a time and the outline is hidden. When a user navigates to a new page, the booklet widget automatically focuses on the first focusable element, unless the default setting is changed. Optionally, booklets can be configured to show controls for adding, moving, and removing items. In general, '''PageLayouts''' are highly customized for a specific application and are built by extending the class to include the desired functionality. The example below uses two very simple pages to illustrate the '''BookletLayout''' and its behavior. [[File:LayoutsBooklets2.png| Example of a BookletLayout.]] <syntaxhighlight lang="javascript"> // Example of a BookletLayout that contains two PageLayouts. // PageLayouts are extended so that the build-out of their content and the // behavior of interacting with the content is encapsulated. // Extend the PageLayout class to customize it. // Set a label for each page (e.g., 'Page One', in this example) function PageOneLayout( name, config ) { PageOneLayout.super.call( this, name, config ); this.$element.append( '<p>First page</p>' ); } OO.inheritClass( PageOneLayout, OO.ui.PageLayout ); PageOneLayout.prototype.setupOutlineItem = function () { this.outlineItem.setLabel( 'Page One' ); }; function PageTwoLayout( name, config ) { PageTwoLayout.super.call( this, name, config ); this.$element.append( '<p>Second page</p>' ); } OO.inheritClass( PageTwoLayout, OO.ui.PageLayout ); PageTwoLayout.prototype.setupOutlineItem = function () { this.outlineItem.setLabel( 'Page Two' ); }; // Create the pages var page1 = new PageOneLayout( 'one' ), page2 = new PageTwoLayout( 'two' ); // Create a booklet. Set 'outlined' to 'true' to display the // outline labels (e.g., 'Page One') on the left side of the booklet. var booklet = new OO.ui.BookletLayout( { outlined: true } ); // Add pages to the booklet with the addPages() method. booklet.addPages ( [ page1, page2 ] ); $( 'body' ).append( booklet.$element ); </syntaxhighlight>For more information, please see the code-generated documentation for [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.BookletLayout BookletLayouts] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.PageLayout PageLayouts]. o5twxl9yt24uvnlamdr5zmhnupqaht6 OOjs UI/Windows 0 49 93 2015-01-15T00:12:41Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows]] to [[OOjs UI/Windows]] wikitext text/x-wiki A '''Window''' is a container for elements in a child frame. Each window is managed by a '''WindowManager''', which is used to open and close the window and control its presentation. The size of a window is specified using a symbolic name (‘small’, ‘medium’, ‘large’, or ‘full’), which is interpreted by the window manager. If the requested size is not recognized, the window manager will choose a sensible fallback. OOjs UI windows include [[OOjs UI/Documentation/Windows/Dialogs|Dialog]], [[OOjs UI/Documentation/Windows/Process Dialogs|ProcessDialog]], and [[OOjs UI/Documentation/Windows/Message Dialogs|MessageDialog]]. Note that windows are responsive to the size of the viewing device and will dynamically adjust their display accordingly. The size of the dialog should therefore be considered an approximation rather than an exact specification. Managed windows are mutually exclusive. If a new window is opened while a current window is opening or is opened, the current window will be closed and any ongoing process will be cancelled. Windows themselves are persistent and—rather than being torn down when closed—can be repopulated with the pertinent data and reused. Over the lifecycle of a window, the '''WindowManager''' makes available three promises: ‘opening’, ‘opened’, and ‘closing’, which represent the primary stages of the cycle. The ‘opening’ promise is resolved when the window is opened, the ‘opened’ promise is resolved when the window begins closing, and the ‘closing’ promise is resolved when the window is done closing.  See Process dialogs, for examples that show this promise chain in practice. The first time the window is opened (and only the first time), the '''initialize()''' method is called before opening. The '''initialize()''' method is used to populate the window with persistent content, providing a sort of caching mechanism. A window that contains a list of 250 languages can be populated with that list during initialization, for example, and if the window is opened again, the list will not have to be reloaded. [[File:WindowsLifecycle.png| The lifecycle of a window ]] === Opening === The opening stage begins when the window manager’s '''openWindow()''' or the window’s '''open()''' method is used to open a window. The window manager emits an ‘opening’ event with a promise that will be resolved with an ‘opened’ promise when the window is setup, ready, and opened. The window manager then calls the '''getSetupDelay()''' method, which gets the number of milliseconds to wait before calling the window’s '''getSetupProcess()''' method and executing the result. The '''getSetupProcess()''' method assembles a [[OOjs UI/Documentation/Windows/Process Dialogs#Processes and errors|process]] for setting up the window with data passed to the opening function. Each time a window is reused, it can be set up with new data. When setup is complete, a ‘setup’  progress notification is emitted from the opening promise. The window manager then calls the '''getReadyDelay()''' method, which gets the number of milliseconds to wait between finishing setup and calling the window’s '''getReadyProcess()''' method and executing the result. A ‘ready’  progress notification is then emitted from the opening promise. When a window is ‘ready’ everything is set up and visible,  and it is okay to set the focus. === Opened === When the window is set up and ready, the ‘opening’ promise is resolved with an ‘opened’ promise. The window is now opened. === '''Closing ''' === The closing stage begins when the window manager’s '''closeWindow()''' or the window’s '''close()''' method is used to close a window. The window manager emits a ‘closing’ event and the ‘opened’ promise is resolved with a ‘closing’ promise. The window manager calls the '''getHoldDelay()''' method, which gets the number of milliseconds to wait before calling the window’s '''getHoldProcess()''' method and executing the result. There is rarely a need to override this method, though one might if a window requires a long time to teardown and you wish to disable the window controls in the meantime. When the hold process is complete, a ‘hold’ progress notification is emitted from the closing promise. The window manager then calls the '''getTeardownDelay()''' method, which gets the number of milliseconds to wait between finishing the hold process and calling the window’s '''getTeardownProcess()''' method and executing the result. During teardown, any data passed to the '''close()''' method will be conveyed and the window closed. When the teardown process is complete, a ‘teardown’ progress notification is emitted from the closing promise, which is then resolved. The window is now closed. Note that each process (e.g., setup, ready, hold, teardown) is executed in series, so asynchronous processing can complete. Always assume window processes are executed asynchronously. See [[OOjs UI/Documentation/Windows/Process Dialogs#Processes and errors|Processes and errors]] for more details about processes. Closing a window without data will safely close it without making any changes, essentially canceling the process. The '''WindowManager''' can also be configured to isolate window content using inline frames (by setting the '''isolate''' option to ‘true’) or to prevent interaction outside the window (by setting the '''modal''' option to ‘true’). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Window the code-level documentation.] cglmyimwznlqo3x58d9r7vevsmq17z7 94 93 2015-01-16T13:32:40Z Admin 1 1 revision imported wikitext text/x-wiki A '''Window''' is a container for elements in a child frame. Each window is managed by a '''WindowManager''', which is used to open and close the window and control its presentation. The size of a window is specified using a symbolic name (‘small’, ‘medium’, ‘large’, or ‘full’), which is interpreted by the window manager. If the requested size is not recognized, the window manager will choose a sensible fallback. OOjs UI windows include [[OOjs UI/Documentation/Windows/Dialogs|Dialog]], [[OOjs UI/Documentation/Windows/Process Dialogs|ProcessDialog]], and [[OOjs UI/Documentation/Windows/Message Dialogs|MessageDialog]]. Note that windows are responsive to the size of the viewing device and will dynamically adjust their display accordingly. The size of the dialog should therefore be considered an approximation rather than an exact specification. Managed windows are mutually exclusive. If a new window is opened while a current window is opening or is opened, the current window will be closed and any ongoing process will be cancelled. Windows themselves are persistent and—rather than being torn down when closed—can be repopulated with the pertinent data and reused. Over the lifecycle of a window, the '''WindowManager''' makes available three promises: ‘opening’, ‘opened’, and ‘closing’, which represent the primary stages of the cycle. The ‘opening’ promise is resolved when the window is opened, the ‘opened’ promise is resolved when the window begins closing, and the ‘closing’ promise is resolved when the window is done closing.  See Process dialogs, for examples that show this promise chain in practice. The first time the window is opened (and only the first time), the '''initialize()''' method is called before opening. The '''initialize()''' method is used to populate the window with persistent content, providing a sort of caching mechanism. A window that contains a list of 250 languages can be populated with that list during initialization, for example, and if the window is opened again, the list will not have to be reloaded. [[File:WindowsLifecycle.png| The lifecycle of a window ]] === Opening === The opening stage begins when the window manager’s '''openWindow()''' or the window’s '''open()''' method is used to open a window. The window manager emits an ‘opening’ event with a promise that will be resolved with an ‘opened’ promise when the window is setup, ready, and opened. The window manager then calls the '''getSetupDelay()''' method, which gets the number of milliseconds to wait before calling the window’s '''getSetupProcess()''' method and executing the result. The '''getSetupProcess()''' method assembles a [[OOjs UI/Documentation/Windows/Process Dialogs#Processes and errors|process]] for setting up the window with data passed to the opening function. Each time a window is reused, it can be set up with new data. When setup is complete, a ‘setup’  progress notification is emitted from the opening promise. The window manager then calls the '''getReadyDelay()''' method, which gets the number of milliseconds to wait between finishing setup and calling the window’s '''getReadyProcess()''' method and executing the result. A ‘ready’  progress notification is then emitted from the opening promise. When a window is ‘ready’ everything is set up and visible,  and it is okay to set the focus. === Opened === When the window is set up and ready, the ‘opening’ promise is resolved with an ‘opened’ promise. The window is now opened. === '''Closing ''' === The closing stage begins when the window manager’s '''closeWindow()''' or the window’s '''close()''' method is used to close a window. The window manager emits a ‘closing’ event and the ‘opened’ promise is resolved with a ‘closing’ promise. The window manager calls the '''getHoldDelay()''' method, which gets the number of milliseconds to wait before calling the window’s '''getHoldProcess()''' method and executing the result. There is rarely a need to override this method, though one might if a window requires a long time to teardown and you wish to disable the window controls in the meantime. When the hold process is complete, a ‘hold’ progress notification is emitted from the closing promise. The window manager then calls the '''getTeardownDelay()''' method, which gets the number of milliseconds to wait between finishing the hold process and calling the window’s '''getTeardownProcess()''' method and executing the result. During teardown, any data passed to the '''close()''' method will be conveyed and the window closed. When the teardown process is complete, a ‘teardown’ progress notification is emitted from the closing promise, which is then resolved. The window is now closed. Note that each process (e.g., setup, ready, hold, teardown) is executed in series, so asynchronous processing can complete. Always assume window processes are executed asynchronously. See [[OOjs UI/Documentation/Windows/Process Dialogs#Processes and errors|Processes and errors]] for more details about processes. Closing a window without data will safely close it without making any changes, essentially canceling the process. The '''WindowManager''' can also be configured to isolate window content using inline frames (by setting the '''isolate''' option to ‘true’) or to prevent interaction outside the window (by setting the '''modal''' option to ‘true’). For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Window the code-level documentation.] cglmyimwznlqo3x58d9r7vevsmq17z7 OOjs UI/Windows/Dialogs 0 50 95 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Dialogs]] to [[OOjs UI/Windows/Dialogs]] wikitext text/x-wiki The OOjs UI library contains three types of dialogs ('''Dialog''', '''[[OOjs UI/Documentation/Windows/Process Dialogs|ProcessDialog]]''', and '''[[OOjs UI/Documentation/Windows/Message Dialogs|MessageDialog]]'''), which render a dialog box that users can view and interact with. Each dialog is configured with the controls required—either for responding to a message or completing a process—and all configuration is handled with a common API. Note that the '''Dialog''' (and '''ProcessDialog''') classes themselves are not instantiated directly. By extending these classes, developers control the look and functionality of the entire window rather than injecting bits and pieces of information into it. Only '''MessageDialogs''', which are very generic, are instantiated directly. The '''Dialog''' class serves as the base class for the other types of dialogs. Unless extended to include controls, the rendered dialog box is a simple window that users can close by hitting the ‘Esc’ key. The following is an example of a basic '''Dialog''' window. [[File:WindowsDialog.png| Example of a Dialog window .]] <syntaxhighlight lang="javascript" enclose="div"> // Creating and opening a simple dialog window. // Subclass Dialog class. Note that the OOjs inheritClass() method extends the parent constructor's prototype and static methods and properties to the child constructor. function MyDialog( config ) { MyDialog.super.call( this, config ); } OO.inheritClass( MyDialog, OO.ui.Dialog ); // Specify a title statically (or, alternatively, with data passed to the opening() method). MyDialog.static.title='Simple dialog'; // Customize the initialize() function: This is where to add content to the dialog body and set up event handlers. MyDialog.prototype.initialize = function () { // Call the parent method MyDialog.super.prototype.initialize.call( this ); // Create and append a layout and some content. this.content = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close. </p>' ); this.$body.append( this.content.$element ); }; // Override the getBodyHeight() method to specify a custom height (or don't to use the automatically generated height) MyDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; // Make the window. var myDialog = new MyDialog({ size: 'medium' }); // Create and append a window manager, which will open and close the window. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the window to the window manager using the addWindows() method. windowManager.addWindows( [ myDialog ] ); // Open the window! windowManager.openWindow( myDialog ); </syntaxhighlight> For more information about '''Dialog''' windows, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Dialog code-level documentation]. eezcydc2uxln3y2zzk7qkuh1p253mlw 96 95 2015-01-16T13:32:40Z Admin 1 1 revision imported wikitext text/x-wiki The OOjs UI library contains three types of dialogs ('''Dialog''', '''[[OOjs UI/Documentation/Windows/Process Dialogs|ProcessDialog]]''', and '''[[OOjs UI/Documentation/Windows/Message Dialogs|MessageDialog]]'''), which render a dialog box that users can view and interact with. Each dialog is configured with the controls required—either for responding to a message or completing a process—and all configuration is handled with a common API. Note that the '''Dialog''' (and '''ProcessDialog''') classes themselves are not instantiated directly. By extending these classes, developers control the look and functionality of the entire window rather than injecting bits and pieces of information into it. Only '''MessageDialogs''', which are very generic, are instantiated directly. The '''Dialog''' class serves as the base class for the other types of dialogs. Unless extended to include controls, the rendered dialog box is a simple window that users can close by hitting the ‘Esc’ key. The following is an example of a basic '''Dialog''' window. [[File:WindowsDialog.png| Example of a Dialog window .]] <syntaxhighlight lang="javascript" enclose="div"> // Creating and opening a simple dialog window. // Subclass Dialog class. Note that the OOjs inheritClass() method extends the parent constructor's prototype and static methods and properties to the child constructor. function MyDialog( config ) { MyDialog.super.call( this, config ); } OO.inheritClass( MyDialog, OO.ui.Dialog ); // Specify a title statically (or, alternatively, with data passed to the opening() method). MyDialog.static.title='Simple dialog'; // Customize the initialize() function: This is where to add content to the dialog body and set up event handlers. MyDialog.prototype.initialize = function () { // Call the parent method MyDialog.super.prototype.initialize.call( this ); // Create and append a layout and some content. this.content = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content.$element.append( '<p>A simple dialog window. Press \'Esc\' to close. </p>' ); this.$body.append( this.content.$element ); }; // Override the getBodyHeight() method to specify a custom height (or don't to use the automatically generated height) MyDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; // Make the window. var myDialog = new MyDialog({ size: 'medium' }); // Create and append a window manager, which will open and close the window. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the window to the window manager using the addWindows() method. windowManager.addWindows( [ myDialog ] ); // Open the window! windowManager.openWindow( myDialog ); </syntaxhighlight> For more information about '''Dialog''' windows, please see the [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Dialog code-level documentation]. eezcydc2uxln3y2zzk7qkuh1p253mlw OOjs UI/Windows/Process Dialogs 0 51 97 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Process Dialogs]] to [[OOjs UI/Windows/Process Dialogs]] wikitext text/x-wiki Process dialog windows encapsulate a process and all of the code necessary to complete it. If the process terminates with an error, a customizable error interface alerts users to the trouble, permitting the user to dismiss the error and try again when relevant. The '''ProcessDialog''' class is always extended and customized with the methods and static properties required for each process. The process dialog box consists of a header that visually represents the ‘working’ state of long processes with an animation. The header contains the dialog title as well as two '''ActionWidgets''':  a ‘safe’ action on the left (e.g., ‘Cancel’) and a ‘primary’ action on the right (e.g., ‘Done’). These actions are called ‘special’ actions. Any additional actions are called ‘other’ actions and are displayed in the dialog footer. Note that which actions are ‘special’ and which ‘other’ can be changed dynamically and/or accessed with process dialog methods: '''getSpecial()''' or '''getOthers()'''. The following example illustrates a process dialog window with two '''ActionWidgets''' (‘Cancel’ and ‘Done’) displayed in its header. The dialog body contains a layout and message. Note that the window is not populated with this content when it is instantiated. Instead, its contents are added just before the window is opened for the first time, when the window manager calls the window's '''initialize()''' method. For an example of a window that is populated with contextual content passed at the time of opening, scroll down to the next example. [[File:WindowsProcessDialog1.png| An example of a ProcessDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Creating and opening a process dialog window. // Subclass ProcessDialog. function ProcessDialog( config ) { ProcessDialog.super.call( this, config ); } OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); // Specify a static title and actions. ProcessDialog.static.title = 'Process dialog'; ProcessDialog.static.actions = [ { action: 'save', label: 'Done', flags: 'primary' }, { label: 'Cancel', flags: 'safe' } ]; // Use the initialize() method to add content to the dialog's $body, // to initialize widgets, and to set up event handlers. ProcessDialog.prototype.initialize = function () { ProcessDialog.super.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content.$element.append( '<p>This is a process dialog window. The header contains the title and two buttons: \'Cancel\' (a safe action) on the left and \'Done\' (a primary action) on the right. </p>' ); this.$body.append( this.content.$element ); }; // Use the getActionProcess() method to specify a process to handle the // actions (for the 'save' action, in this example). ProcessDialog.prototype.getActionProcess = function ( action ) { var dialog = this; if ( action ) { return new OO.ui.Process( function () { dialog.close( { action: action } ); } ); } // Fallback to parent handler. return ProcessDialog.super.prototype.getActionProcess.call( this, action ); }; // Get dialog height. ProcessDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new dialog window. var processDialog = new ProcessDialog({ size: 'small' }); // Add windows to window manager using the addWindows() method. windowManager.addWindows( [ processDialog ] ); // Open the window. windowManager.openWindow( processDialog ); </syntaxhighlight> Both ‘safe’ and ‘primary’ actions are designated with flags that affect the action’s prominence in the dialog window: * '''primary''' - The primary action (e.g., ‘save’ or ‘done’) moves the user forward in whatever process they are in. The primary action is the most important widget in the user interface, and its positioning--in the upper right corner of the dialog window-- reflects this. * '''safe''' - The safe action (e.g., ‘Cancel’) will make no changes. ‘Safe’ actions are usually configured without an action. Actions widgets that have no configured action will close the window without making changes. The ‘primary’ and ‘safe’ actions (as well as any other actions specified) comprise an '''[[OOjs UI/Documentation/Windows/Process Dialogs#Action sets|ActionSet]]'''. An action set can consist of multiple action widgets configured with the same action and/or the same flags. If multiple ‘safe’ and ‘primary’ actions are specified, the process dialog renders the first 'safe' and 'primary' action in its header. If an action is changed--to use a new flag, for example--the user interface is updated accordingly. To defer updating the interface until after all actions have been changed, use the '''forEach()''' method to iterate over the actions and update the user interface at the end of the iteration. The next example illustrates how the '''getSetupProcess()''' method is used to configure a window with contextual data that is passed at the time of opening. [[File:WindowsProcessDialog2.png| An example of a ProcessDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Using getSetupProcess() to configure a window with data passed // at the time the window is opened. // Make a subclass of ProcessDialog function MyDialog( config ) { MyDialog.super.call( this, config ); } OO.inheritClass( MyDialog, OO.ui.ProcessDialog ); // Specify the static configurations: title and action set MyDialog.static.actions = [ { flags: 'primary', label: 'Continue', action: 'open' }, { flags: 'safe', label: 'Cancel' } ]; // Customize the initialize() function to add content and layouts: MyDialog.prototype.initialize = function () { MyDialog.super.prototype.initialize.call( this ); this.panel = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content = new OO.ui.FieldsetLayout( { $: this.$ } ); this.urlInput = new OO.ui.TextInputWidget( { $: this.$ } ); this.field = new OO.ui.FieldLayout( this.urlInput, { $: this.$, label: 'Click continue to open the link in a new window', align: 'top' } ); this.content.addItems([ this.field ]); this.panel.$element.append( this.content.$element ); this.$body.append( this.panel.$element ); this.urlInput.connect( this, { 'change': 'onUrlInputChange' } ); }; // Specify any additional functionality required by the window (disable opening an empty URL, in this case) MyDialog.prototype.onUrlInputChange = function ( value ) { this.actions.setAbilities( { open: !!value.length } ); }; // Specify the dialog height (or don't to use the automatically generated height). MyDialog.prototype.getBodyHeight = function () { return this.panel.$element.outerHeight( true ); }; // Use getSetupProcess() to set up the window with data passed to it at the time // of opening (e.g., url: 'http://www.mediawiki.org', in this example). MyDialog.prototype.getSetupProcess = function ( data ) { data = data || {}; return MyDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { // Set up contents based on data this.urlInput.setValue( data.url ); }, this ); }; // Specify processes to handle the actions. MyDialog.prototype.getActionProcess = function ( action ) { if ( action === 'open' ) { // Create a new process to handle the action return new OO.ui.Process( function () { window.open( this.urlInput.getValue()); }, this ); } // Fallback to parent handler return MyDialog.super.prototype.getActionProcess.call( this, action ); }; // Use the getTeardownProcess() method to perform actions whenever the dialog is closed. // This method provides access to data passed into the window's close() method // or the window manager's closeWindow() method. MyDialog.prototype.getTeardownProcess = function ( data ) { return MyDialog.super.prototype.getTeardownProcess.call( this, data ) .first( function () { // Perform any cleanup as needed }, this ); }; // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new process dialog window. var myDialog = new MyDialog(); // Add the window to window manager using the addWindows() method. windowManager.addWindows( [ myDialog ] ); // Open the window! windowManager.openWindow( myDialog, { url: 'http://www.mediawiki.org' } ); </syntaxhighlight> For more information about process dialogs, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProcessDialog the code-level documentation.] == Action sets == '''ActionSets''' manage the behavior of the actions that comprise them, allowing developers to control which actions are available for specific contexts (modes) and circumstances (abilities): * '''modes:''' When an action widget is configured with modes (e.g., ‘edit’ or ‘preview’), the action set can make the action available or not based on those modes (set with the '''setModes()''' method). Each action will only be available if it is configured for the current mode. (See below example.) * '''abilities''': When an action widget is configured with an action, the action set can make that action available or not based on abilities (set with the '''setAbilities()''' method). If a ‘save’ action is used to save content, for example, abilities can be used to disable the action until the content is determined to be valid. If multiple action widgets execute the ‘save’ action, all will be disabled until the criteria are met. The following example illustrates an action set that contains four action widgets: a primary action (‘continue’), two safe actions (‘cancel’ and ‘back’), and a ‘help’ action. Several of the actions have also been configured with modes: ‘edit’ or ‘help.’ <syntaxhighlight lang="javascript" enclose="div"> // Example: an action set that contains four action widgets. ProcessDialog.static.actions = [ { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, { action: 'help', modes: 'edit', label: 'Help' }, { modes: 'edit', label: 'Cancel', flags: 'safe' }, { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } ]; </syntaxhighlight> The process dialog in the next example uses the above action set to customize available actions based on the modes. [[File:WindowsProcessDialogActionSet.png| Example: Using modes and action sets.]] [[File:WindowsProcessDialogActionSet2.png| Example: Using modes and action sets.]] <syntaxhighlight lang="javascript" enclose="div"> // Example: A process dialog that uses an action set with modes. // Subclass ProcessDialog. function ProcessDialog( config ) { ProcessDialog.super.call( this, config ); } OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); // Specify a title and an action set that uses modes ('edit' and 'help' mode, in this example). ProcessDialog.static.title = 'Process dialog'; ProcessDialog.static.actions = [ { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, { action: 'help', modes: 'edit', label: 'Help' }, { modes: 'edit', label: 'Cancel', flags: 'safe' }, { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } ]; // Customize the initialize() method to add content and set up event handlers. // This example uses a stack layout with two panels: one displayed for // edit mode and one for help mode. ProcessDialog.prototype.initialize = function () { ProcessDialog.super.prototype.initialize.apply( this, arguments ); this.panel1 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.panel1.$element.append( '<p>This dialog uses an action set configured with modes. This is edit mode. Click \'help\' to see help mode. </p>' ); this.panel2 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.panel2.$element.append( '<p>This is help mode. Only the \'back\' button is configured to be visible here. Click \'back\' to return to \'edit\' mode</p>' ); this.stackLayout= new OO.ui.StackLayout( { items: [ this.panel1, this.panel2 ] }); this.$body.append( this.stackLayout.$element ); }; // Set up the initial mode of the window ('edit', in this example.) ProcessDialog.prototype.getSetupProcess = function ( data ) { return ProcessDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { this.actions.setMode('edit'); }, this ); }; // Use the getActionProcess() method to set the modes and displayed item. ProcessDialog.prototype.getActionProcess = function ( action ) { if ( action === 'help' ) { // Set the mode to help. this.actions.setMode( 'help' ); // Show the help panel. this.stackLayout.setItem( this.panel2 ); } else if ( action === 'back' ) { // Set the mode to edit. this.actions.setMode( 'edit' ); // Show the edit panel. this.stackLayout.setItem( this.panel1 ); } else if ( action === 'continue' ) { var dialog = this; return new OO.ui.Process( function () { // do something about the edit dialog.close(); } ); } return ProcessDialog.super.prototype.getActionProcess.call( this, action ); }; // Get dialog height. ProcessDialog.prototype.getBodyHeight = function () { return this.panel1.$element.outerHeight( true ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new dialog window. var processDialog = new ProcessDialog({ size: 'medium'}); // Add windows to window manager using the addWindows() method. windowManager.addWindows( [ processDialog ] ); // Open the window. windowManager.openWindow( processDialog ); </syntaxhighlight> For more information about action sets, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ActionSet the code-level documentation.] == Processes and errors == Process dialogs execute a process, which is a list of ‘steps’ that are called in sequence. If the process fails, an error is generated. Depending on how the error is configured, users can dismiss the error and try the process again, or not. Each ‘step’ of a process can be a number, a jQuery promise, or a function: * '''function''': If the step is a function, the process will execute it. Optionally, a function context can be specified as well. The process will stop if the function returns a Boolean ‘false’. * '''promise''': If the step is a  jQuery promise, the process will use the promise to either continue to the next step when the promise is resolved or to stop when the promise is rejected. * '''number''': If the step is a number, the process will wait for the specified number of milliseconds before proceeding. A ‘step’ can be added to the beginning of a process with the '''first()''' method, or to the end of it with the '''next()''' method. The process is started with the '''execute()''' method, which returns a promise that is either resolved when all steps have completed or rejected with an error message if any of the steps return a Boolean ‘false’ or a promise is rejected. If a process is stopped, its remaining steps will not be performed. The error messages used by the process dialog are configured with a required string argument (or jQuery selection) that is used as the error message as well as optional settings ('''recoverable''' or '''warning''') that influence the appearance and functionality of the error interface. The basic error message contains a formatted error message as well as two buttons: ‘Dismiss’ and ‘Try again’ (i.e., the error is recoverable by default). If recoverable is set to ‘false’, the ‘Try again’ button will not be rendered and the widget that initiated the failed process will be disabled. Errors can also be configured as warnings. If '''warning''' is set to ‘true’, the error interface will include a ‘Dismiss’ and a ‘Continue’ button, which will try the process again. A warning might be used before a destructive action, such as ‘Delete all files’ to confirm that this is the user’s intent. It is the responsibility of the developer to ensure that the warning is not triggered a second time if the user chooses to continue. Note that the appearance of the error message can be customized by using a jQuery selection instead of a string for the value of the required message argument. A jQuery selection will allow you to add links and/or spans for styling select parts of the error message. The error title is not configurable. The following is an example of a process dialog that has been configured to display a recoverable error messages (for the ‘Save’ process) and a non-recoverable error message (for the ‘Delete’ process). The example also uses a time delay to demonstrate how the window visually represents a long-running process with a header animation. [[File:WindowsProcessDialogProcessesAndErrors.png| Example: Processes and errors.]] <syntaxhighlight lang="javascript"> // Example: a process dialog with customized error interfaces. function BrokenDialog( config ) { BrokenDialog.super.call( this, config ); this.broken = false; } OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog ); // Specify static actions and title BrokenDialog.static.title = 'Broken dialog'; BrokenDialog.static.actions = [ { action: 'save', label: 'Save', flags: [ 'primary', 'constructive' ] }, { action: 'delete', label: 'Delete', flags: 'destructive' }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; // Get the height. BrokenDialog.prototype.getBodyHeight = function () { return 250; }; // Add content to the dialog body and setup event handlers. BrokenDialog.prototype.initialize = function () { BrokenDialog.super.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { $: this.$, padded: true } ); this.fieldset = new OO.ui.FieldsetLayout( { $: this.$, label: 'Dialog with error handling', icon: 'alert' } ); this.description = new OO.ui.LabelWidget( { $: this.$, label: 'Deleting will fail and will not be recoverable. ' + 'Saving will fail the first time, but succeed the second time.' } ); this.fieldset.addItems( [ this.description ] ); this.content.$element.append( this.fieldset.$element ); this.$body.append( this.content.$element ); }; // Add a 'broken' function to getSetupProcess() for purposes of this example. BrokenDialog.prototype.getSetupProcess = function ( data ) { return BrokenDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { this.broken = true; }, this ); }; BrokenDialog.prototype.getActionProcess = function ( action ) { return BrokenDialog.super.prototype.getActionProcess.call( this, action ) .next( function () { return 1000; }, this ) .next( function () { var closing; if ( action === 'save' ) { if ( this.broken ) { this.broken = false; return new OO.ui.Error( 'Server did not respond' ); } } else if ( action === 'delete' ) { return new OO.ui.Error( 'Permission denied', { recoverable: false } ); } closing = this.close( { action: action } ); if ( action === 'save' ) { // Return a promise to remain pending while closing return closing; } return BrokenDialog.super.prototype.getActionProcess.call( this, action ); }, this ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Make the window. var brokenDialog = new BrokenDialog({ size: 'medium'}); // Add windows to the window manager using the window manager’s addWindows() method. windowManager.addWindows( [ brokenDialog ] ); windowManager.openWindow( brokenDialog ); </syntaxhighlight> For more information, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Process the code-generated documentation for processes] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Error errors.] iuh9q3ad9ba0lfj3nhkvk9ogq7d2vt8 98 97 2015-01-16T13:32:43Z Admin 1 1 revision imported wikitext text/x-wiki Process dialog windows encapsulate a process and all of the code necessary to complete it. If the process terminates with an error, a customizable error interface alerts users to the trouble, permitting the user to dismiss the error and try again when relevant. The '''ProcessDialog''' class is always extended and customized with the methods and static properties required for each process. The process dialog box consists of a header that visually represents the ‘working’ state of long processes with an animation. The header contains the dialog title as well as two '''ActionWidgets''':  a ‘safe’ action on the left (e.g., ‘Cancel’) and a ‘primary’ action on the right (e.g., ‘Done’). These actions are called ‘special’ actions. Any additional actions are called ‘other’ actions and are displayed in the dialog footer. Note that which actions are ‘special’ and which ‘other’ can be changed dynamically and/or accessed with process dialog methods: '''getSpecial()''' or '''getOthers()'''. The following example illustrates a process dialog window with two '''ActionWidgets''' (‘Cancel’ and ‘Done’) displayed in its header. The dialog body contains a layout and message. Note that the window is not populated with this content when it is instantiated. Instead, its contents are added just before the window is opened for the first time, when the window manager calls the window's '''initialize()''' method. For an example of a window that is populated with contextual content passed at the time of opening, scroll down to the next example. [[File:WindowsProcessDialog1.png| An example of a ProcessDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Creating and opening a process dialog window. // Subclass ProcessDialog. function ProcessDialog( config ) { ProcessDialog.super.call( this, config ); } OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); // Specify a static title and actions. ProcessDialog.static.title = 'Process dialog'; ProcessDialog.static.actions = [ { action: 'save', label: 'Done', flags: 'primary' }, { label: 'Cancel', flags: 'safe' } ]; // Use the initialize() method to add content to the dialog's $body, // to initialize widgets, and to set up event handlers. ProcessDialog.prototype.initialize = function () { ProcessDialog.super.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content.$element.append( '<p>This is a process dialog window. The header contains the title and two buttons: \'Cancel\' (a safe action) on the left and \'Done\' (a primary action) on the right. </p>' ); this.$body.append( this.content.$element ); }; // Use the getActionProcess() method to specify a process to handle the // actions (for the 'save' action, in this example). ProcessDialog.prototype.getActionProcess = function ( action ) { var dialog = this; if ( action ) { return new OO.ui.Process( function () { dialog.close( { action: action } ); } ); } // Fallback to parent handler. return ProcessDialog.super.prototype.getActionProcess.call( this, action ); }; // Get dialog height. ProcessDialog.prototype.getBodyHeight = function () { return this.content.$element.outerHeight( true ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new dialog window. var processDialog = new ProcessDialog({ size: 'small' }); // Add windows to window manager using the addWindows() method. windowManager.addWindows( [ processDialog ] ); // Open the window. windowManager.openWindow( processDialog ); </syntaxhighlight> Both ‘safe’ and ‘primary’ actions are designated with flags that affect the action’s prominence in the dialog window: * '''primary''' - The primary action (e.g., ‘save’ or ‘done’) moves the user forward in whatever process they are in. The primary action is the most important widget in the user interface, and its positioning--in the upper right corner of the dialog window-- reflects this. * '''safe''' - The safe action (e.g., ‘Cancel’) will make no changes. ‘Safe’ actions are usually configured without an action. Actions widgets that have no configured action will close the window without making changes. The ‘primary’ and ‘safe’ actions (as well as any other actions specified) comprise an '''[[OOjs UI/Documentation/Windows/Process Dialogs#Action sets|ActionSet]]'''. An action set can consist of multiple action widgets configured with the same action and/or the same flags. If multiple ‘safe’ and ‘primary’ actions are specified, the process dialog renders the first 'safe' and 'primary' action in its header. If an action is changed--to use a new flag, for example--the user interface is updated accordingly. To defer updating the interface until after all actions have been changed, use the '''forEach()''' method to iterate over the actions and update the user interface at the end of the iteration. The next example illustrates how the '''getSetupProcess()''' method is used to configure a window with contextual data that is passed at the time of opening. [[File:WindowsProcessDialog2.png| An example of a ProcessDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Using getSetupProcess() to configure a window with data passed // at the time the window is opened. // Make a subclass of ProcessDialog function MyDialog( config ) { MyDialog.super.call( this, config ); } OO.inheritClass( MyDialog, OO.ui.ProcessDialog ); // Specify the static configurations: title and action set MyDialog.static.actions = [ { flags: 'primary', label: 'Continue', action: 'open' }, { flags: 'safe', label: 'Cancel' } ]; // Customize the initialize() function to add content and layouts: MyDialog.prototype.initialize = function () { MyDialog.super.prototype.initialize.call( this ); this.panel = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.content = new OO.ui.FieldsetLayout( { $: this.$ } ); this.urlInput = new OO.ui.TextInputWidget( { $: this.$ } ); this.field = new OO.ui.FieldLayout( this.urlInput, { $: this.$, label: 'Click continue to open the link in a new window', align: 'top' } ); this.content.addItems([ this.field ]); this.panel.$element.append( this.content.$element ); this.$body.append( this.panel.$element ); this.urlInput.connect( this, { 'change': 'onUrlInputChange' } ); }; // Specify any additional functionality required by the window (disable opening an empty URL, in this case) MyDialog.prototype.onUrlInputChange = function ( value ) { this.actions.setAbilities( { open: !!value.length } ); }; // Specify the dialog height (or don't to use the automatically generated height). MyDialog.prototype.getBodyHeight = function () { return this.panel.$element.outerHeight( true ); }; // Use getSetupProcess() to set up the window with data passed to it at the time // of opening (e.g., url: 'http://www.mediawiki.org', in this example). MyDialog.prototype.getSetupProcess = function ( data ) { data = data || {}; return MyDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { // Set up contents based on data this.urlInput.setValue( data.url ); }, this ); }; // Specify processes to handle the actions. MyDialog.prototype.getActionProcess = function ( action ) { if ( action === 'open' ) { // Create a new process to handle the action return new OO.ui.Process( function () { window.open( this.urlInput.getValue()); }, this ); } // Fallback to parent handler return MyDialog.super.prototype.getActionProcess.call( this, action ); }; // Use the getTeardownProcess() method to perform actions whenever the dialog is closed. // This method provides access to data passed into the window's close() method // or the window manager's closeWindow() method. MyDialog.prototype.getTeardownProcess = function ( data ) { return MyDialog.super.prototype.getTeardownProcess.call( this, data ) .first( function () { // Perform any cleanup as needed }, this ); }; // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new process dialog window. var myDialog = new MyDialog(); // Add the window to window manager using the addWindows() method. windowManager.addWindows( [ myDialog ] ); // Open the window! windowManager.openWindow( myDialog, { url: 'http://www.mediawiki.org' } ); </syntaxhighlight> For more information about process dialogs, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ProcessDialog the code-level documentation.] == Action sets == '''ActionSets''' manage the behavior of the actions that comprise them, allowing developers to control which actions are available for specific contexts (modes) and circumstances (abilities): * '''modes:''' When an action widget is configured with modes (e.g., ‘edit’ or ‘preview’), the action set can make the action available or not based on those modes (set with the '''setModes()''' method). Each action will only be available if it is configured for the current mode. (See below example.) * '''abilities''': When an action widget is configured with an action, the action set can make that action available or not based on abilities (set with the '''setAbilities()''' method). If a ‘save’ action is used to save content, for example, abilities can be used to disable the action until the content is determined to be valid. If multiple action widgets execute the ‘save’ action, all will be disabled until the criteria are met. The following example illustrates an action set that contains four action widgets: a primary action (‘continue’), two safe actions (‘cancel’ and ‘back’), and a ‘help’ action. Several of the actions have also been configured with modes: ‘edit’ or ‘help.’ <syntaxhighlight lang="javascript" enclose="div"> // Example: an action set that contains four action widgets. ProcessDialog.static.actions = [ { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, { action: 'help', modes: 'edit', label: 'Help' }, { modes: 'edit', label: 'Cancel', flags: 'safe' }, { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } ]; </syntaxhighlight> The process dialog in the next example uses the above action set to customize available actions based on the modes. [[File:WindowsProcessDialogActionSet.png| Example: Using modes and action sets.]] [[File:WindowsProcessDialogActionSet2.png| Example: Using modes and action sets.]] <syntaxhighlight lang="javascript" enclose="div"> // Example: A process dialog that uses an action set with modes. // Subclass ProcessDialog. function ProcessDialog( config ) { ProcessDialog.super.call( this, config ); } OO.inheritClass( ProcessDialog, OO.ui.ProcessDialog ); // Specify a title and an action set that uses modes ('edit' and 'help' mode, in this example). ProcessDialog.static.title = 'Process dialog'; ProcessDialog.static.actions = [ { action: 'continue', modes: 'edit', label: 'Continue', flags: [ 'primary', 'constructive' ] }, { action: 'help', modes: 'edit', label: 'Help' }, { modes: 'edit', label: 'Cancel', flags: 'safe' }, { action: 'back', modes: 'help', label: 'Back', flags: 'safe' } ]; // Customize the initialize() method to add content and set up event handlers. // This example uses a stack layout with two panels: one displayed for // edit mode and one for help mode. ProcessDialog.prototype.initialize = function () { ProcessDialog.super.prototype.initialize.apply( this, arguments ); this.panel1 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.panel1.$element.append( '<p>This dialog uses an action set configured with modes. This is edit mode. Click \'help\' to see help mode. </p>' ); this.panel2 = new OO.ui.PanelLayout( { $: this.$, padded: true, expanded: false } ); this.panel2.$element.append( '<p>This is help mode. Only the \'back\' button is configured to be visible here. Click \'back\' to return to \'edit\' mode</p>' ); this.stackLayout= new OO.ui.StackLayout( { items: [ this.panel1, this.panel2 ] }); this.$body.append( this.stackLayout.$element ); }; // Set up the initial mode of the window ('edit', in this example.) ProcessDialog.prototype.getSetupProcess = function ( data ) { return ProcessDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { this.actions.setMode('edit'); }, this ); }; // Use the getActionProcess() method to set the modes and displayed item. ProcessDialog.prototype.getActionProcess = function ( action ) { if ( action === 'help' ) { // Set the mode to help. this.actions.setMode( 'help' ); // Show the help panel. this.stackLayout.setItem( this.panel2 ); } else if ( action === 'back' ) { // Set the mode to edit. this.actions.setMode( 'edit' ); // Show the edit panel. this.stackLayout.setItem( this.panel1 ); } else if ( action === 'continue' ) { var dialog = this; return new OO.ui.Process( function () { // do something about the edit dialog.close(); } ); } return ProcessDialog.super.prototype.getActionProcess.call( this, action ); }; // Get dialog height. ProcessDialog.prototype.getBodyHeight = function () { return this.panel1.$element.outerHeight( true ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Create a new dialog window. var processDialog = new ProcessDialog({ size: 'medium'}); // Add windows to window manager using the addWindows() method. windowManager.addWindows( [ processDialog ] ); // Open the window. windowManager.openWindow( processDialog ); </syntaxhighlight> For more information about action sets, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.ActionSet the code-level documentation.] == Processes and errors == Process dialogs execute a process, which is a list of ‘steps’ that are called in sequence. If the process fails, an error is generated. Depending on how the error is configured, users can dismiss the error and try the process again, or not. Each ‘step’ of a process can be a number, a jQuery promise, or a function: * '''function''': If the step is a function, the process will execute it. Optionally, a function context can be specified as well. The process will stop if the function returns a Boolean ‘false’. * '''promise''': If the step is a  jQuery promise, the process will use the promise to either continue to the next step when the promise is resolved or to stop when the promise is rejected. * '''number''': If the step is a number, the process will wait for the specified number of milliseconds before proceeding. A ‘step’ can be added to the beginning of a process with the '''first()''' method, or to the end of it with the '''next()''' method. The process is started with the '''execute()''' method, which returns a promise that is either resolved when all steps have completed or rejected with an error message if any of the steps return a Boolean ‘false’ or a promise is rejected. If a process is stopped, its remaining steps will not be performed. The error messages used by the process dialog are configured with a required string argument (or jQuery selection) that is used as the error message as well as optional settings ('''recoverable''' or '''warning''') that influence the appearance and functionality of the error interface. The basic error message contains a formatted error message as well as two buttons: ‘Dismiss’ and ‘Try again’ (i.e., the error is recoverable by default). If recoverable is set to ‘false’, the ‘Try again’ button will not be rendered and the widget that initiated the failed process will be disabled. Errors can also be configured as warnings. If '''warning''' is set to ‘true’, the error interface will include a ‘Dismiss’ and a ‘Continue’ button, which will try the process again. A warning might be used before a destructive action, such as ‘Delete all files’ to confirm that this is the user’s intent. It is the responsibility of the developer to ensure that the warning is not triggered a second time if the user chooses to continue. Note that the appearance of the error message can be customized by using a jQuery selection instead of a string for the value of the required message argument. A jQuery selection will allow you to add links and/or spans for styling select parts of the error message. The error title is not configurable. The following is an example of a process dialog that has been configured to display a recoverable error messages (for the ‘Save’ process) and a non-recoverable error message (for the ‘Delete’ process). The example also uses a time delay to demonstrate how the window visually represents a long-running process with a header animation. [[File:WindowsProcessDialogProcessesAndErrors.png| Example: Processes and errors.]] <syntaxhighlight lang="javascript"> // Example: a process dialog with customized error interfaces. function BrokenDialog( config ) { BrokenDialog.super.call( this, config ); this.broken = false; } OO.inheritClass( BrokenDialog, OO.ui.ProcessDialog ); // Specify static actions and title BrokenDialog.static.title = 'Broken dialog'; BrokenDialog.static.actions = [ { action: 'save', label: 'Save', flags: [ 'primary', 'constructive' ] }, { action: 'delete', label: 'Delete', flags: 'destructive' }, { action: 'cancel', label: 'Cancel', flags: 'safe' } ]; // Get the height. BrokenDialog.prototype.getBodyHeight = function () { return 250; }; // Add content to the dialog body and setup event handlers. BrokenDialog.prototype.initialize = function () { BrokenDialog.super.prototype.initialize.apply( this, arguments ); this.content = new OO.ui.PanelLayout( { $: this.$, padded: true } ); this.fieldset = new OO.ui.FieldsetLayout( { $: this.$, label: 'Dialog with error handling', icon: 'alert' } ); this.description = new OO.ui.LabelWidget( { $: this.$, label: 'Deleting will fail and will not be recoverable. ' + 'Saving will fail the first time, but succeed the second time.' } ); this.fieldset.addItems( [ this.description ] ); this.content.$element.append( this.fieldset.$element ); this.$body.append( this.content.$element ); }; // Add a 'broken' function to getSetupProcess() for purposes of this example. BrokenDialog.prototype.getSetupProcess = function ( data ) { return BrokenDialog.super.prototype.getSetupProcess.call( this, data ) .next( function () { this.broken = true; }, this ); }; BrokenDialog.prototype.getActionProcess = function ( action ) { return BrokenDialog.super.prototype.getActionProcess.call( this, action ) .next( function () { return 1000; }, this ) .next( function () { var closing; if ( action === 'save' ) { if ( this.broken ) { this.broken = false; return new OO.ui.Error( 'Server did not respond' ); } } else if ( action === 'delete' ) { return new OO.ui.Error( 'Permission denied', { recoverable: false } ); } closing = this.close( { action: action } ); if ( action === 'save' ) { // Return a promise to remain pending while closing return closing; } return BrokenDialog.super.prototype.getActionProcess.call( this, action ); }, this ); }; // Create and append the window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Make the window. var brokenDialog = new BrokenDialog({ size: 'medium'}); // Add windows to the window manager using the window manager’s addWindows() method. windowManager.addWindows( [ brokenDialog ] ); windowManager.openWindow( brokenDialog ); </syntaxhighlight> For more information, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Process the code-generated documentation for processes] and [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.Error errors.] iuh9q3ad9ba0lfj3nhkvk9ogq7d2vt8 OOjs UI/Windows/Message Dialogs 0 52 99 2015-01-15T00:12:42Z Trevor Parscal (WMF) 0 Trevor Parscal (WMF) moved page [[OOjs UI/Documentation/Windows/Message Dialogs]] to [[OOjs UI/Windows/Message Dialogs]] wikitext text/x-wiki Unlike the other types of dialogs, message dialogs, which generally contain either a confirmation or alert notification, behave in such a generic way that they can be instantiated directly. By default, the rendered dialog box consists of * a header with the dialog title, * a message, * a footer that contains any action widgets. In the case of a confirmation message, the '''title''' describes what the selected action will do. In the case of an alert, the title describes what event occurred. A confirmation '''message''' provides more details about the consequences of the selected action; an alert message, more information about why the event occurred. The basic '''MessageDialog''' class specifies two actions: ‘accept’, the primary action (e.g., ‘ok’) and ‘reject,’ the safe action (e.g., ‘cancel’). Both will close the window, passing along the selected action. [[File:WindowsMessageDialog1.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Creating and opening a message dialog window. var messageDialog = new OO.ui.MessageDialog(); // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager. windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager's openWindow() method. windowManager.openWindow( messageDialog, { title: 'Basic message dialog', message: 'With a \'title\' and \'message\' ' } ); </syntaxhighlight> When the window is opened with the window manager’s '''openWindow(),''' a new action set can also be passed to the window. The following example illustrates a message dialog with a single action labeled ‘Dismiss.’ The action itself is ‘accept’, defined by the class. [[File:WindowsMessageDialog2.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Customize the displayed actions at the time the window is opened. var messageDialog = new OO.ui.MessageDialog(); // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager. windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager's openWindow() method. windowManager.openWindow( messageDialog, { title: 'Storage limit reached', message: 'You are out of disk space', actions: [ { action: 'accept', label: 'Dismiss', flags: 'primary' } ] }); </syntaxhighlight> The message dialog will automatically display all actions in a single row at the bottom of the dialog box, unless the labels are too long to fit without overflow, in which case the actions will be displayed on separate rows: [[File:WindowsMessageDialog3.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript"> // An example of a message dialog with three actions, displayed as rows because // the labels do not fit within the window width. var messageDialog = new OO.ui.MessageDialog(); var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog. windowManager.openWindow( messageDialog, { title: 'Hello', message: 'How are you?', actions: [ { label: 'Good', action: 'good' }, { label: 'Bad', action: 'bad' }, { label: 'Nevermind' } ], } ).then( function ( opening ) { opening.then( function ( opened ) { opened.then( function ( data ) { if ( data && data.action ) { console.log( 'Feeling ' + data.action ); } else { console.log( 'Nevermind' ); } } ); } ); } ); </syntaxhighlight> For long messages, use the '''verbose''' option to left-align and adjust the message styling: [[File:WindowsMessageDialog4.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Use the verbose option to communicate a long message. var messageDialog = new OO.ui.MessageDialog(); // Create and append window manager var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager’s openWindow() method. windowManager.openWindow( messageDialog, { title: 'Storage limit reached', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.', verbose: true, actions: [ { action: 'accept', label: 'Dismiss', flags: 'primary' } ] }); </syntaxhighlight> For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.MessageDialog the code-level documentation.] ocajtnkoufudqcgujy8sycv7yc9n8oh 100 99 2015-01-16T13:32:45Z Admin 1 1 revision imported wikitext text/x-wiki Unlike the other types of dialogs, message dialogs, which generally contain either a confirmation or alert notification, behave in such a generic way that they can be instantiated directly. By default, the rendered dialog box consists of * a header with the dialog title, * a message, * a footer that contains any action widgets. In the case of a confirmation message, the '''title''' describes what the selected action will do. In the case of an alert, the title describes what event occurred. A confirmation '''message''' provides more details about the consequences of the selected action; an alert message, more information about why the event occurred. The basic '''MessageDialog''' class specifies two actions: ‘accept’, the primary action (e.g., ‘ok’) and ‘reject,’ the safe action (e.g., ‘cancel’). Both will close the window, passing along the selected action. [[File:WindowsMessageDialog1.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Creating and opening a message dialog window. var messageDialog = new OO.ui.MessageDialog(); // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager. windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager's openWindow() method. windowManager.openWindow( messageDialog, { title: 'Basic message dialog', message: 'With a \'title\' and \'message\' ' } ); </syntaxhighlight> When the window is opened with the window manager’s '''openWindow(),''' a new action set can also be passed to the window. The following example illustrates a message dialog with a single action labeled ‘Dismiss.’ The action itself is ‘accept’, defined by the class. [[File:WindowsMessageDialog2.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Example: Customize the displayed actions at the time the window is opened. var messageDialog = new OO.ui.MessageDialog(); // Create and append a window manager. var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager. windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager's openWindow() method. windowManager.openWindow( messageDialog, { title: 'Storage limit reached', message: 'You are out of disk space', actions: [ { action: 'accept', label: 'Dismiss', flags: 'primary' } ] }); </syntaxhighlight> The message dialog will automatically display all actions in a single row at the bottom of the dialog box, unless the labels are too long to fit without overflow, in which case the actions will be displayed on separate rows: [[File:WindowsMessageDialog3.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript"> // An example of a message dialog with three actions, displayed as rows because // the labels do not fit within the window width. var messageDialog = new OO.ui.MessageDialog(); var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog. windowManager.openWindow( messageDialog, { title: 'Hello', message: 'How are you?', actions: [ { label: 'Good', action: 'good' }, { label: 'Bad', action: 'bad' }, { label: 'Nevermind' } ], } ).then( function ( opening ) { opening.then( function ( opened ) { opened.then( function ( data ) { if ( data && data.action ) { console.log( 'Feeling ' + data.action ); } else { console.log( 'Nevermind' ); } } ); } ); } ); </syntaxhighlight> For long messages, use the '''verbose''' option to left-align and adjust the message styling: [[File:WindowsMessageDialog4.png| An example of a MessageDialog]] <syntaxhighlight lang="javascript" enclose="div"> // Use the verbose option to communicate a long message. var messageDialog = new OO.ui.MessageDialog(); // Create and append window manager var windowManager = new OO.ui.WindowManager(); $( 'body' ).append( windowManager.$element ); // Add the dialog to the window manager windowManager.addWindows( [ messageDialog ] ); // Configure the message dialog when it is opened with the window manager’s openWindow() method. windowManager.openWindow( messageDialog, { title: 'Storage limit reached', message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis laoreet elit. Nam eu velit ullamcorper, volutpat elit sed, viverra massa. Aenean congue aliquam lorem, et laoreet risus condimentum vel. Praesent nec imperdiet mauris. Nunc eros magna, iaculis sit amet ante id, dapibus tristique lorem. Praesent in feugiat lorem, sit amet porttitor eros. Donec sapien turpis, pretium eget ligula id, scelerisque tincidunt diam. Pellentesque a venenatis tortor, at luctus nisl. Quisque vel urna a enim mattis rutrum. Morbi eget consequat nisl. Nam tristique molestie diam ac consequat. Nam varius adipiscing mattis. Praesent sodales volutpat nulla lobortis iaculis. Quisque vel odio eget diam posuere imperdiet. Fusce et iaculis odio. Donec in nibh ut dui accumsan vehicula quis et massa.', verbose: true, actions: [ { action: 'accept', label: 'Dismiss', flags: 'primary' } ] }); </syntaxhighlight> For a full list of supported methods and configuration options, please see [https://doc.wikimedia.org/oojs-ui/master/#!/api/OO.ui.MessageDialog the code-level documentation.] ocajtnkoufudqcgujy8sycv7yc9n8oh MediaWiki:Sidebar 8 53 117 2015-01-29T21:42:27Z Admin 1 Add OOUI stuff wikitext text/x-wiki * navigation ** OOjs UI/Documentation/About the library|About the Library ** OOjs UI/Documentation/Creating interfaces programmatically|Creating interfaces programmatically ** OOjs UI/Documentation/OOjs primer|OOjs Primer ** OOjs UI/Documentation/Elements|Elements *** OOjs UI/Documentation/Elements/Groups|GroupElements ** OOjs UI/Documentation/Widgets|Widgets *** OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels *** OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches *** OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options *** OOjs UI/Documentation/Widgets/Inputs|Inputs *** OOjs UI/Documentation/Widgets/Popups|Popups *** OOjs UI/Documentation/Widgets/Progress bars|Progress bars ** OOjs UI/Documentation/Layouts|Layouts *** OOjs UI/Documentation/Layouts/Fields and Fieldsets|Fields and Fieldsets *** OOjs UI/Documentation/Layouts/Forms|Forms *** OOjs UI/Documentation/Layouts/Grids|Grids *** OOjs UI/Documentation/Layouts/Stacks and Panels|Stacks and Panels *** OOjs UI/Documentation/Layouts/Booklets and Pages|Booklets and Pages ** OOjs UI/Documentation/Windows|Windows *** OOjs UI/Documentation/Windows/Dialogs|Dialogs *** OOjs UI/Documentation/Windows/Process Dialogs|Process Dialogs *** OOjs UI/Documentation/Windows/Message Dialogs|Message Dialogs ** OOjs UI/PHP Examples|PHP examples * SEARCH * TOOLBOX * LANGUAGES 7iirlqrgt1x8v0swkw1290suzjt1hxk 118 117 2015-01-29T21:43:42Z Admin 1 wikitext text/x-wiki * navigation ** OOjs UI ** OOjs UI/Documentation/Widgets|Widgets *** OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels *** OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches *** OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options *** OOjs UI/Documentation/Widgets/Inputs|Inputs *** OOjs UI/Documentation/Widgets/Popups|Popups *** OOjs UI/Documentation/Widgets/Progress bars|Progress bars * SEARCH * TOOLBOX * LANGUAGES 3jc7x2usmrs53aoz5enyp10niwlitgg 164 118 2015-02-25T15:49:02Z Admin 1 Update sidebar wikitext text/x-wiki * OOjs UI/Documentation/Widgets|Widgets| Widgets ** OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels ** OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches ** OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options ** OOjs UI/Documentation/Widgets/Inputs|Inputs ** OOjs UI/Documentation/Widgets/Popups|Popups ** OOjs UI/Documentation/Widgets/Progress bars|Progress bars * Colors|Colors * SEARCH * TOOLBOX * LANGUAGES 29imvea3k0jdic6w8p169gzg84qv2sg 165 164 2015-02-25T15:49:30Z Admin 1 wikitext text/x-wiki * navigation ** OOjs UI/Documentation/Widgets/Icons, Indicators, and Labels|Icons, Indicators, and Labels ** OOjs UI/Documentation/Widgets/Buttons and Switches|Buttons and Switches ** OOjs UI/Documentation/Widgets/Selects and Options|Selects and Options ** OOjs UI/Documentation/Widgets/Inputs|Inputs ** OOjs UI/Documentation/Widgets/Popups|Popups ** OOjs UI/Documentation/Widgets/Progress bars|Progress bars ** Colors|Colors * SEARCH * TOOLBOX * LANGUAGES mlvvz4x6l127fz70e9b7wvidrw3msud Template:Icon 10 54 127 2015-01-29T22:54:48Z Admin 1 Create icon template wikitext text/x-wiki <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-{{{1}}} oo-ui-iconElement oo-ui-iconWidget"></span> ek87w8ly1h3qjfr21ttkng23zsbhwa4 128 127 2015-01-29T22:56:52Z Admin 1 wikitext text/x-wiki <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-{{{1}}} oo-ui-iconElement oo-ui-iconWidget" title="{{{1}}}"></span> {{{1}}} jbiwwrlfc0y2kisrme70iiqt15d6mmj Template:Indicator 10 55 130 2015-01-29T22:58:38Z Admin 1 Created page with "<span class="oo-ui-indicatorElement-indicator oo-ui-indicator-{{{1}}}" title="{{{1}}}"></span> {{{1}}}" wikitext text/x-wiki <span class="oo-ui-indicatorElement-indicator oo-ui-indicator-{{{1}}}" title="{{{1}}}"></span> {{{1}}} kr11y6vm531btkgswbbaa3mpqrdowrx 132 130 2015-01-29T23:00:47Z Admin 1 wikitext text/x-wiki <span class="oo-ui-indicatorElement-indicator oo-ui-iconElement oo-ui-iconWidget oo-ui-indicator-{{{1}}}" title="{{{1}}}"></span> {{{1}}} 9szz7iamqpntryn016ngvipcz8a9gwt MediaWiki:Common.css 8 56 134 2015-02-20T15:26:09Z Admin 1 Copy over css text/css /* CSS placed here will be applied to all skins */ @media screen and (min-width: 600px) { .lsg-described-demo { display: flex; justify-content: space-between; width: 100%; } .lsg-demo { order: 2; flex: 1; } .lsg-description { order: 1; flex: 1.5; } } 5rmjddw3kkvi7shrruon2hcqlr2a4kx 142 134 2015-02-24T16:34:51Z Admin 1 Add colour CSS css text/css /* CSS placed here will be applied to all skins */ @media screen and (min-width: 600px) { .lsg-described-demo { display: flex; justify-content: space-between; width: 100%; } .lsg-demo { order: 2; flex: 1; } .lsg-description { order: 1; flex: 1.5; } } /* colors */ .lsg-color { display: inline-block; width: 200px; height: 150px; position: relative; margin-bottom: 2em; } .lsg-color-hex { color: white; position: absolute; bottom: 0.5em; text-align: center; width: 100%; font-family: monospace; } .lsg-color-name { position: absolute; bottom: -1.5em; background-color: #F7F7F7; width: 100%; text-align: center; font-family: monospace; } 4nh6owscwj8jqtf0xf7kevnjfpfokkf 175 142 2015-03-03T05:20:53Z Prtksxna 3 Increase right padding on .lsg-description css text/css /* CSS placed here will be applied to all skins */ @media screen and (min-width: 600px) { .lsg-described-demo { display: flex; justify-content: space-between; width: 100%; } .lsg-demo { order: 2; flex: 1; } .lsg-description { order: 1; flex: 1.5; padding-right: 100px; } } /* colors */ .lsg-color { display: inline-block; width: 200px; height: 150px; position: relative; margin-bottom: 2em; } .lsg-color-hex { color: white; position: absolute; bottom: 0.5em; text-align: center; width: 100%; font-family: monospace; } .lsg-color-name { position: absolute; bottom: -1.5em; background-color: #F7F7F7; width: 100%; text-align: center; font-family: monospace; } 2jdoag5gua51q6j1e5qhuelrxrwdl0d Template:Described demo 10 57 135 2015-02-20T15:28:01Z Admin 1 Template for described demo wikitext text/x-wiki <div class="lsg-described-demo"> <div class="lsg-demo"> {{{demo}}} </div> <div class="lsg-description"> {{{description}}} </div> </div> 845njytt5s418fi9g92jwz8gh16uar2 Template:Color 10 58 140 2015-02-24T16:23:18Z Admin 1 Create template wikitext text/x-wiki <div class="lsg-color" style="background-color: {{{hex}}}"> <div class="lsg-color-hex">{{{hex}}}</div> <div class="lsg-color-name">@{{{name}}}</div> </div> el5wvotbwbuvqas6hw2sn9f6y7sxyh2 146 140 2015-02-25T09:40:56Z Admin 1 Dynamic colour wikitext text/x-wiki <div class="lsg-color" style="background-color: {{{hex}}}"> <div class="lsg-color-hex" style="color: {{#invoke: LSGColor|getTextColor|{{{hex}}}}}">{{{hex}}}</div> <div class="lsg-color-name">@{{{name}}}</div> </div> gefzja0gpsgmsx6pwdd6pbjludqjimf Colors 0 59 141 2015-02-24T16:24:40Z Admin 1 Create test page wikitext text/x-wiki {{color|hex=#347bff|name=blue}} {{color|hex=#0089af|name=green}} 0en94fu0eyukftg325d8o11z838jen2 143 141 2015-02-24T16:36:18Z Admin 1 Grays wikitext text/x-wiki {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} qce4wv9iqe662ffl8q5aucxmdia2u8h 150 143 2015-02-25T09:56:21Z Admin 1 Add some more colours for testing wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} 759m177pv89ywhsr33q5eg8xad08zl1 151 150 2015-02-25T09:57:50Z Admin 1 wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} == Yellows == {{color|hex=#111100|name=yellow1}} {{color|hex=#222200|name=yellow2}} {{color|hex=#333300|name=yellow3}} {{color|hex=#444400|name=yellow4}} {{color|hex=#555500|name=yellow5}} {{color|hex=#666600|name=yellow6}} {{color|hex=#777700|name=yellow7}} {{color|hex=#888800|name=yellow8}} {{color|hex=#999900|name=yellow9}} {{color|hex=#aaaa00|name=yellow10}} {{color|hex=#bbbb00|name=yellow11}} {{color|hex=#cccc00|name=yellow12}} {{color|hex=#dddd00|name=yellow13}} {{color|hex=#eeee00|name=yellow14}} {{color|hex=#ffff00|name=yellow15}} == Purples == {{color|hex=#001111|name=purple1}} {{color|hex=#002222|name=purple2}} {{color|hex=#003333|name=purple3}} {{color|hex=#004444|name=purple4}} {{color|hex=#005555|name=purple5}} {{color|hex=#006666|name=purple6}} {{color|hex=#007777|name=purple7}} {{color|hex=#008888|name=purple8}} {{color|hex=#009999|name=purple9}} {{color|hex=#00aaaa|name=purple10}} {{color|hex=#00bbbb|name=purple11}} {{color|hex=#00cccc|name=purple12}} {{color|hex=#00dddd|name=purple13}} {{color|hex=#00eeee|name=purple14}} {{color|hex=#00ffff|name=purple15}} nn7zp2tdgkvu8gselyu0p29vrxacjx4 162 151 2015-02-25T15:47:49Z Admin 1 Admin moved page [[User:Admin/colors]] to [[Colors]] wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} == Yellows == {{color|hex=#111100|name=yellow1}} {{color|hex=#222200|name=yellow2}} {{color|hex=#333300|name=yellow3}} {{color|hex=#444400|name=yellow4}} {{color|hex=#555500|name=yellow5}} {{color|hex=#666600|name=yellow6}} {{color|hex=#777700|name=yellow7}} {{color|hex=#888800|name=yellow8}} {{color|hex=#999900|name=yellow9}} {{color|hex=#aaaa00|name=yellow10}} {{color|hex=#bbbb00|name=yellow11}} {{color|hex=#cccc00|name=yellow12}} {{color|hex=#dddd00|name=yellow13}} {{color|hex=#eeee00|name=yellow14}} {{color|hex=#ffff00|name=yellow15}} == Purples == {{color|hex=#001111|name=purple1}} {{color|hex=#002222|name=purple2}} {{color|hex=#003333|name=purple3}} {{color|hex=#004444|name=purple4}} {{color|hex=#005555|name=purple5}} {{color|hex=#006666|name=purple6}} {{color|hex=#007777|name=purple7}} {{color|hex=#008888|name=purple8}} {{color|hex=#009999|name=purple9}} {{color|hex=#00aaaa|name=purple10}} {{color|hex=#00bbbb|name=purple11}} {{color|hex=#00cccc|name=purple12}} {{color|hex=#00dddd|name=purple13}} {{color|hex=#00eeee|name=purple14}} {{color|hex=#00ffff|name=purple15}} nn7zp2tdgkvu8gselyu0p29vrxacjx4 166 162 2015-02-25T16:01:33Z Admin 1 /* Purples */ Make purple more purple wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} == Yellows == {{color|hex=#111100|name=yellow1}} {{color|hex=#222200|name=yellow2}} {{color|hex=#333300|name=yellow3}} {{color|hex=#444400|name=yellow4}} {{color|hex=#555500|name=yellow5}} {{color|hex=#666600|name=yellow6}} {{color|hex=#777700|name=yellow7}} {{color|hex=#888800|name=yellow8}} {{color|hex=#999900|name=yellow9}} {{color|hex=#aaaa00|name=yellow10}} {{color|hex=#bbbb00|name=yellow11}} {{color|hex=#cccc00|name=yellow12}} {{color|hex=#dddd00|name=yellow13}} {{color|hex=#eeee00|name=yellow14}} {{color|hex=#ffff00|name=yellow15}} == Purples == {{color|hex=#00030f|name=purple1}} {{color|hex=#00071f|name=purple2}} {{color|hex=#000b2f|name=purple3}} {{color|hex=#000f3f|name=purple4}} {{color|hex=#00134f|name=purple5}} {{color|hex=#00175f|name=purple6}} {{color|hex=#001b6f|name=purple7}} {{color|hex=#001f7f|name=purple8}} {{color|hex=#00238f|name=purple9}} {{color|hex=#00279f|name=purple10}} {{color|hex=#002baf|name=purple11}} {{color|hex=#002fbf|name=purple12}} {{color|hex=#0033cf|name=purple13}} {{color|hex=#0037df|name=purple14}} {{color|hex=#0088ff|name=purple15}} 32hsxyr57vrf7b7zqjx2l7mib9ebhv9 167 166 2015-02-25T16:03:07Z Admin 1 /* Purples */ wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} == Yellows == {{color|hex=#111100|name=yellow1}} {{color|hex=#222200|name=yellow2}} {{color|hex=#333300|name=yellow3}} {{color|hex=#444400|name=yellow4}} {{color|hex=#555500|name=yellow5}} {{color|hex=#666600|name=yellow6}} {{color|hex=#777700|name=yellow7}} {{color|hex=#888800|name=yellow8}} {{color|hex=#999900|name=yellow9}} {{color|hex=#aaaa00|name=yellow10}} {{color|hex=#bbbb00|name=yellow11}} {{color|hex=#cccc00|name=yellow12}} {{color|hex=#dddd00|name=yellow13}} {{color|hex=#eeee00|name=yellow14}} {{color|hex=#ffff00|name=yellow15}} == Purples == == Purples == {{color|hex=#110003|name=purple1}} {{color|hex=#220007|name=purple2}} {{color|hex=#33000b|name=purple3}} {{color|hex=#44000f|name=purple4}} {{color|hex=#550013|name=purple5}} {{color|hex=#660017|name=purple6}} {{color|hex=#77001b|name=purple7}} {{color|hex=#88001f|name=purple8}} {{color|hex=#990023|name=purple9}} {{color|hex=#aa0027|name=purple10}} {{color|hex=#bb002b|name=purple11}} {{color|hex=#cc002f|name=purple12}} {{color|hex=#dd0033|name=purple13}} {{color|hex=#ee0037|name=purple14}} {{color|hex=#ff0088|name=purple15}} 3c6c1vtqqmtnzkn76ogb532afcdzt34 168 167 2015-02-25T16:03:58Z Admin 1 /* Purples */ wikitext text/x-wiki == Grays == {{color|name=gray1|hex=#111111}} {{color|name=gray2|hex=#222222}} {{color|name=gray3|hex=#333333}} {{color|name=gray4|hex=#444444}} {{color|name=gray5|hex=#555555}} {{color|name=gray6|hex=#666666}} {{color|name=gray7|hex=#777777}} {{color|name=gray8|hex=#888888}} {{color|name=gray9|hex=#999999}} {{color|name=gray10|hex=#aaaaaa}} {{color|name=gray11|hex=#bbbbbb}} {{color|name=gray12|hex=#cccccc}} {{color|name=gray13|hex=#dddddd}} {{color|name=gray14|hex=#eeeeee}} {{color|name=gray15|hex=#ffffff}} == Reds == {{color|hex=#110000|name=red1}} {{color|hex=#220000|name=red2}} {{color|hex=#330000|name=red3}} {{color|hex=#440000|name=red4}} {{color|hex=#550000|name=red5}} {{color|hex=#660000|name=red6}} {{color|hex=#770000|name=red7}} {{color|hex=#880000|name=red8}} {{color|hex=#990000|name=red9}} {{color|hex=#aa0000|name=red10}} {{color|hex=#bb0000|name=red11}} {{color|hex=#cc0000|name=red12}} {{color|hex=#dd0000|name=red13}} {{color|hex=#ee0000|name=red14}} {{color|hex=#ff0000|name=red15}} == Blues == {{color|hex=#000011|name=blue1}} {{color|hex=#000022|name=blue2}} {{color|hex=#000033|name=blue3}} {{color|hex=#000044|name=blue4}} {{color|hex=#000055|name=blue5}} {{color|hex=#000066|name=blue6}} {{color|hex=#000077|name=blue7}} {{color|hex=#000088|name=blue8}} {{color|hex=#000099|name=blue9}} {{color|hex=#0000aa|name=blue10}} {{color|hex=#0000bb|name=blue11}} {{color|hex=#0000cc|name=blue12}} {{color|hex=#0000dd|name=blue13}} {{color|hex=#0000ee|name=blue14}} {{color|hex=#0000ff|name=blue15}} == Greens == {{color|hex=#001100|name=green1}} {{color|hex=#002200|name=green2}} {{color|hex=#003300|name=green3}} {{color|hex=#004400|name=green4}} {{color|hex=#005500|name=green5}} {{color|hex=#006600|name=green6}} {{color|hex=#007700|name=green7}} {{color|hex=#008800|name=green8}} {{color|hex=#009900|name=green9}} {{color|hex=#00aa00|name=green10}} {{color|hex=#00bb00|name=green11}} {{color|hex=#00cc00|name=green12}} {{color|hex=#00dd00|name=green13}} {{color|hex=#00ee00|name=green14}} {{color|hex=#00ff00|name=green15}} == Yellows == {{color|hex=#111100|name=yellow1}} {{color|hex=#222200|name=yellow2}} {{color|hex=#333300|name=yellow3}} {{color|hex=#444400|name=yellow4}} {{color|hex=#555500|name=yellow5}} {{color|hex=#666600|name=yellow6}} {{color|hex=#777700|name=yellow7}} {{color|hex=#888800|name=yellow8}} {{color|hex=#999900|name=yellow9}} {{color|hex=#aaaa00|name=yellow10}} {{color|hex=#bbbb00|name=yellow11}} {{color|hex=#cccc00|name=yellow12}} {{color|hex=#dddd00|name=yellow13}} {{color|hex=#eeee00|name=yellow14}} {{color|hex=#ffff00|name=yellow15}} == Purples == {{color|hex=#110011|name=purple1}} {{color|hex=#220022|name=purple2}} {{color|hex=#330033|name=purple3}} {{color|hex=#440044|name=purple4}} {{color|hex=#550055|name=purple5}} {{color|hex=#660066|name=purple6}} {{color|hex=#770077|name=purple7}} {{color|hex=#880088|name=purple8}} {{color|hex=#990099|name=purple9}} {{color|hex=#aa00aa|name=purple10}} {{color|hex=#bb00bb|name=purple11}} {{color|hex=#cc00cc|name=purple12}} {{color|hex=#dd00dd|name=purple13}} {{color|hex=#ee00ee|name=purple14}} {{color|hex=#ff00ff|name=purple15}} 7kj36ahnq2qx3pa57akzp8uafnajhls Module:LSGColor 828 60 144 2015-02-25T09:21:54Z Admin 1 Module to calculate whether we should use a white or black background Scribunto text/plain local lsgColor = {} -- Black has a luminance of zero, so white's luminance is greater -- But we're still calculating black's luminance to show our working local whiteLuminance = getLuminance( '#FFFFFF' ) local blackLuminance = getLuminance( '#000000' ) local thresholdLuminance = (whiteLuminance - blackLuminance) + 0.5 * whiteLuminance function lsgColor.getTextColor(frame) local bgColor = frame.args[1] local luminance = getLuminance(bgColor) if luminance > thresholdLuminance then return "#000000" else return "#FFFFFF" end end function getLuminance(hexColor) if (hexColor.subs(1, 1) == '#') then hexColor = hexColor.subs(1) end -- https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors local multiples = {299, 587, 114} local totalLuminance = 0 for index=0,2 do local startIndex = (index * 2) + 1 local part = tonumber(hexColor.subs(startIndex, 2), 16) totalLuminance = totalLuminance + (part * multiples[index]) end return totalLuminance / 1000 end return lsgColor bfk9gcxammhawexhyurb1sf4pssocko 145 144 2015-02-25T09:40:02Z Admin 1 Module to calculate the correct background colour for an LSG colour palette Scribunto text/plain local p = {} function p.getTextColor(frame) return p.getColor( frame.args[1] ) end function p.getColor(bgColor) local luminance = p.getLuminance(bgColor) -- Black has a luminance of zero, so white's luminance is greater -- But we're still calculating black's luminance to show our working local whiteLuminance = p.getLuminance( '#FFFFFF' ) local blackLuminance = p.getLuminance( '#000000' ) local thresholdLuminance = (whiteLuminance - blackLuminance) + 0.5 * whiteLuminance if luminance > thresholdLuminance then return "#000000" else return "#FFFFFF" end end function p.getLuminance(hexColor) if (string.sub( hexColor, 1, 1) == '#') then hexColor = string.sub( hexColor, 2) end -- https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors local multiples = {299, 587, 114} local totalLuminance = 0 for index=0,2 do local startIndex = (index * 2) + 1 local part = string.sub( hexColor, startIndex, startIndex + 1) part = tonumber( part, 16 ) totalLuminance = totalLuminance + (part * multiples[index + 1]) end return totalLuminance / 1000 end return p n960gyotxbh7cy6zyqkthgp09ikbro3 147 145 2015-02-25T09:44:16Z Admin 1 Scribunto text/plain local p = {} function p.getTextColor(frame) status, output = pcall( p.getColor, frame.args[1] ) if status then return output else return '#FF0000' -- Indicate error without breaking everything end end function getColor(bgColor) local luminance = getLuminance(bgColor) -- Black has a luminance of zero, so white's luminance is greater -- But we're still calculating black's luminance to show our working local whiteLuminance = getLuminance( '#FFFFFF' ) local blackLuminance = getLuminance( '#000000' ) local thresholdLuminance = (whiteLuminance - blackLuminance) + 0.5 * whiteLuminance if luminance > thresholdLuminance then return "#000000" else return "#FFFFFF" end end function getLuminance(hexColor) if (string.sub( hexColor, 1, 1) == '#') then hexColor = string.sub( hexColor, 2) end -- https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors local multiples = {299, 587, 114} local totalLuminance = 0 for index=0,2 do local startIndex = (index * 2) + 1 local part = string.sub( hexColor, startIndex, startIndex + 1) part = tonumber( part, 16 ) totalLuminance = totalLuminance + (part * multiples[index + 1]) end return totalLuminance / 1000 end return p 76k0ku4k5rm0xf0uyeumag3ggi5vjrp 148 147 2015-02-25T09:49:27Z Admin 1 Undo revision 147 by [[Special:Contributions/Admin|Admin]] ([[User talk:Admin|talk]]) Scribunto text/plain local p = {} function p.getTextColor(frame) return p.getColor( frame.args[1] ) end function p.getColor(bgColor) local luminance = p.getLuminance(bgColor) -- Black has a luminance of zero, so white's luminance is greater -- But we're still calculating black's luminance to show our working local whiteLuminance = p.getLuminance( '#FFFFFF' ) local blackLuminance = p.getLuminance( '#000000' ) local thresholdLuminance = (whiteLuminance - blackLuminance) + 0.5 * whiteLuminance if luminance > thresholdLuminance then return "#000000" else return "#FFFFFF" end end function p.getLuminance(hexColor) if (string.sub( hexColor, 1, 1) == '#') then hexColor = string.sub( hexColor, 2) end -- https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors local multiples = {299, 587, 114} local totalLuminance = 0 for index=0,2 do local startIndex = (index * 2) + 1 local part = string.sub( hexColor, startIndex, startIndex + 1) part = tonumber( part, 16 ) totalLuminance = totalLuminance + (part * multiples[index + 1]) end return totalLuminance / 1000 end return p n960gyotxbh7cy6zyqkthgp09ikbro3 149 148 2015-02-25T09:51:58Z Admin 1 Fix thresholding, re-add error handling Scribunto text/plain local p = {} function p.getTextColor(frame) status, result = pcall( p.getColor, frame.args[1] ) if status then return result else return '#ff0000' end end function p.getColor(bgColor) local luminance = p.getLuminance(bgColor) -- Black has a luminance of zero, so white's luminance is greater -- But we're still calculating black's luminance to show our working local whiteLuminance = p.getLuminance( '#FFFFFF' ) local blackLuminance = p.getLuminance( '#000000' ) local thresholdLuminance = blackLuminance + 0.5 * (whiteLuminance - blackLuminance) if luminance > thresholdLuminance then return "#000000" else return "#FFFFFF" end end function p.getLuminance(hexColor) if (string.sub( hexColor, 1, 1) == '#') then hexColor = string.sub( hexColor, 2) end -- https://stackoverflow.com/questions/9733288/how-to-programmatically-calculate-the-contrast-ratio-between-two-colors local multiples = {299, 587, 114} local totalLuminance = 0 for index=0,2 do local startIndex = (index * 2) + 1 local part = string.sub( hexColor, startIndex, startIndex + 1) part = tonumber( part, 16 ) totalLuminance = totalLuminance + (part * multiples[index + 1]) end return totalLuminance / 1000 end return p 4trsb7aitpxp7d3suophofam8vkb58n User:Admin/colors 2 61 163 2015-02-25T15:47:50Z Admin 1 Admin moved page [[User:Admin/colors]] to [[Colors]] wikitext text/x-wiki #REDIRECT [[Colors]] n92mztg86zmm97d678qy5h9ukl8k72k User:Admin/test 2 62 169 2015-02-26T13:31:39Z Admin 1 Created page with "<ooui-template> {{#ooui "buttongroup"}} {{ooui "button" label="One"}} {{ooui "button" label="Two"}} {{/ooui}} </ooui-template>" wikitext text/x-wiki <ooui-template> {{#ooui "buttongroup"}} {{ooui "button" label="One"}} {{ooui "button" label="Two"}} {{/ooui}} </ooui-template> 8ubsz9wh2h82pz8nyeva50zou61uirl 171 169 2015-02-27T10:53:05Z Admin 1 Switch to block mode wikitext text/x-wiki <ooui-template> {{#ooui "buttongroup"}} {{#ooui "button"}}One{{/ooui}} {{#ooui "button"}}Two{{/ooui}} {{/ooui}} </ooui-template> 8deytculur1mzz3dpg3y98f2npitdxq Introduction 0 63 182 2015-03-25T04:57:56Z Prtksxna 3 Created page with "Note this style guide describes some elements that are not yet implemented in the OOjs UI toolkit. '''Rationale''' — Consistency is something we care about. Just as Wikiped..." wikitext text/x-wiki Note this style guide describes some elements that are not yet implemented in the OOjs UI toolkit. '''Rationale''' — Consistency is something we care about. Just as Wikipedians care about consistent infobox content across certain content, and consistent writing style, we want us to care more about consistent styling. MediaWiki projects can sometimes be complicated and intimidating to users. UI can play an important part in helping newcomers understand our interfaces. '''How to use this guide —''' '''Color''' — The MediaWiki theme uses color to convey meaning, establish mood, strengthen brand, give affordance for interaction, and provide additional feedback. The specific hues and shades have been selected with cultural relevance, differences in ability to perceive color and contrast, harmony, and aesthetics. l8wppqk400avbr2v1yg6qfa7vsdn09i Template:Main Page 10 64 184 2015-03-26T14:15:05Z Maintenance script 6 Vagrant import wikitext text/x-wiki '''Welcome to MediaWiki-Vagrant!''' * [//www.mediawiki.org/wiki/MediaWiki-Vagrant MediaWiki-Vagrant help] * [//www.mediawiki.org/wiki/Help:Contents MediaWiki help] == Help for enabled roles == :''(run <code>vagrant roles help</code> in the directory where you installed MediaWiki-Vagrant to get help about enabling roles)'' {{Special:Prefixindex/VagrantRole}} i95desbl1wpizqtoakfts6kc52kihvv