Login Popup

In this post, we will use the jqxDropDownButton and jqxButton widgets. The DropDownButton’s content will be a simple Form with 2 input fields and 1 submit button.

1. The first step is to include the JavaScript(jQuery Framework, jQWidgets Core, jqxButton and jqxDropDownButton) and the CSS files. In the sample, we’ll use the Dark Blue theme and we include the jqx.base.css and jqx.darkblue.css files.

      <link rel="stylesheet" 
   href="../../jqwidgets/styles/jqx.base.css" 
   type="text/css" />
      <link rel="stylesheet" 
      href="../../jqwidgets/styles/jqx.darkblue.css" type="text/css" />
      <script type="text/javascript" 
      src="../../scripts/jquery-1.7.2.min.js"></script>
      <script type="text/javascript" 
      src="../../jqwidgets/jqxcore.js"></script>
      <script type="text/javascript" 
      src="../../jqwidgets/jqxdropdownbutton.js"></script>
      <script type="text/javascript" 
      src="../../jqwidgets/jqxbuttons.js"></script>

2. Add the HTML structure in the document’s body. We add a DIV tag for the DropDownButton and inside the DIV tag, we add the Form that we want to be displayed in a drop down when the user clicks the button.

    <div id="dropDownButton">
      <form style="border-width: 1px; border-style: solid;" 
      class="jqx-widget-content jqx-widget-content-darkblue" 
      method="post" action="?page=login">
      <table>
        <tr>
          <td>
            Username:
          </td>
          <td>
            <input style="width: 150px;" 
            type="text" name="user" />
          </td>
        </tr>
        <tr>
          <td>
            Password:
          </td>
          <td>
            <input style="width: 150px;" 
            type="password" name="password" />
          </td>
        </tr>
        <tr>
          <td colspan="2" align="right" valign="bottom">
            <input type="submit" id="submit" value="Login" />
          </td>
        </tr>
      </table>
      </form>
    </div>

3. The final step is to initialize the jqxDropDownButton and jqxButton widgets.

    <script type="text/javascript">
      $(document).ready(function () {
        $("#dropDownButton").jqxDropDownButton
        ({ width: 150, height: 25, theme: 'darkblue' });
        var dropDownContent = '<div style="position: relative; 
        margin-left: 3px; margin-top: 5px;">' + "Login" + '</div>';
        $("#dropDownButton").jqxDropDownButton('setContent', dropDownContent);
        $("#submit").jqxButton({ theme: 'darkblue' });
      });
    </script>

CodeProject