wfquery
Version:
like jQuery but just for new browser
79 lines (77 loc) • 2.92 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=request.$.title%></title>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
<style>
pre.code{background: #d2d2d2;padding: 4px;}
</style>
</head>
<body>
<a href="../index.html">返回首页</a>
<style>
.select-holder{
display: inline-block;
overflow: hidden;
height: 24px;
line-height: 24px;
}
.select-holder.expended{
height: auto;
}
.select-holder span{
display: block;
}
</style>
<h2>一个模拟下拉框【使用requirejs加载】</h2>
<select name="favi" id="favi">
<option value="">--请选择--</option>
<option value="1" selected>篮球</option>
<option value="2">足球</option>
<option value="3">排球</option>
</select>
<button id="exec">模拟</button>
<script class="code">
require(['../wfQuery'],function($){
$.fn.Select = function(){
return this.each(function(){
var select = this, index = select.children[select.selectedIndex];
var sel = $( '<a class="select-holder">'+'<strong>'+index.innerHTML+'</strong>' + select.innerHTML.replace(/(\<[\/]?)option/ig,'$1span')+'</a>' );
$(select).before(sel).hide();
$(document).on('click','.select-holder',function(e){
$(this).toggleClass( 'expended' );
var tar = $(e.target), show = $(this).children('strong');
value = tar.attr('value'),
_sel = $(this).next();
if( value ){
_sel.val( value );
show.html( tar.html() )
}
},function(e){
$('.select-holder').removeClass( 'expended' );
});
});
};
var selected = false;
$('#exec').on('click',function(){
if( selected ){
$('#favi, .select-holder').toggle();
}else{
selected = !selected;
$('#favi').Select();
}
$(this).html( $(this).html() === "模拟" ? '重置' : "模拟" );
});
});
</script>
<a href="https://github.com/shy2850/wfQuery.git" target="_"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
</body>
</html>
<%
var pre = require('../plugins/prettify.js');
__p = __p.replace(/\<script\s+class="code".*\>([\s\S]*?)\<\/script\>/,function(all,code){
var res = pre.parse(code);
return '<style>'+res.style+'</style>' + '<pre class="code">' + res.output + '</pre>' + all;
});
%>