如何在Greasemonkey脚本中弹出一个自定义窗体/对话框？ [英] How do I pop up a custom form/dialog in a Greasemonkey script?

问题描述

我一直在使用一个脚本来在Firefox中用作插件，并且在点击某个按钮时遇到了自定义窗体的需要。

我需要能够自己创建整个表单，然后解析输入的数据以在原始网站上呈现图像。

我如何做？

解决方案

好的，这里是一个完整的脚本例如，显示如何弹出窗体并与其控件进行交互。

请注意，它使用 jQuery - 这使得它更容易/更短/更简单。

  // == UserScript = = 
 // @name _Form，弹出示例
 // @include http://stackoverflow.com/* 
 // @require http://ajax.googleapis.com/ajax/ libs / jquery / 1.7.2 / jquery.min.js 
 // @grant GM_addStyle 
 // == / UserScript == 
 / *  - 需要@grant指令才能解决在GM 1.0中引入了一个设计变更
。它恢复沙箱。 
 * / 
 
 // ---使用jQuery在弹出对话框中添加表单。 
 $（body）。append（'\ 
< div id =gmPopupContainer> \ 
< form><！ =POSTaction =YOUR_DESIRED_URL - > \ 
< input type =textid =myNumber1value => \ 
< input type =文字id =myNumber2value => \ 
 \ 
< p id =myNumberSum>& nbsp;< / p> \ 
 < button id =gmAddNumsBtntype =button>添加两个数字< / button> \ 
< button id =gmCloseDlgBtntype =button>关闭弹出< / button> \ 
< / form> \ 
< / div> \ 
'）; 
 
 
 // ---使用jQuery激活对话框按钮。 
 $（＃gmAddNumsBtn）。click（function（）{
 var A = $（＃myNumber1）。val（）; 
 var B = $（＃myNumber2 ）.val（）; 
 var C = parseInt（A，10）+ parseInt（B，10）; 
 
 $（＃myNumberSum）。text + C）; 
}）; 
 
 $（＃gmCloseDlgBtn）。click（function（）{
 $（＃gmPopupContainer）。hide（）; 
}）; 
 
 
 // --- CSS样式使其工作... 
 GM_addStyle（\ 
 #gmPopupContainer {\ 
 position：fixed ; \ 
 top：30％; \ 
 left：20％; \ 
 padding：2em; \ 
 background：powderblue; \ 
 border ：3px double black; \ 
 border-radius：1ex; \ 
 z-index：777; \ 
} \ 
 #gmPopupContainer按钮{\ 
 cursor：p ointer; \ 
 margin：1em 1em 0; \ 
 border：1px开始按钮; \ 
} \ 
）; 
  

---

你会注意到对话框是非常基本的，对于更复杂的表单，你可以使用 jQuery-UI 。

I have been working on a script to use as a plugin in Firefox, and have come across the need to pop up a custom form when a certain button is clicked.

I need to be able to create the entire form myself and then parse the entered data to render images on the original site.

How do I do this?

解决方案

Okay, here is a complete script example, showing how to pop up a form and interact with its controls.
Note that it uses jQuery -- which makes it vastly easier/shorter/simpler.

// ==UserScript==
// @name        _Form, popup example
// @include     http://stackoverflow.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//--- Use jQuery to add the form in a "popup" dialog.
$("body").append ( '                                                          \
    <div id="gmPopupContainer">                                               \
    <form> <!-- For true form use method="POST" action="YOUR_DESIRED_URL" --> \
        <input type="text" id="myNumber1" value="">                           \
        <input type="text" id="myNumber2" value="">                           \
                                                                              \
        <p id="myNumberSum">&nbsp;</p>                                        \
        <button id="gmAddNumsBtn" type="button">Add the two numbers</button>  \
        <button id="gmCloseDlgBtn" type="button">Close popup</button>         \
    </form>                                                                   \
    </div>                                                                    \
' );


//--- Use jQuery to activate the dialog buttons.
$("#gmAddNumsBtn").click ( function () {
    var A   = $("#myNumber1").val ();
    var B   = $("#myNumber2").val ();
    var C   = parseInt(A, 10) + parseInt(B, 10);

    $("#myNumberSum").text ("The sum is: " + C);
} );

$("#gmCloseDlgBtn").click ( function () {
    $("#gmPopupContainer").hide ();
} );


//--- CSS styles make it work...
GM_addStyle ( "                                                 \
    #gmPopupContainer {                                         \
        position:               fixed;                          \
        top:                    30%;                            \
        left:                   20%;                            \
        padding:                2em;                            \
        background:             powderblue;                     \
        border:                 3px double black;               \
        border-radius:          1ex;                            \
        z-index:                777;                            \
    }                                                           \
    #gmPopupContainer button{                                   \
        cursor:                 pointer;                        \
        margin:                 1em 1em 0;                      \
        border:                 1px outset buttonface;          \
    }                                                           \
" );

---

You'll note that the dialog is pretty basic. For more sophisticated forms, you can use jQuery-UI.

这篇关于如何在Greasemonkey脚本中弹出一个自定义窗体/对话框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！