Version 1.0.2c added 2 years ago by kaiiser

HOW TO INSTALL: To install this package, copy the following code and paste it into your Pods >> Package Manager under the Import tab and follow instructions there.

{"meta":{"version":"180","build":"1263233791"},"helpers":[{"name":"asm_select","helper_type":"input","phpcode":"<select name=\"<?php echo $name; ?>\" multiple=\"multiple\" title=\"<?php echo $name; ?>\">\n<?php \nif (!empty($value))\n {\n foreach ($value as $key => $val)\n {\n $active = empty($val['active']) ? '' : ' active';\n?>\n <option value=\"<?php echo $val['id']; ?>\"><?php echo $val['name']; ?><\/div>\n<?php\n }\n }\n?>\n<\/select>"}]}

Here comes the css:

you could mount it (for e.g. in your functions.php) like this:
if ( is_pod_page() ) { add_action('jquery_styles', wp_enqueue_style( 'jquery_asm_select', $path . '/ui/asm-select.css', array(), false, 'screen' ), 17 ); }

.asmContainer { }
.asmSelect { display: inline; }
.asmOptionDisabled { color: #999; }
.asmHighlight { margin: 0px 0px 0px 1em; padding: 0; }
.asmListItem { position: relative; width: 100%; border: #ccc 1px solid; line-height: 1em; list-style-type: none; maring: 0px 0px -1px; padding-left: 0px; background: #eee; list-style-image: none; }
.asmListItem:hover { background-color: #313131; color: #fff; }
.asmList { position: relative; list-style-type: none; margin: 0.25em 0px 1em; padding-left: 0px; display: block; }
.asmListItemLabel { padding: 5px; display: block; }
.asmListItemRemove { position: relative; float: left; clear: none; margin-top: -18px; padding: 0 0 5px 150px; }
.asmListSortable .asmListItemLabel { cursor: move; }

(Written in Jan. 2010.)
This input helper will make give you a multi select box that has a height of only one line instead of the large basic multi select box. You will have to use the jQuery Plugin "ASM-Select" from Ryan Cramer http://www.ryancramer.com/journal/entries/asmselect_v104/

Current version of asm-select was 1.0.4 when the package was added.

What you have to do:
1) Download jQuery.asmselect.js (12kB) here http://code.google.com/p/jquery-asmselect/downloads/list

2) Add the script to your header. If you got a wp_head-hook you can mount it like this:

$your_path = THEME;
add_action('wp_head', wp_enqueue_script( 'jquery_asmselect', $your_path . '/js/jquery.asmselect.js', array('jquery') ), 10 );

If you haven´t already got a wp_head-hook in your theme, then just place wp_head() in your head and everything should work. (Sidenote: If your server has something like http://main-domain.com/bla/subdomain.com/html/wp-content/etc. it might be good to use bloginfo('stylesheet_directory'); or get_option('wpuri'); instead of THEME or make a str_replace for $your_path.)

3) Add the following definitions to your <script>-part of your header:

jQuery.noConflict();
/* no Conflict mode for Wordpress. Don´t use $ here. Use jQuery instead */
jQuery(document).ready(function() {
jQuery("select[multiple]").asmSelect( {
addItemTarget: 'bottom',
animate: true,
highlight: true,
sortable: true
} );
/* For Options contact Ryan Cramer or take a look at his homepage or the google-code page */

4) Make a new input helper

4a) If you don´t want to import the package: add the following code to your new input helper

<select name="<?php echo $name; ?>" multiple="multiple" title="<?php echo $name; ?>">
<?php
if (!empty($value))
{
foreach ($value as $key => $val)
{
$active = empty($val['active']) ? '' : ' active';?>
<option value="<?php echo $val['id']; ?>"><?php echo $val['name']; ?>
</div>
<?php
}
}
?>
</select>