how2j.cn

示例 1 : 下拉菜单   
示例 2 : 标题不可点击   
示例 3 : 分割线   
示例 4 : 禁用项   

示例 1 :

下拉菜单

顶 折
菜单div

<div class="dropdown">

下拉按钮，id用来给下拉菜单指向用的

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">

菜单列表，aria-labelledby="dropdownMenu1" 就是用来指向哪个菜单，因为有可能有多个菜单

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

菜单项

<li><a href="#">HTML</a></li>
"); window.frames["iframe_show1540"].document.write(decodeHtml($("textarea#stepcodeTextarea1540").val())); window.frames["iframe_show1540"].document.close(); $(window.frames["iframe_show1540"]).load(function(){ $("#iframe_show1540").height($("#iframe_show1540").contents().find("body").height()+showittryitheight); }); $("#iframe_show1540").height($("#iframe_show1540").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <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> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div>
"); window.frames["iframe1540"].document.write(decodeHtml(code1540)); window.frames["iframe1540"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1540"]).load(function(){ $("#iframe1540").height($("#iframe1540").contents().find("body").height()+showittryitheight); }); $("#iframe1540").height($("#iframe1540").contents().find("body").height()+showittryitheight); alreadyWriteCode1540 = code1540; $("#rendering1540").hide(); $("#rendered1540").show(); } var tRereshRetry2DemoPanel1540 = setInterval(rereshRetry2DemoPanel1540,1000); var binded1540 = false; $("textarea#stepcodeTextarea1540").keyup(function(){ if(!binded1540){ $(window).bind('beforeunload',function(){ binded1540 = true; return "xxxx"; }); } var newCode = $(this).val() code1540 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1540!=newCode){ // window.frames["iframe1540"].document.write("
"); // window.frames["iframe1540"].document.write(decodeHtml($("textarea#stepcodeTextarea1540").val())); // window.frames["iframe1540"].document.close(); // $(window.frames["iframe1540"]).load(function(){ // $("#iframe1540").height($("#iframe1540").contents().find("body").height()+showittryitheight); // }); // code1540 = newCode; // } }); $(".tryButton1540").click(function(){ $("#tryDiv1540").show(); $("#stepcodeTextarea1540").focus(); $("#stepcodeTextarea1540").height(200); $("#iframe1540").height(0); window.frames["iframe1540"].document.write("
"); window.frames["iframe1540"].document.write(decodeHtml($("textarea#stepcodeTextarea1540").val())); window.frames["iframe1540"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1540"]).load(function(){ $("#iframe1540").height($("#iframe1540").contents().find("body").height()+showittryitheight); }); $("#iframe1540").height($("#iframe1540").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1540.focus(); editor1540.setSize(null, "250"); $("#rendering1540").hide(); $("#rendered1540").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 editor1540 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1540"), { 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); } } }); editor1540.on("change",function(doc){ if(!binded1540){ $(window).bind('beforeunload',function(){ binded1540 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1540 = newCode; $("textarea#stepcodeTextarea1540").val(newCode); if(alreadyWriteCode1540!=code1540){ lastModifedTime1540 = new Date().getTime(); $("#rendering1540").show(); $("#rendered1540").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1540 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1540.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1540").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 2 :

标题不可点击

顶 折
标题不可点击
<li role="presentation" class="dropdown-header">Dropdown header</li>
"); window.frames["iframe_show1541"].document.write(decodeHtml($("textarea#stepcodeTextarea1541").val())); window.frames["iframe_show1541"].document.close(); $(window.frames["iframe_show1541"]).load(function(){ $("#iframe_show1541").height($("#iframe_show1541").contents().find("body").height()+showittryitheight); }); $("#iframe_show1541").height($("#iframe_show1541").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <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> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 静态页面(不可点击) </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li class="dropdown-header"> 动态页面(不可点击) </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div>
"); window.frames["iframe1541"].document.write(decodeHtml(code1541)); window.frames["iframe1541"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1541"]).load(function(){ $("#iframe1541").height($("#iframe1541").contents().find("body").height()+showittryitheight); }); $("#iframe1541").height($("#iframe1541").contents().find("body").height()+showittryitheight); alreadyWriteCode1541 = code1541; $("#rendering1541").hide(); $("#rendered1541").show(); } var tRereshRetry2DemoPanel1541 = setInterval(rereshRetry2DemoPanel1541,1000); var binded1541 = false; $("textarea#stepcodeTextarea1541").keyup(function(){ if(!binded1541){ $(window).bind('beforeunload',function(){ binded1541 = true; return "xxxx"; }); } var newCode = $(this).val() code1541 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1541!=newCode){ // window.frames["iframe1541"].document.write("
"); // window.frames["iframe1541"].document.write(decodeHtml($("textarea#stepcodeTextarea1541").val())); // window.frames["iframe1541"].document.close(); // $(window.frames["iframe1541"]).load(function(){ // $("#iframe1541").height($("#iframe1541").contents().find("body").height()+showittryitheight); // }); // code1541 = newCode; // } }); $(".tryButton1541").click(function(){ $("#tryDiv1541").show(); $("#stepcodeTextarea1541").focus(); $("#stepcodeTextarea1541").height(200); $("#iframe1541").height(0); window.frames["iframe1541"].document.write("
"); window.frames["iframe1541"].document.write(decodeHtml($("textarea#stepcodeTextarea1541").val())); window.frames["iframe1541"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1541"]).load(function(){ $("#iframe1541").height($("#iframe1541").contents().find("body").height()+showittryitheight); }); $("#iframe1541").height($("#iframe1541").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1541.focus(); editor1541.setSize(null, "250"); $("#rendering1541").hide(); $("#rendered1541").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 editor1541 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1541"), { 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); } } }); editor1541.on("change",function(doc){ if(!binded1541){ $(window).bind('beforeunload',function(){ binded1541 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1541 = newCode; $("textarea#stepcodeTextarea1541").val(newCode); if(alreadyWriteCode1541!=code1541){ lastModifedTime1541 = new Date().getTime(); $("#rendering1541").show(); $("#rendered1541").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1541 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1541.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1541").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 3 :

分割线

顶 折
菜单分割线
<li role="presentation" class="divider"></li>
"); window.frames["iframe_show1542"].document.write(decodeHtml($("textarea#stepcodeTextarea1542").val())); window.frames["iframe_show1542"].document.close(); $(window.frames["iframe_show1542"]).load(function(){ $("#iframe_show1542").height($("#iframe_show1542").contents().find("body").height()+showittryitheight); }); $("#iframe_show1542").height($("#iframe_show1542").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <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> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 静态页面 </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation" class="divider"></li> <li class="dropdown-header"> 动态页面 </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> </ul> </div> <div style="height:100px"></div>
"); window.frames["iframe1542"].document.write(decodeHtml(code1542)); window.frames["iframe1542"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1542"]).load(function(){ $("#iframe1542").height($("#iframe1542").contents().find("body").height()+showittryitheight); }); $("#iframe1542").height($("#iframe1542").contents().find("body").height()+showittryitheight); alreadyWriteCode1542 = code1542; $("#rendering1542").hide(); $("#rendered1542").show(); } var tRereshRetry2DemoPanel1542 = setInterval(rereshRetry2DemoPanel1542,1000); var binded1542 = false; $("textarea#stepcodeTextarea1542").keyup(function(){ if(!binded1542){ $(window).bind('beforeunload',function(){ binded1542 = true; return "xxxx"; }); } var newCode = $(this).val() code1542 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1542!=newCode){ // window.frames["iframe1542"].document.write("
"); // window.frames["iframe1542"].document.write(decodeHtml($("textarea#stepcodeTextarea1542").val())); // window.frames["iframe1542"].document.close(); // $(window.frames["iframe1542"]).load(function(){ // $("#iframe1542").height($("#iframe1542").contents().find("body").height()+showittryitheight); // }); // code1542 = newCode; // } }); $(".tryButton1542").click(function(){ $("#tryDiv1542").show(); $("#stepcodeTextarea1542").focus(); $("#stepcodeTextarea1542").height(200); $("#iframe1542").height(0); window.frames["iframe1542"].document.write("
"); window.frames["iframe1542"].document.write(decodeHtml($("textarea#stepcodeTextarea1542").val())); window.frames["iframe1542"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1542"]).load(function(){ $("#iframe1542").height($("#iframe1542").contents().find("body").height()+showittryitheight); }); $("#iframe1542").height($("#iframe1542").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1542.focus(); editor1542.setSize(null, "250"); $("#rendering1542").hide(); $("#rendered1542").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 editor1542 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1542"), { 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); } } }); editor1542.on("change",function(doc){ if(!binded1542){ $(window).bind('beforeunload',function(){ binded1542 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1542 = newCode; $("textarea#stepcodeTextarea1542").val(newCode); if(alreadyWriteCode1542!=code1542){ lastModifedTime1542 = new Date().getTime(); $("#rendering1542").show(); $("#rendered1542").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1542 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1542.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1542").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果
示例 4 :

禁用项

顶 折
禁用的菜单项
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>
"); window.frames["iframe_show1543"].document.write(decodeHtml($("textarea#stepcodeTextarea1543").val())); window.frames["iframe_show1543"].document.close(); $(window.frames["iframe_show1543"]).load(function(){ $("#iframe_show1543").height($("#iframe_show1543").contents().find("body").height()+showittryitheight); }); $("#iframe_show1543").height($("#iframe_show1543").contents().find("body").height()+showittryitheight); setTimeout(function(){ },500); });
运行效果
<!DOCTYPE html> <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> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> http://192.168.1.189 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li class="dropdown-header"> 静态页面 </li> <li> <a href="#">HTML</a> </li> <li role="presentation"> <a href="#">CSS</a> </li> <li role="presentation" class="divider"></li> <li class="dropdown-header"> 动态页面 </li> <li role="presentation"> <a href="#">Javascript</a> </li> <li role="presentation"> <a href="#">AJAX</a> </li> <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li> </ul> </div> <div style="height:200px"></div>
"); window.frames["iframe1543"].document.write(decodeHtml(code1543)); window.frames["iframe1543"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1543"]).load(function(){ $("#iframe1543").height($("#iframe1543").contents().find("body").height()+showittryitheight); }); $("#iframe1543").height($("#iframe1543").contents().find("body").height()+showittryitheight); alreadyWriteCode1543 = code1543; $("#rendering1543").hide(); $("#rendered1543").show(); } var tRereshRetry2DemoPanel1543 = setInterval(rereshRetry2DemoPanel1543,1000); var binded1543 = false; $("textarea#stepcodeTextarea1543").keyup(function(){ if(!binded1543){ $(window).bind('beforeunload',function(){ binded1543 = true; return "xxxx"; }); } var newCode = $(this).val() code1543 = newCode; /*below code is replaced by function rereshRetry2DemoPanel()*/ // if(code1543!=newCode){ // window.frames["iframe1543"].document.write("
"); // window.frames["iframe1543"].document.write(decodeHtml($("textarea#stepcodeTextarea1543").val())); // window.frames["iframe1543"].document.close(); // $(window.frames["iframe1543"]).load(function(){ // $("#iframe1543").height($("#iframe1543").contents().find("body").height()+showittryitheight); // }); // code1543 = newCode; // } }); $(".tryButton1543").click(function(){ $("#tryDiv1543").show(); $("#stepcodeTextarea1543").focus(); $("#stepcodeTextarea1543").height(200); $("#iframe1543").height(0); window.frames["iframe1543"].document.write("
"); window.frames["iframe1543"].document.write(decodeHtml($("textarea#stepcodeTextarea1543").val())); window.frames["iframe1543"].document.close(); //load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式 $(window.frames["iframe1543"]).load(function(){ $("#iframe1543").height($("#iframe1543").contents().find("body").height()+showittryitheight); }); $("#iframe1543").height($("#iframe1543").contents().find("body").height()+showittryitheight); this.scrollIntoView(true); editor1543.focus(); editor1543.setSize(null, "250"); $("#rendering1543").hide(); $("#rendered1543").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 editor1543 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea1543"), { 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); } } }); editor1543.on("change",function(doc){ if(!binded1543){ $(window).bind('beforeunload',function(){ binded1543 = true; return "xxxx"; }); } var newCode = doc.getValue(); code1543 = newCode; $("textarea#stepcodeTextarea1543").val(newCode); if(alreadyWriteCode1543!=code1543){ lastModifedTime1543 = new Date().getTime(); $("#rendering1543").show(); $("#rendered1543").hide(); } // alert(doc.getValue()); }); $(".CodeMirror").addClass("form-control"); // var editor1543 = CodeMirror.fromTextArea(, { // lineNumbers: true, // styleActiveLine: true, // matchBrackets: true, // theme:"eclipse", // }); editor1543.on("change",function(doc){ // alert(doc.getValue()); }); $("#tryDiv1543").hide(); }); $("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。


关于 前端部分-BootStrap-下拉菜单 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。 也可进本站QQ群交流: 620943819
提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了，都统一放在了这里， 方便大家下载： http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图