Beskrivelse
Use a shortcode to define a drop-down form field, and shortcodes to define blocks of content that will be displayed when a specific entry is selected.
Usage
To add a content dropdown to a post, you can either select the Content Dropdown icon from the TinyMCE editor, or enter the shortcodes manually.
[dropdown name="controlName" class="customClassName"] - both `name` and `class` are optional; `name` will default to `dropdown-content`
- the
name
is used to identify which content sections are targetted by this dropdown; if there is only one dropdown on a page, it is optional; if there are multiple dropdowns on a page, each will need a unique name class
can be a space-separated list of class names, or just a single class name-
only
[dropdown-option]
shortcodes may be inside this shortcode[dropdown-option value=»someValue»] – the
value
field is technically optional, but is required if this option is meant to make a content block visible -
must be inside a
[dropdown]
shortcode[dropdown-content name=»controlName» value=»someValue»] – if the
name
matches a dropdown name, and thevalue
matches the value of an option within that dropdown, then this content will be displayed when that specific option is selected. -
again,
name
is technically optional, but must match a[dropdown]
name (also defaults todropdown-content
) value
is required, and must match avalue
for a[dropdown-option]
- can be anywhere on the page
Example
Copy and paste the following content to see the plugin in action
[dropdown]
[dropdown-option]Select one…[/dropdown-option]
[dropdown-option value=»option1″]First option[/dropdown-option]
[dropdown-option value=»option2″]Second Option[/dropdown-option]
[/dropdown]
[dropdown-content value=»option1″]Content for the first option.[/dropdown-content]
[dropdown-content value=»option2″]Content for the second option.[/dropdown-content]
Those were all using the default values from the plugin. Let’s change it up a bit.
[dropdown]
[dropdown-option value=»option1″]The First[/dropdown-option]
[dropdown-option value=»option2″ default=true]The Second[/dropdown-option]
[dropdown-option value=»option3″]The Third[/dropdown-option]
[/dropdown]
You’ll notice below that the second option will be displayed by default for you.
[dropdown-content value=»option1″]Some different content for the second first option.[/dropdown-content]
[dropdown-content value=»option2″]Some different content for the second second option.[/dropdown-content]
[dropdown-content value=»option3″]Some different content for the second third option.[/dropdown-content]
Skjermskudd
Installasjon
The plugin is simple to install:
- Download the plugin, it will arrive as a zip file
- Unzip it
- Upload
dropdown-content.zip
directory to your WordPress Plugin directory - Go to the plugin management page and enable the plugin
FAQ
- What is actually happening?
-
There is a tiny bit of Javascript that watches these generated dropdowns for the
change
event, and simply adds the classdropdowncontent-content-selected
to the content block that has the same value as the selected option. - How do I override your CSS?
-
Only three classes are used:
dropdowncontent-dropdown
for the dropdown control itself and has no default styling,dropdowncontent-content
which has a single rule (display:none;
) for content blocks, and thedropdowncontent-content-selected
class which has a single rule (display:inherit;
) for selected content blocks. Feel free to override those styles however you like in your own stylesheets. - Can I style the dropdown box itself?
-
Absolutely! It is a normal
SELECT
box and can be modified by any CSS or Javascript you like. You can target the defaultdropdowncontent-dropdown
class, any custom class you add to the shortcode, or the field name (which defaults todropdown-content
but can be modified by the shortcode). - What kind of content can be in the content blocks?
-
Anything! By default, though, since the blocks are given
display:none;
as their default rule, things like maps or other Javascript targets that require a visible container may not work quite as expected. To account for that, there are two custom jQuery events attached to elements with thedropdowncontent-content
class and will fire in this order:dropdown-content:unselect
will fire when a dropdown option is unselected and$(this)
will refer to the previously selected content block; the previousvalue
andname
fields can be found with$(this).attr('data-dropdowncontent-value')
and$(this).attr('data-dropdowncontent-name')
dropdown-content:select
will fire when a dropdown option is selected, and$(this)
will refer to the newly selected content block; the currentvalue
andname
fields can be found with$(this).attr('data-dropdowncontent-value')
and$(this).attr('data-dropdowncontent-name')
Vurderinger
Bidragsytere og utviklere
“Dropdown Content” er programvare med åpen kildekode. Følgende personer har bidratt til denne utvidelsen.
BidragsytereOversett “Dropdown Content” til ditt språk.
Interessert i utvikling?
Bla gjennom koden, sjekk ut SVN-repositoriet, eller abonner på utviklingsloggen med RSS.
Endringslogg
v1.0.2 2016/09/23
- fixed content block custom event delegation
v1.0.1 2016/09/23
- updated documentation
- added screenshots
- added FAQ entries
- added custom jQuery events to Javascript
- now uses delegated listener in case dropdowns are hidden on page load or loaded via AJAX
- removed references to «visible» in code and documentation, replaced with «select» instead
v1.0.0 2016/09/22
- First public release