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 vi và thanh 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.
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.
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.
