jQuery slider in asp.net

Suggested Videos
Part 75 - jQuery accordion using asp.net repeater control
Part 76 - jQuery tabs in asp.net
Part 77 - jQuery datepicker in asp.net

(追記) (追記ここまで)

In this video we will discuss using jQuery slider widget in an asp.net web forms application.

(追記) (追記ここまで)

We want to increase and decrease the font-size using the slider
jQuery slider in asp.net

HTML
<divid="slider"></div>
<br/>
<divid="myDiv"style="font-size: 20px">
Slider Example
</div>

 jQuery code
$(document).ready(function () {
var divElement = $('#myDiv');
$('#slider').slider({
min: 20,
max: 120,
orientation: 'horizontal',
slide: function (event, ui) {
divElement.css('font-size', ui.value + 'px');
}
});
});

 For the complete list of slider options and events
http://api.jqueryui.com/slider

Options
Option Description
min The minimum value of the slider. The default is 0
max The maximum value of the slider. The default is 100
orientation Horizontal or vertical orientation of the slider

Events
Event Description
start Triggered when the user starts sliding
stop Triggered when the user stops sliding
slide Triggered on every mouse move during slide

The following example handles start, stop and slide events of the slider widget
jquery slider example

HTML
<divid="slider"></div>
<br/>
<divid="divStart"></div>
<divid="divStop"></div>
<divid="divSlide"></div>

 jQuery Code
$(document).ready(function () {
$('#slider').slider({
min: 20,
max: 120,
orientation: 'horizontal',
start: function (event, ui) {
$('#divStart').html('Start = ' + ui.value);
},
stop: function (event, ui) {
$('#divStop').html('Stop = ' + ui.value);
},
slide: function (event, ui) {
$('#divSlide').html('Slide = ' + ui.value);
}
});
});

jQuery tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources

[フレーム]

Subscribe to: Post Comments (Atom)

AltStyle によって変換されたページ (->オリジナル) /