Web前端基本用法（一）

一 . 点击按钮显示摘要
1.在<table>...</table>中加入如下一行代码：
<td><button class="button"onclick="show('<%=x.abs%>')">^</button>
2.在末尾加入JS代码如下：
<div class="alert_dialog">
</div>

<script type="text/javascript">
function show(x){
$(".alert_dialog").toggle();#切换hide()和show()方法
$(".alert_dialog").html(x);
}
function cancle(){
$(".alert_dialog").hide();
}
</script>

二. 过滤条件复选框总结：
1.form表单里面：
<form name="input" action=" /bj_search/index "method = "post">
专利信息：
<input type="text" name="names" value=class="info" >
<input type="submit" value="搜索"class="class">

<input type="checkbox"name="condition[]"value="pubNumber">公开（告）号</input>
<input type="submit" name="submit"value="Submit">
</form>
2.table表头里面：
<%if !@condition.blank? && (@condition.include?"pubNumber")%>
<th>公开（告）号</th>
<%end%>
3.table单元格里面：
<%if !@condition.blank? && (@condition.include?"pubNumber")%>
<td><%=x["pubNumber"]%></td>
<%end%>
4.JavaScript在<script>里面：
$(function(){
$(".class").click(function(){
alert($(".info").val() == "");#弹框出提示信息
if($(".info").val() == ""){#.info标签里的val()变量为空，则
$(".info").val("aa"); #则页面显示内容“aa”
return true;
}
return false;
});

三. js弹窗效果：
<!--警告框-->
<script>
function myFunction(){
alert("Hello!I am an alert box!");
}
</script>
<input type="button" onclick="myFunction()"value="show alert box"/>

<!--提示框-->
<script>
function myFunction(){
var x;
var person=prompt("请输入名字","lc");

if (person!=null) {
x = "Hello" + "!how are you today?";
document.getElementById("demo").innerHTML = x;
};
}
</script>
<button onclick="myFunction()">click</button>
<p id="demo"></p>

<!--确认框-->
<button onclick="myFunction()">tryit!</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r = confirm("Press a button!");
if (r == true) {
x = "ok!";
}
else{
x = "cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>