我在The Rails Tutorial(第10章,练习7)中尝试使用信息
here作为基础并在StackOverflow应答
here和
@L_403_2@的帮助下尝试微博字符倒计时.
在屏幕上,它看起来像this,当你接近字符限制时,文本逐渐变红,一旦微博超过限制,Post按钮禁用,完成like so.
目前的实现如下：
视图/共享/ _micropost_form.html.haml
= form_for @micropost do |f|
= render 'shared/error_messages',object: f.object
.field= f.text_area :content,placeholder: t('.compose_micropost')
%span
.remaining= t('.characters_remaining').html_safe
.countdown
= f.submit t('.post'),class: "btn btn-large btn-primary"
资产/ Java脚本/ microposts.js.coffee
updateCountdownAttributes = (toRemove,toAdd = null) ->
for attr in toRemove
$(".remaining,.countdown").removeClass attr
if toAdd
$(".remaining,.countdown").addClass toAdd
if toAdd is "overlimit"
$("input.btn.btn-large.btn-primary").attr("disabled","true")
else
$("input.btn.btn-large.btn-primary").removeAttr("disabled")
updateCountdown = ->
remaining = 140 - $("#micropost_content").val().length
toRemove = ["nearlimit","almostlimit","overlimit"]
if remaining > 19
updateCountdownAttributes(toRemove)
if remaining < 20
toAdd = (toRemove.filter (attr) -> attr is "nearlimit").toString()
updateCountdownAttributes(toRemove,toAdd)
if remaining < 11
toAdd = (toRemove.filter (attr) -> attr is "almostlimit").toString()
updateCountdownAttributes(toRemove,toAdd)
if remaining < 0
toAdd = (toRemove.filter (attr) -> attr is "overlimit").toString()
updateCountdownAttributes(toRemove,toAdd)
$(".countdown").text remaining
$(document).ready ->
$(".countdown").text 140
$("#micropost_content").change updateCountdown
$("#micropost_content").keyup updateCountdown
$("#micropost_content").keydown updateCountdown
$("#micropost_content").keypress updateCountdown
资产/样式表/ custom.css.scss
...
/* Micropost character countdown */
.remaining,.countdown {
display: inline;
color: $grayLight;
float: right;
}
.overlimit {
color: $red;
}
.almostlimit {
color: hsl(360,57%,21%);
}
.nearlimit {
color: $gray;
}
配置/语言环境/ en.yml
en:
...
shared:
...
micropost_form:
compose_micropost: "Compose new micropost..."
post: "Post"
characters_remaining: " characters remaining."
从这里,我有两个问题/问题：
第一个是,如果可能的话,我希望能够对“剩余字符”字符串进行适当的复数化.也许是这样的：
视图/共享/ _micropost_form.html.haml
...
%span
.remaining= t('.characters_remaining',count: [[.countdown value]]).html_safe
.countdown
...
配置/语言环境/ en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
但是,我不知道如何在.countdown div中检索值,我可以将它传递给count参数.我怎样才能做到这一点？
假设第一个问题可以解决,我也想摆脱减号字符,而是将“-2个字符剩余”改为“2个字符以上”.也许在视图中使用某种分支逻辑和一些javascript将负数更改为正数…？我在这里不太确定,所以任何帮助都会受到赞赏.
视图/共享/ _micropost_form.html.haml
...
%span
- [[ if .countdown value < 0 ]]
.remaining= t('.characters_over',count: [[positive .countdown value]]).html_safe
- [[ else ]]
.remaining= t('.characters_remaining',count: [[.countdown value]]).html_safe
.countdown
...
配置/语言环境/ en.yml
...
micropost_form:
...
characters_remaining:
one: " character remaining."
other: " characters remaining."
characters_over:
one: " character over."
other: " characters over."
解决方法
我也正在阅读本教程,并发现这篇文章,虽然我喜欢你添加的css使这看起来一致(我已经把它作为我自己:) :)我认为你的解决方案过于复杂.对我来说,这只是两个变化：js脚本并将脚本添加到我的视图中.
我的JS文件：character_countdown.js
function updateCountdown() {
// 140 characters max
var left = 140 - jQuery('.micropost_text_area').val().length;
if(left == 1) {
var charactersLeft = ' character left.'
}
else if(left < 0){
var charactersLeft = ' characters too many.'
}
else{
var charactersLeft = ' characters left.'
}
jQuery('.countdown').text(Math.abs(left) + charactersLeft);
}
jQuery(document).ready(function($) {
updateCountdown();
$('.micropost_text_area').change(updateCountdown);
$('.micropost_text_area').keyup(updateCountdown);
});
这是我将它添加到视图中的位置
<script src="app/assets/javascripts/character_countdown.js"></script> <%= form_for(@micropost) do |f| %> <%= render 'shared/error_messages',object: f.object %>
请让我知道你在想什么 ：)
