FAQ小应用 O(∩_∩)O哈哈~

<style type="text/css">
			.faq {
				padding :0px ;
				margin : 0 auto ;
				margin-top : 3px ;
				background : #fff ;
				width : 220px ;
				border : 1px solid #999 ;
			}
			.t {
				padding-left : 10px ;
				margin : 0px ;
				height : 24px ;
				line-height : 24px ;
				font-size : 13px ;
				font-family : arial ;
				font-weight : bold ;
				background : #ccc ;
				width : 210px ;
				cursor : pointer ;
			}
			.b {
				padding-top: 8px ;
				padding-bottom: 10px ;
				padding-left: 8px ;
				padding-right: 8px ;
				margin : 0px ;
				width : 204x ;
				line-height : 20px ;
				font-size : 12px ;
				font-family : arial ;
				color : #000 ;
				word-wrap:break-word ;
			}
			div#foo {
				padding : 10px ;
				margin : 0 auto ;
				margin-top : 60px ;
				width : 40% ;
				border : 0px ;
				background : whitesmoke ;
			}
			.highLight {
				color : #ff3300 ;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				var config = {
					renderTo : "foo" ,
					faqs : [
						{
							title : "JQuery" ,
							text : "JQuery对象才能使用JQuery定义的方法；DOM对象才能使用DOM对象的方法；二者不可以混淆；DOM对象通过$操作则可以转成JQuery对象。例如下面的例子，经过$操作以后，DOM对象就变成了JQuery对象，可以进行JQuery操作。"
						} ,
						{
							title : "Prototype" ,
							text : "Prototype常见FAQ"
						} ,
						{
							title : "ExtJS" ,
							text : "ExtJS常见FAQ"
						} ,
						{
							title : "Dojo" ,
							text : "Dojo常见FAQ"
						} ,
						{
							title : "Yahoo-YUI" ,
							text : "Yahoo-YUi常见FAQ"
						}
					]
				} ;
				FAQ.load(config) ;
			}) ;
			var FAQ = function(){
				function _render(renderTo,faqs){
					for(var i=0;i<faqs.length;i++){
						var faq = faqs[i] ;
						var t = faq.title ;
						var text = faq.text ;
						var _faq = $("<div></div>")
								.addClass("faq")
								.appendTo(renderTo) ;
						var _t = $("<div></div>")
								.addClass("t")
								.html(t)
								.appendTo(_faq)
								.mouseover(function(){
									$(this).addClass("highLight") ;
								})
								.mouseout(function(){
									$(this).removeClass("highLight") ;
								})
								.click(function(){
									var jq = $(this).next() ;
									_showOrHide(jq) ;
								}) ;
						var _b = $("<div></div>")
								.addClass("b")
								.html(text)
								.appendTo(_faq) ;
					}
				} ;
				function _showOrHide(jq){
					jq.slideToggle() ;
				} ;
				function load(config){
					var renderTo = $(document.getElementById(config.renderTo)) ;
					var faqs = config.faqs ;
					_render(renderTo,faqs) ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>

评论

2 楼 ziyuewang 2011-04-10  

谢谢啊只是习惯了！(*^__^*) 嘻嘻……

1 楼 int08h 2011-04-10  

用dl/dt/dd的结构不是更好么