Создание JQueryscript для GM - проблема, переписав код JS - PullRequest
Новая
       31

Создание JQueryscript для GM - проблема, переписав код JS

1 голос
/ 24 июня 2010

после попытки решить проблему без и с помощью я все равно застрял. Моей целью было написать GM-скрипт с JS. Кто-то сказал мне использовать jQuery из-за его простоты. Ну, я начал изучать JS на прошлой неделе, и моя голова полна информации. Что мне нужно, так это подсказка / начало / начало / все, что говорит мне, как переписать скрипт в хорошо работающий jQuery-скрипт. Ну, я прочитал несколько руководств, но почему-то просто не могу понять. Возможно, я неправильно понял синтаксис jQuery, который трудно понять. По крайней мере, я пережил руководства ...

Вот как должен работать скрипт: 1. Я создал 3 функции. Один для проверки того, содержат ли поля ввода числа и допускают ли они только цифры, запятые, точки и некоторые элементы управления. Секунда, чтобы заменить символы и предупредить, если что-то. это неправильно. Третье суммирует четыре поля и ставит результат в пятое. 2. Я создал две функции для каждого поля. Одна функция скрывает текст, одна функция показывает текст, нажимая «а». 3. По крайней мере, я создал таблицу со всеми полями ввода и текстом, который он должен содержать. 4. При нажатии на специальную кнопку появляется заметка (мне все еще нужно это написать ...)

Для меня очень важно собрать всю информацию и написать хороший и привлекательный (и я знаю, что это еще не) сценарий.

Я очень надеюсь, что ты поможешь мне. Мне просто нужно начало ...

Ниже приведен код, который я написал. Он не будет работать в GM из-за используемой функции document.write из-за песочницы и т. Д .: - (

проверяет, содержат ли поля ввода числа, допускаются только цифры, запятые, точки и некоторые элементы управления 

function check(event) {

var keycode;
if (window.event) {
keycode = window.event.keycode;
} else if (event) {
keycode = event.which;
} else {
return true;
}
if (47 < keycode) {
if (keycode < 58) {
return true;
}
}
var keycodeascii = new Array(0,8,44,46);
while (keycodeascii.length > 0) {
if (keycode == keycodeascii.pop()) {                      
return true;
}
}
return false;
}

заменяет любой символ на '.', Не допускает символы в начале и конце 

function replace(id) {
with(id) {

var oldValue = value;
var newValue = oldValue.replace(/\W+/g, ".");
newValue = newValue.replace(/\W+$/g, "");
newValue = newValue.replace(/^\W/g, "");
value = newValue;

//alerts if digits are split by more than character
var digits = newValue.split(".");
if (digits.length >= 3) {
alert("Sie haben " + (digits.length -1) + " Sonderzeichen verwendet. Bitte korrigieren Sie Ihre Eingabe.");
field.focus();
}

}
}

подводит итог field1-field4, результат появляется в field5 

function calculate() {

var summe = (1*window.document.getElementById('field1').value) + (1*window.document.getElementById('field2').value) + (1*window.document.getElementById('field3').value) + (1*window.document.getElementById('field4').value);

window.document.getElementById('field5').value = summe;

}

функция для расширения и хлопка информации 

function show() {
document.getElementById("huhu").style.display = "inline";
document.getElementById("field1_show").style.display = "none";
document.getElementById("field1_hide").style.display = "inline";
}
function hide() {
document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";
}

function expandCom() {
document.getElementById("huhu1").style.display = "inline";
document.getElementById("field2_show").style.display = "none";
document.getElementById("field2_hide").style.display = "inline";
}
function clapCom() {
document.getElementById("huhu1").style.display = "none";
document.getElementById("field2_show").style.display = "inline";
document.getElementById("field2_hide").style.display = "none";
}

function expandOut() {
document.getElementById("field3div").style.display = "inline";
document.getElementById("field3_show").style.display = "none";
document.getElementById("field3_hide").style.display = "inline";
}
function clapOut() {
document.getElementById("field3div").style.display = "none";
document.getElementById("field3_show").style.display = "inline";
document.getElementById("field3_hide").style.display = "none";
}

function expandTest() {
document.getElementById("field4div").style.display = "inline";
document.getElementById("field4_show").style.display = "none";
document.getElementById("field4_hide").style.display = "inline";
}
function clapTest() {
document.getElementById("field4div").style.display = "none";
document.getElementById("field4_show").style.display = "inline";
document.getElementById("field4_hide").style.display = "none";
}

function expandEff() {
document.getElementById("field5div").style.display = "inline";
document.getElementById("field5_show").style.display = "none";
document.getElementById("field5_hide").style.display = "inline";
}
function clapEff() {
document.getElementById("field5div").style.display = "none";
document.getElementById("field5_show").style.display = "inline";
document.getElementById("field5_hide").style.display = "none";
}

создает таблицу со всеми необходимыми и желаемыми структурами 

document.write("<table border='1' cellpadding='10' cellspacing='0'><tbody>");
document.write("<tr>");
document.write("<td bgColor='#FFFFDD'>");


document.write("<table border='0' cellpadding='0' cellspacing='2'><tbody>");
document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>");
document.write("<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");



document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>");
document.write("<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>");
document.write("<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>");
document.write("<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("<tr>");
document.write("<td>");
document.write("<hr>");
document.write("<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> ");
document.write("<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>");
document.write("</td>");
document.write("</tr>");

document.write("</tbody></table>");

    document.write("</td>");
    document.write("</tr>");
    document.write("</tbody></table>");

Большое спасибо всем, кто помог мне найти решение. Файли

1 Ответ

0 голосов
/ 25 июня 2010

Хорошо, вот несколько полуслучайных указателей.

1) Greasemonkey в настоящее время не очень хорошо работает с jQuery 1.4, поэтому используйте jQuery 1.3.2.Включите его в свой сценарий GM, добавив следующую строку в заголовок: 

// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

.
.
2) Материал наподобие этого: 

document.getElementById("huhu").style.display = "none";
document.getElementById("field1_show").style.display = "inline";
document.getElementById("field1_hide").style.display = "none";

.
Это становится возможным с помощью jQuery: 

$("#huhu").css          ('display', 'none');
$("#field1_show").css   ('display', 'inline');
$("#field1_hide").css   ('display', 'none');

Версия jQuery также будет работать намного лучше в разных браузерах.

.
.
3) Очень удобная ссылка на jQuery: http://www.jqapi.com/

.
.
4) Вот пример скрипта Greasemonkey с вашей таблицей create,рефакторинг JQuery способ.Он работает как есть на главной странице Google.Настройте заголовок и TargetNode в соответствии с целевым сайтом.: ( Предупреждение: Этот пример сценария создаст вашу таблицу, но вы не можете связать onClick s и т. Д. Таким образом в сценарии Greasemonkey. См .: GM-ловушки .) 

// ==UserScript==
// @name           jQuery Test/Demo
// @namespace      Google
// @include        *.google.tld/
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==


/* Optional:
window.addEventListener ("load", Greasemonkey_main, false);
*/
$(document).ready (Greasemonkey_main);


function Greasemonkey_main ()
{
    /*--- Get the first node inside the id="main" span (Google.com)
        If that's not there, then get the first node of the html body.
    */
    var TargetNode  = $("#main *:first");
    if (!TargetNode)
        TargetNode  = $("body *:first");

    $(TargetNode).after
    (
          "<table border='1' cellpadding='10' cellspacing='0'><tbody>"
        + "<tr>"
        + "<td bgColor='#FFFFDD'>"
        + "<table border='0' cellpadding='0' cellspacing='2'><tbody>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field1' name='field_analysis' size='5' value='' onkeypress='return check(event)' onChange='replace(field1)'>"
        + "<a onClick='show()' id='field1_show'>Text</a><a 'onClick='hide()' id='field1_hide' style='display: none'>Text</a><br><div id='huhu' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field2' name='field_communication' size='5' value='' onkeypress='return check(event)' onChange='replace(field2)'>"
        + "<a onClick='expandCom()' id='field2_show'>Text</a><a onClick='clapCom()' id='field2_hide' style='display:none'>Text</a><br><div id='huhu1' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field3' name='field_outworking' size='5' value='' onkeypress='return check(event)' onChange='replace(field3)'>"
        + "<a onClick='expandOut()' id='field3_show'>Text</a><a onClick='clapOut()' id='field3_hide' style='display:none'>Text</a><br><div id='field3div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<input type='text' id='field4' name='field_testing' size='5' value='' onkeypress='return check(event)' onChange='replace(field4)'>"
        + "<a onClick='expandTest()' id='field4_show'>Text</a><a onClick='clapTest()' id='field4_hide' style='display:none'>Text</a><br><div id='field4div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "<tr>"
        + "<td>"
        + "<hr>"
        + "<input type='text' id='field5' name='field_effort'size='5' value='' OnFocus='calculate()' onkeypress='return check(event)' onChange='replace(field5)'> "
        + "<a onClick='expandEff()' id='field5_show'>Text</a><a onClick='clapEff()' id='field5_hide' style='display:none'>Text</a><br><div id='field5div' style='display:none'>HUHU</div>"
        + "</td>"
        + "</tr>"
        + "</tbody></table>"
        + "</td>"
        + "</tr>"
        + "</tbody></table>"
    );
}
...