jQueryUI 库引用
可以直接引用Google的库 https://developers.google.com/speed/libraries/
<html>
<head>
<title>Learning jQueryUI</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/JavaScript" src="jquery-3.3.1.js" ></script> <!--需要先加载jquery的库，之后才能调用jQueryUI-->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style type="text/CSS">
#square {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="square"></div>
<script>
$("#square").draggable();
</script>
</body>
</html>
放入功能
<style type="text/CSS">
#square {
width: 200px;
height: 200px;
background-color:green;
}
#square2 {
width: 300px;
height: 300px;
background-color:yellow;
}
</style>
</head>
<body>
<div id="square"></div>
<div id="square2"></div>
<script>
$("#square").draggable();
$("#square2").droppable({ //内层再调用函数dropable就要使用{}大括号
drop:function(ui,event){
$("#square2").css("backgroundColor","red");
}
});
</script>
</body>
调整列表顺序
<body>
<ul>
<li>Pizza</li>
<li>icecream</li>
<li>chocolate</li>
<li>apple</li>
<li>banana</li>
</ul>
<script>
$("ul").sortable();
</script>
</body>
jsbin网站部分功能克隆
<!doctype html>
<html>
<head>
<title>CodePlayer</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/JavaScript" src="jquery-3.3.1.js" ></script>
<!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> -->
<style type="text/CSS">
body {
margin: 0;
}
#menuBar {
width: 100%;
height: 40px;
background-color: #EDEDED;
border-bottom: 1px solid #BFBFBF;
font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
overflow: hidden;
}
#logo {
float: left;
padding-top: 8px;
padding-left: 10px;
font-size: 1.2em;
font-weight: bold;
}
#buttoinDiv {
float: right;
margin-right: 15px;
margin-top: 10px;
}
#runButton {
width: 60px;
height: 25px;
font-size: 1.1em;
}
#toggles {
width:223px;
margin: auto;
border: 1px solid #BFBFBF;
list-style: none;
border-radius: 5px;
height: 32px;
position: relative;
top:3px;
padding: 0;
}
#toggles li{
float: left;
border-right: 1px solid #BFBFBF;
padding: 5px 10px 8px 10px;
}
.clear {
clear: both;
}
.codeContainer {
float: left;
width: 50%;
font-size: 1.1em;
font-family:"Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
position: relative;
}
.codeContainer textarea {
width: 100%;
height: 100%;
padding-left:8px;
padding-top: 8px;
border: none;
border-right: 1px solid #BFBFBF;
box-sizing: border-box; /* 设置两个并排的带边框的框： */
}
.codeLable {
top: 8px;
right: 8px;
position: absolute;
color: #44AAF8;
}
#CSSContainer ,#JSContainer {
display:none;
}
iframe {
height: 100%;
width: 98%;
position: relative;
left: 5px;
border: none;
}
.selected{
background-color: rgb(103, 169, 219);
}
.first {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.last {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="menuBar">
<div id="logo">
CodePlayer
</div>
<div id="buttoinDiv">
<button id="runButton">Run</button>
</div>
<ul id="toggles">
<li class="toggle selected first" >HTML</li>
<li class="toggle">CSS</li>
<li class="toggle">JS</li>
<li class="toggle selected last" style="border: none">Result</li> <!--去掉右边框.通过selected预设颜色-->
</ul>
</div>
<!-- <div class="clear"></div> -->
<div class="codeContainer" id="HTMLContainer">
<div class="codeLable">HTML</div>
<textarea id="htmlCode">Example Code</textarea>
</div>
<div class="codeContainer" id="CSSContainer">
<div class="codeLable">CSS</div>
<textarea id="cssCode">Example Code</textarea>
</div>
<div class="codeContainer" id="JSContainer">
<div class="codeLable">JS</div>
<textarea id="jsCode">Example Code</textarea>
</div>
<div class="codeContainer" id="ResultContainer">
<div class="codeLable">Result</div>
<iframe id="resultFrame">Example Code</iframe>
</div>
</div>
<script>
var windowHeight = $(window).height();
var menuBarHeight = $("#menuBar").height();
var containerHeight = windowHeight - menuBarHeight;
$(".codeContainer").height(containerHeight);
$(".toggle").click(function(){
$(this).toggleClass("selected"); //当点击当前class时将其转换为selected class 属性 注意selected前面没有.
var type = $(this).html();
$("#"+type+"Container").toggle(); //toggle() 方法用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。该方法也可用于切换被选元素的 hide() 与 show() 方法。
var showingDiv = $(".codeContainer").filter(function(){ //返回当前所有codeContainer显示的个数
return($(this).css("display")!="none")
}).length;
var width = 100/showingDiv;
$(".codeContainer").css("width",width+"%"); //显示调整后的宽度
});
$("#runButton").click(function(){ //点击run按钮，在iframe内容里面找到html内容，将其展示出来。css+html赋值
$("iframe").contents().find("HTML").html("<style>"+$("#cssCode").val()+"</style>"+$("#htmlCode").val());
document.getElementById("resultFrame").contentWindow.eval($("#jsCode").val()); //js代码传入结果中。在实际网站慎用，因为别人会通过js访问你的后台服务器
})
</script>
</body>
</html>
网友评论