Skip to content

Instantly share code, notes, and snippets.

@miso-soup miso-soup/Audience Html
Last active Dec 17, 2015

Embed
What would you like to do?
SignalR で Html プレゼン jQueryプラグイン Ascensor.js http://kirkas.ch/ascensor/#/Home を使用しています
<div id="ascensorBuilding">
<section>
<article>
<h2>1 Getting Started</h2>
<h3>Contents...</h3>
</article>
</section>
<section>
<article>
<h2>2 Creating Web APIs</h2>
<h3>Contents...</h3>
</article>
</section>
<section>
<article>
<h2>3 Web API Clients</h2>
<h3>Contents...</h3>
</article>
</section>
<section>
<article>
<h2>4 Routing and Actions</h2>
<h3>Contents...</h3>
</article>
</section>
<section>
<article>
<h2>5 Formats and Model Binding</h2>
<h3>Contents...</h3>
</article>
</section>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery.ascensor.js"></script>
<script src="~/Scripts/jquery.signalR-1.1.0.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$('#ascensorBuilding').ascensor({
AscensorName: 'ascensor',
ChildType: 'section'
});
$.connection.hub.start();
var remoteHub = $.connection.remoteHub;
//前のスライドへ
remoteHub.client.prev = function () {
$('#ascensorBuilding').trigger({
type: "ascensorUp",
floor: 1
});
};
//次のスライドへ
remoteHub.client.next = function () {
$('#ascensorBuilding').trigger({
type: "ascensorDown",
floor: 1
});
};
//指定した番号のスライドへ
remoteHub.client.slideNumber = function (slideNumber) {
$('#ascensorBuilding').trigger("target", slideNumber);
};
</script>
using Microsoft.AspNet.SignalR;
namespace SignalRSlide.Hubs
{
public class RemoteHub : Hub
{
public void NotifyNext()
{
// 次のスライドへ移動する指示を全員へ送信
Clients.All.Next();
}
public void NotifyPrev()
{
// 前のスライドへ移動する指示を全員へ送信
Clients.All.Prev();
}
public void NotifySlideNumber(int slideNumber)
{
// 指定したスライドへ移動する指示を全員へ送信
Clients.All.SlideNumber(slideNumber);
}
}
}
<div class="prev remote">←</div>
<div class="next remote">→</div>
<ul class="remote">
<li data-number="1">1 Getting Started</li>
<li data-number="2">2 Creating Web APIs</li>
<li data-number="3">3 Web API Clients</li>
<li data-number="4">4 Routing and Actions</li>
<li data-number="5">5 Formats and Model Binding</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery.signalR-1.1.0.js" type="text/javascript"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$.connection.hub.start();
var remoteHub = $.connection.remoteHub;
//次のスライドへ
$(".next").on("click", function () {
remoteHub.server.notifyNext();
});
//前のスライドへ
$(".prev").on("click", function () {
remoteHub.server.notifyPrev();
});
//指定した番号のスライドへ
$("li").on("click", function (e) {
remoteHub.server.notifySlideNumber($(this).attr('data-number'));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.