戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク4-12   jQueryスライダー

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




記述追加
app\assets\javascripts\application.js
「//= require jquery-ui/slider」の記述を17行目に追加
 
// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. JavaScript code in this file should be added after the last require_* statement. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require bootstrap-sprockets 
//= require jquery_ujs 
//= require jquery-ui/datepicker 
//= require jquery-ui/slider 
//= require toastr 
//= require gravtastic 
//= require turbolinks 
//= require_tree . 



「app\views\pages\search.html.erb」ファイルを編集します。


1.記述追加 app\views\pages\search.html.erb(13行目)
<div id="slider-range"></div>



2.スクリプトを追加(186行目)
 
<script> 
  $(function() { 
    $("#q_price_gteq").val('1000'); 
    $("#q_price_lteq").val('15000'); 
    $("#slider-range").slider({ 
      range: true, 
      min: 0, 
      max: 15000, 
      values: [1000, 15000], 
      slide: function(event, ui) { 
        $("#q_price_gteq").val(ui.values[0]); 
        $("#q_price_lteq").val(ui.values[1]); 
      } 
    }); 
    $(".ui-widget-header").css('background', '#00A699'); 
    $(".ui-state-default, .ui-widget-content").css('background', 'white'); 
    $(".ui-state-default, .ui-widget-content").css('border-color', '#00A699'); 
  }) 
</script> 






この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails5.0

2,000円

民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約、フルカレンダーによる部屋管理ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装、電話番号認証の実装方法解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 136