jqueryは、アニメーション効果の非表示と表示/入力ボックスの文字の動的な減少/ナビゲーションボタンswitching_jqueryを実装します。

csdn アカウントにログインしてから 2 年以上が経ち、途中でいくつかのサイド作業をしましたが、今はプログラムに戻っていますが、多くのことをほとんど忘れています。まだ私の考え方を修正して、ゆっくり時間をかけて、フロントエンドで歩き回って、幸せな魚座になる必要があります。
道は一歩ずつ歩き、知識は少しずつ蓄積され、記録は財産になります。さあ、一緒に要約してメモをとることを学びましょう。

私がバックグラウンド記事を書いている一部のページでは、インタラクティブ性を向上させるために何らかのエフェクトを実行する必要があるのですが、これは間違いなく js が最良の選択ですが、ブラウザーの互換性が常に不十分なためです。 jquery フレームワークを使用すると、css スタイル、dom ノード、および独自の関数を通じて、より優れたユーザー エクスペリエンスを実現できます。このケースには 3 つの機能ポイントがあります。

1. jquery 独自の toggle() 関数を使用して、レイヤーの非表示と表示アニメーションを実装します。
2. Sina および Tencent Weibo 入力ボックスの文字の動的減少効果を模倣します (別の js 、導入後は汎用になります);
3. タブと同様に、複数のナビゲーション ボタンを実装します。

以下はすべてのコードです。 >

コードをコピー コードは次のとおりです:

<script> <BR>/*控制文章字数输入函数*/ <BR>$(function(){ <BR>$("td span").addClass('textCount');//页面加载时为所有span标签添加新浪字体样式 <BR>}) <BR>/* <BR>words_deal函数是一个可以通用的关于仿新浪字符输入的函数，用在网站的文章编辑上可以提高用户的交互性 <BR>dom：当前要操作的对象 <BR>num：限制字符数量 <BR>id:通过传入id值动态添加需要操作的span <BR>*/ <BR>function words_deal(dom,num,id) <BR>{ <BR>var curLength=$(dom).val().length; //获取文本框中输入的文字总数量 <BR>if(curLength>num)//判断是否大于限制字符数量 <BR>{ //如果大于限制级字符数量，获得从0到该限制数量的所有字符串 <BR>var totalNum=$(dom).val().substr(0,num); <BR>$(dom).val(totalNum); //将这些字符重新载入文本框，并弹框提示 <BR>alert("超过字数限制，多出的字将被截断！" ); <BR>} <BR>else <BR>{ <BR>if(curLength>num-10) <BR>{//如果输入字符为倒数10个字符时改变样式将字体变红 <BR>$('.textCount_'+id).addClass("textAfter"); <BR>} <BR>else <BR>{//否则移除样式 <BR>$('.textCount_'+id).removeClass("textAfter"); <BR>} <BR>$(".textCount_"+id).text(num-$(dom).val().length); //如小于限制级字符数量,进行累加计数显示 <BR>} <BR>} <BR>//文章列表菜单栏效果控制函数 <BR>function fun_search(dom,id){ <BR>//控制搜索层显示或隐藏 <BR>if(id!=1){ <BR>$(".article_search").toggle("fast",function(){ <BR>}); <BR>} <BR>//控制切换样式 <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('.search_table a').removeClass('on'); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR></script>

添加文章
高级设置
搜索

添加时间：
-


--- 全部栏目 ---

--- ${list.name} ---

 

--- 查询条件 ---
---    ID    ---
---   标题   ---
---   简介   ---
---  发布人  ---
 

--- すべての列 ---

* 标题

剩余40个字

缩略图:

自定义属性

首页头条推荐
首页焦点图推荐
视频首页每日热点
视频首页头条推荐
视频首页焦点图
首页图片推荐

栏目首页推荐
视频栏目精彩推荐
网站顶部推荐

TAG标签

  (','号分开，单个标签小于12字节)

table>



> ;
<script> <BR>//Switch interface<BR>function toOpen(dom,id){ <BR>var className = $(dom).attr("class"); <BR>if(className != 'on'){ <BR>$('table[id^=table_]').hide(); <BR>$('.mainnav_title ul a').removeClass('on'); <BR> $('#table_' id).show(); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR>//Article list menu bar effect control function<BR>function fun_search(dom,id){ <BR>//Control the display or hiding of the search layer<BR>if(id!=1){ <BR>$(".article_search").toggle("fast",function( ){ <BR>}); <BR>} <BR>//Control switching style<BR>var className = $(dom).attr("class"); <BR>if(className != 'on') { <BR>$('.search_table a').removeClass('on'); <BR>$(dom).addClass('on'); <BR>} <BR>} <BR></script>> ;


The following is the rendering of the operation:

ps: Code specifications are very important, and you should develop a good habit of adding comments.

附加选项	提取第一个图片为缩略图      图片是否加水印
分页选项	手动 (分页符为： #p#分页标题#e# )    自动 大小:   K
评论选项	允许评论      禁止评论
* 标题	剩余20个字
文章排序	默认排序 置顶一周 置顶一月 Stick for one year