0

ListBox の jqWidgets のサンプルを使用しようとしています。コードを index.cshtml ファイルに直接コピーしました。サンプルがどのように見えるかという、望ましい結果が見られません。それが私に見せているのはボタンだけです。

ここにページへのリンクがあります。コンテンツを縮小し、誰でも閲覧できるようにしました: https://drive.azurewebsites.net/Question

サンプルの Web サイトは次のとおりです。 http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm

これをトラブルシューティングする方法や、実際に何が問題なのかを確認する場所がわかりません。私はChromeを使用しており、Inspect Elementを引き上げました。スクリプトを取得しています。

これが私のコードです：

<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>
4

1 に答える 1