LMS讨论区制作过程中出现的问题 - tianlu1677/tianlu1677.github.io GitHub Wiki
1.1 tagsinput
主要用于插入标签的时候,管理标签。
$('.tags-input').tagsinput({
tagClass: 'label label-disc',
maxTags: 5,
maxChars: 8
});
$('.tags-input').on('beforeItemAdd', function(event){
if(event.item.length > 8)
{
event.cancel = true
}
});
//$("select").val() ["Amsterdam","Washington","Sydney","Beijing","Cairo"]
类似于JQuery-autocomplete。主要是能够实现自动提示,跳转链接。还可以实现ajax请求,动态的自动提示。
relationalTopics: () ->
@topics = new Lms.Collections.TopicsCollection({baseUrl: '/classes/' + current_class.id })
@topics.fetch
success: (collection, response, options) ->
@relateTopicsName = collection.pluck("title")
JSON.stringify(@relateTopicsName)
@relateTopics = []
for title, i in @relateTopicsName
topic = collection.models[i]
@relateTopics.push({ value: title , data:{ link: "forums/#{topic.get("forum_id")}/topics/#{topic.get("id")}", posts_count: topic.get("posts_count") } })
# this is use Auto-complete plugin
$("#thread-title").devbridgeAutocomplete
lookup: @relateTopics
lookupLimit: 8
triggerSelectOnValidInput: false
formatResult: (suggestion, currentValue) ->
return suggestion.value + " " + suggestion.data.posts_count + "个回答"
onSelect: (suggestion) ->
window.location.hash = suggestion.data.link
onSearchComplete: (query, suggestions) ->
if(suggestions.length > 7)
relationLink = encodeURI("#topics/search?q[title_or_body_cont]=" + $("#thread-title").val())
$(".autocomplete-suggestions").append('<div class="autocomplete-suggestion" data-index=""><a href="' + relationLink + '">查看全部相关主题</a></div>')
1.3 timeago
显示发布时间与当前的时间差,比较友好
<span class="time"><%= $.timeago(Date.parse(last_edited_at)) %>更新</span>
或者是,会自动增长时间。
jQuery(document).ready(function() {
jQuery("abbr.timeago").timeago();
});
$.alert
confirmTitle: "确认删除",
contentText: "是否确定删除此主题?",
cancelBtnText: "取消",
confirmBtnText: "确定",
confirmFunc: () => // 确定后执行函数
@model.destroy()
this.remove()
window.location.hash = 'forums/' + forum_id
1.5 分页 backbone.paginator
备选方案: sweetalert