Belajar AngularJS Events Mouseleave

Hallo sahabat Dumenity berjumpa lagi dalam tutorialÂ kursuswebdesign, pada tutorial kali ini kita akan belajar tentangÂ Â AngularJS Events Mouseleave.Â AngularJS mencakup petunjuk tertentu yang dapat digunakan untuk memberikan perilaku khusus pada berbagai aktivitas DOM, seperti klik, dblclick, mouseenter, dll. Kalau biasanya kita belajar membuat event – event di jquery, pada kali ini kita belajar event pada angularjs.

Contoh berikut menunjukkan arahan event mouse yang pentingÂ ng-mouseleave.
pertama buat file html di bawah ini dengan nama misalnyaÂ ng-mouseleave.htmlÂ

silahkan isi file tersebut seperti di bawah ini

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
   
</head>
<body ng-app>
    <h1> Demo Event Mouse AngularJS: </h1>
        <div ng-class="{redDiv: enter, yellowDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false">
            Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>
        </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

</head>

<h1> Demo Event Mouse AngularJS: </h1>

Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span>

</div>

</body>

</html>

Oke kalau sudah silahkan buat file css di bawah ini karena file css ini akan di load atau dipanggil oleh fungsi ng-class

ng-class="{redDiv: enter, yellowDiv: leave}"

1	ng-class="{redDiv: enter, yellowDiv: leave}"

ketika mouse berada di atas tulisan mouse leave
berikut ini css-nya silahkan teman – teman buat.

<style>
        .redDiv {
            width: 100px;
            height: 100px;
            background-color: red;
            padding:2px 2px 2px 2px;
        }

        .yellowDiv {
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding:2px 2px 2px 2px;
        }
    </style>

<style>

.redDiv {

width: 100px;

height: 100px;

background-color: red;

padding:2px 2px 2px 2px;

}

.yellowDiv {

width: 100px;

height: 100px;

background-color: yellow;

padding:2px 2px 2px 2px;

}

</style>

Dalam contoh di atas, perintah ng-class mencakup style kelas di CSS, jadi redDiv akan diterapkan jika enter = true dan yellowDiv akan diterapkan jika leave = true. Perintah ng-mouseenter menetapkan ‘enter’ ke true, yang akan menerapkan kelas redDiv ke elemen <div>. Dengan cara yang sama, ng-mouseleave akan mengatur penundaan ke true, yang akan menerapkan kelas yellowDiv.

Oke untuk lebih jelasnya silahkan teman – teman coba sendiri, itulah tadi pembahasan saya tentangÂ Belajar AngularJS Events Mouseleave semoga bermanfaat.

Facebook DUMET School

Categories