Skip to content

Commit 589ea42

Browse files
puagpuag
committed
add select
1 parent ec665c7 commit 589ea42

16 files changed

+506
-195
lines changed

‎common/pop.html

+145-144
Large diffs are not rendered by default.

‎common/select.html

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>豪情-前端作品集合</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
7+
<meta name="keywords" content="豪情-前端开发"/>
8+
<meta name="description" content="豪情-前端开发"/>
9+
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
10+
<link rel="stylesheet" type="text/css" href="../css/select.css"/>
11+
<link rel="stylesheet" type="text/css" href="../css/demo.css"/>
12+
<link rel="stylesheet" type="text/css" href="../css/jkcodecolor.css"/>
13+
<link rel="shortcut icon" href="images/favicon.ico"/>
14+
<script type="text/javascript" src="../js/libs/libs.js"></script>
15+
<script type="text/javascript" src="../js/libs/highlight.js"></script>
16+
<script type="text/javascript" src="../js/libs/lang-js.js"></script>
17+
<style type="text/css">
18+
19+
</style>
20+
</head>
21+
<body>
22+
<div class="wrap">
23+
<div class="main">
24+
<div class="cont">
25+
<div class="section">
26+
<h1>这是一个简单的弹出层组件，为了演示方便，做了一些特殊的处理。</h1>
27+
<ol class="list">
28+
<li>
29+
<span>普通的click弹出页面指定内容，callOpen,callClose</span>
30+
<textarea class="code">
31+
$('#btn01').on('click',function(){
32+
var d = new $.pop({
33+
title : '标题',
34+
content : $('#btncontent1').html(),
35+
callOpen : function(){
36+
setTimeout(function(){
37+
alert('open');
38+
},500);
39+
},
40+
callClose : function(){
41+
alert('close');
42+
}
43+
});
44+
});
45+
</textarea>
46+
<pre></pre>
47+
<div>
48+
<select name="" id="">
49+
<option value="">--请选择--</option>
50+
<option value="">中国</option>
51+
</select>
52+
<select name="" id="">
53+
<option value="">--请选择--</option>
54+
<option value="">中国</option>
55+
</select>
56+
</div>
57+
<script type="text/javascript">
58+
$('#btn01').on('click',function(){
59+
var d = new $.pop({
60+
title : '标题',
61+
content : $('#btncontent1').html(),
62+
callOpen : function(){
63+
setTimeout(function(){
64+
alert('open');
65+
},500);
66+
},
67+
callClose : function(){
68+
alert('close');
69+
}
70+
});
71+
});
72+
73+
</script>
74+
</li>
75+
</ol>
76+
</div>
77+
78+
</div>
79+
<div class="overlay"></div>
80+
</div>
81+
</div>
82+
<script type="text/javascript" src="../js/init/select.init.js"></script>
83+
</body>
84+
</html>

‎css/demo.css

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
html,body{ height:100%;background: #f1f1f1;}
2+
.main{ width:700px;line-height:23px;margin:20px 0 20px 200px;border-radius:10px;border:solid #ccc 1px;}
3+
.cont{ width:100%; height:100%;background: #fff;border-radius:10px;}
4+
.section{ padding:25px;}
5+
.section h1{ font-size:16px; font-weight:normal; font-family:'微软雅黑';}
6+
.section h2{ font-size:16px; font-weight:normal; font-family:'微软雅黑';}
7+
.overlay{ position:absolute;width:100%;height:100%;background:#373938;top:0;left:0;display:none;filter:alpha(opacity=70);opacity:0.7;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;border:solid #c79d5f 1px;}
8+
.list{ padding-top:15px;}
9+
.list li{list-style:decimal inside; }
10+
.list li pre{background: #333;}
11+
.code{display:none;height:1px;overflow:hidden;}
12+
.btn{ padding:0 5px; cursor:pointer;}
13+
.tab{border-collapse:collapse;border:1px solid #ccc;}
14+
.tab td{border:1px solid #ccc;padding:5px;}

‎css/home.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* sider */
2-
.sidebar{float: left;min-height:350px;width: 189px; border-right: 1px solid #ccc;background: #f2f2f2;}
3-
.main{margin-left: 190px;min-height:100%;}
2+
.sidebar{ position:fixed;top: 0;left: 0;bottom: 0;width: 189px; border-right: 1px solid #ccc;background: #f2f2f2;overflow-y:auto;}
3+
.main{ position:fixed;top: 0;right: 0;bottom: 0; left:190px;}
44
.sider-title{text-align: left;text-indent: 1em;}
55
.sider-title h1{font-size: 24px;font-weight: normal;height:60px;line-height:60px;}
66
.sider-list li{border-bottom: 1px solid #e5e5e5;}

‎css/jkcodecolor.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.jkhightlight{border:1px solid #817168;font:10pt Andale Mono;margin:10px 0;-moz-border-radius:6px;-webkit-border-radius:6px;-webkit-box-shadow:2px 2px 5px #8a4019;-moz-box-shadow:2px 2px 5px #8a4019;word-wrap:break-word;word-break:normal;}
1+
.jkhightlight{border:1px solid #817168;font:10pt Andale Mono;margin:10px 0;-moz-border-radius:6px;-webkit-border-radius:6px;word-wrap:break-word;word-break:normal;}
22
pre{margin:0;padding:0;}
33
.jkhightlight pre{margin:0;padding:10px;overflow:hidden;font:15px/22px Consolas, Droid Sans Mono,Courier;color:#66ff66;border:1px solid #535252;-moz-border-radius:6px;-webkit-border-radius:6px;}
44
.jkhightlight .keyword{color:#ffff00;}

‎css/pop.css

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
.ui-pop{position:fixed;min-width:350px;min-height:300px;border:10px solid #4b4b4b;background:#fff;overflow:hidden;z-index:99999;}
2-
.ui-pop h1{*margin-top:-3px;position:relative; text-indent:1em;padding:10px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止选择文字 */-webkit-user-select:none;/* Chrome禁止选择文字 */}
3-
.ui-pop h1 .ui-closeWin{position:absolute;right:10px;cursor:pointer;text-indent:0;}
4-
.ui-pop h1 .ui-maxwin{position:absolute;right:50px;cursor:pointer;}
5-
.ui-win-body{padding:10px;line-height:23px;}
6-
.ui-win-footer{background:#f6f6f6;border-top:1px solid #dadee5;padding:5px;text-align:right;white-space:nowrap;}
7-
.ui-win-footer button{border:1px solid #999;color:#333;cursor:pointer;margin-left:15px;padding:5px 8px;text-align:center;display:inline-block;}
1+
.ui-pop{position:fixed;min-width:350px;border:1px solid #ccc;background:#fff;overflow:hidden;z-index:99999;}
2+
.ui-pop-title{*margin-top:-3px;position:relative; text-indent:1em;padding:10px 0;font-size:14px;font-weight:normal;background:#efefef;border-bottom:1px solid #ccc;-moz-user-select:none;/* FF禁止选择文字 */-webkit-user-select:none;/* Chrome禁止选择文字 */}
3+
.ui-pop-title .ui-close{position:absolute;right:13px;cursor:pointer;text-indent:0;}
4+
.ui-pop-title .ui-maxwin{position:absolute;right:50px;cursor:pointer;}
5+
.ui-pop-title h1{ display:inline-block;}
6+
.ui-pop-body{padding:20px 25px;line-height:23px;}
7+
.ui-pop-footer{background:#f6f6f6;border-top:1px solid #dadee5;padding:5px;text-align:right;white-space:nowrap;}
8+
.ui-pop-footer button{border:1px solid #999;color:#333;cursor:pointer;margin-left:15px;padding:5px 8px;text-align:center;display:inline-block;}
89
.in{margin:50px auto;width:90px;}
910
.tab{border-collapse:collapse;border:1px solid #ccc;}
1011
.tab td{border:1px solid #ccc;padding:2px;}

‎css/select.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.ui-select{ position:relative; height:22px; line-height:22px;background: #fafafa; border:1px solid #ddd; border-top-color:#eee;border-bottom: 1px solid #b7b7b7;cursor: pointer; display:inline-block;}
2+
.ui-select:hover{ border:1px solid #09e;}
3+
.ui-select-icon{position:absolute;right:4px;top:50%;margin-top:-2px;border-top:5px solid #A7A7A7;border-left:5px dashed transparent;border-right:5px dashed transparent;border-bottom:0 none;display:block;width:0;height:0;overflow:hidden;line-height:0;font-size:0;}
4+
.ui-select-down{}
5+
.ui-select-list{position:relative;overflow-y:auto;overflow-x:hidden;border:1px solid #ccc;font-family:Helvetica,arial,sans-serif;background:#FFF;border:1px solid #dcdcdc;}
6+
.ui-select-items{padding:8px 10px;white-space:nowrap;cursor:pointer;color:#333;background:transparent;outline:0 none;}
7+
8+
9+

‎index.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,14 @@ <h1>豪情</h1>
4949
</div>
5050
<!--/siderbar-->
5151
<div class="main">
52-
<iframe id="mainIframe" name="iframe" scroll="no" src="main.html" frameborder="0"></iframe>
52+
<!--<iframe id="mainIframe" name="iframe" style="width: 100%;height: 100%;" scroll="no" src="main.html" frameborder="0"></iframe>-->
53+
<iframe id="mainIframe" name="iframe" style="width: 100%;height: 100%;" scroll="no" src="common/pop.html" frameborder="0"></iframe>
5354
</div>
5455
<!--/main-->
5556
</div>
5657
<!--/container-->
57-
<script type="text/javascript" src="js/libs/require.js"></script>
58-
<script type="text/javascript" src="js/init/home.init.js"></script>
58+
<!--<script type="text/javascript" src="js/libs/require.js"></script>-->
59+
<!--<script type="text/javascript" src="js/init/home.init.js"></script>-->
60+
<script type="text/javascript" src="js/libs/jquery-1.11.1.min.js"></script>
5961
</body>
6062
</html>

‎js/demo.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,21 @@
55
* @info:
66
*/
77
;(function(win){
8-
var textcode = Jing.getElementsByClassName('code');
8+
var textcode = document.getElementsByClassName('code');
99
for (var i = 0, len = textcode.length; i < len; i++) {
1010
var text = textcode[i];
1111
var textVal = textcode[i].value;
1212
var hl = new DlHighlight({lang : "js", lineNumbers : false });
1313
var formatted = hl.doItNow(textVal);
14-
var nextPre = Jing.next(text);
14+
var nextPre = $(text).next()[0];
1515
text.style.display = 'none';
1616
nextPre.className = 'jkhightlight';
1717
nextPre.innerHTML = '<pre>' + formatted + '</pre>';
1818
}
1919

20-
var oMain = Jing.getElementsByClassName('main')[0],
21-
oSection = Jing.getElementsByClassName('section')[0],
22-
oOver = Jing.getElementsByClassName('overlay')[0];
20+
var oMain = document.getElementsByClassName('main')[0],
21+
oSection = document.getElementsByClassName('section')[0],
22+
oOver = document.getElementsByClassName('overlay')[0];
2323

2424
oOver.style.height = oMain.style.height = oSection.clientHeight + 'px';
2525
}(window));

‎js/drag.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/**
2+
* @author: 豪情
3+
* @see: <a href="mailto:jikeytang@gmail.com">豪情</a>
4+
* @time: 6/21/14
5+
* @info:
6+
*/
7+
define(function(){
8+
var drag = function(obj, options){
9+
var defaults = {
10+
},
11+
that = obj,
12+
opts = $.extend({}, defaults, options),
13+
doc = $(document),
14+
width = $(window).width(),
15+
height = $(window).height(),
16+
startX = 0,
17+
startY = 0,
18+
lastX = 0,
19+
lastY = 0,
20+
box = that.parent(), // handler.parentNode
21+
handler = that[0],
22+
drag = {
23+
down: function(e){
24+
that.css('cursor', 'move');
25+
startX = e.clientX - parseInt(box.css('left'));
26+
startY = e.clientY - parseInt(box.css('top'));
27+
this.setCapture && this.setCapture(); // IE to prevent fast drag losing of object
28+
doc.on('mousemove', drag.move);
29+
doc.on('mouseup', drag.up);
30+
return false; // chrome to prevent rolling screen, and the loss of the mouse move style
31+
},
32+
move: function(e){
33+
lastX = e.clientX - startX;
34+
lastY = e.clientY - startY;
35+
lastX = Math.max(0, Math.min(width - box.outerWidth(), lastX));
36+
lastY = Math.max(0, Math.min(height - box.outerHeight() - 1, lastY));
37+
box.css({'top': lastY + 'px', 'left': lastX + 'px'});
38+
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // cancel the selected text
39+
e.stopPropagation();
40+
},
41+
up: function(){
42+
// that.css('cursor', 'auto');
43+
doc.off('mousemove', drag.move);
44+
doc.off('mouseup', drag.up);
45+
handler.releaseCapture && handler.releaseCapture(); // IE to prevent fast drag losing of object
46+
}
47+
};
48+
that.on('mousedown', drag.down);
49+
}
50+
return drag;
51+
});

‎js/init/home.init.js

+1-4
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,5 @@ require.config({
1414
});
1515

1616
require(['jquery', 'common', 'home'], function($){
17-
Jing.ui.init({
18-
sideBar : 'sideBar',
19-
iframe : 'mainIframe'
20-
});
17+
2118
});

‎js/init/pop.init.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
require.config({
2+
baseUrl : '../js',
3+
paths : {
4+
drag : 'drag',
5+
pop : 'pop',
6+
demo : 'demo'
7+
}
8+
});
9+
10+
require(['pop', 'drag', 'demo'], function(p, t){
11+
12+
});

‎js/init/select.init.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
require.config({
2+
baseUrl : '../js',
3+
paths : {
4+
drag : 'drag',
5+
pop : 'pop',
6+
demo : 'demo'
7+
}
8+
});
9+
10+
require(['pop', 'drag', 'demo'], function(p, t){
11+
12+
});

‎js/libs/libs.js

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)