Не получается завернуть редактор разметки WMD во вкладки JQuery - PullRequest
Новая
       8

Не получается завернуть редактор разметки WMD во вкладки JQuery

1 голос
/ 22 августа 2010

Я пытаюсь разместить редактор Markdown внутри вкладок jQuery-UI, но редактор не отображается. 

    <%  Using Html.BeginForm()%>
    <div id="AddEventWizard">
        <ul>
            <li><a href="#tabs-1">Event Title</a></li>
            <li><a href="#tabs-2">Event Description</a></li>
        </ul>
        <div id="tabs-1">
            <%: Html.LabelFor(Function(model) model.Name)%>
            <%: Html.TextBoxFor(Function(model) model.Name, New With{.class = "full-width-input"})%>
            <%: Html.ValidationMessage("Name", "*")%>
        </div>
        <div id="tabs-2">
            <noscript><h3>Please use
                <%: Html.ActionLink("Markdown", "Markdown", "About")%>
                to style your input.</h3></noscript>
            <div id="wmd-button-bar" class="wmd-panel">
            </div>
            <%: Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})%>
            <div id="wmd-preview" class="wmd-panel">
            </div>
            <div class="clear">
            </div>
        </div>
    </div>
    <% End Using%>

<script type="text/javascript">
    $(document).ready(function () {
        $('textarea#wmd-input:not(.processed)').TextAreaResizer();

        $("#AddEventWizard").tabs({

    });
}); // closes document.ready

</script>

Есть место, где кнопки редактора "должны" быть, но они "не там.Кто-нибудь знает, блокирует ли материал jQuery-UI разметку ОМП?

Screenshot

Редактировать:

Я использую версию от Github

HTML-разметка 

<form action="/events/addevent" method="post">
        <div id="AddEventWizard">

            <ul>
                <li><a href="#tabs-1">Event Title</a></li>
                <li><a href="#tabs-2">Event Details</a></li>
                <li><a href="#tabs-3">Event Description</a></li>
            </ul>
            <div id="tabs-1">
                <label for="Name">Name</label>

                <input class="full-width-input" id="Name" name="Name" type="text" value="" />

            </div>
            <div id="tabs-2"></div>
            <div id="tabs-3">
                <noscript><h3>Please use
                    <a href="/about/markdown">Markdown</a>
                    to style your input.</h3></noscript>
                <div id="wmd-button-bar" class="wmd-panel">
                </div>
                <textarea class="wmd-panel" cols="10" id="wmd-input" name="Description" rows="5">

</textarea>
                <div id="wmd-preview" class="wmd-panel">
                </div>
                <div class="clear">
                </div>
            </div>
        </div>
        </form>


<script type="text/javascript">
    $(document).ready(function () {
        $('textarea#wmd-input:not(.processed)').TextAreaResizer();

        $("#AddEventWizard").tabs({

    });
}); // closes document.ready

</script>
<script src="../../Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>

<script src="../../Assets/Scripts/jquery.textarearesizer.compressed.js" type="text/javascript"></script>

1 Ответ

0 голосов
/ 22 августа 2010

Может быть, вы можете привязать редактор 

$('textarea#wmd-input:not(.processed)').TextAreaResizer();

не к $ (документ). Уже, но по щелчку tab3?

таким образом, редактор загружается, когда текстовое полевиден

...