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

Я также протестировали, если мои WebApplication марок соединение с файлом jquery.ddslick.min.js. И это делает связь. Здесь вы можете увидеть скриншот этого:

ссылка: http://i.imgur.com/Bpu4dKK.png

Может кто-нибудь помочь мне, пожалуйста? Я жду вашего ответа. В любом случае спасибо за ваш ответ.

источник

2014-10-26 superkytoz

Это просто дикая догадка, но вам, вероятно, нужно обернуть код js в $(document).ready(). Это гарантирует, что все элементы в DOM существуют, и плагин может получить инициализацию правильно.

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

Edit:. также вам не нужны все #myDropdown вещи

источник

2014-10-26 20:51:07 lukasgeiter

Привет я пытался ваше решение, но, к сожалению, она не работает :( – superkytoz

@superkytoz нормально, почему именно вы инициализируйте ddslick на '# demo-htmlselect' в функции обратного вызова' # myDropdown'? – lukasgeiter

На самом деле, честно говоря, я не знаю, но я пробовал это сейчас: ссылка: http://pastebin.com/Sc4aVGWE но он по-прежнему не работает .. Я использую этот код, потому что я прочитал его из инструкций по ссылке: http://designwithpc.com/Plugins/ddSlick – superkytoz

ddSlick включен, но не работает

ответ

Смежные вопросы