2

このトピックについてSOに関する既存の投稿を調査しましたが、満足のいく答えはないようです。

ASP.Net MVC3 の Chrome のようなタブの動作を実現しようとしています。具体的には、タブには次の動作があります。

  1. ページ上のドラッグ可能な div としてドラッグ アウトし、スタンドアロンにする。iFrame で jQuery ダイアログを使用することを考えています。タブのように見せる方法についてのヘルプ/提案が必要です。
  2. 最小化したら、既存のタブ コンテナーにタブとして戻ります

ポイント番号2はおそらく簡単に達成できます-divを非表示にしてタブを再構築するだけですが、誰かが＃1を実行したり、開始方向を示すのを手伝ってくれたりしますか?

部分ビュー (mvc)/ユーザー コントロール (Web フォーム) に対応する各タブ。

4

2 に答える 2

1

とにかく、Telerik Kendo UIコントロールを基本的な API 機能と共に使用し、それらを独自の JavaScript JQuery コードと組み合わせて拡張します。

http://demos.kendoui.c​​om/web/tabstrip/index.html

基本的に、 ASP.NET 、特にMVCとの組み合わせは非常に便利です。

-

そして、あなたの質問については、アプローチとして、使用するTabStripとWindowが表示されます!!

クライアント API イベントを見てみましょう: http ://docs.kendoui.c​​om/api/web/window

そして、 JQueryの Draggable Droppable などを組み合わせて使用​​することを想像してみてください。

要約すると、私は主に JavaScript ブロックで次の機能を使用します。

  • JQuery の基本、特に TabStrip / Window で使用される Draggable Dropable - HTML 要素 (どの要素が FireBug で使用されているかを調べます)
  • Kendo UI API のイベントとメソッド: open、close、bind など。
于 2012-12-05T17:49:31.853 に答える
0

助けてくれてありがとう！私は次のことをやった：

  • 順序なしリスト (ul) をタブとしてスタイル設定
  • 各リスト項目 (li) をドラッグ可能にしました
  • li の onstop イベントで、現在のマウス位置で (iframe を使用して) ダイアログを開きます。
  • iframe の src 属性をタブ コンテンツに設定します。

以下のコード スニペット:

$('li').draggable({
            iframeFix: true,
            stop: function (event) {
                var title = //give a title
                var newId = //create a unique id

                $('#draggableTabsContainer').append('<div id="' + newId + '"></div>');

                var x = $(this).position().left;
                var y = $(this).position().top;

                $('#' + newId).dialog({
                    iframe: true,
                    autoOpen: false,
                    width: 700,
                    height: 700
                });

                $('#' + newId).append($("<iframe id='frm" + newId + "' class='tab-iframe'/>")).dialog('open');

                var url = $(this).find('a.tab').data('src');

                $('#frm' + newId).attr('src', url);

                $('#' + newId).dialog({ position: [x, y], 'title': title });


                $(this).remove();

            }
        });

ul/li の HTML:

<ul id="tablist">
        <li><a class="tab" href="#" data-src="controller_name/view_name1"><b>View 1</b></a></li>
        <li><a class="tab" href="#" data-src="controller_name/view_name2"><b>View 2</b></a></li>
</ul>
于 2012-12-06T21:23:18.277 に答える