jquery ನಲ್ಲಿ ನೋಂದಣಿ ಮತ್ತು ಅಧಿಕಾರ ರೂಪ. PHP, MySQL ಮತ್ತು jQuery ಬಳಸಿಕೊಂಡು ಉತ್ತಮ ನೋಂದಣಿ ವ್ಯವಸ್ಥೆಯನ್ನು ಮಾಡುವುದು. ಅಲಂಕಾರಿಕ AJAX ಸಂಪರ್ಕ ಫಾರ್ಮ್

ಎಲ್ಲವೂ PHP ಅಡಿಯಲ್ಲಿ ಚಲಿಸುತ್ತದೆ ಮತ್ತು ಡೇಟಾವನ್ನು MySQL ಡೇಟಾಬೇಸ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ.

ಸಿಸ್ಟಮ್ ವೆಬ್-ಕ್ರಿಯೇಶನ್ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಅತ್ಯುತ್ತಮ ಸ್ಲೈಡಿಂಗ್ ಪ್ಯಾನೆಲ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.

ಮೊದಲಿಗೆ ನಾವು ನೋಂದಾಯಿತ ಬಳಕೆದಾರರ ಬಗ್ಗೆ ಎಲ್ಲಾ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುವ ಟೇಬಲ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ. ಪ್ರಶ್ನೆ ಕೋಡ್ ಮೂಲ ಆರ್ಕೈವ್‌ನಲ್ಲಿರುವ table.sql ಫೈಲ್‌ನಲ್ಲಿ ಲಭ್ಯವಿದೆ.

ನಾವು ಐಡಿಯನ್ನು ಸ್ವಯಂ_ಇನ್ಕ್ರಿಮೆಂಟ್ ಆಯ್ಕೆಯೊಂದಿಗೆ ಪೂರ್ಣಾಂಕವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ - ಇದು ಪ್ರತಿ ಹೊಸ ನೋಂದಾಯಿತ ಬಳಕೆದಾರರಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿಯೋಜಿಸಲ್ಪಡುತ್ತದೆ. ಅಲ್ಲದೆ, usr ಅನ್ನು ಅನನ್ಯ ಕೀಲಿಯಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ - ಒಂದೇ ಬಳಕೆದಾರ ಹೆಸರಿನ ಎರಡು ದಾಖಲೆಗಳನ್ನು ಕೋಷ್ಟಕದಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರಲು ಅನುಮತಿಸಲಾಗುವುದಿಲ್ಲ.

ನಂತರ ಬಳಕೆದಾರಹೆಸರನ್ನು ನಮೂದಿಸಿದಾಗ ನೋಂದಣಿ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ನಾವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತೇವೆ.

ಟೇಬಲ್ ಅನ್ನು ರಚಿಸಿದ ನಂತರ, ನೀವು connect.php ಫೈಲ್‌ನಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾಬೇಸ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಭರ್ತಿ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಇದರಿಂದ ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ನೀವು ಚಲಾಯಿಸಬಹುದು.

ಮೊದಲಿಗೆ, ನಾವು ವೆಬ್-ಸೃಷ್ಟಿ ಫಾರ್ಮ್ ಅನ್ನು ನಮ್ಮ ಪುಟಕ್ಕೆ ಎಂಬೆಡ್ ಮಾಡಬೇಕಾಗಿದೆ.

ಡೆಮೊ ಡೇಟಾ

• ನಮಸ್ಕಾರ !



• 
  
  ಫಲಕವನ್ನು ಮುಚ್ಚಿ
  

ಕೋಡ್‌ನಲ್ಲಿ ಹಲವಾರು ಸ್ಥಳಗಳಲ್ಲಿ $_SESSION["usr"] ಅಥವಾ $_SESSION["id"] ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ PHP ಹೇಳಿಕೆಗಳಿವೆ. ಪುಟ ಸಂದರ್ಶಕರು ನೋಂದಾಯಿತ ಬಳಕೆದಾರರಾಗಿದ್ದರೆ ಮಾತ್ರ ಅವು ನಿಜವಾಗುತ್ತವೆ, ಇದು ನೋಂದಾಯಿತ ಸಂದರ್ಶಕರಿಗೆ ಗುಪ್ತ ವಿಷಯವನ್ನು ತೋರಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಫಾರ್ಮ್ ನಂತರ ನಾವು ಪುಟದ ಉಳಿದ ವಿಷಯವನ್ನು ಇರಿಸುತ್ತೇವೆ.

jQuery ಸ್ಲೈಡಿಂಗ್ ಪ್ಯಾನಲ್
ಇದರೊಂದಿಗೆ ಸುಲಭ ನೋಂದಣಿ ನಿರ್ವಹಣೆ PHP ಬಳಸಿಮತ್ತು jQuery

ಕೆಲವು ಪಠ್ಯ...

ಕೋಡ್‌ನಲ್ಲಿ ವಿಶೇಷ ಏನೂ ಇಲ್ಲ.

ಈಗ ನಾವು ಫಾರ್ಮ್ ಅನ್ನು ಸಂಪೂರ್ಣ ನೋಂದಣಿ ಮತ್ತು ಲಾಗಿನ್ ಸಿಸ್ಟಮ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತೇವೆ. ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು, ನಿಮಗೆ ಸಾಮಾನ್ಯ PHP ಕೋಡ್ ಹೊರತುಪಡಿಸಿ ಏನಾದರೂ ಅಗತ್ಯವಿರುತ್ತದೆ. ಸಂಪೂರ್ಣ ಕೋಡ್ ಅನ್ನು ಎರಡು ಭಾಗಗಳಾಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ.

ನೀವು ಏನನ್ನಾದರೂ ಸೇರಿಸಲು ಯೋಜಿಸಿದರೆ, ಎಲ್ಲವನ್ನೂ ಹಲವಾರು ಭಾಗಗಳಾಗಿ ವಿಭಜಿಸುವುದು ಉತ್ತಮ ಪ್ರತ್ಯೇಕ ಕಡತಗಳುಮತ್ತು ಅಗತ್ಯವಿರುವಂತೆ ಅವುಗಳನ್ನು ಆನ್ ಮಾಡಿ. ಈ ವಿಧಾನವು ದೊಡ್ಡ ಯೋಜನೆಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದೇ ಸಮಯದಲ್ಲಿ ಸೈಟ್ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಮರುಬಳಕೆ ಮಾಡುತ್ತದೆ.

ಅದನ್ನು ಇಲ್ಲಿ ಹೇಗೆ ಅಳವಡಿಸಲಾಗಿದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.

ಇಲ್ಲಿ, "ನನ್ನನ್ನು ನೆನಪಿಡಿ" ಚೆಕ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಪರಿಶೀಲಿಸದ ಬಳಕೆದಾರರನ್ನು ಲಾಗ್ ಔಟ್ ಮಾಡಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸಲು tzRemember ಕುಕೀ ನಿಯಂತ್ರಣ ಅಂಶವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಕುಕೀ ಕಾಣೆಯಾಗಿದೆ (ಬ್ರೌಸರ್ ಮರುಪ್ರಾರಂಭದ ಕಾರಣ) ಮತ್ತು ಸಂದರ್ಶಕರು "ನನ್ನನ್ನು ನೆನಪಿಡಿ" ಆಯ್ಕೆಯನ್ನು ಪರಿಶೀಲಿಸದಿದ್ದರೆ, ನಾವು ಸೆಶನ್ ಅನ್ನು ಅಳಿಸುತ್ತೇವೆ.

ಸೆಷನ್ ಸ್ವತಃ ಎರಡು ವಾರಗಳವರೆಗೆ ಸಕ್ರಿಯವಾಗಿರುತ್ತದೆ (ಸೆಶನ್_ಸೆಟ್_ಕುಕೀ_ಪ್ಯಾರಮ್ಸ್ ಪ್ಯಾರಾಮೀಟರ್‌ನಲ್ಲಿ ಹೊಂದಿಸಿದಂತೆ).

ಮತ್ತು ಇಲ್ಲಿ demo.php ಎರಡನೇ ಭಾಗವಾಗಿದೆ.

ಇಲ್ಲದಿದ್ದರೆ($_POST["submit"]=="ನೋಂದಣಿ")
{
// ವಿನಂತಿಯನ್ನು ನೋಂದಣಿ ಫಾರ್ಮ್‌ನಿಂದ ಕಳುಹಿಸಿದರೆ
$err = ಅರೇ();
if(strlen($_POST["ಬಳಕೆದಾರಹೆಸರು"])32)
{
$err="ಬಳಕೆದಾರರ ಹೆಸರು 3 ಮತ್ತು 32 ಅಕ್ಷರಗಳ ನಡುವೆ ಇರಬೇಕು!";
}
if(preg_match("/[^a-z0-9\-\_\.]+/i",$_POST["ಬಳಕೆದಾರಹೆಸರು"]))
{
$err="ಬಳಕೆದಾರಹೆಸರು ಅಮಾನ್ಯ ಅಕ್ಷರಗಳನ್ನು ಹೊಂದಿದೆ!";
}
ವೇಳೆ(!ಚೆಕ್ಇಮೇಲ್($_POST["ಇಮೇಲ್"]))
{
$err="ನಿಮ್ಮ ಇಮೇಲ್ ವಿಳಾಸತಪ್ಪು!";
}
ವೇಳೆ(!ಎಣಿಕೆ($ಎರ್))
{
// ಯಾವುದೇ ದೋಷಗಳಿಲ್ಲದಿದ್ದರೆ
$pass = substr(md5($_SERVER["REMOTE_ADDR"].microtime().rand(1.100000)),0.6);
// ಯಾದೃಚ್ಛಿಕ ಗುಪ್ತಪದವನ್ನು ರಚಿಸಿ
$_POST["ಇಮೇಲ್"] = mysql_real_escape_string($_POST["ಇಮೇಲ್"]);
$_POST["ಬಳಕೆದಾರಹೆಸರು"] = mysql_real_escape_string($_POST["ಬಳಕೆದಾರಹೆಸರು"]);
// ಡೇಟಾವನ್ನು ತಯಾರಿಸಿ
mysql_query(" tz_members INSERT INTO (usr,pass,email,regIP,dt)
ಮೌಲ್ಯಗಳನ್ನು(
"".$_POST["ಬಳಕೆದಾರಹೆಸರು"]."",
"".md5($pass).",
"".$_POST["ಇಮೇಲ್"]"",
"".$_SERVER["REMOTE_ADDR"]."",
ಈಗ()
)");
if(mysql_affected_rows($link)==1)
{
send_mail("demo-test@site",
$_POST["ಇಮೇಲ್"],
"ನೋಂದಣಿ ವ್ಯವಸ್ಥೆಯ ಪ್ರದರ್ಶನ - ಪಾಸ್ವರ್ಡ್ ಉತ್ಪಾದನೆ",
"ನಿಮ್ಮ ಗುಪ್ತಪದ: ".$pass);
$_SESSION["msg"]["reg-success"]="ನಿಮ್ಮ ಹೊಸ ಪಾಸ್‌ವರ್ಡ್‌ನೊಂದಿಗೆ ನಾವು ನಿಮಗೆ ಇಮೇಲ್ ಕಳುಹಿಸಿದ್ದೇವೆ!";
}
ಬೇರೆ $err="ಈ ಬಳಕೆದಾರಹೆಸರು ಈಗಾಗಲೇ ಬಳಕೆಯಲ್ಲಿದೆ!";
}
ವೇಳೆ (ಎಣಿಕೆ ($ ತಪ್ಪು))
{
$_SESSION["msg"]["reg-err"] = implode("
",$ ತಪ್ಪು);
}
ಹೆಡರ್("ಸ್ಥಳ: demo.php");
ನಿರ್ಗಮಿಸಿ;
}
$ ಸ್ಕ್ರಿಪ್ಟ್ = "";
ವೇಳೆ($_SESSION["ಸಂದೇಶ"])
{
// ಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡಿಂಗ್ ಪುಟದಲ್ಲಿ ಸ್ಲೈಡಿಂಗ್ ಫಲಕವನ್ನು ತೋರಿಸುತ್ತದೆ
$script = "

$(ಫಂಕ್ಷನ್())(
$("div#panel").ಶೋ();
$("#ಟಾಗಲ್ ಎ").ಟಾಗಲ್();
});
";
}

ನಾವು ಎಲ್ಲಾ ಡಿಫೈನ್ ಮಾಡಿದ ದೋಷಗಳನ್ನು $err ಅರೇಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತೇವೆ, ಅದನ್ನು ನಂತರ $_SESSION ವೇರಿಯೇಬಲ್‌ಗೆ ನಿಯೋಜಿಸಲಾಗುತ್ತದೆ. ಈ ರೀತಿಯಾಗಿ, ಬ್ರೌಸರ್ ಅನ್ನು ಮರುನಿರ್ದೇಶಿಸಿದ ನಂತರ ಅದರ ಪ್ರವೇಶವನ್ನು ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.

ಫಾರ್ಮ್ ಅನ್ನು ಸಲ್ಲಿಸಿದಾಗ ಅಥವಾ ಮುಂದಿನ ಬಾರಿ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ ಡೇಟಾವನ್ನು ಈಗಾಗಲೇ ಸಲ್ಲಿಸಲಾಗಿದೆ ಎಂದು ಕೆಲವು ಸೈಟ್‌ಗಳು ಎಚ್ಚರಿಕೆಯನ್ನು ಪಡೆಯಬಹುದು. ಇದು ಸಮಸ್ಯೆಯಾಗಿರಬಹುದು, ಏಕೆಂದರೆ ಇದು ನಕಲಿ ನೋಂದಣಿಗಳಿಗೆ ಮತ್ತು ಸರ್ವರ್‌ನಲ್ಲಿ ಅನಗತ್ಯ ಲೋಡ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಬ್ರೌಸರ್ ಅನ್ನು ಅದೇ ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸುವ ಮೂಲಕ ದೋಷವನ್ನು ತಡೆಗಟ್ಟಲು ನಾವು ಹೆಡರ್ ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಫಾರ್ಮ್ ವಿನಂತಿ ಎಂದು ಬ್ರೌಸರ್ ಗುರುತಿಸದೆಯೇ ಪುಟದ ವೀಕ್ಷಣೆಯನ್ನು ನವೀಕರಿಸುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ, ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಲಾಗಿದೆ ಮತ್ತು ಯಾವುದೇ ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸಲಾಗುವುದಿಲ್ಲ.

ಆದರೆ ಪತ್ತೆಯಾದ ಎಲ್ಲಾ ದೋಷಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ನಾವು $_SESSION ಅನ್ನು ಬಳಸುತ್ತಿರುವುದರಿಂದ, ಬಳಕೆದಾರರಿಗೆ ದೋಷವನ್ನು ತೋರಿಸಿದ ತಕ್ಷಣ ನಾವು ಎಲ್ಲಾ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಮರುಹೊಂದಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ಇಲ್ಲದಿದ್ದರೆ ಅದು ಪ್ರತಿ ಪುಟ ವೀಕ್ಷಣೆಯಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲ್ಪಡುತ್ತದೆ.

ಸಹ ಬಳಸಲಾಗಿದೆ ಹೆಚ್ಚುವರಿ ಸ್ಕ್ರಿಪ್ಟ್, ಇದು ಡೌನ್‌ಲೋಡ್ ಪುಟದಲ್ಲಿ ಬಾರ್ ಅನ್ನು ತೋರಿಸುತ್ತದೆ ಇದರಿಂದ ಸಂದೇಶವು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸುತ್ತದೆ.

ಸ್ಲೈಡಿಂಗ್ ಫಲಕವು ತನ್ನದೇ ಆದ ಶೈಲಿಗಳ ಫೈಲ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. ಆದ್ದರಿಂದ ನಾವು ಮಾಡಬೇಕಾಗಿರುವುದು ನಮ್ಮ ಪುಟಕ್ಕೆ ಒಂದು ಶೈಲಿಯನ್ನು ರಚಿಸುವುದು.

ಸ್ಲೈಡಿಂಗ್ ಫಲಕವು ತನ್ನದೇ ಆದ jQuery ಫೈಲ್ ಅನ್ನು ಹೊಂದಿದೆ.

ಮೊದಲ ಸಾಲಿನಲ್ಲಿ Google CDN ನಿಂದ jQuery ಲೈಬ್ರರಿಯನ್ನು ಒಳಗೊಂಡಿದೆ. ಮುಂದೆ ಪಾರದರ್ಶಕ ಅಂಶಗಳಿಗಾಗಿ IE6 PNG ಪ್ಯಾಚ್ ಬರುತ್ತದೆ. ನಂತರ ಪ್ಯಾನಲ್ ಸ್ಕ್ರಿಪ್ಟ್ ಆನ್ ಆಗಿದೆ

$ ಸ್ಕ್ರಿಪ್ಟ್ ವೇರಿಯಬಲ್ ಅಗತ್ಯವಿದ್ದರೆ ಲೋಡಿಂಗ್ ಪುಟದಲ್ಲಿ ಫಲಕವನ್ನು ತೋರಿಸುತ್ತದೆ.

IN ಟ್ವಿಟರ್ ಜಾಲಗಳುಪುಟವು ಸ್ವಚ್ಛ ಮತ್ತು ಸರಳ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದನ್ನು ನೀವು ನೋಡಬಹುದು. ಪುಟದ ಮೇಲಿನ ಬಲ ಭಾಗದಲ್ಲಿ ನೋಡಿ, ಅಲ್ಲಿ ನೀವು ಸಿಸ್ಟಮ್‌ಗೆ ಲಾಗ್ ಇನ್ ಮಾಡಲು ಬಟನ್ ಅನ್ನು ನೋಡುತ್ತೀರಿ, ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ನೀವು ಡೇಟಾವನ್ನು ಭರ್ತಿ ಮಾಡಲು ಫಾರ್ಮ್‌ಗಳನ್ನು ನೋಡುತ್ತೀರಿ. ನಿಮ್ಮ ಸ್ವಂತ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಇದೇ ರೀತಿಯ ಪರಿಣಾಮವನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ಇಂದು ನಾವು ನಿಮಗೆ ಹೇಳುತ್ತೇವೆ. ಇದು ವಾಸ್ತವವಾಗಿ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಇದು ಪುಟದಲ್ಲಿ ಜಾಗವನ್ನು ಉಳಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಸಂದರ್ಶಕರಿಗೆ ಸೌಕರ್ಯದ ಭಾವನೆಯನ್ನು ಸೇರಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಈ ಇಡೀ ಸಿಸ್ಟಮ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಈ ಲೇಖನದಲ್ಲಿ ನಾವು ನಿಮಗೆ ಹಂತ ಹಂತವಾಗಿ ಹೇಳುತ್ತೇವೆ ಮತ್ತು jQuery ಕಲಿಯಲು ಬಯಸುವವರಿಗೆ ಈ ಮಾರ್ಗದರ್ಶಿ ಸಹ ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. ಮುಂದೆ!

HTML ಕೋಡ್

ಮೊದಲು ನೀವು HTML ಕೋಡ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಬೇಕು. HTML ಕೋಡ್ ತುಂಬಾ ಸರಳವಾಗಿದೆ - ಇದು "a" ಟ್ಯಾಗ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಇದು "ಫೀಲ್ಡ್ಸೆಟ್" ಟ್ಯಾಗ್ನೊಂದಿಗೆ ಹೋಗುತ್ತದೆ, ಅದರ ಕಾರಣದಿಂದಾಗಿ ಫಾರ್ಮ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ಇದನ್ನು ನಿಮ್ಮ ಕೋಡ್‌ಗೆ ನಕಲಿಸಿ ಹೊಸ ಪುಟ:

ಖಾತೆ ಹೊಂದಿರುವಿರಾ? ಸೈನ್ ಇನ್ ಮಾಡಿ


ಬಳಕೆದಾರ ಹೆಸರು ಅಥವಾ ಇಮೇಲ್

ಗುಪ್ತಪದ

ನನ್ನನ್ನು ನೆನಪಿನಲ್ಲಿ ಇಡು

ನಿಮ್ಮ ಗುಪ್ತಪದವನ್ನು ಮರೆತಿರುವಿರಾ?

ನಿಮ್ಮ ಬಳಕೆದಾರ ಹೆಸರನ್ನು ಮರೆತಿರುವಿರಾ?

ನಿಮಗೆ ಅಗತ್ಯವಿರುತ್ತದೆ CSS ಬಳಸಿಅಧಿಕಾರ ಬಟನ್ ಮತ್ತು ಲಾಗಿನ್ ಫಾರ್ಮ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು. ಕೆಳಗಿನ ಕೋಡ್ ನಿಖರವಾಗಿ ಈ ಕಾರ್ಯವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ಈ ಕೋಡ್ ಅನ್ನು ನಿಮ್ಮ css ಫೈಲ್‌ಗೆ ನಕಲಿಸಿ ಅಥವಾ ನೀವು ಶೈಲಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ನಿಮ್ಮ HTML ಕೋಡ್‌ಗೆ ಸೇರಿಸಿ. ಈ ಕೋಡ್‌ಗಳು ಲಾಗಿನ್ ಬಟನ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ.

#ಧಾರಕ (
ಅಗಲ: 780px;
ಅಂಚು: 0 ಸ್ವಯಂ;
ಸ್ಥಾನ: ಸಂಬಂಧಿ;
}

#ವಿಷಯ (
ಅಗಲ: 520px;
ನಿಮಿಷ-ಎತ್ತರ:500px;
}
a:link, a:visited (
ಬಣ್ಣ:#27b;
ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ;
}
a:ಹೂವರ್ (
ಪಠ್ಯ-ಅಲಂಕಾರ:ಅಂಡರ್ಲೈನ್;
}
ಒಂದು img (
ಗಡಿ ಅಗಲ:0;
}
#ಟಾಪ್ನಾವ್ (
ಪ್ಯಾಡಿಂಗ್:10px 0px 12px;
ಫಾಂಟ್-ಗಾತ್ರ: 11px;
ಸಾಲು-ಎತ್ತರ:23px;
ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಬಲ;
}
#topnav a.signin (
ಹಿನ್ನೆಲೆ:#88bbd4;
ಪ್ಯಾಡಿಂಗ್: 4px 6px 6px;
ಪಠ್ಯ-ಅಲಂಕಾರ: ಯಾವುದೂ ಇಲ್ಲ;
ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;
ಬಣ್ಣ:#fff;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
ಗಡಿ ತ್ರಿಜ್ಯ:4px;
*ಹಿನ್ನೆಲೆ:ಪಾರದರ್ಶಕ url("images/signin-nav-bg-ie.png") ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ 0 0;
*ಪ್ಯಾಡಿಂಗ್: 4px 12px 6px;
}
#topnav a.signin: hover (
ಹಿನ್ನೆಲೆ:#59B;
*ಹಿನ್ನೆಲೆ:ಪಾರದರ್ಶಕ url("images/signin-nav-bg-hover-ie.png") ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ 0 0;
*ಪ್ಯಾಡಿಂಗ್: 4px 12px 6px;
}
#topnav a.signin, #topnav a.signin: hover (
*ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ:0 3px!ಪ್ರಮುಖ;
}

a.signin(
ಸ್ಥಾನ:ಸಂಬಂಧಿ;
ಅಂಚು-ಎಡ:3px;
}
a.signin span(
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ:url("ಚಿತ್ರಗಳು/ಟಾಗಲ್_ಡೌನ್_ಲೈಟ್.png");
ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ;
ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ:100% 50%;
ಪ್ಯಾಡಿಂಗ್:4px 16px 6px 0;
}
#topnav a.menu-open (
ಹಿನ್ನೆಲೆ:#ddeef6!ಪ್ರಮುಖ;
ಬಣ್ಣ:#666!ಪ್ರಮುಖ;
ರೂಪರೇಖೆ: ಯಾವುದೂ ಇಲ್ಲ;
}
#ಸಣ್ಣ_ಸೈನ್ಅಪ್ (
ಪ್ರದರ್ಶನ:ಇನ್ಲೈನ್;
ತೇಲು: ಯಾವುದೂ ಇಲ್ಲ;
ಸಾಲು-ಎತ್ತರ:23px;
ಅಂಚು:25px 0 0;
ಅಗಲ: 170px;
}
a.signin.menu-open span (
ಹಿನ್ನೆಲೆ-ಚಿತ್ರ:url("images/toggle_up_dark.png");
ಬಣ್ಣ:#789;
}

ತದನಂತರ ಲಾಗಿನ್ ಫಾರ್ಮ್ನ ವ್ಯಾಖ್ಯಾನ ಬರುತ್ತದೆ:

#ಸೈನ್ಇನ್_ಮೆನು (
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ-ಮೇಲ್ಭಾಗ: 5px;
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ-ಕೆಳಭಾಗ: 5px;
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ-ಕೆಳಭಾಗ: 5px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ಮೇಲಿನ-ಎಡ-ತ್ರಿಜ್ಯ: 5px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ಕೆಳಗೆ-ಎಡ-ತ್ರಿಜ್ಯ: 5px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ಕೆಳಗೆ-ಬಲ-ತ್ರಿಜ್ಯ: 5px;
ಪ್ರದರ್ಶನ: ಯಾವುದೂ ಇಲ್ಲ;
ಹಿನ್ನೆಲೆ-ಬಣ್ಣ:#ddeef6;
ಸ್ಥಾನ:ಸಂಪೂರ್ಣ;
ಅಗಲ: 210px;
z-ಸೂಚ್ಯಂಕ:100;
ಗಡಿ:1px ಪಾರದರ್ಶಕ;
ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ:ಎಡ;
ಪ್ಯಾಡಿಂಗ್:12px;
ಮೇಲ್ಭಾಗ: 24.5px;
ಬಲ: 0px;
ಅಂಚು-ಮೇಲ್ಭಾಗ: 5px;
ಅಂಚು-ಬಲ: 0px;
*ಅಂಚು-ಬಲ: -1px;
ಬಣ್ಣ:#789;
ಫಾಂಟ್-ಗಾತ್ರ: 11px;
}

#signin_menu input, #signin_menu input (
ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್;
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
ಗಡಿ:1px ಘನ #ACE;
ಫಾಂಟ್-ಗಾತ್ರ: 13px;
ಅಂಚು:0 0 5px;
ಪ್ಯಾಡಿಂಗ್: 5px;
ಅಗಲ:203px;
}
#signin_menu p (
ಅಂಚು:0;
}
#signin_menu a (
ಬಣ್ಣ:#6AC;
}
#signin_menu ಲೇಬಲ್ (
ಫಾಂಟ್-ತೂಕ:ಸಾಮಾನ್ಯ;
}
#signin_menu ಪು.ನೆನಪಿಡಿ (
ಪ್ಯಾಡಿಂಗ್:10px 0;
}
#signin_menu p.ಮರೆತಿದೆ, #signin_menu p.complete (
ಸ್ಪಷ್ಟ:ಎರಡೂ;
ಅಂಚು:5px 0;
}
#signin_menu p a (
ಬಣ್ಣ:#27B!ಪ್ರಮುಖ;
}
#ಸೈನ್ಇನ್_ಸಲ್ಲಿಸು (
-moz-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
-ವೆಬ್ಕಿಟ್-ಬಾರ್ಡರ್-ತ್ರಿಜ್ಯ: 4px;
ಹಿನ್ನೆಲೆ:#39d url("images/bg-btn-blue.png") ಪುನರಾವರ್ತಿಸಿ-x ಸ್ಕ್ರಾಲ್ 0 0;
ಗಡಿ:1px ಘನ #39D;
ಬಣ್ಣ:#fff;
ಪಠ್ಯ-ನೆರಳು:0 -1px 0 #39d;
ಪ್ಯಾಡಿಂಗ್: 4px 10px 5px;
ಫಾಂಟ್-ಗಾತ್ರ: 11px;
ಅಂಚು:0 5px 0 0;
ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ;
}
#signin_submit::-moz-focus-inner (
ಪ್ಯಾಡಿಂಗ್: 0;
ಗಡಿ:0;
}
#ಸೈನ್ಇನ್_ಸಲ್ಲಿಸು:ಹೋವರ್, #ಸೈನ್ಇನ್_ಸಲ್ಲಿಸು:ಫೋಕಸ್ (
ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: 0 -5px;
ಕರ್ಸರ್:ಪಾಯಿಂಟರ್;
}

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಸಮಯ ಇದು

ಅದು ತೋರುತ್ತದೆ, HTML ಕೋಡ್‌ಗಳುಮತ್ತು ಸಿಎಸ್ಎಸ್ ಸಾಕಷ್ಟು ಸಂಕೀರ್ಣ ಮತ್ತು ಗೊಂದಲಮಯವಾಗಿದೆ, ಆದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಎಲ್ಲವೂ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿ, ಲಾಗಿನ್ ಫಾರ್ಮ್‌ನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೂ ಸಹ, ನೀವು ಲಾಗಿನ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಫಾರ್ಮ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ಮರೆಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

$(ಡಾಕ್ಯುಮೆಂಟ್).ಸಿದ್ಧ(ಫಂಕ್ಷನ್() (

$(".signin").ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್(ಇ) (
e.preventDefault();
$("fieldset#signin_menu").toggle();
$(".signin").toggleClass("menu-open");
});

$("fieldset#signin_menu").mouseup(ಫಂಕ್ಷನ್() (
ಸುಳ್ಳು ಹಿಂತಿರುಗಿ
});
$(ಡಾಕ್ಯುಮೆಂಟ್).ಮೌಸ್ಅಪ್(ಫಂಕ್ಷನ್(ಇ) (
if($(e.target).parent("a.signin").length==0) (
$(".signin").removeClass("menu-open");
$("fieldset#signin_menu").hide();
}
});

});

ಮೇಲೆ ಪ್ರಸ್ತುತಪಡಿಸಿದ ಕೋಡ್ ಪ್ರಕಾರ, ಸಂದರ್ಶಕರು ಲಾಗಿನ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ದಿ ನವೀನ ಲಕ್ಷಣಗಳು. ಮೊದಲಿಗೆ, ಲಾಗಿನ್ ಫಾರ್ಮ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ ("ಫೈಲ್‌ಸೆಟ್" ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಸುತ್ತುವರಿದಿದೆ), ನಂತರ ".signin" ವರ್ಗದಲ್ಲಿ ಸುತ್ತುವರಿದ ಲಿಂಕ್, ಮತ್ತೊಂದು "ಮೆನು-ಓಪನ್" ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತದೆ, ಅದರ ಕಾರಣದಿಂದಾಗಿ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ.

ಈ ಕೋಡ್‌ನಲ್ಲಿನ ಮತ್ತೊಂದು ಘಟನೆಯೆಂದರೆ, ಸಂದರ್ಶಕರು ಲಾಗಿನ್ ಫಾರ್ಮ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಅಲ್ಲ, ಆದರೆ ಎಲ್ಲೋ ಪುಟದಲ್ಲಿ, ಫಾರ್ಮ್ ಸ್ವತಃ ಮುಚ್ಚುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, "ಮೆನು-ತೆರೆದ" ವರ್ಗವನ್ನು ".signin" ವರ್ಗದೊಂದಿಗಿನ ಲಿಂಕ್‌ನಿಂದ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಅದರ ಮೂಲ ಹಿನ್ನೆಲೆ ಚಿತ್ರಕ್ಕೆ ಹಿಂತಿರುಗಿಸುತ್ತದೆ.

ಸಲಹೆಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ?

$(ಫಂಕ್ಷನ್() (
$("#forgot_username_link").tipsy((ಗುರುತ್ವಾಕರ್ಷಣೆ: "w"));
});

ನಾವು ಸಾಮಾನ್ಯವಾಗಿ jQuery ಪ್ಲಗಿನ್ ಅನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ - ಟಿಪ್ಸಿ. ಟೂಲ್‌ಟಿಪ್‌ನ ವಿಷಯವೆಂದರೆ ಲಿಂಕ್‌ಗೆ ಸಂಬಂಧಿಸಿದ "ಶೀರ್ಷಿಕೆ" ಗುಣಲಕ್ಷಣದಲ್ಲಿ ಬರೆಯಲಾಗಿದೆ. ಪೂರ್ವ, ಪಶ್ಚಿಮ, ದಕ್ಷಿಣ ಅಥವಾ ಉತ್ತರಕ್ಕೆ ಸಂಬಂಧಿಸಿದಂತೆ ನೀವು ಟೂಲ್‌ಟಿಪ್‌ನ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸಬಹುದು. ಮೇಲಿನ ಕೋಡ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ "ಗುರುತ್ವಾಕರ್ಷಣೆ" ನಿಯತಾಂಕವನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಈ ಪ್ಲಗಿನ್‌ಗೆ ಮೀಸಲಾಗಿರುವ ವೆಬ್‌ಸೈಟ್‌ಗೆ ನಾವು ನಿಮಗೆ ಲಿಂಕ್ ಅನ್ನು ಒದಗಿಸುತ್ತೇವೆ, ಅಲ್ಲಿ ನೀವು ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಹೆಚ್ಚು ವಿವರವಾಗಿ ಅಧ್ಯಯನ ಮಾಡಬಹುದು ಮತ್ತು ಪ್ಲಗಿನ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು. ...

ಅಂತಿಮವಾಗಿ

ಈ ಲೇಖನದಿಂದ ನೀವು ಎಲ್ಲಾ ಕೋಡ್ ಅನ್ನು ನಕಲಿಸಿದ್ದರೆ, ದಯವಿಟ್ಟು ಫೋಲ್ಡರ್ ರಚನೆಯನ್ನು ಬದಲಾಯಿಸಬೇಡಿ. ನೀವು ಅದನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಕೋಡ್ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ. ಈ ಕೋಡ್ jQuery ಬಳಸಿಕೊಂಡು ಲಾಗಿನ್ ಡ್ರಾಪ್‌ಡೌನ್ ಫಾರ್ಮ್ ಅನ್ನು ರಚಿಸುವ ಒಂದು ಉದಾಹರಣೆಯಾಗಿದೆ. ನಿಮ್ಮ ಅಭ್ಯಾಸಕ್ಕೆ ಶುಭವಾಗಲಿ!

ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡದೆಯೇ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸುವ ಸಾಮರ್ಥ್ಯದೊಂದಿಗೆ ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್‌ಗಳ ಕಾರ್ಯಗಳೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ವಿಂಡೋ ಕಾಣಿಸಿಕೊಂಡ ನಂತರ, ಬಳಕೆದಾರರು ಸುಲಭವಾಗಿ ಒಂದರಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ, ಪಾಸ್ವರ್ಡ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಆಯ್ಕೆಯನ್ನು ಆರಿಸಿ.
ಸಣ್ಣ ಆದರೆ ಅತ್ಯಂತ ಕ್ರಿಯಾತ್ಮಕ jQuery ಪ್ಲಗಿನ್ ಮತ್ತು ಹೊಸ CSS3 ಮಾನದಂಡಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಇವೆಲ್ಲವನ್ನೂ ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು ಎಂಬುದನ್ನು ಇಂದು ನಾವು ನೋಡುತ್ತೇವೆ.

ನಿಮ್ಮ ಸೈಟ್‌ನ ಪ್ರತಿ ಪುಟದಲ್ಲಿ ಬಳಕೆದಾರರಿಗೆ ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್‌ಗಳನ್ನು ಲಭ್ಯವಾಗುವಂತೆ ಮಾಡಲು ನೀವು ಬಯಸಿದರೆ ಈ ವಿಧಾನವು ಉಪಯುಕ್ತವಾಗಿರುತ್ತದೆ. ಸೈಟ್‌ಗೆ ಲಾಗ್ ಇನ್ ಮಾಡುವಾಗ ಅಥವಾ ನೋಂದಾಯಿಸುವಾಗ, ಬಳಕೆದಾರರನ್ನು ಮತ್ತೊಂದು ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲಾಗುವುದಿಲ್ಲ ಮತ್ತು ಎಲ್ಲವನ್ನೂ ನಿರ್ವಹಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಅಗತ್ಯ ಕ್ರಮಗಳು"ಚೆಕ್ಔಟ್ ಅನ್ನು ಬಿಡದೆಯೇ", ಒಂದು ಪುಟದಲ್ಲಿ ಎಲ್ಲವೂ.

ಅಲಂಕಾರ ಕಾಣಿಸಿಕೊಂಡ CSS3 ಅನ್ನು ಬಳಸಿಕೊಂಡು ಪಾಪ್-ಅಪ್ ಫಾರ್ಮ್‌ಗಳನ್ನು ಅಳವಡಿಸಲಾಗಿದೆ, ಪ್ಲಗಿನ್‌ನ ಒಟ್ಟಾರೆ ತೂಕವು ದೊಡ್ಡದಾಗಿರುವುದಿಲ್ಲ, ಮೋಡಲ್ ವಿಂಡೋದ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಲೋಡ್ ಮಾಡುವಿಕೆಯು ಬಹುತೇಕ ವಿಳಂಬವಿಲ್ಲದೆ ಸಂಭವಿಸುತ್ತದೆ.
100% ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್, ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ಮಾದರಿ ವಿಂಡೋದ ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಬಳಕೆದಾರರ ಸಾಧನಗಳ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸಲಾಗಿದೆ.

ನಾವು ಉದಾಹರಣೆಯನ್ನು ನೋಡಿದ್ದೇವೆ, ಈಗ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಲು ಮಾದರಿ ವಿಂಡೋ ಮತ್ತು ಫಾರ್ಮ್‌ಗಳ ಎಲ್ಲಾ ಮುಖ್ಯ ಘಟಕಗಳನ್ನು ವಿವರವಾಗಿ ನೋಡೋಣ.
ಲಾಗಿನ್ ಮತ್ತು ನೋಂದಣಿ ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ಪಾಪ್-ಅಪ್ ವಿಂಡೋವನ್ನು ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ, ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದಾದ jQuey ಪ್ಲಗಿನ್ ಮತ್ತು ರಚಿಸಲಾದ CSS ಶೈಲಿಗಳಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಈ ಎಲ್ಲಾ ಪರಿಕರಗಳನ್ನು ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಸಂಪರ್ಕಿಸುವ ಅಗತ್ಯವಿದೆ. ಕೊನೆಯದು ಪ್ರಸ್ತುತ ಆವೃತ್ತಿ jQuey ಲೈಬ್ರರಿಗಳನ್ನು ನೇರವಾಗಿ Google ನಿಂದ ಸಂಪರ್ಕಿಸಬಹುದು; ಪ್ಲಗಿನ್ ಫೈಲ್ main.js ಮತ್ತು ರಚಿತವಾದ style.css ಶೈಲಿಗಳ ಸಿದ್ಧ ಸೆಟ್ ಅನ್ನು ಆರ್ಕೈವ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು.
ಮುಚ್ಚುವ ಟ್ಯಾಗ್‌ನ ಮೊದಲು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬರೆಯಲಾಗಿದೆ, ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳುನಿಮ್ಮ ಸೈಟ್‌ನ styles.css ಫೈಲ್‌ಗೆ ನಕಲಿಸಬಹುದು ಮತ್ತು ಸೇರಿಸಬಹುದು.

ಡಾರ್ಕ್ ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಮಾಡಲ್ ವಿಂಡೋಗಳ ಮೂಲ ಕಂಟೇನರ್ ಮತ್ತು ನಿಯಂತ್ರಣಗಳೊಂದಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ರೂಪಗಳನ್ನು ಪುಟದ ದೇಹದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಹೆಚ್ಚಿನ ತಿಳುವಳಿಕೆಗಾಗಿ, ನಾನು ವಲಯಗಳನ್ನು ಪ್ರತ್ಯೇಕಿಸಿದೆ ಮತ್ತು ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿದೆ. ಎಲ್ಲಾ ವಿನ್ಯಾಸ ಅಂಶಗಳನ್ನು ಕೆಲವು ತರಗತಿಗಳ ಮೂಲಕ CSS ಗೆ ಬಿಗಿಯಾಗಿ ಲಿಂಕ್ ಮಾಡಲಾಗಿದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಸೈಟ್‌ಗಳ ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಫಾರ್ಮ್‌ಗಳ ವಿನ್ಯಾಸವನ್ನು ಬದಲಾಯಿಸುವುದು ಕಷ್ಟವೇನಲ್ಲ.

• ಪ್ರವೇಶ
• ನೋಂದಣಿ

ಇ-ಮೇಲ್ ದೋಷ ಸಂದೇಶ ಇಲ್ಲಿದೆ!

ಗುಪ್ತಪದ ಮರೆಮಾಡಿಇಲ್ಲಿ ದೋಷ ಸಂದೇಶವಿದೆ!

ನನ್ನನ್ನು ನೆನಪಿನಲ್ಲಿ ಇಡು

ನಿಮ್ಮ ಗುಪ್ತಪದವನ್ನು ಮರೆತಿರುವಿರಾ?

ಇಲ್ಲಿ ಬಳಕೆದಾರಹೆಸರು ದೋಷ ಸಂದೇಶ!

ಇ-ಮೇಲ್ ದೋಷ ಸಂದೇಶ ಇಲ್ಲಿದೆ!

ಗುಪ್ತಪದ ಮರೆಮಾಡಿಇಲ್ಲಿ ದೋಷ ಸಂದೇಶವಿದೆ!

ನಾನು ಒಪ್ಪುತ್ತೇನೆ ನಿಯಮಗಳು

ನಿಮ್ಮ ಗುಪ್ತಪದವನ್ನು ಮರೆತಿರುವಿರಾ? ದಯವಿಟ್ಟು ನಿಮ್ಮ ಇಮೇಲ್ ವಿಳಾಸ ನಮೂದಿಸಿ. ಹೊಸ ಪಾಸ್‌ವರ್ಡ್ ರಚಿಸಲು ನೀವು ಲಿಂಕ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತೀರಿ.

ಇ-ಮೇಲ್ ದೋಷ ಸಂದೇಶ ಇಲ್ಲಿದೆ!

ಪ್ರವೇಶಕ್ಕೆ ಹಿಂತಿರುಗಿ

ಲೇಖಕರು ಜನಪ್ರಿಯ ಟೆಂಪ್ಲೇಟ್ ಮತ್ತು ಫಾರ್ಮ್ ನಿಯಂತ್ರಣಗಳನ್ನು ರಚಿಸಿದ್ದಾರೆ, ಸಮತಟ್ಟಾದ ಶೈಲಿ(ಫ್ಲಾಟ್), ಕನಿಷ್ಠೀಯತಾವಾದದ ಮೇಲೆ ಸ್ಪಷ್ಟವಾದ ಒತ್ತು. ಯಾವುದೇ ಅತಿರೇಕವಿಲ್ಲ, ಮಧ್ಯಮ ಪಾರದರ್ಶಕ ಕಪ್ಪಾಗಿಸುವ ಹಿನ್ನೆಲೆ, ಸುಲಭವಾಗಿ ಓದಬಹುದಾದ ಬಣ್ಣಗಳು, ಉತ್ತಮವಾಗಿ ಆಯ್ಕೆಮಾಡಿದ ಫಾಂಟ್ ಮತ್ತು ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳನ್ನು ಸೂಚಿಸಲು ಐಕಾನ್‌ಗಳು. ಬಳಸಿಕೊಂಡು ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳು, ನೀವು ಯಾವುದೇ ಫಾರ್ಮ್ ಅಂಶವನ್ನು ಸುಲಭವಾಗಿ ಮಾರ್ಪಡಿಸಬಹುದು.

ಸಿಡಿ-ಬಳಕೆದಾರ-ಮಾದರಿ (ಸ್ಥಾನ: ಸ್ಥಿರ; ಮೇಲ್ಭಾಗ: 0; ಎಡ: 0; ಅಗಲ: 100%; ಎತ್ತರ: 100%; ಹಿನ್ನೆಲೆ: rgba (52, 54, 66, 0.9); z-ಸೂಚ್ಯಂಕ: 3; ಓವರ್‌ಫ್ಲೋ-ವೈ : ಸ್ವಯಂ; ಕರ್ಸರ್: ಪಾಯಿಂಟರ್; ಗೋಚರತೆ: ಮರೆಮಾಡಲಾಗಿದೆ; ಅಪಾರದರ್ಶಕತೆ: 0; -ವೆಬ್‌ಕಿಟ್-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.3 ಸೆ 0, ಗೋಚರತೆ 0 0.3 ಸೆ; -moz-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.3 ಸೆ 0, ಗೋಚರತೆ 0 0.3 ಸೆ; ಪರಿವರ್ತನೆ: 0.3 ಅಪಾರದರ್ಶಕತೆ 0, ಗೋಚರತೆ 0 0.3s; ) .cd-user-modal.is-visible (ಗೋಚರತೆ: ಗೋಚರ; ಅಪಾರದರ್ಶಕತೆ: 1; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.3s 0, ಗೋಚರತೆ 0 0; -moz-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.3s 0 , ಗೋಚರತೆ 0 0; ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.3s 0, ಗೋಚರತೆ 0 0; ) .cd-user-modal.is-visible .cd-user-modal-container ( -webkit-transform: translateY(0); -moz-transform : translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); TranslateY(0); ) .cd-user-modal-container (ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಅಗಲ: 90 % ); -ms-transform: translateY(-30px); -o-ರೂಪಾಂತರ: translateY(-30px); ರೂಪಾಂತರ: translateY (-30px); -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: -ವೆಬ್ಕಿಟ್-ರೂಪಾಂತರ; -moz-transition-property: -moz-transform; ಪರಿವರ್ತನೆ-ಆಸ್ತಿ: ರೂಪಾಂತರ; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ-ಅವಧಿ: 0.3ಸೆ; -moz-ಪರಿವರ್ತನೆ-ಅವಧಿ: 0.3ಸೆ; ಪರಿವರ್ತನೆಯ ಅವಧಿ: 0.3 ಸೆ; ) .cd-user-modal-container .cd-switcher:ನಂತರ (ವಿಷಯ: ""; ಪ್ರದರ್ಶನ: ಕೋಷ್ಟಕ; ಸ್ಪಷ್ಟ: ಎರಡೂ; ) .cd-user-modal-container .cd-switcher li (ಅಗಲ: 50%; ಫ್ಲೋಟ್ : left; text-align: centre; ) .cd-user-modal-container .cd-switcher li:first-child a ( border-radius: .25em 0 0 0; ) .cd-user-modal-container .cd -switcher li:last-child a ( border-radius: 0 .25em 0 0; ) .cd-user-modal-container .cd-switcher a (ಡಿಸ್ಪ್ಲೇ: ಬ್ಲಾಕ್; ಅಗಲ: 100%; ಎತ್ತರ: 50px; ಸಾಲು-ಎತ್ತರ : 50px; ಹಿನ್ನೆಲೆ: #d2d8d8; ಬಣ್ಣ: #809191; .cd-user-modal-container .cd-switcher a.selected ( ಹಿನ್ನೆಲೆ: #FFF; ಬಣ್ಣ: #505260; ) @ಮಾಧ್ಯಮ ಮಾತ್ರ ಪರದೆ ಮತ್ತು (ನಿಮಿಷ ಅಗಲ : 600px) (.cd-user-modal-container (margin: 4em auto; ) .cd-user-modal-container .cd-switcher a (height: 70px; line-height: 70px; ) .cd-form ( ಪ್ಯಾಡಿಂಗ್: 1.4em; ) .ಸಿಡಿ-ಫಾರ್ಮ್ .ಫೀಲ್ಡ್‌ಸೆಟ್ (ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಅಂಚು: 1.4ಎಮ್ 0; ) .ಸಿಡಿ-ಫಾರ್ಮ್ .ಫೀಲ್ಡ್‌ಸೆಟ್:ಮೊದಲ ಮಗು (ಮಾರ್ಜಿನ್-ಟಾಪ್: 0; ) .ಸಿಡಿ-ಫಾರ್ಮ್ .ಫೀಲ್ಡ್‌ಸೆಟ್:ಕೊನೆಯದು -ಚಿಲ್ಡ್ (ಅಂಚು-ಕೆಳಗೆ: 0;) .cd-ಫಾರ್ಮ್ ಲೇಬಲ್ (ಫಾಂಟ್-ಗಾತ್ರ: 14px; ಫಾಂಟ್ ಗಾತ್ರ: 0.875rem; ) .cd-form label.image-replace ( /* ಐಕಾನ್‌ನೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸಿ */ ಡಿಸ್‌ಪ್ಲೇ: ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: 15px; ಮೇಲ್ಭಾಗ: 50%; ಕೆಳಗೆ: ಸ್ವಯಂ; -ವೆಬ್‌ಕಿಟ್-ರೂಪಾಂತರ: ಅನುವಾದY(- 50%); -moz-ರೂಪಾಂತರ: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); ರೂಪಾಂತರ: translateY(-50%); ಎತ್ತರ : 20px; ಅಗಲ: 20px; ಓವರ್‌ಫ್ಲೋ: ಮರೆಮಾಡಲಾಗಿದೆ; ಪಠ್ಯ-ಇಂಡೆಂಟ್: 100%; ವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್; ಬಣ್ಣ: ಪಾರದರ್ಶಕ; ಪಠ್ಯ-ನೆರಳು: ಯಾವುದೂ ಇಲ್ಲ; ಹಿನ್ನೆಲೆ-ಪುನರಾವರ್ತನೆ: ಇಲ್ಲ-ಪುನರಾವರ್ತನೆ; ಹಿನ್ನೆಲೆ-ಸ್ಥಾನ: 50% 0; ) /* ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳಿಗಾಗಿ ಐಕಾನ್‌ಗಳು */ .cd-form label.cd-username ( ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url(". ./img/cd-icon-username.svg"); .cd-form label.cd-email (ಹಿನ್ನೆಲೆ-ಚಿತ್ರ: url("../img/cd-icon-email.svg"); ) .cd -form label.cd-password (background-image: url("../img/cd-icon-password.svg"); ) .cd-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ (ಅಂಚು: 0; ಪ್ಯಾಡಿಂಗ್: 0; ಗಡಿ-ತ್ರಿಜ್ಯ: 0.25 em; ) .cd-form input.full-width (width: 100%; ) .cd-form input.has-padding (ಪ್ಯಾಡಿಂಗ್: 12px 20px 12px 50px; ) .cd-form input.has-border (ಗಡಿ: 1px ಘನ #d2d8d8; -ವೆಬ್ಕಿಟ್-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -moz-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -ಎಂಎಸ್-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -o-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; ನೋಟ: ಯಾವುದೂ ಇಲ್ಲ; .cd-form input.has-border:focus (ಗಡಿ) -ಬಣ್ಣ: #343642; ಬಾಕ್ಸ್ ನೆರಳು: 0 0 5px rgba (52, 54, 66, 0.1); ಔಟ್‌ಲೈನ್: ಯಾವುದೂ ಇಲ್ಲ; ) .cd-form input.has-error ( ಗಡಿ: 1px ಘನ #d76666; ) .cd- ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ (/* ಮರೆಮಾಡು ಬಟನ್ */ ಪ್ಯಾಡಿಂಗ್-ಬಲ: 65px; ) .cd-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ (ಪ್ಯಾಡಿಂಗ್: 16px 0; ಕರ್ಸರ್: ಪಾಯಿಂಟರ್; ಹಿನ್ನೆಲೆ: #2f889a; ಬಣ್ಣ: #FFF; ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ; ಗಡಿ : ಯಾವುದೂ ಇಲ್ಲ; -ವೆಬ್ಕಿಟ್-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -moz-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -ms-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; -o-ಗೋಚರತೆ: ಯಾವುದೂ ಇಲ್ಲ; ನೋಟ: ಯಾವುದೂ ಇಲ್ಲ; .ನೋ-ಟಚ್ .ಸಿಡಿ-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್: ಹೋವರ್, .ನೋ-ಟಚ್ .ಸಿಡಿ-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್:ಫೋಕಸ್ (ಹಿನ್ನೆಲೆ: #3599ae; ಔಟ್‌ಲೈನ್: ಯಾವುದೂ ಇಲ್ಲ; ) .ಸಿಡಿ-ಫಾರ್ಮ್ .ಹೈಡ್-ಪಾಸ್‌ವರ್ಡ್ (ಪ್ರದರ್ಶನ: ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಬಲ: 0; ಮೇಲ್ಭಾಗ: 0; ಪ್ಯಾಡಿಂಗ್: 6px 15px; ಗಡಿ-ಎಡ: 1px ಘನ #d2d8d8; ಮೇಲ್ಭಾಗ: 50%; ಕೆಳಗೆ: ಸ್ವಯಂ; -ವೆಬ್‌ಕಿಟ್-ರೂಪಾಂತರ: ಭಾಷಾಂತರ Y(-50%); -moz- ರೂಪಾಂತರ: translateY(-50%); -ms-ರೂಪಾಂತರ: translateY(-50%); -o-ರೂಪಾಂತರ: translateY(-50%); ರೂಪಾಂತರ: translateY(-50%); ಫಾಂಟ್-ಗಾತ್ರ: 14px; ಫಾಂಟ್- ಗಾತ್ರ: 0.875rem; ಬಣ್ಣ: #343642; ) .cd-form .cd-error-message (ಪ್ರದರ್ಶನ: ಇನ್‌ಲೈನ್-ಬ್ಲಾಕ್; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: -5px; ಕೆಳಗೆ: -35px; ಹಿನ್ನೆಲೆ: rgba(215, 102, 102, 0.9); ಪ್ಯಾಡಿಂಗ್: .8em; z-ಸೂಚಿಕೆ: 2; ಬಣ್ಣ: #FFF; ಫಾಂಟ್-ಗಾತ್ರ: 13px; ಫಾಂಟ್-ಗಾತ್ರ: 0.8125rem; ಗಡಿ-ತ್ರಿಜ್ಯ: 0.25em; /* ಕ್ಲಿಕ್‌ಗಳು ಮತ್ತು ಸ್ಪರ್ಶಗಳನ್ನು ತಡೆಯಿರಿ */ ಪಾಯಿಂಟರ್ -ಈವೆಂಟ್‌ಗಳು: ಯಾವುದೂ ಇಲ್ಲ; ಗೋಚರತೆ: ಮರೆಮಾಡಲಾಗಿದೆ; ಅಪಾರದರ್ಶಕತೆ: 0; -ವೆಬ್‌ಕಿಟ್-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.2 ಸೆ 0, ಗೋಚರತೆ 0 0.2 ಸೆ; -ಮೊಜ್-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.2 ಸೆ 0, ಗೋಚರತೆ 0 0.2 ಸೆ; ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.2 ಗೋಚರತೆ 0 0.2 ಸೆ; ) .cd-form .cd-error-message::ನಂತರ (/* ದೋಷ ಸಂದೇಶದ ಮೂಲೆಯಲ್ಲಿ */ ವಿಷಯ: ""; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: 22px; ಕೆಳಗೆ: 100%; ಎತ್ತರ: 0; ಅಗಲ: 0; ಗಡಿ - ಎಡ: 8px ಘನ ಪಾರದರ್ಶಕ; ಗಡಿ-ಬಲ: 8px ಘನ ಪಾರದರ್ಶಕ; ಗಡಿ-ಕೆಳಗೆ: 8px ಘನ rgba (215, 102, 102, 0.9); .cd-form .cd-error-message.is-visible ( ಅಪಾರದರ್ಶಕತೆ: 1 ; ಗೋಚರತೆ: ಗೋಚರ; -ವೆಬ್ಕಿಟ್-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.2 ಸೆ 0, ಗೋಚರತೆ 0 0; -moz-ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0. 2s 0, ಗೋಚರತೆ 0 0; ಪರಿವರ್ತನೆ: ಅಪಾರದರ್ಶಕತೆ 0.2 ಸೆ 0, ಗೋಚರತೆ 0 0; ) @ಮಾಧ್ಯಮ ಮಾತ್ರ ಪರದೆ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 600px) (.cd-ಫಾರ್ಮ್ (ಪ್ಯಾಡಿಂಗ್: 2em; ) .cd-form .fieldset (ಅಂಚು: 2em 0; ) .cd-form .fieldset:first-child ( ಅಂಚು- ಮೇಲ್ಭಾಗ: 0; ) .cd-ಫಾರ್ಮ್ .ಫೀಲ್ಡ್‌ಸೆಟ್: ಕೊನೆಯ ಮಗು (ಅಂಚು-ಕೆಳಗೆ: 0; ) .cd-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್.ಹ್ಯಾಸ್-ಪ್ಯಾಡಿಂಗ್ (ಪ್ಯಾಡಿಂಗ್: 16px 20px 16px 50px; ) .cd-ಫಾರ್ಮ್ ಇನ್‌ಪುಟ್ (ಪ್ಯಾಡಿಂಗ್: 16px 0; ) ) .cd-form-message (ಪ್ಯಾಡಿಂಗ್: 1.4em 1.4em 0; ಫಾಂಟ್-ಗಾತ್ರ: 14px; ಫಾಂಟ್-ಗಾತ್ರ: 0.875rem; ಲೈನ್-ಎತ್ತರ: 1.4; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಕೇಂದ್ರ; ) @ಮಾಧ್ಯಮ ಮಾತ್ರ ಪರದೆ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 600px) (.cd-form-message (padding: 2em 2em 0; ) ) .cd-form-bottom-message (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 100%; ಎಡ: 0; ಕೆಳಗೆ: -30px; ಪಠ್ಯ-ಜೋಡಣೆ: ಕೇಂದ್ರ; ಫಾಂಟ್-ಗಾತ್ರ: 14px; ಫಾಂಟ್-ಗಾತ್ರ: 0.875rem; ) .cd-form-bottom-message a (ಬಣ್ಣ: #FFF; ಪಠ್ಯ-ಅಲಂಕಾರ: ಅಂಡರ್‌ಲೈನ್; ) .cd-close-form ( / * ಶೈಲಿ X ಬಟನ್ ಮೇಲಿನ ಬಲ */ ಪ್ರದರ್ಶನ: ಬ್ಲಾಕ್; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಅಗಲ: 40px; ಎತ್ತರ: 40px; ಬಲ: 0; ಮೇಲ್ಭಾಗ: -40px; ಹಿನ್ನೆಲೆ: url("../img/cd-icon-close.svg ") ನೋ-ರಿಪೀಟ್ ಸೆಂಟರ್ ಸೆಂಟರ್; ಪಠ್ಯ-ಇಂಡೆಂಟ್: 100%; ವೈಟ್-ಸ್ಪೇಸ್: ನೌರಾಪ್; ಉಕ್ಕಿ: ಮರೆಯಾಗಿ; ) @ಮಾಧ್ಯಮ ಮಾತ್ರ ಪರದೆ ಮತ್ತು (ನಿಮಿಷ-ಅಗಲ: 1170px) ( .cd-close-form ( display: none; ) ) #cd-login, #cd-signup, #cd-reset-password ( display: none; ) # cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected ( display: block; )

ಫೇಡ್ ಟ್ರಾನ್ಸಿಶನ್ ಎಫೆಕ್ಟ್‌ನಲ್ಲಿ, ಮುಚ್ಚಿದಾಗ ಮೋಡಲ್ ಸರಾಗವಾಗಿ ಮಸುಕಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ವಿಳಂಬವನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಸೂಚನೆ:. ಎಲ್ಲಾ ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳ ಫಾಂಟ್ ಗಾತ್ರವನ್ನು ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ 16px ಗೆ ಹೊಂದಿಸಲಾಗಿದೆ. ಇದು ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ವೀಕ್ಷಿಸುವಾಗ ಸಂಭವಿಸುವ ಸ್ವಯಂ-ಝೂಮ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ.

ಲೇಖಕರ, ಪ್ಲಗಿನ್‌ನ ಬೂರ್ಜ್ವಾ ಆವೃತ್ತಿ ಇದೆ. ಅಲ್ಲಿ ನೀವು ಮೂಲವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು.
ರಷ್ಯಾದ ಆವೃತ್ತಿ, ನೀವು ಅದನ್ನು ನನ್ನ Yandex.Disk ನಿಂದ ಪಡೆಯಬಹುದು, ಅದು ಇಲ್ಲಿದೆ ಅಗತ್ಯ ಕಡತಗಳು, ಒಂದು ಆರ್ಕೈವ್‌ನಲ್ಲಿ ಎಚ್ಚರಿಕೆಯಿಂದ ಪ್ಯಾಕ್ ಮಾಡಲಾಗಿದೆ, ಅದಕ್ಕೂ ಮೊದಲು ಈ ಅದ್ಭುತವಾದ jQuery ಪ್ಲಗಿನ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಸಂಪೂರ್ಣವಾಗಿ ಅಳವಡಿಸಿಕೊಂಡ ಲೈವ್ ಉದಾಹರಣೆಯನ್ನು ನೋಡಲು ಮರೆಯಬೇಡಿ:

ಎಲ್ಲಾ ಗೌರವಗಳೊಂದಿಗೆ, ಆಂಡ್ರ್ಯೂ

ಸಂಪರ್ಕ ಫಾರ್ಮ್‌ಗಳ ರಚನೆ: ಪ್ರತಿಕ್ರಿಯೆ, ಕಾಮೆಂಟ್‌ಗಳು, ಲಾಗಿನ್ ಫಾರ್ಮ್, ನಮೂದಿಸಿದ ಮಾಹಿತಿಯ ಸರಿಯಾಗಿರುವುದನ್ನು ಪರಿಶೀಲಿಸುವುದರೊಂದಿಗೆ ನೋಂದಣಿ ಫಾರ್ಮ್.

ಜೊತೆಗೆ ಅಚ್ಚುಕಟ್ಟಾದ ಆಕಾರ ಹಂತ ಹಂತದ ಭರ್ತಿ. ಫಾರ್ಮ್ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆಯ ಸೂಚಕವು ಕೆಳಗೆ ಇದೆ.

ಹಲವಾರು ಹಂತಗಳಲ್ಲಿ ಫಾರ್ಮ್ ಅನ್ನು ಭರ್ತಿ ಮಾಡುವುದು ಮತ್ತು ಅದನ್ನು ಸರಿಯಾಗಿ ಭರ್ತಿ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವುದು.

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಸಂದೇಶವನ್ನು ಕಳುಹಿಸುವ ಮೊದಲು ನಮೂದಿಸಿದ ಮಾಹಿತಿಯ ನಿಖರತೆಯ ಮೌಲ್ಯೀಕರಣವನ್ನು ಹಾರಾಡುತ್ತ ಕೈಗೊಳ್ಳಲಾಗುತ್ತದೆ.

ಸೈಟ್ ಲಾಗಿನ್ ಫಾರ್ಮ್, ನೋಂದಣಿ ಫಾರ್ಮ್ ಮತ್ತು ಪಾಸ್‌ವರ್ಡ್ ಮರುಪಡೆಯುವಿಕೆ ಕ್ಷೇತ್ರದ ನಡುವೆ jQuery ಬಳಸಿಕೊಂಡು ಅನಿಮೇಟೆಡ್ ಸ್ವಿಚಿಂಗ್. ಡೆಮೊ ಪುಟದಲ್ಲಿ, ಪರಿಣಾಮವನ್ನು ನೋಡಲು ಹಳದಿ ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

ಸಂದರ್ಶಕರಿಗೆ ಯಾವುದೇ ಪುಟದಿಂದ ಸೈಟ್ ಮಾಲೀಕರನ್ನು ತ್ವರಿತವಾಗಿ ಸಂಪರ್ಕಿಸಲು ಅವಕಾಶವನ್ನು ನೀಡಲು ಇದೇ ರೀತಿಯ ಪರಿಹಾರವನ್ನು ಬಳಸಬಹುದು. ಡೆಮೊ ಪುಟದಲ್ಲಿ, ಫಾರ್ಮ್ ತೆರೆಯಲು ಕೆಳಗಿನ ಬಾಣದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ.

ನಮೂದಿಸಿದ ಮಾಹಿತಿಯ ನಿಖರತೆಯ ಪರಿಶೀಲನೆಯೊಂದಿಗೆ ನಮೂನೆ.

CSS, PHP ಮತ್ತು jQuery ಬಳಸಿ ಕಾರ್ಯಗತಗೊಳಿಸಲಾದ ಉತ್ತಮ ನೋಂದಣಿ ಫಾರ್ಮ್.

ಸಂದೇಶವನ್ನು ಕಳುಹಿಸುವ ಮೊದಲು ಹೊಸ ಕ್ಷೇತ್ರಗಳನ್ನು ಸೇರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಅಳವಡಿಸಲಾಗಿದೆ.

ನಮೂದಿಸಿದ ಮಾಹಿತಿಯ ನಿಖರತೆಯ ಪರಿಶೀಲನೆಯೊಂದಿಗೆ ಉತ್ತಮವಾದ ಅಚ್ಚುಕಟ್ಟಾಗಿ PHP ಪ್ರತಿಕ್ರಿಯೆ ಫಾರ್ಮ್. ತಂತ್ರಜ್ಞಾನಗಳು: CSS, PHP, jQuery.

ಸರಿಯಾದ ಭರ್ತಿಯ ಪರಿಶೀಲನೆಯೊಂದಿಗೆ.

ಸಂದೇಶವನ್ನು ತ್ವರಿತವಾಗಿ ಕಳುಹಿಸಲು ಹೊರಹೋಗುವ ಪ್ರತಿಕ್ರಿಯೆ ಫಾರ್ಮ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು.