包括ddSlick，但不起作用

嗨我試圖使圖像下拉。這就是爲什麼我想使用ddSlick（一個jQuery插件），可以實現這一點。不幸的是它不起作用。但我已經按照插件的指示。我曾嘗試以下：包括ddSlick，但不起作用

template_head.blade.php（其中包括jquery.ddslick.min.js文件）

<meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Offerte tool</title> 
     <!-- Bootstrap --> 
     {{HTML::style('css/bootstrap.min.css')}} 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     {{ HTML::script('js/bootstrap.min.js') }} 
     <!-- To use less I have to include my own css first and then the less library. Because I have read the following in less.org:Make sure you include your stylesheets before the script.) --> 
     <link rel="stylesheet/less" type="text/css" href="{{ asset('css/core.less') }}" /> 

     <script src="{{ asset('js/less-1.7.5.min.js') }}" type="text/javascript"></script> 
     <script src="{{ asset('js/bootstrap-rating-input.min.js') }}" type="text/javascript"></script> 
     <script src="{{ asset('js/jquery.ddslick.min.js') }}" type="text/javascript"></script> 
     {{HTML::script('js/application.js')}}

user.blade.php（其中有一個下拉列表）

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    @include('user._layouts.template_head') 
    </head> 
    <script> 
     $('#myDropdown').ddslick({ 
    onSelected: function(selectedData){ 
     //callback function: do something with selectedData; 
     $('#demo-htmlselect').ddslick(); 
     } 
    }); 
    </script> 

    <body> 
     <select id="demo-htmlselect"> 
     <option value="0" data-imagesrc="{{ asset('images/orange.png') }}" 
      data-description="Description with Facebook">Facebook</option> 
     <option value="1" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/twitter-icon-32.png" 
      data-description="Description with Twitter">Twitter</option> 
     <option value="2" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/linkedin-icon-32.png" 
      data-description="Description with LinkedIn">LinkedIn</option> 
     <option value="3" data-imagesrc="http://dl.dropbox.com/u/40036711/Images/foursquare-icon-32.png" 
      data-description="Description with Foursquare">Foursquare</option> 
    </select> 
    </body> 
</html>

在user.blade.php你可以看到以下內容：

<option value="0" data-imagesrc="{{ asset('images/orange.png') }}"

所以你可以看到我有一個形象，應該顯示在下拉列表中。不過，這並不因爲你可以在這裏看到：

鏈接：http://i.imgur.com/9k3PZBZ.png

圖像orange.png看起來是這樣的：

鏈接：http://i.imgur.com/kbxyS4H.png

我也測試了，如果我的web應用品牌與jquery.ddslick.min.js文件建立連接。它確實建立了聯繫。在這裏，你可以看到它的屏幕截圖：

鏈接：http://i.imgur.com/Bpu4dKK.png

有人能幫助我，好嗎？我在等你的迴應。無論如何感謝您的回答。

來源

2014-10-26 superkytoz

這只是一個瘋狂的猜測，但你可能需要將你的js代碼包裝在$(document).ready()中。這可以確保DOM中的所有元素都存在，並且插件可以正確初始化。

$(document).ready(function(){ 
    $('#demo-htmlselect').ddslick(); 
});

編輯：你也並不需要所有的#myDropdown東西

來源

2014-10-26 20:51:07 lukasgeiter

您好我已經試過您的解決方案，但遺憾的是它沒有工作:( – superkytoz 2014-10-26 21:26:34

@superkytoz確定，到底爲什麼你在'＃myDropdown'的回調函數中初始化'＃demo-htmlselect'上的ddslick？ – lukasgeiter 2014-10-26 21:28:37

說實話，我不知道，但我現在試過了：link：http://pastebin.com/Sc4aVGWE但它仍然不起作用..我使用這段代碼，因爲我已經從鏈接上的指令中讀到它：http://designwithpc.com/Plugins/ddSlick – superkytoz 2014-10-26 21:53:14

包括ddSlick，但不起作用

回答

相關問題