質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1192閲覧

visualstudio2017でのjqueryプラグインの使用方法

sanezane

総合スコア91

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2018/05/19 07:17

編集2018/05/20 10:23

実装したいこと

テーブルにスクロールバーを設置したい

困っていること

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>&copy; @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)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/19 09:25 編集

「ダメで」だけでは何が起きているかわかりません。本当に手順通りできているのか、自身の環境では何が起こったのか 具体的に記載してください。
m.ts10806

2018/05/19 09:28

ブラウザから実行時に開発ツールのコンソールにエラーが出ていないか確認してください。どのようなプラグインであれ、「jQuery本体が正しく読み込まれているか」「jQueryプラグインの必要なファイルは全て正常に読み込まれているか」「jQueryプラグインを呼び出すための記述、対象HTMLは間違いなく設置されているか」の3点が基本です。
guest

回答1

0

ベストアンサー

実行して表示されるhtmlのソースを確認してください。
BundleConfigでやっていることと、
@Scripts.Render("~/bundles(以下略)で何が出力されるのかを確認してください。
また、参考に挙げているページのコメントをきちんと読みましょう。
書いてる通りとありますが、ソース部分だけを見て説明の文章を読んでいないのではありませんか?
以上が根本的な原因で、以下は直接的な原因です。
jsファイルが2回読み込む様に書かれていて、それが複数ファイルあるのですから正常に動かないのも当然かと思われます。

投稿2018/05/19 18:07

len_souko

総合スコア1337

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanezane

2018/05/20 04:35 編集

ありがとうございます。 ご指摘の通り表示されている画面を検証しましたところ、目的のtbodyscrollは読み込まれておりました。(キャプチャ参照) 加えて、上から2つ目のhtml(Index)の ``` <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Scripts/respond.js"></script> <script src="~/Scripts/jquery.tbodyscroll.js"></script> ``` の部分で2回読み込まれているということでこの部分が不要だと判断し削除しました。 しかし、キャプチャの通り事象が変わらない状態です。
len_souko

2018/05/20 08:19

tbodyscrollは使ったことがないので軽くググってみたけど、指定する対象が違うよね tbodyscrollって名前から思い込んで間違ってるんじゃ無いかな?
sanezane

2018/05/20 10:26

tablescrollというプラグインに変更したのですが事象に変わりはありません。 画面の検証(キャプチャ3枚目)で、jqueryが読み込まれている箇所がfooterなのって関係ありますか?
len_souko

2018/05/20 13:34

プラグインが違うなんて話はしていません View.schtmlの >$('.scrollBody').scrolltable( これが何をしているのか理解していますか?
sanezane

2018/05/20 13:50

できました!テーブルの大きさが崩れましたが、やりたいことはできました。 引数にテーブル自体を入れるということだったんですね! 説明を飛ばして読んでいたのでこんなことになってしまいました。。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問