adbanner-test/app/views/admin/ad_banners/_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/module-area" %>
  <%= javascript_include_tag "validator" %>
  <%= javascript_include_tag "cycle2" %>
  <%= javascript_include_tag "ad_banner/banner_preview" %>
<% end %>

<style type="text/css">
	.preview{
		margin-top: 15px;
	}
</style>
<!-- Input Area -->
<div class="input-area">
<div class="nav-name"><strong><%= t(:module) %></strong></div>
  <ul class="nav nav-pills module-nav">
    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
  </ul>
  <!-- Module -->
	<div class="tab-content module-area">

	    <!-- Basic Module -->
	    <div class="tab-pane fade in active" id="basic">
	     <!-- Title-->
	      <div class="control-group">
			<%= f.label :title, t('ad_banner.banner_name'), :class => "control-label muted" %>
	      	<div class="controls">
				<%= f.text_field :title, class: 'input-large', placeholder: t('ad_banner.banner_name') %>
				<span class="help-block"><%= t('ad_banner.name_only_english') %></span>
	      	</div>	
	      </div>
	      <!-- timeout	 -->
	      <div class="control-group">
			<%= f.label :timeout, t('ad_banner.transition_interval'), :class => "control-label muted"  %>
	      	<div class="controls">
			<%= f.number_field :timeout, in: 0..60, step: 1, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"  %>
				<span class="help-block"><%= t('ad_banner.number_seconds') %></span>
	      	</div>	
	      </div>
	      <!-- transition speed -->
			<div class="control-group">
				<%= f.label :speed, t('ad_banner.transition_speed'), :class => "control-label muted"  %>
		      	<div class="controls">
				<%= f.number_field :speed, in: 0..1000, step: 100, class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>			
					<span class="help-block"><%= t('ad_banner.number_milliseconds') %></span>
		      	</div>	
		     </div>
		     <!-- size -->
		     <div class="control-group">
				<%= f.label :size, t('ad_banner.size'), :class => "control-label muted"  %>
		      	<div class="controls">
				<%= f.number_field :base_image, in: 1..(@ad_banner.new_record? ? 1 : (@ad_banner.ad_images.count == 0 ? 1 : @ad_banner.ad_images.count)), class: 'input-mini', onkeypress: "if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" %>
				<span class="help-block">Base Image</span>
		      	</div>	
		     </div>
		       <!-- Category -->
		      <div class="control-group">
		        <label class="control-label muted"><%= t(:category) %></label>
		        <div class="controls">
		          <%= select_category(f, @module_app) %>
		        </div>
		      </div>
		        <!-- effect -->
		      <div class="control-group">
				<%= f.label :size, t('ad_banner.effect'), :class => "control-label muted"  %>
		        <div class="controls">
		          <%= f.select :ad_fx, Banner::FX_TYPES, {}, {class: 'ad_banner_ad_fx', id: 'ad_fx'} %>
		          <p class="suckIE hide"><i class="icons-warning"></i> <%= t('ad_banner.no_ie_10_effect_support') %></p>
					<div class="preview">
					  <%= image_tag "slideshow_preview_A.png", width: "400", height: 80 %>
					  <%= image_tag "slideshow_preview_B.png", width: "400", height: 80 %>
					</div>
		        </div>
		      </div>
	     </div>
		</div>
	</div>
<!-- Form Actions -->
<div class="form-actions">
  <%= f.submit t('submit'), class: 'btn btn-primary' %>
  <input type="hidden" name="referer_url" value="<%= admin_ad_banners_path(:page => params[:page]) %>">
  <%= link_to t('cancel'), admin_ad_banners_path(:page => params[:page]), :class=>"btn" %>  
</div>
<script type="text/javascript">
<% if @ad_banner.new_record? %>
	slideshow($(".preview"), "fade" , 2000, 1000);
<% else %>
	slideshow($(".preview"), "<%= @ad_banner.ad_fx %>" , <%= @ad_banner.timeout * 1000  rescue 2000 %>, <%= @ad_banner.speed %>);
<% end %>
</script>