因为需要讲解基本信息和左侧图片的水平关系，所以依然要使用左侧的图片。
但是又因为屏幕大小关系，不能使用左侧完整图片，否则右侧会被压缩，导致样式变形，不利于学习，所以把左侧的图片简化，并缩小尺寸。
");
window.frames["iframe_show3235"].document.write(decodeHtml($("textarea#stepcodeTextarea3235").val()));
window.frames["iframe_show3235"].document.close();
$(window.frames["iframe_show3235"]).load(function(){
$("#iframe_show3235").height($("#iframe_show3235").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3235").height($("#iframe_show3235").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
div.imgAndInfo{
margin: 40px 20px;
}
div.imgInimgAndInfo{
width: 100px;
float: left;
}
div.infoInimgAndInfo{
padding: 0px 20px;
overflow: hidden;
}
div.infoInimgAndInfo div.productTitle{
color: black;
font-size: 16px;
font-weight: bold;
margin: 0px 10px;
}
div.infoInimgAndInfo div.productSubTitle{
color: #DD2727;
font-size: 12px;
margin: 0px 10px;
}
div.infoInimgAndInfo div.juhuasuan{
background-color: #2DA77A;
color: white;
text-align: center;
line-height: 40px;
margin-top: 10px;
}
div.infoInimgAndInfo span.juhuasuanBig{
font-size: 18px;
font-weight: bold;
font-family: 黑体;
}
div.infoInimgAndInfo span.juhuasuanTime{
color: #FFC057;
font-weight: bold;
}
div.infoInimgAndInfo div.productPriceDiv{
background-image:url(http://127.0.0.1/tmall../../../img/site/priceBackground.png);
height: 102px;
padding: 10px;
color: #666666;
}
div.infoInimgAndInfo div.gouwujuanDiv{
margin-top: 5px;
}
div.infoInimgAndInfo div.originalDiv{
margin-top: 5px;
}
div.infoInimgAndInfo span.originalPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
}
div.infoInimgAndInfo span.originalPrice{
font-family: Arial;
font-size: 12px;
color: #333333;
text-decoration: line-through;
}
div.infoInimgAndInfo span.promotionPriceYuan{
font-family: Arial;
font-size: 18px;
color: #C40000;
}
div.infoInimgAndInfo span.promotionPrice{
color: #c40000;
font-family: Arial;
font-size: 30px;
font-weight: bold;
}
div.infoInimgAndInfo span.promotionPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
position: relative;
left: 0px;
top: -10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber{
margin: 20px 0px;
border-top-style: dotted;
border-top-color: #C9C9C9;
border-top-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #C9C9C9;
border-bottom-width: 1px;
padding: 10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div{
display: inline-block;
width: 49%;
text-align: center;
color: #999999;
font-size: 12px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
div.infoInimgAndInfo div.productNumber{
color: #999999;
}
div.infoInimgAndInfo span.productNumberSettingSpan{
border: 1px solid #999;
display: inline-block;
width: 43px;
height: 32px;
padding-top:7px;
}
div.infoInimgAndInfo input.productNumberSetting{
border: 0px;
height: 80%;
width: 80%;
}
div.productNumber span.updown img{
display:inline-block;
vertical-align:top;
}
div.productNumber span.updown{
border: 1px solid #999;
display: block;
width: 20px;
height: 14px;
text-align: center;
padding-top:4px;
}
div.productNumber span.updownMiddle{
height: 4px;
display: block;
}
div.productNumber span.arrow{
display: inline-block;
width: 22px;
height: 32px;
vertical-align:top;
}
div.serviceCommitment{
margin: 20px 0px;
}
div.infoInimgAndInfo span.serviceCommitmentDesc{
color: #999999;
}
div.infoInimgAndInfo span.serviceCommitmentLink a{
color: #666666;
}
div.buyDiv{
margin: 20px auto;
text-align: center;
}
div.buyDiv button{
display: inline-block;
margin: 0px 10px;
width: 180px;
height: 40px;
}
button.buyButton{
border: 1px solid #C40000;
background-color: #FFEDED;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;
}
button.addCartButton{
border: 1px solid #C40000;
background-color: #C40000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
font-family: arial;
}
button.addCartButton span.glyphicon{
font-size: 12px;
margin-right: 8px;
}
a:hover{
text-decoration:none;
}
.redColor{
color: #C40000;
}
.boldWord{
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="http://127.0.0.1/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="http://127.0.0.1/tmall../../../img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="http://127.0.0.1/tmall../../../img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="http://127.0.0.1/tmall../../../img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
div.imgAndInfo{
margin: 40px 20px;
}
div.imgInimgAndInfo{
width: 100px;
float: left;
}
div.infoInimgAndInfo{
padding: 0px 20px;
overflow: hidden;
}
div.infoInimgAndInfo div.productTitle{
color: black;
font-size: 16px;
font-weight: bold;
margin: 0px 10px;
}
div.infoInimgAndInfo div.productSubTitle{
color: #DD2727;
font-size: 12px;
margin: 0px 10px;
}
div.infoInimgAndInfo div.juhuasuan{
background-color: #2DA77A;
color: white;
text-align: center;
line-height: 40px;
margin-top: 10px;
}
div.infoInimgAndInfo span.juhuasuanBig{
font-size: 18px;
font-weight: bold;
font-family: 黑体;
}
div.infoInimgAndInfo span.juhuasuanTime{
color: #FFC057;
font-weight: bold;
}
div.infoInimgAndInfo div.productPriceDiv{
background-image:url(http://127.0.0.1/tmall../../../img/site/priceBackground.png);
height: 102px;
padding: 10px;
color: #666666;
}
div.infoInimgAndInfo div.gouwujuanDiv{
margin-top: 5px;
}
div.infoInimgAndInfo div.originalDiv{
margin-top: 5px;
}
div.infoInimgAndInfo span.originalPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
}
div.infoInimgAndInfo span.originalPrice{
font-family: Arial;
font-size: 12px;
color: #333333;
text-decoration: line-through;
}
div.infoInimgAndInfo span.promotionPriceYuan{
font-family: Arial;
font-size: 18px;
color: #C40000;
}
div.infoInimgAndInfo span.promotionPrice{
color: #c40000;
font-family: Arial;
font-size: 30px;
font-weight: bold;
}
div.infoInimgAndInfo span.promotionPriceDesc{
color: #999999;
display: inline-block;
width: 68px;
position: relative;
left: 0px;
top: -10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber{
margin: 20px 0px;
border-top-style: dotted;
border-top-color: #C9C9C9;
border-top-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #C9C9C9;
border-bottom-width: 1px;
padding: 10px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div{
display: inline-block;
width: 49%;
text-align: center;
color: #999999;
font-size: 12px;
}
div.infoInimgAndInfo div.productSaleAndReviewNumber div:first-child{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #E5DFDA;
}
div.infoInimgAndInfo div.productNumber{
color: #999999;
}
div.infoInimgAndInfo span.productNumberSettingSpan{
border: 1px solid #999;
display: inline-block;
width: 43px;
height: 32px;
padding-top:7px;
}
div.infoInimgAndInfo input.productNumberSetting{
border: 0px;
height: 80%;
width: 80%;
}
div.productNumber span.updown img{
display:inline-block;
vertical-align:top;
}
div.productNumber span.updown{
border: 1px solid #999;
display: block;
width: 20px;
height: 14px;
text-align: center;
padding-top:4px;
}
div.productNumber span.updownMiddle{
height: 4px;
display: block;
}
div.productNumber span.arrow{
display: inline-block;
width: 22px;
height: 32px;
vertical-align:top;
}
div.serviceCommitment{
margin: 20px 0px;
}
div.infoInimgAndInfo span.serviceCommitmentDesc{
color: #999999;
}
div.infoInimgAndInfo span.serviceCommitmentLink a{
color: #666666;
}
div.buyDiv{
margin: 20px auto;
text-align: center;
}
div.buyDiv button{
display: inline-block;
margin: 0px 10px;
width: 180px;
height: 40px;
}
button.buyButton{
border: 1px solid #C40000;
background-color: #FFEDED;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #C40000;
font-family: arial;
}
button.addCartButton{
border: 1px solid #C40000;
background-color: #C40000;
text-align: center;
line-height: 40px;
font-size: 16px;
color: white;
font-family: arial;
}
button.addCartButton span.glyphicon{
font-size: 12px;
margin-right: 8px;
}
a:hover{
text-decoration:none;
}
.redColor{
color: #C40000;
}
.boldWord{
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<div class="imgAndInfo">
<div class="imgInimgAndInfo">
<img width="100px" src="http://127.0.0.1/tmall/img/productSingle/8619.jpg">
</div>
<div class="infoInimgAndInfo">
<div class="productTitle">
名媛2016新款女装夏两件套裤韩版雪纺七分裤阔腿裤休闲时尚套装女
</div>
<div class="productSubTitle">
高端定制 高档棉麻 现货即发 加购物车 领优惠卷
</div>
<div class="productPrice">
<div class="juhuasuan">
<span class="juhuasuanBig">聚划算</span>
<span>此商品即将参加聚划算，<span class="juhuasuanTime">1天19小时</span>后开始，</span>
</div>
<div class="productPriceDiv">
<div class="gouwujuanDiv"><img height="16px" src="http://127.0.0.1/tmall../../../img/site/gouwujuan.png">
<span> 全天猫实物商品通用</span>
</div>
<div class="originalDiv">
<span class="originalPriceDesc">价格</span>
<span class="originalPriceYuan">¥</span>
<span class="originalPrice">
399.00
</span>
</div>
<div class="promotionDiv">
<span class="promotionPriceDesc">促销价 </span>
<span class="promotionPriceYuan">¥</span>
<span class="promotionPrice">
379.05
</span>
</div>
</div>
</div>
<div class="productSaleAndReviewNumber">
<div>销量 <span class="redColor boldWord"> 50</span></div>
<div>累计评价 <span class="redColor boldWord"> 19</span></div>
</div>
<div class="productNumber">
<span>数量</span>
<span>
<span class="productNumberSettingSpan">
<input type="text" value="1" class="productNumberSetting">
</span>
<span class="arrow">
<a class="increaseNumber" href="#nowhere">
<span class="updown">
<img src="http://127.0.0.1/tmall../../../img/site/increase.png">
</span>
</a>
<span class="updownMiddle"> </span>
<a class="decreaseNumber" href="#nowhere">
<span class="updown">
<img src="http://127.0.0.1/tmall../../../img/site/decrease.png">
</span>
</a>
</span>
件</span>
<span>库存66件</span>
</div>
<div class="serviceCommitment">
<span class="serviceCommitmentDesc">服务承诺</span>
<span class="serviceCommitmentLink">
<a href="#nowhere">正品保证</a>
<a href="#nowhere">极速退款</a>
<a href="#nowhere">赠运费险</a>
<a href="#nowhere">七天无理由退换</a>
</span>
</div>
<div class="buyDiv">
<a href="#nowhere" class="buyLink"><button class="buyButton">立即购买</button></a>
<a class="addCartLink" href="#nowhere"><button class="addCartButton"><span class="glyphicon glyphicon-shopping-cart"></span>加入购物车</button></a>
</div>
</div>
<div style="clear:both"></div>
</div>
");
window.frames["iframe3235"].document.write(decodeHtml(code3235));
window.frames["iframe3235"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3235"]).load(function(){
$("#iframe3235").height($("#iframe3235").contents().find("body").height()+showittryitheight);
});
$("#iframe3235").height($("#iframe3235").contents().find("body").height()+showittryitheight);
alreadyWriteCode3235 = code3235;
$("#rendering3235").hide();
$("#rendered3235").show();
}
var tRereshRetry2DemoPanel3235 = setInterval(rereshRetry2DemoPanel3235,1000);
var binded3235 = false;
$("textarea#stepcodeTextarea3235").keyup(function(){
if(!binded3235){
$(window).bind('beforeunload',function(){
binded3235 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3235 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3235!=newCode){
// window.frames["iframe3235"].document.write("
");
// window.frames["iframe3235"].document.write(decodeHtml($("textarea#stepcodeTextarea3235").val()));
// window.frames["iframe3235"].document.close();
// $(window.frames["iframe3235"]).load(function(){
// $("#iframe3235").height($("#iframe3235").contents().find("body").height()+showittryitheight);
// });
// code3235 = newCode;
// }
});
$(".tryButton3235").click(function(){
$("#tryDiv3235").show();
$("#stepcodeTextarea3235").focus();
$("#stepcodeTextarea3235").height(200);
$("#iframe3235").height(0);
window.frames["iframe3235"].document.write("
");
window.frames["iframe3235"].document.write(decodeHtml($("textarea#stepcodeTextarea3235").val()));
window.frames["iframe3235"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3235"]).load(function(){
$("#iframe3235").height($("#iframe3235").contents().find("body").height()+showittryitheight);
});
$("#iframe3235").height($("#iframe3235").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3235.focus();
editor3235.setSize(null, "250");
$("#rendering3235").hide();
$("#rendered3235").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3235 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3235"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3235.on("change",function(doc){
if(!binded3235){
$(window).bind('beforeunload',function(){
binded3235 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3235 = newCode;
$("textarea#stepcodeTextarea3235").val(newCode);
if(alreadyWriteCode3235!=code3235){
lastModifedTime3235 = new Date().getTime();
$("#rendering3235").show();
$("#rendered3235").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3235 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3235.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3235").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
