2013-10-27 38 views
0

我想從jqWidgets的列表框中使用樣例。我已將代碼直接複製到我的index.cshtml文件中。我沒有看到預期的結果,這將是樣本的樣子。它顯示的只是按鈕。JQWidgets無法在MVC中工作4

這是一個鏈接到頁面。我減少了內容,並允許任何人來看待它:https://drive.azurewebsites.net/Question

這裏是樣品的網站:http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm

我不知道如何解決這個或在哪裏看看,看看什麼是真的錯了。我正在使用Chrome並拉起檢查元素。正在檢索腳本。

這裏是我的代碼:

<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" /> 
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script> 
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script> 
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script> 

<body> 
    <div id='content'> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       var source = [ 
        "Affogato", 
        "Americano", 
        "Bicerin", 
        "Breve", 
        "Café Bombón", 
        "Café au lait", 
        "Caffé Corretto", 
        "Café Crema", 
        "Caffé Latte", 
       ]; 
       // Create a jqxListBox 
       $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' }); 
       // disable the sixth item. 
       $("#jqxlistbox").jqxListBox('disableAt', 5); 
       // bind to 'select' event. 
       $('#jqxlistbox').bind('select', function (event) { 
        var args = event.args; 
        var item = $('#jqxlistbox').jqxListBox('getItem', args.index); 
        $("#eventlog").html('Selected: ' + item.label); 
       }); 
       $("#button").jqxButton(); 
       $("#button").click(function() { 
        var item = $('#jqxlistbox').jqxListBox('getSelectedItem'); 
        if (item != null) { 
         alert(item.label); 
        } 
       }); 
      }); 
     </script> 
     <div id='jqxlistbox'> 
     </div> 
     <div style="margin-top: 10px;"> 
     <input id="button" type="button" value="Get Selected Item" /> 
     <div id="eventlog"></div> 
     </div> 
    </div> 
</body> 

回答