jQuery - Ví dụ minh hoạ

Ví dụ minh hoạ

a.   Ví dụ số 1

Trong ví dụ này, chúng ta sẽ viết 1 kịch bản bằng jQuery để minh hoạ cho việc đặt bẫy đối với sự kiện hover theo mô tả sau

-      Giao diện của trang web ban đầu xuất hiện 1 hình ảnh minh hoạ

-      Khi người dùng di chuyển chuột vào trong vùng chứa hình minh hoạ, ở góc trên bên trái của hình sẽ xuất hiện biểu tượng thông báo

-      Nếu người dùng click vào biểu tượng vừa hiện ra ở góc trên, bên phải của vùng làm việc, thì nội dung của chú thích sẽ hiện ra bằng hiệu hứng fade của jQuery

Lưu ý: Để thực hiện ví dụ này, chúng ta phải phối hợp giữa cả 3 thành phần đã học, bao gồm Html, Css và jQuery. Ví dụ: Để hiện biểu tượng ở góc phải, ta sẽ dùng Css với Pseudo class và để hiện thông báo khi hover trên nút, ta dùng jQuery. Dĩ nhiên, toàn bộ ví dụ này bạn chẳng cần lập trình cũng vẫn thực hiện được. Tuy nhiên, khi sử dụng jQuery để hiển thị thông báo, ta lại có một lợi thế là sử dụng hiệu ứng slide để hiển thị thông báo của mình cho lạ mắt hơn

Mã HTML & jQuery

  
     
      href="cssStyles/forSecond.css"
            type="text/css" rel="styleSheet"/>
     
     
  

  
     

id='holder'>
         id='mh' src='imgs/webDesign.png' alt=''/>
         class='info'>
        

class='note'>
            Website: Website là tập hợp nhiều trang web, được
            sắp đặt theo một logic nào đó, để phục vụ cho một
            mục tiêu cụ thể mà nơi cung cấp dịch vụ thông tin
            dựa trên nền tảng Web tạo ra. Một website, khi
            cần đưa vào hoạt động trên Internet cần phải được
            cấp một tên miền (Domain Name) để giúp người dùng
            Internet có thể truy cập dễ dàng, đồng thời phải có
            một Web hosting để lưu trữ các trang web đã được
            lập trình và sẵn sàng hoạt động.
        

     

  

Css định dạng có nội dung như sau

body{width:666px; margin:0 auto; background:#bdbdbd; }
#holder{width:500px; height:auto;
      margin:38px auto; position:relative;
      background:#EFEFEF; border:8px solid #FFF;
      box-shadow:3px 6px 12px #686868;
}
#holder > span.info{
      width:48px; height:48px; display: none;
      position:absolute; right:0; top:0;
      background:url('../imgs/info.png') no-repeat left top;
      background-size: cover; cursor:pointer;
}
#holder:hover span.info,
#holder > img:hover span.info,
#holder > span.info:hover{
      display:block;
}
#holder > .note{
      position:absolute; bottom:0; right:0;
      display: none; width: 93%; height: auto;
      background: rgba(8,136,8,.7); color: #ff8;
      box-shadow: inset 1px 2px 6px #303030;
      padding: 16px; margin: 0 auto;
}

o   Ghi chú: Có một số điểm cần lưu ý đối với ví dụ trên như sau

§  Sử dụng Group selector, child selector, Descendant và Pseudo class cho mục đích hiển thị biểu tượng ở góc trên bên phải vùng làm việc, khi người dùng hover lên hình

#holder:hover span.info,
#holder > img:hover span.info,
#holder > span.info:hover{
   display:block;
}

§  Áp dụng đường dẫn tương đối trỏ về parent để truy xuất đến hình đặt ngang cấp trong thư mục imgs

 background:url('../imgs/info.png') no-repeat left top;

§  Phương thức parent() dùng để trỏ về thành phần cha (parent object) của đối tượng hiện hành

$(this).parent()

§  Lợi dụng đặc điểm của jQuery, tiến hành truy xuất nhiều phương thức trên cùng một dòng (3 phương thức parent, find, slideDown)

$(this).parent().find('.note').slideDown('fast');

§  Sử dụng 2 hàm “nặc danh” (anounymus function) kết hợp cho sự kiện hover đối với class ‘info’

$('.info').hover(function(){
     $(this).parent().find('.note').slideDown('fast');
}, function(){
     $(this).parent().find('.note').slideUp();
});

Trong tình huống này, mặc định hàm thứ nhất sẽ thi hành theo ý ngĩa của sự kiện hover và hàm thứ 2 sẽ thi hành theo ý nghĩa ngược lại (Khi không còn hover nữa)

b.   Ví dụ số 2

Ở ví dụ này, chúng ta sẽ viết một kịch bản, minh hoạ cho việc kích hoạt bảng thông báo hiển thị trên màn hình bằng phương thức slideToggle của jQuery. Kịch bản trên thi hành dựa vào “bẫy” được thiết lập cho sự kiện click đối với các đối tượng Html là input button và span

Giao diện như sau

Mã HTML & jQuery

  
     
      href="cssStyles/forFirst.css"
            type="text/css" rel="styleSheet"/>
     
     
  
  
      type="button" id="moTB" value="Hiện thông báo"/>
     

         class="dongTB">[x]
        

            Đây là thông báo cho phép hiển thị bằng phương thức
            slideToggle của jQuery, Hãy nhấn vào nút "Hiện thông
            báo" để mở thông báo. Trong trường hợp bạn muốn đóng
            thông báo này lại, có thể nhấn vào nút [X] hoặc nhấn
            tiếp vào nút "Hiện thông báo" thêm lần nữa
         

     

  

Css định dạng có nội dung như sau

body {
      font-family: tahoma, Arial;font-size: 11px; width:600px;    margin:20px auto; position:relative; color: #666;
}
a{color:#993300; text-decoration:none;}
#thongBao {
      width:68%; display: none; padding:5px;
      position:absolute; top:0; right:0;
      border:2px solid #EFEFEF;
      background-color: #086808;
      box-shadow: 1px 1px 6px #888888;
}
#thongBao  > p{
      font-size: 1.4em; color: #FFF;
}
#moTB{
      padding:5px; cursor:pointer; color:#fff;
      border:2px solid #017DDD;
      background-color:#0269B9;
}
.dongTB{
      display:block; float:right;
      color: #FF0; font-weight: bold;
      text-shadow: 1px 1px 1px #383838;
      font-size: 1.6em;
}

o   Ghi chú:

§  Trong ví dụ trên, chúng ta “bẫy” sự kiện click cho cả 2 đối tượng: nút nhấn “moTB” và span “dongTB”. Trong đó với sự kiện click dành cho nút “moTB”, chúng ta đảo trạng thái bằng phương thức slideToggle, jQuery sẽ tự động chọn xem khi nào thì slideUp và khi nào thì slideDown (Thay vì bạn phải làm điều này dựa trên logic, để khi nào thì  down và khi nào thì Up)

c.     Ví dụ số 3

Trong ví dụ này, chúng ta sẽ tự làm 1 jQuery phục vụ cho việc trình chiếu các hình ảnh mong muốn một cách tuần tự trên màn hình với hiệu ứng chuyển  ảnh dựa vào thuộc tính opacity của CSS3. Trên thực tế, các jQuery phục vụ cho mục đích này thường được gọi với tên: SlideShow

Giao diện như sau

 

Mã HTML & jQuery

  
     
      href="cssStyles/forThird.css"
            type="text/css" rel="styleSheet"/>
     
     
     
  
  
      

Minh hoạ Slide show bằng jQuery

           dựa trên thuộc tính Opacity

     

        
        
        
        
        
     

  

Css định dạng có nội dung như sau

body {width:688px; margin:0 auto; background:#fff;}
h1{color:#088808; text-shadow:1px 1px 1px #333;
   text-align:center; padding:8px;
}
#canhDep{ box-shadow:3px 6px 18px #000;
   width:100%; height:375px; border:5px solid #FFF;
   position:relative; overflow:hidden; margin:30px auto;
   background:url('imgs/loading.gif') no-repeat center center;
}
#canhDep img{width:100%; height:100%;
   position:absolute; left:0px; top:0px;
}

Dưới đây là nội dung tập tin js chứa hàm bdgShow

/*--- Hàm cho phép trình chiếu hình ở dạng Fade dựa trên
      phương thức Animate của jQuery với 4 tham số sử dụng
      theo ý nghĩa như sau
   - holder: Chỉ ra đối tượng chứa danh sách Image [Class, ID]
   - progressTime: Thời gian hiển thị ảnh
   - fadeInTime  : Thời gian chuyển trạng thái từ khi opacity=0
                   cho đến khi nhìn thấy
   - fadeOutTime : Ngược lại với fadeInTime
                   [Từ khi Opacity=1 thành opacity=0]
*/
function bdgShow(holder, progressTime, fadeInTime, fadeOutTime){
   $(holder + ' img:gt(0)').css('opacity','0');
   setInterval(function(){
      $(holder + ' img:first-child')
         .animate({'opacity':'1'},fadeInTime)
         .next('img').css('opacity','1')
         .animate({'opacity':'0'},fadeOutTime)
         .end().appendTo(holder);
   }, progressTime);
}

o   Ghi chú: Ở ví dụ trên, trang web minh hoạ của chúng ta đã sử dụng tham chiếu đối với css và jQuery hoàn toàn ở dạng external. Trong tình huống này, mã định dạng (css), thư viện chứa kịch bản (js) và html code được tách rời hoàn toàn, mang lại sự đơn giản, thể hiện tính chuyên nghiệp đối với mã nguồn xây dựng trang web. Ngoài ra có một số vấn đề như sau:

§  Trong tình huống trên, giả sử chúng ta tách riêng hàm phục vụ cho mục tiêu slideShow trong một tập tin .js riêng biệt và đặt tên là tools.js. Do cách làm thư vậy, khi cần sử dụng slideShow cho trang web khác, chúng ta chỉ việc tham chiếu đến hàm có trong tools.js mà không cần phải viết lại. Điều này thể hiện ý nghĩa tái sử dụng đối với mã nguồn trong quá trình phát triển ứng dụng (reusable)

§  Thuật toán thi hành của hàm bdgShow, được thực hiện theo ý nghĩa sau: Chúng ta xem như có một danh sách hình chờ được hiển thị, trình chiếu trên màn hình, và mỗi lần chúng ta chỉ cho phép 1 hình hiện ra (opacity=1) còn các hình khác thì không cho hiện (opacity=0), nếu các thuộc tính này được gán trực tiếp bằng phương thức css() cho các image thì quá trình slideShow hoạt động sẽ không hấp dẫn (do các hình hiển thị đột ngột, gây sốc về mặt thị giác). Chúng ta đã lợi dụng phương thức animate() của jQuery để chuyển trạng thái opacity từ 1 thành 0 (và ngược lại) một cách nhẹ nhàng hơn

d.   Ví dụ số 4

Trong ví dụ cuối cùng, tôi sẽ thực hiện lại một số ví dụ đã dùng để minh hoạ trong bài trước về JavaScript, nhưng sử dụng jQuery để thực hiện từng yêu cầu.

Ü Viết lại ví dụ minh hoạ sự kiện mouseOver và mouseOut trong bài JavaScript (ví dụ 2) bằng jQuery

Kịch bản viết bằng jQuery

. . .

. . .

Mã HTML điều chỉnh lại so với khi dùng JavaScript

. . .

  

class='vungChua'>
      id='mh' src='imgs/angular.png' alt=''/>
     

id='bb'>Minh hoạ sự kiện MouseOut - MouseOver

  

. . .

Ü Viết lại ví dụ minh hoạ sự kiện click để cho phép người dùng xem bảng cửu chương trong bài JavaScript (ví dụ 3) bằng jQuery

Kịch bản viết bằng jQuery

. . .

. . .

Mã HTML điều chỉnh lại so với khi dùng JavaScript

. . .

  

     

Xem bảng cửu chương trực tuyến

                   placeholder='Nhập BCC cần xem'/>
      In Bảng cửu chương
     

  

. . .

Ü Viết lại ví dụ minh hoạ sự kiện focus và blur để cho phép hiển thị thông tin hướng dẫn nhập dữ liệu, khi người dùng chọn các ô nhập dữ liệu trong bài JavaScript (ví dụ 5) bằng jQuery

Kịch bản viết bằng jQuery bao gồm 2 phần

-    Thư viện toolTip.js chứa hàm phục vụ cho việc tạo tooltip dựa vào thông tin xác định bởi input object

//--- Hàm tạo tip cho Input theo yêu cầu rồi gắn vào body
function createTips(objInput){   //--- Xác định vị trí của DIV cần tạo dựa trên input Object
   var pos = objInput.position();
   var topPos = pos.top;
   var leftPos = pos.left + objInput.width() + 48;   //--- Lấy thông số từ custom attribute của Input
   var tipContent = objInput.attr('tipString');
   var color = objInput.attr('tipColor');
   var bgColor = objInput.attr('tipBackground');   //--- Tạo 1 Div HTML bằng jQuery với các thông số
   var newTip = $('

').attr('id','tips')
                        .text(tipContent)
                        .css({'position':'absolute',
                              'display':'none',
                              'color':color,
                              'background':bgColor,
                              'top':topPos,
                              'left':leftPos,
                              'padding':'16px',
                              'border':'1px solid #fff',
                              'box-shadow':'1px 1px 6px #888888'
                            });
   $('body').append(newTip);
}

-    Khai báo và gọi thi hành hàm tạo tooltip trong tập tin Html

. . .



. . .

Mã HTML điều chỉnh lại so với khi dùng JavaScript

. . .

  

Lý lịch nhân viên

  

                   placeholder='

Your name'
             tipString = 'Họ tên của bạn cần phải nhập đúng
                          với thông tin trên giấy khai sinh'
             tipColor = 'red' tipBackground = 'yellow'/>
        

     
     

                         placeholder='

Address'
                tipString = 'Hãy nhập địa chỉ nơi bạn đang sống'
                tipColor = 'white' tipBackground = 'green'/>
        

     
     

                         placeholder='

Mobile'
                tipString = 'Số di động hoặc số điện thoại mà
                             chúng tôi có thể liên lạc với bạn'
                tipColor = 'white' tipBackground = 'blue'/>
        

     
     

      Send to us

. . . Đũa cả