Tiếp tục mang đến cho các bạn thêm một ứng dụng web nho nhỏ được làm từ Angular.js, với những chia sẻ trong bài viết này, các bạn sẽ có thêm kinh nghiệm trong việc tìm hiểu cũng như sử dụng tốt angular.js cho những ứng dụng web của mình sau này.
Download
HTML
Đầu tiên, khai báo tên app trong thẻ html.
<html ng-app="myapp">
Rồi copy toàn bộ khugn chuẩn html cho ứng dụng date picker sau :
<body ng-controller="main" >
<div id="icon_calendar">
<div id="month_wrap">
<img id="fleche_mois1" class="fleches_mois" src="http://img11.hostingpics.net/pics/163358chevrongauche.png" height="20" width="13" value="-1">
<img id="fleche_mois2" class="fleches_mois" src="http://img11.hostingpics.net/pics/941588chevrondroite.png" height="20" width="13" value="1">
<div id="month{{$index+1}}" class="mois" ng-repeat="m in mois">
{{m.name}}
</div>
</div>
<div id="days_wrap">
<span id="day{{$index+1}}" class="days" ng-repeat="d in jours">{{d.day}}
</span>
</div>
</div>
</body>
CSS
Chúng ta sẽ định dạng date picker với đoạn css sau :
html,body
{
height: 100%;
width: 100%;
margin: 0;
background-color: #2295EC;
font-family: 'openlight',sans-serif;
}
@-webkit-keyframes bounce{
0%{transform:scale(1);}
50%{transform:scale(1.4);}
100%{transform:scale(1);}
}
@-webkit-keyframes bounce2{
0%{transform:scale(1);}
50%{transform:scale(0.6);}
100%{transform:scale(1);}
}
@keyframes bounce{
0%{transform:scale(1);}
50%{transform:scale(1.4);}
100%{transform:scale(1);}
}
@keyframes bounce2{
0%{transform:scale(1);}
50%{transform:scale(0.6);}
100%{transform:scale(1);}
}
#icon_calendar
{
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
border-radius: 18px;
background-color: rgb(240,240,240);
box-shadow: 0px 0px 8px rgb(60,60,60);
cursor: pointer;
color: #F05252;
overflow: hidden;
transition:all 0.2s;
}
#icon_calendar:hover
{
transform:scale(1.1);
}
#days_wrap
{
position: absolute;
width: 100%;
text-align: center;
top: 40px;
height: 110px;
color: #3C3C3C;
font-size: 35px;
z-index: 3;
transition:all 0.2s;
}
.days
{
position: relative;
float: left;
width: calc(100%/7);
height: calc(100%/5);
font-size: 12px;
text-align: center;
transition:all 0.2s;
display: none;
line-height: 22px;
border-radius: 3px;
cursor: pointer;
}
.fleches_mois
{
position: absolute;
cursor: pointer;
top: 11px;
z-index: 1;
display: none;
opacity: 1;
}
#fleche_mois1
{
left: 5px;
}
#fleche_mois2
{
right: 5px;
}
#month_wrap
{
position: absolute;
width: 100%;
text-align: center;
top: 00px;
height: 40px;
line-height: 40px;
transition:all 0.1s;
color: #F05252;
}
.mois
{
position: absolute;
margin-left: 230px;
width: 80px;
height: 100%;
top: 0px;
line-height: 40px;
font-size: 14px;
text-align: left;
font-family: 'openbold',sans-serif;
transition:all 0.2s;
opacity: 0.15;
display: none;
}
Angular.js
Đây chính là trái tim của bài viết, trước hết các bạn copy đường dẫn khai báo thư viện jQuery và Angular.js.
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/angular.min.js"></script>
Và đây là toàn bộ đoạn script giúp các bạn tạo ứng dụng date picker.
var victorApp=angular.module('myapp',[])
victorApp.controller('main', ['$scope', function ($scope) {
$("html").click(function(){
if ($("#icon_calendar").width()!=80) {
ok=0
$("#icon_calendar").css({width:80,height:80,borderRadius:"18px",marginLeft:-40,marginTop:-40,animation:"bounce2 0.3s",cursor:"pointer",transform:"scale(1)"})
$(".mois").css({display:"none",fontSize:14,width:80})
$(".days").css({fontFamily:"'openlight',sans-serif",display:"none",backgroundColor:"transparent",color:"#3C3C3C"})
$("#month_wrap").css({backgroundColor:"transparent",color:"#F05252"})
$("#month"+mois_choisi).css({marginLeft:0,display:"block"})
$("#day"+jour_choisi).css({position:"absolute",fontSize:30,width:"100%",display:"block"})
$(".fleches_mois").hide()
console.log("eee")
};
})
$("body").on('click',"#icon_calendar",function(event){
event.stopPropagation();
if ($(this).width()==80) {
ok=1
$(this).css({width:160,height:150,borderRadius:"7px",marginLeft:-80,marginTop:-75,animation:"bounce 0.3s",cursor:"initial",transform:"scale(1)"})
$(".mois").css({display:"block",fontSize:18,width:100})
$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
$("#month_wrap").css({backgroundColor:"#F05252",color:"rgb(240,240,240)"})
$("#month"+mois_choisi).css("margin-left",30)
$("#day"+ladate.getDate()).css({position:"relative",fontSize:12,width:"calc(100%/7)",backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
$("#day"+jour_choisi).css({position:"relative",fontSize:12,width:"calc(100%/7)"})
mois_retenu=mois_choisi
console.log("lol")
$(".fleches_mois").show()
};
})
$("body").on("click",".days",function(event){
event.stopPropagation();
if ($("#icon_calendar").width()!=80) {
ok=0
$("#icon_calendar").css({width:80,height:80,borderRadius:"18px",marginLeft:-40,marginTop:-40,animation:"bounce2 0.3s",cursor:"pointer",transform:"scale(1)"})
$(".mois").css({display:"none",fontSize:14,width:80})
$(".days").css({fontFamily:"'openlight',sans-serif",display:"none",backgroundColor:"transparent",color:"#3C3C3C"})
$("#month_wrap").css({backgroundColor:"transparent",color:"#F05252"})
$("#month"+mois_choisi).css({marginLeft:0,display:"block"})
jour_choisi=$(this).html()
console.log($(this).html())
$("body").trigger("mouseleave",".days")
$("#day"+jour_choisi).css({position:"absolute",fontSize:30,width:"100%",display:"block"})
$(".fleches_mois").hide()
}
else
{
ok=1
$("#icon_calendar").css({width:160,height:150,borderRadius:"7px",marginLeft:-80,marginTop:-75,animation:"bounce 0.3s",cursor:"initial",transform:"scale(1)"})
$(".mois").css({display:"block",fontSize:18,width:100})
$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
$("#month_wrap").css({backgroundColor:"#F05252",color:"rgb(240,240,240)"})
$("#month"+mois_choisi).css("margin-left",30)
$("#day"+ladate.getDate()).css({position:"relative",fontSize:12,width:"calc(100%/7)",backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
$("#day"+jour_choisi).css({position:"relative",fontSize:12,width:"calc(100%/7)"})
mois_retenu=mois_choisi
$(".fleches_mois").show()
}
})
$("body").on("mouseenter",".days",function(e){
if ($("#icon_calendar").width()!=80) {
$(this).css("font-size",20)
};
})
$("body").on("mouseleave",".days",function(e){
if (ok==1) {
$(this).css("font-size",12)
};
})
$("#icon_calendar").mouseenter(function(){
if ($(this).width()==80) {
$(this).css("transform","scale(1.1)")
}
})
$("#icon_calendar").mouseleave(function(){
if ($(this).width()==80) {
$(this).css("transform","scale(1)")
}
})
$(".fleches_mois").click(function() {
var direct=eval($(this).attr("value"))
var ladate=new Date()
if (direct==-1 && mois_choisi>1)
{
$("#month"+(mois_choisi+1)).css({marginLeft:230,opacity:0.15,textAlign:"left"})
$("#month"+(mois_choisi)).css({marginLeft:130,opacity:0.15,textAlign:"left"})
$("#month"+(mois_choisi-1)).css({marginLeft:30,opacity:1,textAlign:"center"})
$("#month"+(mois_choisi-2)).css({marginLeft:-70,opacity:0.15,textAlign:"right"})
mois_choisi--
$scope.jours=[]
for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {$scope.jours.push({day:i})}
$scope.$apply()
$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
if (mois_choisi==ladate.getMonth()+1) {
$("#day"+ladate.getDate()).css({backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
};
if (mois_choisi==1) {$("#fleche_mois1").hide()}
else{$(".fleches_mois").show()}
}
else if (direct==1 && mois_choisi<12)
{
$("#month"+(mois_choisi-1)).css({marginLeft:-170,opacity:0.15,textAlign:"right"})
$("#month"+(mois_choisi)).css({marginLeft:-70,opacity:0.15,textAlign:"right"})
$("#month"+(mois_choisi+1)).css({marginLeft:30,opacity:1,textAlign:"center"})
$("#month"+(mois_choisi+2)).css({marginLeft:130,opacity:0.15,textAlign:"left"})
mois_choisi++
$scope.jours=[]
for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {
$scope.jours.push({day:i})
}
$scope.$apply()
if (mois_choisi==ladate.getMonth()+1) {
$("#day"+ladate.getDate()).css({backgroundColor:"#2295EC",color:"rgb(240,240,240)"})
}
$(".days").css({fontFamily:"'openbold',sans-serif",display:"block"})
if (mois_choisi==12) {$("#fleche_mois2").hide()}
else{$(".fleches_mois").show()}
}
return false
})
var ladate= new Date()
var mois_choisi=ladate.getMonth()+1
var jour_choisi=ladate.getDate()
$scope.mois=[
{name:"January",days:31},
{name:"Febrary",days:28},
{name:"March",days:31},
{name:"April",days:30},
{name:"May",days:31},
{name:"June",days:30},
{name:"July",days:31},
{name:"August",days:31},
{name:"September",days:30},
{name:"October",days:31},
{name:"November",days:30},
{name:"December",days:31}]
var ok=0
$scope.jours=[]
for (var i = 1; i <=$scope.mois[mois_choisi-1]['days']; i++) {
$scope.jours.push({day:i})
}
setTimeout(function(){
for (var i = 1; i <=12; i++) {
var j=mois_choisi-i
if (j==0) {$("#month"+i).css({marginLeft:0,opacity:1,textAlign:"center",display:"block"})}
else if (j==1) {$("#month"+i).css({marginLeft:-70,opacity:0.15,textAlign:"right"})}
else if (j>0) {$("#month"+i).css({marginLeft:-170,opacity:0.15,textAlign:"right"})}
else if (j==-1) {$("#month"+i).css({marginLeft:130,opacity:0.15,textAlign:"left "})}
else if (j<0) {$("#month"+i).css({marginLeft:230,opacity:0.15,textAlign:"left "})}
}
})
$scope.$apply()
setTimeout(function(){
$("#day"+jour_choisi).css({
position:"absolute",
fontSize:30,
width:"100%",
display:"block"
})
},10)
}]);
Việc hiểu và sử dụng tốt angular.js cần có thời gian, nhưng cách học tốt nhất là hãy bắt đầu bằng những ứng dụng nhỏ thế này. Mình mong là các bạn có thể áp dụng ứng dụng này vào trong website hay blog của các bạn.