Показать Java-апплет при нажатии на элементы HTML Text

Question

Я пытаюсь создать плагин jquery, описание которого приведено ниже. У меня не было большого опыта работы в jQuery, поэтому мне очень нужна была помощь.

Вот Java-апплет, о котором я говорю http://www.inference.phy.cam.ac.uk/dasher/TryJavaDasherNow.html

Апплет выполняет некоторую операцию, результат отображается в текстовом поле апплета.

Рассмотрим виртуальную клавиатуру, которая появляется, когда пользователь нажимает на текстовое поле или элемент текстовой области. Например:

Точно так же я хотел, чтобы апплет появлялся, когда пользователь щелкает элемент TextBox / TextArea, и после некоторых операций результат в текстовом поле апплета должен переходить в текстовый элемент html. Я надеюсь, что смогу прояснить себя. Пожалуйста, помогите мне в этом. Я не работал с jQuery, но это можно сделать с его использованием.

Answer 1

Предполагая, что ваш идентификатор апплета id="myapplet" Дайте ему стиль display:hidden, чтобы он изначально был скрыт.Поместите его в любое место HTML, где вы хотите, чтобы он отображался, когда пользователь нажимает TEXTAERA или текст INPUT.

<object id="myapplet" style="display:none;">......</object>

Затем с помощью jQuery вы можете сделать

$('textarea, input').click(function(){
$('#myapplet').show();
});

Это отобразит апплет при нажатии TEXTAREA или INPUT.

Обновить Согласно вашему комментарию ниже, если вы хотите открыть апплет на странице, где пользователь может перетаскивать его, вы можете использовать диалоговую функцию jQuery UI.Подробнее на http://jqueryui.com/demos/dialog/

Сначала поместите ваш Java-объект в HTML-файл и назовите его applet.html.Нет необходимости иметь display:none на вашем объекте.Затем вы можете сделать

$('textarea, input').click(function() {
    var $div = $('<div title="Java Applet"></div>');
    $div.load('applet.html', function() {
        $div.dialog({autoOpen: false});
    });
});

Не забудьте включить файлы JS и CSS для пользовательского интерфейса jQuery в дополнение к jQuery.

Поместите это в свою голову

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" /> 

и поместите их перед закрытием тега тела

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>