使用jQuery在WordPress中設計樣式選擇框

試圖使用jQuery插件在WordPress項目上選擇一個選擇框。使用jQuery在WordPress中設計樣式選擇框

http://plugins.jquery.com/project/stylish-select-box/

jQuery(document).ready(function(){ 
    // select box styles 
    jQuery('#genre-dropdown').sSelect(); 
});

當我把它叫做它顯示.newListSelected（風格化的列表）的兩個副本的選擇框，而不是一個。以下是用於生成選擇框的代碼。

<?php 

$args = array(
    'taxonomy' => 'genre', 
    'id'  => 'genre-dropdown', 
); 

wp_dropdown_categories($args); 

?>

我試過沒有自定義分類法的參數，並且在完全不同的頁面上有相同的結果。

來源

2010-07-09 curtismchale

你可以張貼一些源代碼或者給我們一個鏈接的網頁？ – 2010-07-10 00:51:52

你可以嘗試驗證你的HTML標記嗎？有時無效的HTML會導致各種奇怪的行爲，最好在開始時排除。你可以在這裏驗證它：http://validator.w3.org/ – 2010-07-11 11:41:19

原始URL已經死了，我用SelectBoxIt進行了測試。以下示例創建一個顯示樣式類別下拉菜單的管理菜單。關鍵的細節是加載jQuery插件，添加捆綁的WordPress腳本作爲依賴關係，請參閱Don't dequeue WordPress jQuery。

文件wp-content/plugins/my-plugin/styled-dropdown.php：

<?php 
/* Plugin Name: Styled Dropdown */ 

add_action('admin_menu', 'add_menu_so_3216591'); 

function add_menu_so_3216591() 
{ 
    add_menu_page(
     'SI', 
     '<span style="color:#e57300;">SelectIt</span>', 
     'edit_pages', 
     'so-3216591', 
     'menu_page_so_3216591', 
     '', // icon default for empty 
     1 // create before Dashboard menu item 
    ); 
} 

function menu_page_so_3216591() 
{ 
    wp_enqueue_style( 
     'select-it', 
     'http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.7.0/jquery.selectBoxIt.css' 
    ); 
    wp_enqueue_style( 
     'jquery-ui', 
     'http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css' 
    ); 
    # Will be used as dependency bellow 
    wp_register_script(
     'select-it', 
     'http://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.7.0/jquery.selectBoxIt.min.js' 
    ); 
    # Main script and dependencies 
    wp_enqueue_script(
     'do-it', 
     plugins_url('/js/', __FILE__) . 'do-it.js', 
     array('jquery', 'jquery-ui-widget', 'select-it') // Dependencies: using bundled WordPress scripts (highly recommended) 
    ); 
    ?> 
    <div id="icon-post" class="icon32"></div> 
    <h2>Testing Select Box It</h2> 
    <p><?php wp_dropdown_categories(array('id'=>'select-it-dd')); ?></p> 
    <?php 
}

和文件wp-content/plugins/my-plugin/js/do-it.js：

jQuery(document).ready(function($) 
{ 
    $("#select-it-dd").selectBoxIt(
    { 
     theme: "jqueryui" 
    }); 
});

來源

2013-09-06 19:48:19 brasofilo

使用jQuery在WordPress中設計樣式選擇框

回答

相關問題