Trang chủ » Mã hóa » Tạo Trình điều khiển âm lượng với Thanh trượt UI UI

    Tạo Trình điều khiển âm lượng với Thanh trượt UI UI

    Nếu bạn là một thợ săn tự do, rất có thể bạn đã tải xuống rất nhiều giao diện người dùng (UI) PSD. Một số trong số chúng thực sự tuyệt vời và có thể tiết kiệm thời gian của chúng tôi bằng cách tạo mẫu cho thiết kế chúng tôi đang làm.

    Trong bài đăng này, chúng tôi sẽ mã hóa giao diện người dùng PSD và biến nó thành một cái gì đó có chức năng hơn. Chúng tôi sẽ mã hóa Thanh trượt UI PSD sau đây để được áp dụng làm chủ đề Thanh trượt UI UI jQuery.

    Tuy nhiên, làm ơn hãy ghi chú lại hướng dẫn này dành cho trình độ trung cấp Kinh nghiệm. Phải nói rằng, nó vẫn tương đối dễ theo dõi, miễn là bạn khá quen thuộc với CSS và jQuery.

    Được rồi, bây giờ hãy bắt đầu.

    Bước 1: Giao diện người dùng jQuery

    Chúng tôi rõ ràng cần jQuery và Thư viện UI jQuery và chúng tôi có hai tùy chọn để sử dụng chúng. Trước tiên, chúng tôi có thể liên kết trực tiếp jQuery và UI UI từ CDN sau: Google Ajax API CDN, Microsoft CDN và jQuery CDN, có rất nhiều lợi thế khi sử dụng tệp CDN được lưu trữ khi chúng tôi đưa trang web của chúng tôi trực tuyến.

    Nhưng vì chúng tôi sẽ chỉ làm việc trên nó ngoại tuyến, chúng tôi sẽ sử dụng thứ hai cách thay thế.

    Chúng tôi sẽ tải xuống và tùy chỉnh thư viện UI jQuery từ trang tải xuống chính thức. Vì chúng tôi chỉ cần plugin Slider, chúng tôi sẽ chỉ chọn thư viện Slider cùng với các phụ thuộc của nó và để lại các plugin khác. Bằng cách đó, các tệp chúng tôi sử dụng sẽ mỏng hơn nhiều và có thể tải nhanh hơn. Sau đó, liên kết tất cả các thư viện đó với tài liệu HTML, tốt nhất là ở cuối trang hoặc trước khi đóng chính xác.

       

    Bước 2: Đánh dấu HTML

    Việc đánh dấu cho thanh trượt rất đơn giản, chúng tôi đã gói tất cả các đánh dấu cần thiết - chú giải công cụ, thanh trượt và âm lượng - bên trong một HTML5 phần nhãn. Giao diện người dùng jQuery sau đó sẽ tự động tạo phần còn lại.

     

    Bước 3: Cài đặt giao diện người dùng thanh trượt

    Đoạn mã dưới đây sẽ cài đặt Thanh trượt trên trang, nhưng nó chỉ áp dụng cấu hình mặc định.

     $ (function () $ ("#slider") .slider ();); 

    Vì vậy, ở đây chúng tôi sẽ tăng cường thanh trượt một chút bằng cách thêm các cấu hình khác.

    Đầu tiên, chúng tôi lưu trữ phần tử thanh trượt dưới dạng một biến.

     thanh trượt var = $ ('# thanh trượt'), 

    Sau đó, chúng tôi đặt giá trị mặc định tối thiểu của thanh trượt là khoảng 35, khi nó được tải lần đầu tiên.

     slide.slider (phạm vi: "min", giá trị: 35,); 

    Tại thời điểm này, chúng tôi sẽ không thấy bất cứ điều gì trên trình duyệt, bởi vì Giao diện người dùng jQuery là về cơ bản chỉ tạo ra đánh dấu. Vì vậy, chúng ta cần áp dụng một số kiểu để bắt đầu thấy kết quả một cách trực quan trên trình duyệt.

    Bước 4: Kiểu

    Trước khi tiếp tục, chúng tôi cần một số tài sản từ tệp nguồn PSD như kết cấu nền và biểu tượng.

    Chúng tôi sẽ không nói về làm thế nào để cắt trong bài viết này, chúng tôi sẽ chỉ tập trung vào mã. Nếu bạn không chắc chắn làm thế nào để cắt, hãy xem đoạn phim dưới đây trước khi tiếp tục.

    • Chuyển đổi một thiết kế từ PSD sang HTML - Cây tầm ma+

    Được rồi, bây giờ hãy bắt đầu thêm các kiểu.

    Chúng tôi sẽ bắt đầu bằng cách định vị thanh trượt ở giữa cửa sổ trình duyệt và đính kèm nền mà chúng tôi đã cắt ra từ PSD với thân hình.

     body nền: url ('Nhìn /images / bg.jpg') lặp lại trên cùng bên trái;  phần chiều rộng: 150px; chiều cao: tự động; lề: 100px tự động 0; vị trí: tương đối;  

    Tiếp theo, chúng tôi sẽ áp dụng các kiểu cho chú giải công cụ, âm lượng, tay cầm, thanh trượt phạm vithanh trượt chinh no.

    Chúng tôi sẽ làm phần này một phần, bắt đầu với giáo dục

    Thanh trượt

    Vì chúng tôi không xác định giá trị tối đa cho chính Thanh trượt, nên Giao diện người dùng jQuery sẽ áp dụng mặc định; đó là 100. Do đó, chúng tôi cũng có thể áp dụng 100 (px) cho thanh trượt chiều rộng.

     #slider Border-width: 1px; kiểu viền: chắc chắn; viền màu: # 333 # 333 # 777 # 333; bán kính đường viền: 25px; chiều rộng: 100px; vị trí: tuyệt đối; chiều cao: 13px; màu nền: # 8e8d8d; nền: url ('/ "/images/bg-track.png') lặp lại trên cùng bên trái; hộp bóng: inet 0 1px 5px 0px rgba (0, 0, 0, .5), 0 1px 0 0px rgba (250, 250, 250, .5); trái: 20px;  

    Chú giải công cụ

    Chú giải công cụ sẽ được định vị phía trên thanh trượt bằng cách chỉ định nó vị trí hoàn toàn với -25px cho mình vị trí hàng đầu.

     .tooltip vị trí: tuyệt đối; hiển thị: khối; đầu trang: -25px; chiều rộng: 35px; chiều cao: 20px; màu: #fff; văn bản-align: trung tâm; phông chữ: 10pt Tahoma, Arial, sans-serif; bán kính đường viền: 3px; viền: 1px solid # 333; hộp bóng: 1px 1px 2px 0px rgba (0, 0, 0, .3); kích thước hộp: hộp viền; nền: gradient tuyến tính (trên cùng, rgba (69,72,77,0,5) 0%, rgba (0,0,0,0,5) 100%);  

    Âm lượng

    Chúng tôi đã sửa đổi biểu tượng âm lượng một chút để đáp ứng ý tưởng của chúng tôi. Ý tưởng là chúng ta sẽ tạo ra một hiệu ứng để tăng dần âm lượng phù hợp với giá trị của thanh trượt. Tôi chắc rằng bạn thường thấy một hiệu ứng như vậy trong giao diện người dùng trình phát đa phương tiện.

     .âm lượng display: inline-block; chiều rộng: 25px; chiều cao: 25px; phải: -5px; nền: url ('Khác /images/volume.png') không lặp lại 0 -50px; vị trí: tuyệt đối; lề trên: -5px;  

    Xử lý giao diện người dùng

    Kiểu tay cầm khá đơn giản; nó sẽ có một biểu tượng trông giống như một vòng tròn kim loại, được cắt từ PSD và được đính kèm làm nền.

    Chúng tôi cũng sẽ thay đổi chế độ con trỏ thành con trỏ, vì vậy người dùng sẽ nhận thấy rằng phần tử này có khả năng kéo.

     .ui-trượt-xử lý vị trí: tuyệt đối; chỉ số z: 2; chiều rộng: 25px; chiều cao: 25px; con trỏ: con trỏ; nền: url ('Khác /images/handle.png') không lặp lại 50% 50%; font-weight: in đậm; màu: # 1C94C4; phác thảo: không có; đầu trang: -7px; lề trái: -12px;  

    Phạm vi trượt

    Phạm vi thanh trượt sẽ có màu gradient hơi trắng.

     .ui-slide-Range nền: tuyến tính-gradient (trên cùng, #ffffff 0%, # eaeaea 100%); vị trí: tuyệt đối; viền: 0; đầu trang: 0; chiều cao: 100%; bán kính đường viền: 25px;  

    Bước 5: Hiệu ứng

    Trong bước này, chúng ta sẽ bắt đầu làm việc với hiệu ứng đặc biệt của Slider.

    Chú giải công cụ

    Tại thời điểm này, chú giải công cụ chưa có nội dung, vì vậy chúng tôi sẽ lấp đầy nó bằng giá trị của thanh trượt. Ngoài ra, vị trí nằm ngang của tooltip sẽ tương ứng với vị trí của tay cầm.

    Trước hết, chúng tôi lưu trữ phần tử tooltip dưới dạng một biến.

     var tooltip = $ ('. tooltip'); 

    Sau đó, chúng tôi xác định hiệu ứng của tooltip mà chúng tôi đã đề cập ở trên trong Sự kiện Slide.

     slide: function (event, ui) var value = slide.slider ('value'), tooltip.css ('left', value) .text (ui.value); 

    Nhưng, chúng tôi cũng muốn ẩn công cụ ban đầu.

     tooltip. leather (); 

    Sau đó, khi xử lý sắp bắt đầu trượt, nó sẽ được hiển thị với hiệu ứng mờ dần.

     start: function (event, ui) tooltip.fadeIn ('nhanh'); , 

    Và, khi người dùng dừng trượt tay cầm, chú giải công cụ sẽ mờ dần và bị ẩn đi.

     dừng: hàm (sự kiện, ui) tooltip.fadeOut ('nhanh'); , 

    Âm lượng

    Như chúng tôi đã đề cập ở trên trong Phần kiểu, chúng tôi lên kế hoạch biểu tượng âm lượng để thay đổi tương ứng với vị trí của tay cầm hoặc chính xác, giá trị của thanh trượt. Vì vậy, chúng tôi sẽ áp dụng tuyên bố điều kiện sau đây để tạo hiệu ứng này.

    Nhưng, trước tiên, chúng tôi lưu trữ phần tử âm lượng cũng như giá trị của thanh trượt dưới dạng một biến.

     âm lượng = $ ('. âm lượng'); 

    Sau đó, chúng tôi bắt đầu tuyên bố có điều kiện.

    Khi giá trị của thanh trượt thấp hơn hoặc bằng 5 biểu tượng âm lượng sẽ không có thanh nào cả, biểu thị rằng âm lượng rất thấp, nhưng khi giá trị của thanh trượt tăng lên, thanh âm lượng cũng sẽ bắt đầu tăng.

     nếu (giá trị <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; 

    Đặt tất cả chúng lại với nhau

    Được rồi, trong trường hợp bạn bối rối với tất cả những thứ trên, đừng. Đây là lối tắt. Đặt tất cả các mã sau vào tài liệu của bạn.

     $ (function () var slide = $ ('# slide'), tooltip = $ ('. tooltip'); tooltip. Suede (); slide.slider (phạm vi: "min", min: 1, value: 35, start: function (event, ui) tooltip.fadeIn ('fast');, slide: function (event, ui) var value = slide.slider ('value'), volume = $ ('. Volume '); tooltip.css (' left ', value) .text (ui.value); if (value <= 5)  volume.css('background-position', '0 0');  else if (value <= 25)  volume.css('background-position', '0 -25px');  else if (value <= 75)  volume.css('background-position', '0 -50px');  else  volume.css('background-position', '0 -75px'); ; , stop: function(event,ui)  tooltip.fadeOut('fast'); , ); ); 

    Được rồi, bây giờ hãy xem kết quả trong trình duyệt.

    • Bản giới thiệu
    • Tải xuống nguồn

    Phần kết luận

    Hôm nay chúng tôi đã tạo thành công một chủ đề UI UI thanh lịch hơn nhưng đồng thời chúng tôi cũng đã dịch thành công Giao diện người dùng PSD thành bộ điều khiển âm lượng chức năng.

    Chúng tôi hy vọng hướng dẫn này truyền cảm hứng cho bạn và có thể giúp bạn hiểu cách biến PSD thành một sản phẩm tiện dụng hơn.

    Cuối cùng, nếu bạn có bất kỳ câu hỏi nào liên quan đến hướng dẫn này, vui lòng thêm nó vào phần bình luận bên dưới.