Đang chuẩn bị nút TẢI XUỐNG, xin hãy chờ
Tải xuống
JQuery: Novice to Ninja- P20:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | 262 jQuery Novice to Ninja chapter_07 13_sliders script.js excerpt var max max .val var min min .val var rangeSlider div div .slider min 0 max 100 step 10 values min max range true animate true slide function e ui min .val ui.values 0 max .val ui.values 1 showCelebs .before h3 Drag the slider to filter by price h3 price-range .after rangeSlider .hide Whoa That s a lot of options. Let s see if we can break them down min and max are the minimum and maximum values of the slider respectively. step is the amount by which the slider increments. values is used for specifying the default value of the slider. Because we ve specified an array of two values the slider bar will have two handles each with a separate value. Here we re using the values from the select lists that we grabbed earlier so that the slider will always match up with the data in those boxes. range and animate are helpful options when creating a slider with more than one handle as we re doing here range indicates that the area between the handles should be styled differently usually with a shadow or a different color. This option can also be set to min in which case the area between the minimum and the first handle will be shaded or max which will shade the area between the last handle and the maximum . animate simply tells jQuery to animate the handle s position smoothly if the user clicks elsewhere on the bar rather than simply jumping there. Forms Controls and Dialogs 263 Finally slide allows you to specify an event handler that will run whenever the user moves the handles on the slider. The event handler can accept an optional ui parameter that allows you to access some of the slider s properties here we re using the values property to adjust the values of our select boxes. We also call showCelebs a custom method in which we ll show or hide celebrities depending on whether their prices fall within the chosen range. It s also possible to capture the change event which is very similar to the slide event
