Multi Select Input Helper (jQuery ASM Select)
Version 1.0.3 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.3 Notes
Changes: Added "selected" (Xhtml) as proposed by Alex Sancho
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) ** This one comes from Alex Sancho **
Edit the asm-select javascript file (jquery.asmselect.js):
line 270
- from: $O.attr('selected', true);
- to: $O.attr('selected', true).addClass('active');
line 323
- from: $O.attr('selected', false);
- to: $O.attr('selected', false).removeClass('active');
5) Make a new input helper
5a) If you don´t want to import the package: add the following code to your new input helper
** selected added by Alex Sancho to get the option(s) into the db **
<select name="<?php echo $name; ?>" id="<?php echo $name; ?>" multiple="multiple" title="-- select one --" class="form pick <?php echo $name; ?>">
<?php
if (!empty($value))
{
foreach ($value as $key => $val)
{
$active = empty($val['active']) ? '' : ' active';
$selected = empty($val['active']) ? '' : ' selected="selected"';
?>
<option value="<?php echo $val['id']; ?>" class="option<?php echo $active; ?>"<?php echo $selected; ?>><?php echo $val['name']; ?></div>
<?php
}
}
?>
</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) ** This one comes from Alex Sancho **
Edit the asm-select javascript file (jquery.asmselect.js):
line 270
- from: $O.attr('selected', true);
- to: $O.attr('selected', true).addClass('active');
line 323
- from: $O.attr('selected', false);
- to: $O.attr('selected', false).removeClass('active');
5) Make a new input helper
5a) If you don´t want to import the package: add the following code to your new input helper
** selected added by Alex Sancho to get the option(s) into the db **
<select name="<?php echo $name; ?>" id="<?php echo $name; ?>" multiple="multiple" title="-- select one --" class="form pick <?php echo $name; ?>">
<?php
if (!empty($value))
{
foreach ($value as $key => $val)
{
$active = empty($val['active']) ? '' : ' active';
$selected = empty($val['active']) ? '' : ' selected="selected"';
?>
<option value="<?php echo $val['id']; ?>" class="option<?php echo $active; ?>"<?php echo $selected; ?>><?php echo $val['name']; ?></div>
<?php
}
}
?>
</select>
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>