آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش پلاگین jQuery hideShowPassword

دوره های مرتبط با این مقاله

آموزش پلاگین jQuery hideShowPassword

پلاگین jQuery hideShowPassword پلاگین سازگار با دستگاههای لمسی است که نمایش یا عدم نمایش فیلد پسورد را با کلیک مشخص میکند.
سه راه برای نمایش یا عدم نمایش وجود دارد:

  • یک دکمه درون فیلد رمز عبور
  • رمز عبور در صورت تایپ در فیلد یا فوکوس روی آن نمایان است.
  • استفاده از یک دکمه checkbox برای نمایان یا عدم نمایان کردن رمز عبور

روش استفاده

ابتدا یک فایل ورودی از نوع رمز عبور ایجاد میکنیم.

< input class="login-field login-field-password" id="demo" type="password" placeholder="Password" >

آیکون یا دکمه را با استفاده از دستورات CSS زیر تغییر میدهیم.

/*
   * Add this if you want to disable IE10's implementation
   * of the winking eye in favor of your own.
   * Alternatively, you could set the 'innerToggle' option to
   * false for that browser only.
   */
 
::-ms-reveal {
 display:none !important;
}
/*
   * This toggle style shows a winking "eye-con" (nyuk, nyuk).
   * Open eye means "show," closed eye means "hide."
   */
.hideShowPassword-toggle {
background-image:url(img/wink.svg);
background-position:0 center;
background-repeat:no-repeat;
cursor:pointer;
height:100%;
overflow:hidden;
text-indent:-9999em;
width:44px;
}
.hideShowPassword-toggle-hide {
background-position:-44px center;
}

فایل جیکوئری و فایل پلاگین را درون پروژه قرار میدهیم

< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" >< /script >
< script src="hideShowPassword.min.js" >< /script >

روی ورودی مورد نظر این پلاگین را فراخوانی میکنیم. و دکمه را ب صورت درونی نمایش میدهیم

$ ('#demo').hideShowPassword({
  innerToggle:true
});

برای سفارشی کردن پلاگین میتوان از option های زیر استفاده کرد.
نمایش یا نمایش پسورد (true, false, infer)

show:'infer',

نمایش یا عدم نمایش دکمه به صورت درونی

innerToggle:false,

فعال یا غیر فعال کردن پلاگین

enable: canSetInputAttribute,

نمایش محتوای پسورد در صورت وقوع یک رویداد مانند focus

triggerOnToggle:false,

نام کلاسی که به صورت پیش فرض به ورودی اضافه میشود.

className:'hideShowPassword-field',

متد فراخوانی شده در صورت وقوع رویداد change

changeEvent:'passwordVisibilityChange',

بررسی یک سری از ویژگی ها که با مقدار True یا false مشخص میشود.

props: {
  autocapitalize:'off',
	  autocomplete:'off',
	  autocorrect:'off',
  spellcheck:'false'
},
 


	toggle: {
	  // The element to create.
	  element:'< button type="button" >',
	  // Class name of element.
  className:'hideShowPassword-toggle',
	  attachToEvent:'click.hideShowPassword',
	  // Event to bind to when touchSupport is true.
	  attachToTouchEvent:'touchstart.hideShowPassword mousedown.hideShowPassword',
	  attachToKeyEvent:'keyup',
// Key codes to bind the toggle event to for accessibility.
  styles: { position:'absolute' },
  // input element.
  position:'infer',
		  verticalAlign:'middle',
  attr: {
	    role:'button',
    'aria-label':'Show Password',
    title:'Show Password',
	    tabIndex: 0
	  }
},

ویژگی ها و پارامترهای عنصر اصل ی و والد نیز با با قطعه کد زیر مشخص میشود.option

element:'< div >',
  // Class name of element.
  className:'hideShowPassword-wrapper',
	  enforceWidth:true,
	  styles: { position:'relative' },
	  inheritStyles: [
	    'display',
	    'verticalAlign',
	    'marginTop',
	    'marginRight',
    'marginBottom',
    'marginLeft'
  ],

	  innerElementStyles: {
	    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0
  }
},
 
states: {
  shown: {
    className:'hideShowPassword-shown',
    changeEvent:'passwordShown',
    props: { type:'text' },
    toggle: {
      className:'hideShowPassword-toggle-hide',
      content:'Hide',
      attr: {
        'aria-pressed':'true',
        title:'Hide Password'
      }
    }
  },
  hidden: {
    className:'hideShowPassword-hidden',
    changeEvent:'passwordHidden',
    props: { type:'password' },
    toggle: {
      className:'hideShowPassword-toggle-show',
      content:'Show',
      attr: {
        'aria-pressed':'false',
        title:'Show Password'
      }
    }
  }
}

  • 43
  •    68
  • تاریخ ارسال :   1398/10/23

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش پلاگین jQuery hideShowPassword
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .