0

TXTextControl ブログの 1 つで提供されているコードを使用して、HTML5 エディターでマージ コード用のカスタム タブを作成しています。バージョン 16 から 22 にアップグレードし、独自のカスタム マージ コードを配置し、データを取得するための Web サービスを用意しました。明らかな理由から、このシステムを維持したいと考えています。私のカスタム タブには、選択したグループ内のマージ コードの 2 番目のドロップダウンを駆動するマージ コード グループのドロップダウンがあります。ユーザーは、プラス記号またはマイナス記号の付いた画像をクリックして、マージ コードを追加または削除します。すべてが整っています-ドロップダウンは美しく機能していますが、プラス記号の画像をクリックイベントにバインドできないようです。jQuery と Javascript の両方を試しました (コード スニペットでコメントアウトされています)。私はバインドを試みる前にカスタムタブ自体がロードされていることを確認しますが、役に立ちません。Plus.png 画像をクリックしても何も起こりません。誰もが問題を見ますか？ご意見をお寄せいただきありがとうございます。

マイク

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        function loadDDLMergeCodeGroups() {
            $(document).ready(function () {
                $("#ddlMergeCodeGroup").load("MergeCodeGroups.txt");
            });
        }

        function loadDDLMergeCodes() {
            $("#ddlMergeCodeGroup").change(function() {
                $("#ddlMergeCode").load(encodeURI("textdata/" +    $(this).val() + ".txt"));
            });
        }

        function addInsertFieldEvent() {
            $("#insertField").bind('click', function() {
                alert('Hello!');    
            });
        }

        //function addInsertFieldEvent() {
        //    document.getElementById("insertField").addEventListener('click', function (e) {
        //       alert('hello');
        //    });
        //}

    </script>
</head>
<body>
<form id="form1" runat="server">
<div>

    <cc1:TextControl ID="TextControl1" runat="server" Dock="Window" />

    <script type="text/javascript">

        // elements can be only added when the ribbon is completely loaded 
        TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
            addTab();
            loadDDLMergeCodeGroups();
            loadDDLMergeCodes();
            addInsertFieldEvent();
        });

        // this function adds a new tab and the tab content page 
        function addTab() {
            sCustomTab = "<li><a onclick='activateCustomTab();' id='tabCustom' data-applicationmodes='0' tabindex='-1' href='#!'>Merge Codes</a></li>";

            // add the new tab after the 'View' tab 
            document.getElementById('tabView').parentElement.insertAdjacentHTML(
                'afterend', sCustomTab);

            sCustomTabContent = "<div id='ribbonTabCustom' class='tab-content' style='display: none;'>";
            sCustomTabContent += "<div id='ribbonGroupCustom' class='ribbon-group'>";
            sCustomTabContent += "  <div class='ribbon-group-content'>";
            sCustomTabContent += "      <div class='ribbon-group-content-row'>";
            sCustomTabContent += "          <div class='ribbon-group-button-group'>";
            //sCustomTabContent += "              <div onclick='BtnCustomAction()' id='BtnCustom' class='ribbon-button ribbon-button-big' title='Custom'>";
            //sCustomTabContent += "                  <div class='ribbon-button-big-image-container'><img id='imgID_RibbonTabInsert_html_0' class='ribbon-button-big-image' src='custom.png'></img></div>";
            sCustomTabContent += "                  <div class='ribbon-button-big-label-container'>";
            sCustomTabContent += "                      <p class='ribbon-button-label'>Merge Code Group&nbsp;&nbsp;";
            sCustomTabContent += "                          <select id='ddlMergeCodeGroup'></select>&nbsp;&nbsp;";
            sCustomTabContent += "                          Merge Code&nbsp;&nbsp;";
            sCustomTabContent += "                          <select id='ddlMergeCode'></select>&nbsp;&nbsp;";
            sCustomTabContent += "                          <img id='insertField' src='images/Plus.png' alt='Add' height='20' width='20'></img>&nbsp;&nbsp;";
            sCustomTabContent += "                          <img id='deleteField' src='images/minus.png' alt='Delete' height='20' width='20'></img>&nbsp;&nbsp;";
            sCustomTabContent += "                      </p>";
            sCustomTabContent += "                  </div>";
            //sCustomTabContent += "              </div>";
            sCustomTabContent += "          </div>";
            sCustomTabContent += "      </div>";
            sCustomTabContent += "  </div>";

            //sCustomTabContent += "  <div class='ribbon-group-label-container'>";
            //sCustomTabContent += "      <p class='ribbon-group-label'>asdf</p>";
            //sCustomTabContent += "  </div>";
            sCustomTabContent += "</div>";
            sCustomTabContent += "</div>";

            // add the tab content to the tab content container 
            document.getElementById('txRibbonTabContentContainer').insertAdjacentHTML(
                'afterbegin', sCustomTabContent);
        }

        function activateCustomTab() {
            $('div.tab-content').css("display", "none");
            $('ul.tabs a').removeClass("selected");

            $("#ribbonTabCustom").css("display", "inline-block");
            $("#tabCustom").addClass("selected");
        }
    </script>    
    </div>
</form>

4

1 に答える 1

0

style='pointer-events: all; を追加することで解決しました。img タグ属性に。Click イベントが発生するようになりました。

于 2016-01-05T19:14:46.210 に答える