Web前端基本用法（一）

一 . 点击按钮显示摘要

1.在<table>...</table>中加入如下一行代码：

<td><button class="button"οnclick="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" οnclick="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 οnclick="myFunction()">click</button>

<p id="demo"></p>

<!--确认框-->

<button οnclick="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>