Click here to Skip to main content
13,147,540 members (33,613 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

11K views
2 bookmarked
Posted 5 Jun 2012

Login Popup

, 5 Jun 2012
Rate this:
Please Sign up or sign in to vote.
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>
    

jquery-login-popup

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

jqwidgets
jQWidgets
United States United States
This member doesn't quite have enough reputation to be able to display their biography and homepage.
Group type: Organisation

13 members


You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 5 Jun 2012
Article Copyright 2012 by jqwidgets
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid