用SwapSelect在view中管理一对多关联

在视图中建立一对象与已经存在的多个对象的关联比较麻烦。
在select-box中设置 multiple => true可以实现,但是如果选项太多的话,上下翻起来很麻烦。
或者用一堆的check_box。也不方便。

http://trendwork.kmf.de/26/swapselect-a-better-way-for-multiple-select-in-rails/
发现了SwapSelect
这个SwapSelect有左右两个选择框,从左边的框中选中到右边的框,提交就可以了。
只是目前还存在一些问题:
1.没有做成plugin,要将各文件拷到相应的位置;
2.有时不进行选择时会有问题,随便左右移动一下就好了;
3.选择框中什么都没有时,框会很窄,比较难看;
4.IE中显示有问题,在swapselect.css中改一下width:40%;就好了。
div.swap_select .swap_select_select {
	float:left;
	width:40%;
}

中文嘛,在swapselect.js中改一下就好了。
  this.languagesValues = new Object();
  this.languagesValues["AviableHeadline"] = "可选项";
  this.languagesValues["SelectedHeadline"] = "已选项";
  this.languagesValues["AssumeButtonTitleAttr"] = "添加";
  this.languagesValues["AssumeButtonText"] = "添加";
  this.languagesValues["AssumeAllButtonTitleAttr"] = "添加所有";
  this.languagesValues["AssumeAllButtonText"] = "添加所有";
  this.languagesValues["TakeBackButtonTitleAttr"] = "去除";
  this.languagesValues["TakeBackButtonText"] = "去除";
  this.languagesValues["TakeBackAllButtonTitleAttr"] = "去除所有";
  this.languagesValues["TakeBackAllButtonText"] = "去除所有";

中文显示时字号显得有些小,再改一下swapselect.css吧,改为font-size:12px;
div.swap_select p.swap_select_selected {
	font-size:12px;
	background-color:#EEEEEE;
	border:1px solid #CBCBCB;
	border-bottom:none;
}

用起来很简单。

你可能感兴趣的:(css,IE,Rails)