has not logged csdn account for more than two years, do some things in the middle, but now is still a return to the program, but to do the front-end, although a lot of things have been forgotten almost, but still should be put the mentality, slowly, in the front roaming, do a happy Pisces.
Road is step by step out of the knowledge is accumulated every bit, record is a wealth, come on, together to learn to make notes.
Some of the pages in the background article are written these days, in order to get better interactivity, need to do some effect, JS undoubtedly makes the choice, but because the browser compatibility is not satisfactory, so choose the jquery framework, through CSS style, Dom node and its own functions can achieve a better user experience, This case has three feature points. respectively:
1. Using jquery's own toggle () function to realize layer hiding and display animation;
2. Imitation Sina, Tencent micro-blog input box character dynamic descending effect (can be used as a separate JS, the introduction can be general);
3. Implement several navigation buttons to switch different content, similar to tab;
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> using jquery to realize the display and hiding of two table </title>
<script type= "Text/javascript" src= "Jquery-1.2.6.min.js" language= "JavaScript" > </script>
<style>
/* Overall table style * *
. mainbox {margin:5px 10px;overflow:hidden;zoom:1;_margin:5px;}
. mainnav_title {line-height:40px;height:40px;border-bottom:1px solid #eee; color: #ddd;}
. mainnav_title a {color: #004499; margin:0 5px;padding:4px 7px;background: #EFEFEF;}
. mainnav_title a:hover,. Mainnav_title a.on{background: #498CD0; color: #FFF;}
. Table_form td{padding-left:12px}
. table_form th Span{color: #FF0000}
. table_form th{font-weight:normal; text-align:right;padding-right:10px; color: #777}
. table_form TD label{Vertical-align:middle}
. table_form TD,. table_form TH{PADDING:8PX 0 5px 8px;line-height:22px;
. table_form tbody td,.table_form tbody th{border-bottom:1px solid #eee;
. Colorpanel tbody td,.colorpanel tbody th{padding:0;border-bottom:none;
/* Control article Word input style * *
. Textafter{font-weight:700;font-size:22px;font-style:italic;color: #FF0000; Font-family:constantia, Georgia;
. Textcount{font-weight:700;font-size:22px;font-style:italic;font-family:constantia, Georgia;
/* Article List page style * *
. article_search{border:1px Solid #FFCC33 Background-color: #FFFFCC; height:46px;margin:10px 0px 10px 0px;line-height : 46px;padding:0px 15px 0px 15px;}
. advsetup{background-color:red; height:57px;line-height:57px;}
. search_table a:hover,. search_table a.on{background: #498CD0; color: #FFF;}
. search_table a{margin:5px;padding:5px;height:15px;line-height:15px;}
. Search A{color: #004499; margin:0 5px;padding:4px 7px;background: #EFEFEF;}
</style>
<script>
/* Control Article Word input function * *
$ (function () {
$ ("TD span"). addclass (' Textcount ');//Add Sina font style for all span labels when page loads
})
/*
The Words_deal function is a generic function of imitating Sina character input, which can be used to improve the user's interactivity in the article editing of the website.
DOM: The object that is currently being manipulated
Num: Limit the number of characters
ID: Dynamically adding spans that need to be manipulated by passing in ID values
*/
function Words_deal (dom,num,id)
{
var curlength=$ (DOM). Val (). length; Gets the total number of text entered in the text box
if (curlength>num)//Determines whether the number of restricted characters is greater than
{//If greater than the limit character number, get all strings from 0 to the limit quantity
var totalnum=$ (DOM). Val (). substr (0,num);
$ (DOM). Val (Totalnum); Reload these characters into the text box, and the balloon prompts
Alert ("Exceeds the word limit, the extra word will be truncated!") " );
}
Else
{
if (curlength>num-10)
{//If the input character is the penultimate 10 characters characters change the style to turn the font red
$ ('. Textcount_ ' +id). addclass ("Textafter");
}
Else
{//otherwise remove style
$ ('. Textcount_ ' +id). Removeclass ("Textafter");
}
$ (". Textcount_" +id). Text (num-$ (DOM). Val (). length); If less than the limit of the number of characters, the cumulative count display
}
}
Article List menu bar effect control function
function Fun_search (dom,id) {
Control the search layer to show or hide
if (id!=1) {
$ (". Article_search"). Toggle ("Fast", function () {
});
}
Control Toggle Style
var className = $ (DOM). attr ("class");
if (ClassName!= ' on ') {
$ ('. Search_table a '). Removeclass (' on ');
$ (DOM). addclass (' on ');
}
}
</script>
<body>
<!--containing layer start-->
<div class= "Mainbox" >
<!--navigation bar strat-->
<div id= "nav" class= "Mainnav_title" >
<ul>
<a href= "javascript:;" onclick= "Toopen (This, ' 1 ');" class= "" > Add article </a>
<a href= "javascript:;" onclick= "Toopen (This, ' 2 ');" > Advanced Settings </a>
<a href= "javascript:;" onclick= "Fun_search (this,2);" > Search </a>
</ul>
</div>
<!--navigation bar end-->
<!--search Layer start-->
<div class= "Article_search" style= "Display:none;" >
<form id= "Searchform" action= "admin/user/0" method= "POST" >
Add Time:
<input type= "text" class= "Input-text" name= "Datemin" id= "Datemin" readonly= "readonly"/>-
<input type= "text" class= "Input-text" name= "Datemax" id= "Datemax" readonly= "readonly"/>
<select name= "Channel_id2" id= "Channel_id2" >
<option value= "" >---all Columns---</option>
<c:foreach items= "${list}" var= "List" >
<option value= "${list.id}" >---${list.name}---</option>
</c:forEach>
</select>
<select name= "Choose" >
<option value= "" >---query criteria---</option>
<option value= "" >---ID---</option>
<option value= "" >---title---</option>
<option value= "" >---Introduction---</option>
<option value= "" >---Publisher---</option>
</select>
<input type= "text" class= "Input-text" name= "Txtsearch" size= "></input>"
<input type= "Submit" class= "button" value= "Search" ></input>
</form>
</div>
<!--search Layer end-->
<!--first DIV layer start-->
<table id= "Table_1" cellpadding=0 cellspacing=0 width= "100%" class= "Table_form" >
<tr>
<th width= "140" ><span>*</span> column </th>
<td>
<select name= "channel" id= "Channel" >
<option value= "" >---all Columns---</option>
<c:foreach items= "${list}" var= "List" >
<option value= "" ></option>
</c:forEach>
</select>
</td>
</tr>
<tr>
<th width= "140" ><span>*</span> title </th>
<td>
<input name= "title" id= "title" class= "Input-text" "type=" text "size=" "onkeyup=" Words_deal (this,40,1); " ></input> remaining <span class= "textcount_1" >40</span> word <br/>
</td>
</tr>
<tr>
<th width= "140" > Thumbnail:</th>
<td>
<table>
<td>
<input name= "Txtsmallpic" type= "text" id= "text" class= "Input-text" size= "/>"
<input name= "Btnupdown" type= "Submit" value= "Local upload" class= "button"/>
<input name= "Btnchoose" type= "submit" value= "station Select" class= "button"/>
<input name= "Btncut" type= "submit" value= "Cut" class= "button"/>
</td>
<td></td>
</table>
</td>
</tr>
<tr>
<th width= "140" > Custom properties </th>
<td>
<input id= "CHKDIYATRR" type= "checkbox"/> Home page headline recommendation
<input id= "CHKDIYATRR" type= "checkbox"/> Home Focus Map recommendation
<input id= "CHKDIYATRR" type= "checkbox"/> Video Home daily hotspot
<input id= "CHKDIYATRR" type= "checkbox"/> Video Home page headline recommendation
<input id= "CHKDIYATRR" type= "checkbox"/> Video Home Focus Map
<input id= "CHKDIYATRR" type= "checkbox"/> Home page Photo recommendation <br></br>
<input id= "CHKDIYATRR" type= "checkbox"/> Column Home recommended
<input id= "CHKDIYATRR" type= "checkbox"/> Video column Wonderful recommendation
<input id= "CHKDIYATRR" type= "checkbox"/> Top recommendation of the site
</td>
</tr>
<tr>
<th width= "140" >tag tags </th>
<td>
<input id= "Txttag" class= "Input-text" "type=" text "size=" "/>" (', '), single label less than 12 bytes)
</td>
</tr>
</table>
<!--first DIV layer end-->
<!--second DIV layer start-->
<table id= "table_2" style= "Display:none" cellpadding=0 cellspacing=0 width= "100%" class= "Table_form" >
<tr>
<th width= "140" > Additional options </th>
<td>
<input id= "CHKDIYATRR" type= "checkbox"/> Extract the first picture as a thumbnail
<input id= "Chkwatermark" type= "checkbox"/> Whether the picture is watermark
</td>
</tr>
<tr><th width= "140" > Paging options </th>
<td>
<input id= "rdomanual" type= "Radio" class= "Input-text"/> Manual (Page break: #p # pagination title #e#)
<input id= "rdoautomatic" type= "Radio" class= "Input-text"/> Automatic size:
<input id= "Txtpage" type= "text" style= "width:20px"/>k
</td>
</tr>
<tr>
<th width= "140" > Comment options </th>
<td>
<input id= "Rdoallow" type= "Radio" class= "Input-text"/> Allow comments
<input id= "Rdoban" type= "Radio" class= "Input-text"/> Forbidden Comment
</td>
</tr>
<tr>
<th width= "140" ><span>*</span> title </th>
<td>
<input name= "title" class= "Input-text" "type=" text "size=" "id=" TextArea "onkeyup=" Words_deal (this,20,2); " />
Remaining <span class= "textcount_2" >20</span> word <br/>
</td>
</tr>
<tr>
<th width= "140" > Article sorting </th>
<TD colspan= "2" >
<select id= "u108" class= "u108" >
<option selected= "" value= "default sort" > Default sort </option>
<option value= "Sticky Week" > Top week </option>
<option value= "Top January" > Top January </option>
<option value= "One year Top" > top one year </option>
</select>
</td>
</tr>
</table>
<!--second DIV layer end-->
</div>
<!--containing layer start-->
</body>
<script>
Toggle Interface
function Toopen (dom,id) {
var className = $ (DOM). attr ("class");
if (ClassName!= ' on ') {
$ (' table[id^=table_] '). Hide ();
$ ('. Mainnav_title ul a '). Removeclass (' on ');
$ (' #table_ ' +id). Show ();
$ (DOM). addclass (' on ');
}
}
Article List menu bar effect control function
function Fun_search (dom,id) {
Control the search layer to show or hide
if (id!=1) {
$ (". Article_search"). Toggle ("Fast", function () {
});
}
Control Toggle Style
var className = $ (DOM). attr ("class");
if (ClassName!= ' on ') {
$ ('. Search_table a '). Removeclass (' on ');
$ (DOM). addclass (' on ');
}
}
</script>
PS: Code specifications are important to develop a good habit of annotating.
