75 строки
3.4 KiB
Plaintext
75 строки
3.4 KiB
Plaintext
@section SampleHeading{<span class="sampleName">Rotator-Events-ASP.NET MVC-SYNCFUSION</span>}
|
|
@section MetaTags{
|
|
<meta name="description" content="This example demonstrates client-side events and triggered events when particular operations are performed in the Syncfusion ASP.NET MVC Rotator component.">
|
|
}
|
|
@section ControlsSection{
|
|
<div class="frame">
|
|
@Html.EJ().Rotator("sliderContent").Datasource((IEnumerable<localdata>)ViewBag.datasource).RotatorFields(t => t.Text("text").Url("url")).ShowPlayButton(true).SlideWidth("100%").SlideHeight("350px").IsResponsive(true).ShowPager(true).ShowThumbnail(true).ClientSideEvents(s => s.Create("oncreate").Change("onchange").PagerClick("onpagerClick").Start("onstart").Stop("onstop").ThumbItemClick("onThumbItemClick"))
|
|
</div>
|
|
}
|
|
<div id="target">
|
|
<ul>
|
|
<li>start</li>
|
|
<li>stop</li>
|
|
<li>change</li>
|
|
<li>pagerClick</li>
|
|
<li>thumbItemClick</li>
|
|
</ul>
|
|
</div>
|
|
@section EventsDropdown{
|
|
@Html.EJ().DropDownList("selectControls_input").ShowCheckbox(true).CheckAll(true).TargetID("target").ClientSideEvents(s => s.Change("evtpropscheckedevent"))
|
|
|
|
}
|
|
@section ScriptSection{
|
|
<script type="text/javascript">
|
|
function evtpropscheckedevent(args) {
|
|
var slideObj = $("#sliderContent").data("ejRotator");
|
|
if (args.isChecked) {
|
|
switch (args.selectedText) {
|
|
case "create": slideObj.option(args.selectedText, "oncreate"); break;
|
|
case "start": slideObj.option(args.selectedText, "onstart"); break;
|
|
case "stop": slideObj.option(args.selectedText, "onstop"); break;
|
|
case "change": slideObj.option(args.selectedText, "onchange"); break;
|
|
case "pagerClick": slideObj.option(args.selectedText, "onpagerClick"); break;
|
|
case "thumbItemClick": slideObj.option(args.selectedText, "onThumbItemClick"); break;
|
|
}
|
|
}
|
|
else slideObj.option(args.selectedText, null);
|
|
}
|
|
function oncreate(args) {
|
|
jQuery.addEventLog("Rotator control has been <span class='eventTitle'>created</span>. <br/>");
|
|
}
|
|
function onstart(args) {
|
|
jQuery.addEventLog("Autoplay has been <span class='eventTitle'>started</span> at index " + args.activeItemIndex + ". <br/>");
|
|
}
|
|
function onstop(args) {
|
|
jQuery.addEventLog("Autoplay has been <span class='eventTitle'>stopped</span> at index " + args.activeItemIndex + ". <br/>");
|
|
}
|
|
function onchange(args) {
|
|
jQuery.addEventLog("Slide index has been <span class='eventTitle'>changed</span> to " + args.activeItemIndex + ". <br/>");
|
|
}
|
|
function onpagerClick(args) {
|
|
jQuery.addEventLog("Pager has been <span class='eventTitle'>clicked </span> at index " + args.activeItemIndex + ". <br/>");
|
|
}
|
|
function onThumbItemClick(args) {
|
|
jQuery.addEventLog("Thumbnail Element has been <span class='eventTitle'>clicked</span> at index " + args.activeItemIndex + ". <br/>");
|
|
}
|
|
function onClear() {
|
|
$("#EventLog").html("");
|
|
}
|
|
</script>
|
|
}
|
|
@section StyleSection{
|
|
<style type="text/css" class="cssStyles">
|
|
.frame {
|
|
width:100%;
|
|
box-sizing : border-box;
|
|
}
|
|
#sliderContent > li img {
|
|
width: 100%;
|
|
height: 350px;
|
|
}
|
|
</style>
|
|
}
|
|
|