1. ApplicationResources.groovyでモジュールを宣言
modules = { application { resource url:'js/application.js' } slidenote { dependsOn 'jquery' resource url: 'js/jquery.slidenote.min.js' } }jquery.slidenote.min.jsはweb-app/jsに、×ボタンのpngはサンプルページから直接ダウンロードして
slidenote.close.pngとしてweb-app/imagesに保存します
2. main.cssなどに以下のクラスを追加します。
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em; -moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #303030; } .slidenote img { float: left; margin-left: -2em; margin-top: -2em; }3. ノート内部に表示される以下のHTMLをsample.htmlとして保存します。
<html> <body> <div style="width: 300px; height: 50px;"> Slide Noteのサンプルです。 </body> </html>4. main.gspに以下のようにr:requireを使用してリソースを導入します。
<g:layoutHead/> <!-- Slide Noteを使用 --> <r:require module="slidenote"/> <r:layoutResources /> </head>5. viewに以下のようなコードを追加します。
<!-- Slide Noteを表示 --> <div id="slidenote" class="slidenote"></div> <script type="text/javascript"> $(function(){ $("#slidenote").slideNote({ where: 0, url: 'sample.html', closeImage: 'images/slidenote.close.png', displayCount: 1, onSlideIn: function(){ }, onSlideOut: function(){ } }); }); </script>出力画面
動作環境
grails 2.0.1
関連情報
Slide Note for jQueryのホームページ
http://moreco.de/slide-note/
投稿
0 件のコメント:
コメントを投稿