実装したいこと
テーブルにスクロールバーを設置したい
困っていること
visualstudioでのプラグインの使用方法がわからない
コード投げて丸投げみたいで本当に情けないのですが、jQueryプラグインを使用する方法-MSDNの通りにやってもダメでかなり時間が掛かってしまっているのでお力をお貸しいただけないでしょうか。
html
1【_Layout.cshtml(HOME画面)参照記述】 2<!DOCTYPE html> 3<html> 4<head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta charset="utf-8" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title> 9 @Styles.Render("~/Content/css") 10 @Scripts.Render("~/bundles/modernizr") 11 12</head> 13<body> 14 <div class="navbar navbar-inverse navbar-fixed-top"> 15 <div class="container"> 16 <div class="navbar-header"> 17 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 18 <span class="icon-bar"></span> 19 <span class="icon-bar"></span> 20 <span class="icon-bar"></span> 21 </button> 22 @Html.ActionLink("アプリケーション名", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 23 </div> 24 <div class="navbar-collapse collapse"> 25 <ul class="nav navbar-nav"> 26 <li>@Html.ActionLink("ホーム", "Index", "Home")</li> 27 <li>@Html.ActionLink("詳細", "About", "Home")</li> 28 <li>@Html.ActionLink("問い合わせ", "Contact", "Home")</li> 29 <li>@Html.ActionLink("おまけ", "Omake" , "Home")</li> 30 31 </ul> 32 </div> 33 </div> 34 </div> 35 <div class="container body-content"> 36 @RenderBody() 37 <hr /> 38 <footer> 39 <p>© @DateTime.Now.Year - マイ ASP.NET アプリケーション</p> 40 </footer> 41 </div> 42 43 @Scripts.Render("~/bundles/jquery") 44 @Scripts.Render("~/bundles/bootstrap") 45 @RenderSection("scripts", required: false) 46</body> 47</html> 48 49 50
html
1【テーブルのあるページのView.cshtml】 2//-------------------------------jQuery参照とスクロールバー処理を記述-------------------------- 3 4 5@{ 6 ViewBag.Title = "Omake"; 7} 8@section Scripts{ 9 @Scripts.Render("~/bundles/tbodyscroll") 10} 11<script src="~/Scripts/jquery-1.10.2.js"></script> 12<script src="~/Scripts/bootstrap.js"></script> 13<script src="~/Scripts/respond.js"></script> 14<script src="~/Scripts/jquery.tbodyscroll.js"></script> 15 16 17<script type="text/javascript"> 18 $(function () { 19 $('.scrollBody').scrolltable({ 20 stripe: true, 21 oddClass: 'odd' 22 }); 23 }); 24</script> 25 26<h2>Omake</h2> 27<div id="container" class="clearfix" style="content:none; display:block; clear:both"> 28 <table class="table table-striped table-bordered" style="float:left" width="300" height="100"> 29 <thead class="scrollHead"> 30 <tr><th class="no">番号</th><th class="name">お名前</th><th class="address">連絡先</th><th>へへへ</th></tr> 31 </thead> 32 <tbody class="scrollBody"> 33 <tr><td class="no">1</td><td>1111</td><td>hhh<td></tr> 34 <tr><td class="no">2</td><td>1111</td><td>hhh<td></tr> 35 <tr><td class="no">3</td><td>1111</td><td>hhh<td></tr> 36 <tr><td class="no">4</td><td>1111</td><td>hhh<td></tr> 37 <tr><td class="no">5</td><td>1111</td><td>hhh<td></tr> 38 <tr><td class="no">6</td><td>1111</td><td>hhh<td></tr> 39 <tr><td class="no">1</td><td>1111</td><td>hhh<td></tr> 40 <tr><td class="no">2</td><td>1111</td><td>hhh<td></tr> 41 <tr><td class="no">3</td><td>1111</td><td>hhh<td></tr> 42 <tr><td class="no">1</td><td>1111</td><td>hhh<td></tr> 43 <tr><td class="no">2</td><td>1111</td><td>hhh<td></tr> 44 <tr><td class="no">3</td><td>1111</td><td>hhh<td></tr> 45 <tr><td class="no">4</td><td>1111</td><td>hhh<td></tr> 46 <tr><td class="no">5</td><td>1111</td><td>hhh<td></tr> 47 <tr><td class="no">6</td><td>1111</td><td>hhh<td></tr> 48 <tr><td class="no">1</td><td>1111</td><td>hhh<td></tr> 49 <tr><td class="no">2</td><td>1111</td><td>hhh<td></tr> 50 <tr><td class="no">3</td><td>1111</td><td>hhh<td></tr> 51 <tr><td class="no">4</td><td>1111</td><td>hhh<td></tr> 52 <tr><td class="no">5</td><td>1111</td><td>hhh<td></tr> 53 <tr><td class="no">6</td><td>1111</td><td>hhh<td></tr> 54 <tr><td class="no">1</td><td>1111</td><td>hhh<td></tr> 55 <tr><td class="no">2</td><td>1111</td><td>hhh<td></tr> 56 <tr><td class="no">3</td><td>1111</td><td>hhh<td></tr> 57 <tr><td class="no">4</td><td>1111</td><td>hhh<td></tr> 58 <tr><td class="no">5</td><td>1111</td><td>hhh<td></tr> 59 <tr><td class="no">6</td><td>1111</td><td>hhh<td></tr> 60 </tbody> 61 </table>
//--------------------------設定ファイルへ参照設定【Bundle.config】----------------------------- stem.Web; using System.Web.Optimization; namespace WebApplication3 { public class BundleConfig { // バンドルの詳細については、https://go.microsoft.com/fwlink/?LinkId=301862 を参照してください public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.validate*")); // 開発と学習には、Modernizr の開発バージョンを使用します。次に、実稼働の準備が // 運用の準備が完了したら、https://modernizr.com のビルド ツールを使用し、必要なテストのみを選択します。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css")); //------------------------------------追加したコード-------------------------------------------- bundles.Add(new ScriptBundle("~/bundles/tbodyscroll").Include( "~/Scripts/jquery.tbodyscroll.js")); } } }
![jquery読み込み確認と事象の確認](725f4beda3caf6672377ad8c2dc8e964.png) ![![プラグイン変更(scrolltable)](d894d53b4f7a4d3af522465cada6750a.png)](8df69250d0a653ceacb27b8fc3c44e58.png) ![footer](1677f855153eb2168f9f168ddf84a15a.png)
回答1件
あなたの回答
tips
プレビュー