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

منو ساده شناور با استفاده از jQuery و جاوا اسکریپت با Asp.net
0 0
منو ساده شناور با استفاده از jQuery و جاوا اسکریپت با Asp.net

با سلام در این مقاله توضیح خواهیم داد که چگونه منو خود را با استفاده از jQuery و جاوا اسکریپت در ASP.Net ایجاد کنید. ما می دانیم که HoverMenuExtender موجود در جعبه ابزار کنترل AJAX  است. اما سنگین است زیرا بسیاری از اسکریپت ها حتی اگر بخواهند از یک کنترل استفاده کنند، دانلود می شوند.
از این رو نیازی به تلاش و ایجاد منو Simple Hover Menu با استفاده از jQuery است که در حال حاضر بخشی از ویژوال استودیو می باشد
بنابراین شروع به ساخت منوی ساده می کنیم
مرحله 1: اسکریپت را در صفحه قرار دهید

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var left = 10;
    var top = 10;
    var IsMouseOverPopUp;
    $(document).ready(function () {
        BindHoverMenu();
    });
    function BindHoverMenu() {
        $(".HoverMenu").css("display", "none");
        $(".HoverTarget").mouseover(function () {
            IsMouseOverPopUp = false;
            var p = GetCordinates($(this).get(0));
            $("#dvHover").css("left", $(this).get(0).offsetWidth + left + "px");
            $("#dvHover").css("top", p.y + top + "px");
            $("#dvHover").css("display", "block");
            $("#dvHover").html($(this).parent().children(".HoverMenu").html());
            $(this).mouseout(function () {
                HideHoverMenu();
            });
        });
        $("#dvHover, .HoverTarget").mouseover(function () {
            IsMouseOverPopUp = true;
        });
        $("#dvHover, .HoverTarget").mouseout(function () {
            IsMouseOverPopUp = false;
            HideHoverMenu();
        });
    }
    function GetCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        while (obj.offsetParent) {
            p.x = p.x + obj.offsetParent.offsetLeft;
            p.y = p.y + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName("body")[0]) {
                break;
            }
            else {
                obj = obj.offsetParent;
            }
        }
        return p;
    }
    function HideHoverMenu() {
        setTimeout(function () {
            if (!IsMouseOverPopUp) {
                $("#dvHover").css("display", "none");
            }
        }, 500);
    }
</script>

اسکریپت فوق همان چیزی است که شما برای نشان دادن منوی شناور نیاز دارید و اسکریپت را می توان در تمام برنامه ها با قرار دادن کد در JS File و فراخوانی آن در صفحه ای که به آن نیاز دارید یا آن را در صفحه اصلی به صورت زیر می خوانید، استفاده کنید

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/js.js" type="text/javascript"></script>
<script type="text/javascript">
    var left = 10;
    var top = 10;
    var IsMouseOverPopUp;
    $(document).ready(function () {
        BindHoverMenu();
    });
</script>

مرحله 2: منوها و منوهای زیر را ایجاد کنید

شما باید منو خود و منوی شناور را که می خواهید نمایش دهید ایجاد کنید.

<div>
    <a href="javascript:;" class="HoverTarget">Menu1</a>
    <div class="HoverMenu">
        <table>
            <tr>
                <td>
                    <a href="javascript:;">SubMenu1</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:;">SubMenu2</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:;">SubMenu3</a>
                </td>
            </tr>
        </table>
    </div>
</div>
<div>
    <a href="javascript:;" class="HoverTarget">Menu2</a>
    <div class="HoverMenu">
        <table>
            <tr>
               <td>
                    <a href="javascript:;">SubMenu1</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:;">SubMenu2</a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="javascript:;">SubMenu3</a>
                </td>
            </tr>
                <tr>
                <td>
                    <a href="javascript:;">SubMenu4</a>
                </td>
            </tr>
        </table>
    </div>
</div>

در بالا شما متوجه خواهید شد که 2 مورد DIV برای یک منو  و دیگری برای قسمت منو 2 داریم. در هرDIV دو چیز را داریم که نیاز به بررسی دارد تا کار Menu Hover را انجام دهد
1. HoverTarget - این کلاس به کنترل بر روی رویداد mouseover شما که می خواهید Hover Menu را نمایش دهد اعمال می شود. در موردHTML anchor tag است.
2. HoverMenu - این کلاس برای کنترل استفاده می شود که حاوی زیر منو برای HoverTarget مربوطه است.
توجه:

مهم است که شما HoverTarget و HoverMenu را در همان کنترل والدین قرار دهید. در غیر این صورت اسکریپت کار نخواهد کرد

مرحله  3: اضافه کردن کنترل HoverMenu DIV و CSS آن
در نهایت شما باید DIV پنهان زیر و CSS آن را اضافه کنید. این CSS روشی به منوی شناور می دهد، شما می توانید از آن برای طراحی منو شناور خود به نحوی که به آن نیاز دارید استفاده کنید

<style type="text/css">
    .HoverPopUp
    {
        background-color: yellow;
        width: 80px;
        border: 1px solid black;
        position: absolute;
        left: 0px;
        top: 0px;
    }
</style>
 
<div id="dvHover" class="HoverPopUp" style = "display:none">
</div>

 منوی شناور آماده است. اکنون می توانید برنامه را اجرا کنید و آن را آزمایش کنید.
عکس روی صفحه

 


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

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