Multi Select Input Helper (jQuery ASM Select)
Version 1.0.2b 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.
1.0.2b Notes
simply didn´t know i had to enter the package code again when posting the css.
About this Package
(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>
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>