توضیحات و دانلود

نمایش Watermark Text برای TextBox، Password و MultiLine TextArea با استفاده از پلاگین جی کوئری در ASP.Net
0 0
نمایش Watermark Text برای TextBox، Password و MultiLine TextArea با استفاده از پلاگین جی کوئری در ASP.Net

با سلام در این مقاله به توضیح چگونگی استفاده از TextBox های Watermark در SingleLine، MultiLine و Password با استفاده از افزونه Watermark jQuery خواهیم پرداخت .
کد HTML
در کد HTML زیر، TextBox ها با TextMode متمایز یعنی SingleLine ، MultiLine و Password مانند TextBox Normal، TextArea و رمز عبور دارند. ویژگی ToolTip TextBox را تنظیم کرده ایم، متن در ویژگی ToolTip به عنوان متن Watermark نمایش داده خواهد شد.

UserName:
<asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
Password:
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
Email:
<asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
Details:
<asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>

اعمال علامت در TextBoxes
 پلاگین Watermark jQuery را برای اعمال Watermark به تمامی انواع TextBoxes یعنی SingleLine، MultiLine و Password ایجاد کردیم.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
          $("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
 
          //To change the color of Watermark              
          $("[id*=Email]").WaterMark({
             WaterMarkTextColor: '#000'
          });
        });
</script>

پلاگین جی کوئری Watermark دارای WaterMarkTextColor اختیاری است که می تواند برای تنظیم رنگ متن Watermark استفاده شود.
کد صفحه HTML کامل در زیر ارائه شده است.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="WaterMark.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=txtUserName], [id*=txtPassword], [id*=txtDetails]").WaterMark();
 
            //To change the color of Watermark 
            $("[id*=Email]").WaterMark({
                WaterMarkTextColor: '#000'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    UserName:
    <asp:TextBox ID="txtUserName" runat="server" ToolTip="Enter UserName"></asp:TextBox><br />
    Password:
    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" ToolTip="Enter Password"></asp:TextBox><br />
    Email:
    <asp:TextBox ID="txtEmail" runat="server" ToolTip="Enter Email"></asp:TextBox><br />
    Details:
    <asp:TextBox ID="txtDetails" runat="server" TextMode="MultiLine" ToolTip="Enter Details"></asp:TextBox>
    </form>
</body>
</html>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :