- Webmaster
- 註冊日: 2008/2/19
- 來自:
- 發表數: 15771
|
- [分享]通用Combobox(Select)範例原始碼
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CCombox
</title>
<script>
var CTemplate = {
BLANK_IMG: '../default/s.gif'
};
</script>
<script type="text/javascript" src="../bglib-all-debug.js"></script>
<script type="text/javascript" src="../more/folderview.js"></script>
<link rel="stylesheet" href="../default/global.css" type="text/css"/>
<link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
<link rel="stylesheet" href="resources/example.css" type="text/css"/>
<style>
.g-tree .g-panel-body, .g-folderview-wrap{border:1px solid #CCC;border-top:0;}
.g-folderview-ctx dd{margin:5px;}
</style>
</head>
<body lang="zh">
<p> 下拉框作為selector引入到combox,
<br/> selector在裡面的分別是組控件,樹型控件和小視圖分組控件,
<br/> 它們在combox中都表現出一致的行為,不加修改就可放到combox中.
<br/> 下拉時出現loading圖標和樹型控件的loading圖標是裝飾模型實現後引起的效果,
<br/> 它監聽由加載模型觸發的open,final事件並作出相應的處理.
<br/> 在firebug下可察看事件
</p>
<div style="margin:20px 30px;position:relative;"> <h2>帶滾動條,默認下拉,可編輯</h2>
<div id="def_combo">
</div> <h2>隨內容伸縮,下拉,可編輯</h2>
<div id="auto_combo">
</div> <h2>禁用</h2>
<div id="disable_combo">
</div> <h2>不可編輯</h2>
<div id="unedit_combo">
</div> <h2>自定下拉控件和過濾方式</h2>
<div id="tree_combo">
</div> <h2>自定下拉控件和過濾方式 + 滾動 + Ajax動態加載</h2>
<div id="tree_ajax_combo">
</div> <h2>只要基於CSelectedContainer容器類的控件都可以</h2>
<div id="other_combo">
</div>
</div>
</body>
</html>
<script>
Event.ready(function(){
//
// 默認下拉
//
var cb = new CCombox({showTo:'def_combo', autoRender:true,width:300,array:[
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoIbx'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'},
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoDft'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'}
]});
cb.select(2);
cb.setScrollorHeight(150);
cb = new CCombox({showTo:'auto_combo', autoRender:true,width:300,array:[
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoIbx'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'},
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoDft'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'}
]});
//不可編輯
cb = new CCombox({showTo:'unedit_combo', autoRender:true,uneditable:true, width:300,array:[
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoIbx'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'},
{title:'粉綠色',icon:'icoIbx'},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoDft'},
{title:'清除記錄',icon:'icoDel' ,disabled:true},
{title:'粉紅色',icon:'icoDft'},
{title:'藍色',icon:'icoNote'},
{title:'清除記錄',icon:'icoDel'}
]});
//禁用
cb = new CCombox({showTo:'disable_combo', disabled: true, autoRender:true,uneditable:true, width:300});
// ----------------------------------
// 下拉為樹
//自定義過濾
function treeFilter(matcher, caller){
var caller = caller || window, fn = arguments.callee;
if(this.children){
var cm = true;
CC.each(this.children, (function(){
if(!matcher.call(caller,this) && !this.nodes){
this.display(0);
cm = false;
return;
}
this.display(1);
if(this.nodes && this.expanded)
fn.call(this, matcher, caller);
}));
}
}
var tree = new CTree({title:'tree', showTo:document.body, hidden:true,filter:treeFilter});
tree.root.fromArray([
{title:'disabled item',nodes:true,disabled:true},
{title:'B'},
{title:'C',nodes:true}
]);
tree.root.$(2).fromArray([
{title:'disabled A',nodes:true,disabled:true},
{title:'B',disabled:true},
{title:'items',nodes:true}
]);
tree.render();
//指定selector
cb = new CCombox({showTo:'tree_combo', selector:tree, autoRender:true,width:350});
tree = new CTree({title:'tree2', url:'/q?bg_q=test_group',
autoConnect:true, showTo:document.body, hidden:true,filter:treeFilter});
tree.root.fromArray([
{title:'Back Light 點擊展開', nodes:true},
{title:'BCDEFJDFL;AJSDL'},
{title:'disabled item',nodes:true,disabled:true},
{title:'BCDEFJDFL;AJSDL'},
{title:'C',nodes:true},
{title:'item something',disabled:true},
{title:'BCD人物事件'},
{title:'CDEFASLDFJ', nodes:true},
{title:'disabled item',nodes:true,disabled:true},
{title:'AAAAAAAAAAAAAA'},
{title:'WEB前端'}
]);
tree.root.$(2).fromArray([
{title:'disabled A',nodes:true,disabled:true},
{title:'B',disabled:true},
{title:'items',nodes:true}
]);
tree.render();
tree.root.expand();
//指定selector
cb = new CCombox({showTo:'tree_ajax_combo', autoRender:true,selector:tree, width:350});
cb.setScrollorHeight(150);
//
// 其它基於CSelectedContainer容器的控件
//
var foldview = new CFolderView({
showTo:document.body,
navKeyEvent : true,
hidden:true,
shadow:true,
title:'請選擇其中一項',
autoRender:true
});
//指定selector
cb = new CCombox({showTo:'other_combo', selector:foldview, autoRender:true,width:320});
cb.selector.on('comboxshow', function(){
//content loaded
if(this.loaded){
return;
}
//方便顯示loading..
this.setHeight(100);
this.on('load',(function(){
this.style('height','');
this.height = false;
}));
this.on('final',(function(){
//更新數量
this.setTitle(this.title);
}));
this.connect('http://www.bgscript.com/q?bg_q=foldview_data');
});
});
</script>
|
[轉貼]通用Combobox(Select)以至一般控件的設計與實現 (冷日