Browse Source

Input element clear buttons

Nathaniel van Diepen 10 năm trước cách đây
mục cha
commit
1cfcb3bbd3
4 tập tin đã thay đổi với 49 bổ sung21 xóa
  1. 3 0
      css/style.css
  2. 8 8
      data/pages/login.template
  3. 12 12
      data/pages/register.template
  4. 26 1
      js/index.js

+ 3 - 0
css/style.css

@@ -25,6 +25,9 @@ input[type=submit]:active,button.recommend:active{
 	background: #008aaa;
 	color: #333;
 }
+form#form{
+	width: 320px;
+}
 .recommend-force{
 	background-image: url(../img/buttons/ui/recommend.png) !important;
 	background-color: #00caf2 !important;

+ 8 - 8
data/pages/login.template

@@ -1,13 +1,13 @@
-<form id="form" class="table outline ui-corner-all">
-	<div class="row">
-		<input name="username" placeholder="Username" id="login-username" type="text"/>
+<form id="form">
+	<div>
+		<input name="username" class="fill-width" placeholder="Username" id="login-username" type="text"/>
 	</div>
-	<div class="row">
-		<input id="login-password" placeholder="Password" name="password" type="password"/>
+	<div >
+		<input id="login-password" class="fill-width" placeholder="Password" name="password" type="password"/>
 	</div>
-	<div class="row">
-		<input type="button" value="cancel" class="cancel left"/>
-		<input type="submit" class="right" value="login"/>
+	<div>
+		<input type="button" value="cancel" class="cancel"/>
+		<input type="submit" value="login"/>
 	</div>
 </form>
 <script>

+ 12 - 12
data/pages/register.template

@@ -1,21 +1,21 @@
-<form id="form" class="table outline ui-corner-all">
-	<div class="row">
-		<input name="email" placeholder="Email" type="text"/>
+<form id="form">
+	<div>
+		<input name="email" class="fill-width" placeholder="Email" type="text"/>
 	</div>
-	<div class="row">
-		<input name="username" placeholder="Username" type="text"/>
+	<div>
+		<input name="username" class="fill-width" placeholder="Username" type="text"/>
 	</div>
-	<div class="row">
-		<input name="password"  placeholder="Password" type="password"/>
+	<div>
+		<input name="password" class="fill-width"  placeholder="Password" type="password"/>
 	</div>
-	<div class="row">
-		<input name="password1"  placeholder="Verify Password" type="password"/>
+	<div>
+		<input name="password1" class="fill-width"  placeholder="Verify Password" type="password"/>
 	</div>
 	<div class="fill-width" style="height:20px;background-repeat:no-repeat;background-position:center;background-size:165px 20px;" id="captcha"></div>
-	<div class="row">
-		<input name="captcha" placeholder="Captcha" type="text"/>
+	<div>
+		<input name="captcha" class="fill-width" placeholder="Captcha" type="text"/>
 	</div>
-	<div class="row">
+	<div>
 		<input type="button" value="cancel" class="cancel left"/>
 		<input type="submit" value="register" class="right"/>
 	</div>

+ 26 - 1
js/index.js

@@ -332,7 +332,32 @@
 				});
 			},
 			form: function(selector){
-				$(selector).find('#form').position({of:selector,my:'center',at:'center'});
+				$(selector).find('#form').width('320px').children();
+				render.inputs(selector);
+			},
+			inputs: function(selector){
+				$(selector).find('input[type=text],input[type=password]').each(function(){
+					var input = $(this);
+					input.siblings('.input-clear').remove();
+					input.after(
+						$('<div>').css({
+							position: 'absolute',
+							right: $(window).width() - (input.outerWidth() + input.position().left),
+							top: input.position().top,
+							'background-image': 'url(img/headers/icons/clear.png)',
+							'background-position': 'center',
+							'background-size': '17px 17px',
+							'background-repeat': 'no repeat',
+							width: input.outerHeight(),
+							height: input.outerHeight(),
+							'max-width':  '17px',
+							'max-height': '17px',
+							cursor: 'pointer'
+						}).addClass('input-clear').click(function(){
+							input.val('');
+						})
+					);
+				});
 			},
 			dialog: function(selector,title){
 				$(selector).dialog({