باسلام ، در دوره ی کامل انگولار جی اس به بررسی تمام دستورات انگولار جی اس پرداختیم ، در این پست قصد داریم تا اموزش ساخت منو با انگولار جی اس را اموزش دهیم.
در این مثال برای ساخت منویی که هنگام انتخاب ، گزینه ی انتخاب شده را برجسته کند.
ساخت منو
برای شروع اپلیکیشن انگولاری نیازمنیدم تا فایل جاوا اسکریپت را به سند خود اضافه کنیم.
|
1 |
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" >< /script > |
ما در این مثال از دستورالعمل های انگولار جی اس استفاده کرده ایم اگر اطلاعی ندارید به مقاله مربوط مراجعه فرمایید.بعد از افزودن فایل جاوا اسکریپت نیازمندیم تا کد زیر را در سند خود قرار دهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- افزودن ng-app برای شناسایی برنامه ی انگولاری می باشد. --> <div id="main" ng-app> <!-- منوی ما برای نمایش حالت فعال کلاس "active میگیرد." رویداد $event.preventDefault () صفحه را از پریدن هنگامی که لینک روی یک کلیک است، متوقف می کند. --> <nav class="{{active}}" ng-click="$event.preventDefault()"> <!-- هنگامی که بر روی گزینه ای کلیک میشود کلاس اکتیو را میگیرد. --> <a href="#" class="home" ng-click="active='home'">خانه</a> <a href="#" class="projects" ng-click="active='projects'">پروژه ها</a> <a href="#" class="services" ng-click="active='services'">خدمات</a> <a href="#" class="contact" ng-click="active='contact'">ارتباط با ما</a> </nav> <p ng-hide="active">لطفا منویی برگزینید.</p> <p ng-show="active">شما گزینه ی <b>{{active}}</b> را انتخاب کردید.</p> </div> |
ng-app
هماطنور که در پست مروبط به این مطلب پرداختیم ng-app برای نشان دادن محل شروع اپلیکیشن انگولاری ما می باشد.
ng-click
ng-click به منظور رویداد به هنگام کلیک شدن بر روی المان می باشد. هنگامی که بر روی گزینه ای در منو کلیک کنید متوجه میشود که کلاس اکتیو را میگیرد.
کاربرد ng-hide در منو
ng-hide برای غیرفعال کردن حالت می باشد و هنگامی که شما گزینه ای را انتخاب کنید متن “لطفا منویی برگزینید.” برای شما غیرفعال میشود و ng-show دقیقا عکس ng-hide عمل خواهد کرد.
افزودن استایل
برای زیبا تر شدن سایت نیازمندیم تا فایل css را در سند خود اضافه کنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
*{ margin:0; padding:0; } body{ font:15px/1.3 'Open Sans', sans-serif; color: #5e5b64; text-align:center; } a, a:visited { outline:none; color:#389dc1; } a:hover{ text-decoration:none; } section, footer, header, aside, nav{ display: block; } /*------------------------- The menu --------------------------*/ nav{ display:inline-block; margin:60px auto 45px; background-color:#5597b4; box-shadow:0 1px 1px #ccc; border-radius:2px; } nav a{ display:inline-block; padding: 18px 30px; color:#fff !important; font-weight:bold; font-size:16px; text-decoration:none !important; line-height:1; text-transform: uppercase; background-color:transparent; -webkit-transition:background-color 0.25s; -moz-transition:background-color 0.25s; transition:background-color 0.25s; } nav a:first-child{ border-radius:2px 0 0 2px; } nav a:last-child{ border-radius:0 2px 2px 0; } nav.home .home, nav.projects .projects, nav.services .services, nav.contact .contact{ background-color:#e35885; } p{ font-size:22px; font-weight:bold; color:#7d9098; } p b{ color:#ffffff; display:inline-block; padding:5px 10px; background-color:#c4d7e0; border-radius:2px; text-transform:uppercase; font-size:18px; } |
امیدوارم این قسمت از اموزش های انگولار جی اس برای شما مفید واقع شده باشد.پیشنهاد میشود برای درک بهتر تمام موضوعات به دوره ی کامل انگولار جی اس مراجعه فرمایید.
پیروز باشید. کدپز
