1

で動的に作成するいくつかのボックス（100以上）があります

ボックスをクリックするたびに、ページを更新せずに1つのポップアップボックスにスライドする必要があります。jqueryUI（http://jqueryui.com/demos/dialog/#option-position）をダウンロードして、プロジェクトで使用しました。ボックスをクリックするたびに会社IDを渡して、データベースから詳細を取得します。ウィンドウ5をクリックすると、会社ID 5が渡され、ダイアログ内で会社の他のすべての詳細が取得されます。

jqueryコード：

<script type="text/javascript">
     // increase the default animation speed to exaggerate the effect
     $.fx.speeds._default = 1000;
     $(function () {

         $("#dialog").dialog({
             autoOpen: false,
             show: "slide",
             hide: "explode"
         });

         $("div[id *= 'window']").live('click', function (e) {

             $("#dialog").dialog("open");

             return false;
         });
     });
    </script>

Asp.netコード

<div id="dialog" title="Basic dialog">
     <div><%#Eval("comp_name")%> </div>
      <div><%#Eval("comp_city")%> </div>
 </div>
4

1 に答える 1

0 
        $.fx.speeds._default = 1000;
        $(document).ready(function () {
            $("div[id*='window']").live('click', function (e) {
                $.ajax({
                    url: 'YourUrl', type: 'Get', dataType: 'json',
                    data: { id: $(this).attr('id').replace(/window/g, '') },
                    success: function (data) {
                        $('<div></div>').appendTo('body').html('<div>' + data.comp_name + '</div><div>' + data.comp_city + '</div>').dialog({
                            modal: true, title: 'Test message', zIndex: 10000, autoOpen: true,
                            width: 460, height: 300, modal: true, resizable: false, closeOnEscape: false,
                            show: "slide", hide: "explode",
                            buttons: {
                                Ok: function () {
                                    $(this).dialog("close");
                                }
                            },
                            close: function (event, ui) {
                                $(this).remove();
                            }
                        });
                    }
                });
            });
        });

asp.net mvc 3を使用していますか？

$("div[id*='window']").live('click', function (e) {
            alert('Id : ' + $(this).attr('id') + '   ' + 'Replaced Id ' + $(this).attr('id').replace(/window/g, ''));
        });

<div id="window1">
    Click Me1 !
</div>
<br />
<div id="window2">
    Click Me2 !
</div>
<br />
<div id="Div1">
    Click Me !. I am not window id.
</div>
<br />
<div id="window3">
    Click Me3 !
</div>

ライブデモについては、次のリンクを参照してください：http: //jsfiddle.net/nanoquantumtech/865Su/

置換方法については、次のリンクを参照してください：http ://www.w3schools.com/jsref/jsref_replace.asp

于 2012-05-22T06:58:19.647 に答える