Cómo crear un inicio de sesión y registro usando jQuery y CSS en asp.net2054

Cómo crear un inicio de sesión y registro usando jQuery y CSS en asp.net

En este artículo voy a crear un ejemplo para el acceso y registro en un sitio web, que al hacer clic se desplegara en forma de menú, esto con jQuery y CSS en asp.net. El ejemplo lo puedes lo puedes descargar al final de este post.

En un artículo anterior mostré cómo crear un menú desplegable con jQuery y CSS, del mismo modo ahora mostrare como podrás abrir este menú, con la opción de entrar o registrarte en un sitio web. En este ejemplo la opción de registrarte solo se mostrara, tu tendrás que poner los campos que requieras. También puedes añadir más pestañas, es ampliamente utilizado en todos los principales sitios web debido a su aspecto innovador y facilidad.

Implementación: Vamos a crear una aplicación para ver el menú trabajando.

En primer lugar, crear una hoja de estilo para crear los  estilos para el menú desplegable que vamos a crear.

En la hoja de acceso.css pegue el siguiente código y guarda el archivo.

 nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;   
}

nav li {
  float: left;         
}

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff; 
 background: #eee;
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444444;
  background:#eeeeee;
}

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
   background: #eeeeee;
}

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

   background:#E7A34C;
   color:#ffffff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;   
  background: #ffffff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
  background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
  background-image: -moz-linear-gradient(top, #E7A34C, #fff);
  background-image: -ms-linear-gradient(top, #E7A34C, #fff);
  background-image: -o-linear-gradient(top, #E7A34C, #fff);
  background-image: linear-gradient(top, #E7A34C, #fff); 
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 280px; 
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login .submit {                              
  background-color: #3F80EC;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
  background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

  background-image: -moz-linear-gradient(top, #f06015, #f88e11);
  background-image: -ms-linear-gradient(top, #f06015, #f88e11);
  background-image: -o-linear-gradient(top, #f06015, #f88e11);
  background-image: linear-gradient(top, #f06015, #f88e11);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;   
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login .submit:hover,
#login .submit:focus {                 
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
  background-image: -moz-linear-gradient(top, #f88e11, #f06015);
  background-image: -ms-linear-gradient(top, #f88e11, #f06015);
  background-image: -o-linear-gradient(top, #f88e11, #f06015);
  background-image: linear-gradient(top, #f88e11, #f06015);
}             

#login .submit:active {                
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;                              
}

#login .submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}

El código de la página debe quedar como sigue:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Login_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Login jQuery y CSS con ASP.NEt</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="acceso.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#login-trigger').click(function () {
                $(this).next('#login-content').slideToggle();
                $(this).toggleClass('active');

                if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
                else $(this).find('span').html('&#x25BC;')
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <nav>
                <ul>
                    <li id="login">
                        <a id="login-trigger" href="#">Entrar<span>?</span>
                        </a>
                        <div id="login-content">

                            <fieldset id="inputs">
                                <asp:TextBox ID="txtUserName" runat="server" placeholder="Dirección Email" type="email" required></asp:TextBox>
                                <asp:TextBox ID="txtPwd" runat="server" TextMode="Password" placeholder="Password" required></asp:TextBox>
                            </fieldset>
                            <fieldset id="actions">
                                <asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="submit"></asp:Button>
                                <asp:CheckBox ID="chkRemember" runat="server" Checked="true"></asp:CheckBox>Rocardar cuenta
                            </fieldset>
                            <a href="#" style="float: right;">Olvidaste tu contraseña?</a>
                        </div>

                    </li>
                    <li id="signup">
                        <a href="#">Sign up</a>
                    </li>
                </ul>
            </nav>
        </div>
    </form>
</body>
</html>

El ejemplo completo lo puedes descargar de la siguiente liga: https://github.com/jiestrada/Login

¿Qué te parece el ejemplo?, ¿Tienes alguna duda?, ¿Tienes comentarios?, Anímate escríbenos  cualquier comentario es bienvenido.

Saludos y excelente día

Compartir

Comentarios (56)

  • uoqiwd Responder

    sdfsdf

    Monday, October 19, 2015 7:49 PM
  • nike air pas cher Responder

    included per bag or scoop. One or two weeks cubic foot bags: 7.5/2=3.75 bags. Since 3.75 bags will not be purchased, we locate to 4 bags. For assorted

    Sunday, February 21, 2016 12:46 AM
  • Billige Nike Air Max 95 Danmark Responder

    Fantastic web site. A lot of helpful information here. I am sending it to several pals ans also sharing in delicious. And naturally, thank you in your sweat!

    Saturday, March 19, 2016 3:30 PM
  • Tienda Online Calvin Klein Responder

    Generally I don't learn post on blogs, however I would like to say that this write-up very compelled me to check out and do it! Your writing taste has been amazed me. Thanks, very great post.

    Monday, March 21, 2016 1:25 AM
  • billige nike jordan aj1 Responder

    Hi, just wanted to mention, I liked this blog post. It was practical. Keep on posting!

    Monday, March 21, 2016 1:48 AM
  • fitflop clearance Responder

    I definitely wanted to develop a quick remark to be able to say thanks to you for all the precious secrets you are posting at this site. My time consuming internet search has at the end been compensated with pleasant facts to write about with my family members. I would repeat that we site visitors are very endowed to dwell in a perfect site with many perfect people with great tips and hints. I feel very fortunate to have used the website page and look forward to some more brilliant times reading here. Thanks again for all the details.

    Monday, March 21, 2016 1:50 AM
  • billige new balance orthotics inserts Responder

    We're a group of volunteers and starting a new scheme in our community. Your website offered us with valuable info to work on. You've done a formidable job and our whole community will be grateful to you.

    Monday, March 21, 2016 6:37 PM
  • ??? ??? ??? Responder

    What i don't understood is in fact how you are no longer really much more well-preferred than you may be right now. You are so intelligent. You know therefore significantly with regards to this matter, produced me personally imagine it from so many varied angles. Its like women and men are not fascinated unless it is something to accomplish with Woman gaga! Your individual stuffs great. At all times take care of it up!

    Monday, March 21, 2016 7:35 PM
  • boutique longchamp Responder

    Hello there, I discovered your blog by means of Google at the same time as searching for a related topic, your site got here up, it appears to be like good. I've bookmarked it in my google bookmarks.

    Monday, March 21, 2016 7:46 PM
  • Ropa Interior Calvin Klein China Responder

    You actually make it seem so easy with your presentation however I to find this topic to be actually something which I believe I might never understand. It seems too complex and extremely vast for me. I am taking a look ahead on your next put up, I?ll try to get the grasp of it!

    Tuesday, March 22, 2016 11:41 AM
  • billige nike jordan brand history glendale Responder

    Wow! This could be one particular of the most beneficial blogs We have ever arrive across on this subject. Actually Excellent. I am also a specialist in this topic therefore I can understand your hard work.

    Tuesday, March 22, 2016 12:31 PM
  • ??????? ???? Responder

    Hello. Great job. I did not expect this. This is a splendid story. Thanks!

    Tuesday, March 22, 2016 1:41 PM
  • zapatillas running asics hombre Responder

    Thanks for every other informative site. The place else could I get that type of information written in such a perfect approach? I've a project that I am simply now working on, and I have been on the look out for such information.

    Tuesday, March 22, 2016 6:53 PM
  • zapatillas asics trabuco Responder

    I'm extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the nice quality writing, it is rare to see a great blog like this one today..

    Wednesday, March 23, 2016 4:46 AM
  • billige nike jordan pictures and information Responder

    I'm still learning from you, as I'm trying to reach my goals. I certainly enjoy reading everything that is written on your website.Keep the aarticles coming. I enjoyed it!

    Wednesday, March 23, 2016 5:15 AM
  • cheap mike air max Responder

    Excellent, what a webpage it is! This weblog presents valuable information to us, keep it up.

    Wednesday, March 23, 2016 7:40 AM
  • Billige cheap Nike Air Max Responder

    It's the best time to make some plans for the future and it is time to be happy. I've read this post and if I could I desire to suggest you some interesting things or advice. Perhaps you can write next articles referring to this article. I wish to read more things about it!

    Wednesday, March 23, 2016 9:54 PM
  • ??? ????? ???? Responder

    Undeniably believe that which you stated. Your favorite justification seemed to be on the internet the easiest thing to be aware of. I say to you, I certainly get annoyed while people consider worries that they plainly don't know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side effect , people could take a signal. Will probably be back to get more. Thanks

    Wednesday, March 23, 2016 10:41 PM
  • fitflop boots sale Responder

    What i don't understood is in fact how you're now not really much more smartly-favored than you may be right now. You're very intelligent. You understand therefore significantly relating to this matter, made me individually consider it from a lot of varied angles. Its like men and women don't seem to be interested unless it?s something to accomplish with Girl gaga! Your personal stuffs excellent. At all times handle it up!

    Thursday, March 24, 2016 1:38 AM
  • billige new balance made in england Responder

    I really appreciate this post. I?ve been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thanks again

    Thursday, March 24, 2016 2:52 PM
  • billige nike jordan baby shower Responder

    Awsome website! I am loving it!! Will be back later to read some more. I am bookmarking your feeds also

    Thursday, March 24, 2016 3:28 PM
  • Billiga air max 90 dam billigt Responder

    This info is worth everyone's attention. Where can I find out more?

    Thursday, March 24, 2016 7:31 PM
  • Calvin Klein Store Responder

    I really appreciate this post. I?ve been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thank you again

    Friday, March 25, 2016 7:45 AM
  • ??? ?????? ?? Responder

    Hiya very cool web site!! Guy .. Excellent .. Wonderful .. I will bookmark your blog and take the feeds additionally?I am happy to find numerous helpful information right here within the submit, we need work out more strategies in this regard, thanks for sharing. . . . . .

    Friday, March 25, 2016 8:25 AM
  • mbt skor borlänge Responder

    Hi, just wanted to tell you, I loved this blog post. It was inspiring. Keep on posting!

    Friday, March 25, 2016 1:14 PM
  • Segunda Mano Nike Air Max Responder

    I enjoy you because of your whole effort on this web site. Kim loves setting aside time for research and it's easy to see why. My spouse and i learn all of the dynamic mode you make invaluable guidance via your blog and in addition encourage participation from other people about this matter plus our own girl is actually starting to learn a whole lot. Enjoy the remaining portion of the year. You're doing a splendid job.

    Sunday, March 27, 2016 6:46 AM
  • zapatillas vans old school Responder

    Thanks for sharing superb informations. Your site is so cool. I am impressed by the details that you?ve on this website. It reveals how nicely you understand this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found just the information I already searched all over the place and just could not come across. What a perfect website.

    Tuesday, April 5, 2016 10:53 PM
  • billige air jordan aqua 8s Responder

    What's up, I just wanted to mention, I disagree. Your point doesn't make any sense.

    Saturday, April 9, 2016 4:57 AM
  • ??? ????? ??? Responder

    Hello, Neat post. There's an issue along with your website in web explorer, might test this? IE still is the marketplace chief and a large component to other folks will omit your excellent writing because of this problem.

    Monday, April 11, 2016 4:44 AM
  • billige jordan shoes under 40 Responder

    Great write-up, I am normal visitor of one?s site, maintain up the excellent operate, and It is going to be a regular visitor for a lengthy time.

    Tuesday, April 12, 2016 8:50 AM
  • billige air jordan amazon package track Responder

    Great post. I was checking constantly this blog and I am impressed! Extremely helpful info specifically the last part :) I care for such info a lot. I was seeking this particular information for a very long time. Thank you and good luck.

    Wednesday, April 13, 2016 3:53 PM
  • billige jordan 11 og Responder

    Hi, for all time i used to check webpage posts here in the early hours in the morning, since i enjoy to gain knowledge of more and more.

    Thursday, April 14, 2016 10:09 PM
  • ralph lauren slim fit Responder

    Usually I do not learn post on blogs, however I wish to say that this write-up very compelled me to check out and do so! Your writing style has been amazed me. Thanks, very great post.

    Thursday, April 14, 2016 11:23 PM
  • mulberry online sverige Responder

    I needed to draft you one very small word to finally give many thanks once again on your gorgeous views you have shown at this time. It has been simply strangely generous of you giving unhampered precisely what a number of us could have distributed for an electronic book to help make some profit for themselves, specifically given that you might have tried it if you wanted. The concepts likewise served to become a good way to be aware that most people have a similar dream much like my personal own to see many more around this matter. I am certain there are numerous more fun moments in the future for individuals who see your blog post.

    Friday, April 15, 2016 8:06 AM
  • birkenstock styles Responder

    I actually wanted to type a simple message so as to say thanks to you for all the fantastic tips and hints you are posting at this site. My considerable internet look up has finally been honored with reliable information to go over with my neighbours. I 'd point out that many of us readers actually are very lucky to dwell in a remarkable site with so many special people with valuable opinions. I feel rather happy to have used your webpage and look forward to really more brilliant moments reading here. Thank you again for all the details.

    Friday, April 15, 2016 6:58 PM
  • höstjacka herr Responder

    Hi there, I found your web site by means of Google whilst searching for a related topic, your site came up, it appears good. I've bookmarked it in my google bookmarks.

    Saturday, April 16, 2016 12:47 AM
  • mulberry sverige Responder

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how could we communicate?

    Saturday, April 16, 2016 7:28 AM
  • mbt skor rea stockholm Responder

    Definitely, what a splendid site and informative posts, I surely will bookmark your website.Have an awsome day!

    Saturday, April 16, 2016 7:05 PM
  • ??? ???? ????? Responder

    It is perfect time to make some plans for the future and it is time to be happy. I have read this post and if I could I want to suggest you few interesting things or advice. Perhaps you could write next articles referring to this article. I want to read even more things about it!

    Sunday, April 17, 2016 8:17 PM
  • Nike Air Max Rea billigt rea sverige Responder

    I would like to thank you for the efforts you have put in writing this web site. I am hoping the same high-grade website post from you in the upcoming as well. In fact your creative writing skills has inspired me to get my own blog now. Actually the blogging is spreading its wings rapidly. Your write up is a great example of it.

    Monday, April 18, 2016 8:37 PM
  • klänning barn Responder

    Hello, you used to write wonderful, but the last few posts have been kinda boring? I miss your great writings. Past few posts are just a bit out of track! come on!

    Monday, April 18, 2016 11:13 PM
  • billiga adidas kläder Responder

    I?ve been exploring for a bit for any high-quality articles or blog posts in this sort of area . Exploring in Yahoo I eventually stumbled upon this website. Studying this information So i am happy to convey that I have a very excellent uncanny feeling I came upon just what I needed. I such a lot definitely will make sure to don?t fail to remember this website and provides it a glance regularly.

    Tuesday, April 19, 2016 10:31 PM
  • nike pas cher femme Responder

    precaution avoiding problems relating to the comic.

    Thursday, June 2, 2016 12:49 PM
  • christian louboutin outlet Responder

    you're in point of fact a excellent webmaster. The website loading velocity is incredible. It sort of feels that you're doing any unique trick. Moreover, The contents are masterwork. you've done a excellent job on this subject!

    Thursday, June 2, 2016 4:25 PM
  • Sac gucci pas cher Responder

    and support healthy urinary function. Proprietary Herb Blend: Burdock (root), Milk Thistle (leaf), Nettle (leaf), Uva Ursi (leaf).

    Monday, June 6, 2016 4:05 PM
  • nike pas cher Responder

    German prosecutors said Tuesday that they were ready to match Ullrich's DNA with blood found found in Operation Puerto, which introduced the 1997 Tour

    Sunday, June 12, 2016 6:42 PM
  • porn movie Responder

    It is in reality a nice and helpful piece of information. I’m happy that you shared this helpful information with us. Please stay us up to date like this. Thanks for sharing.

    Friday, July 15, 2016 5:13 AM
  • ???539 Responder

    Excellent post. I was checking constantly this blog and I'm impressed! Very useful information particularly the last part :) I care for such information much. I was seeking this certain information for a very long time. Thank you and best of luck.

    Saturday, July 23, 2016 4:47 AM
  • Wholesale NFL Jerseys China Responder

    The best way to drive the user to this UI element is with a dragging or swiping gesture. This includes people who make us feel better.Now, she gets called names whenever she leaves her house and no longer feels able to sit out in her front garden where she has spent many happy hours over the years.] def Fire Ant &Soldier Ant [The Colony](12:16 ~ Chuck Taylor tapped out Soldier Ant with a Cross Crab)7. Technically inferior, with too many players involved to advance and support it, LAN Manager never gained significant traction vs.

    Monday, August 29, 2016 6:37 AM
  • Andres Iniesta Responder

    This is great blog, I will certainly be back.

    Sunday, September 11, 2016 12:53 PM
  • nike 2014 calcio Responder

    Heya i??i am for the first time here. I found this board and I find It truly useful & it helped me out a lot. I hope to give something back and aid others like you helped me.

    Friday, September 30, 2016 8:56 AM
  • nike blazer Responder

    Thank you for another informative site. The place else may just I get that type of information written in such a perfect manner? I've a venture that I'm simply now operating on, and I've been on the look out for such information.

    Monday, October 3, 2016 12:42 PM
  • Grassi Responder

    VJ

    Wednesday, February 1, 2017 2:30 AM
  • Grassi Responder

    VJ

    Wednesday, February 1, 2017 2:31 AM
  • Kingsford Responder

    I love looking through an article thst can mke men and women think. Also, many thanks for allowing me to comment!

    Monday, February 6, 2017 2:16 PM
  • Poninski Responder

    FP

    Wednesday, February 22, 2017 6:05 PM

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com