豆瓣网的jquery代码实例

  在文档加载完毕后将执行的方法(参见jquery文档)

  一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外.

  比如 通过Ajax方法取回来的内容里面还含有动作按钮的,这时需要针对这部分功能执行绑定.

  

复制代码 代码如下:

  //需要手动调用 load_event_monitor(element);   方法.

  $(function() {

  load_event_monitor(document);

  });

  //注意这里的o对象是一个html 元素而非是一个jquery对象,所以在调用它的方法时应该使用$(o)函数

  //把它转化为jquery对象.

  Bowtech.init_forder = function(o) {

  var eid = $(o).attr(“id“).split(“-“)[1];

  var fo = $(“#f-“+eid);

  var unfo = $(“#unf-“+eid);

  fo.click(function() {

  $(o).hide();

  unfo.show();

  fo.hide();

  });

  unfo.click(function() {

  $(o).show();

  fo.show();

  unfo.hide();

  });

  }

  jQuery.fn.extend({

  set_caret: function(){

  if(!$.browser.msie) return;

  var initSetCaret = function(){this.caretPos = document.selection.createRange().duplicate()};

  this.click(initSetCaret).select(initSetCaret).keyup(initSetCaret);

  },

  insert_caret:function(textFeildValue){

  var textObj = this[0];

  if(document.all && textObj.createTextRange && textObj.caretPos){

  var caretPos=textObj.caretPos;

  caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == ” ? textFeildValue+” : textFeildValue;

  } else if(textObj.setSelectionRange){

  var rangeStart=textObj.selectionStart;

  var rangeEnd=textObj.selectionEnd;

  var tempStr1=textObj.value.substring(0,rangeStart);

  var tempStr2=textObj.value.substring(rangeEnd);

  textObj.value=tempStr1+textFeildValue+tempStr2;

  textObj.focus();

  var len=textFeildValue.length;

  textObj.setSelectionRange(rangeStart+len,rangeStart+len);

  textObj.blur();

  } else {

  textObj.value+=textFeildValue;

  }

  }

  })

  前台要用就比较简单了, 只需要这样写:

  

复制代码 代码如下:

  <div id=”test2″ class=”mod”>

  <h3>

  这里可以放标题

  </h3>

  <div class=”j modb a_forder” id=”modb-1002″>

  这里是一些主要的内容

  <dl>

  <dt>Hello world</dt>

  <dd>

  hahaha</dd>

  </dl>

  这个实验在沙加的神舟本上完成

  </div>

  <div class=”edit”>

  <a id=”f-1002″ class=”forder” href=”javascript:void(0);”>[收起]</a> <a id=”unf-1002″

  class=”unforder” href=”javascript:void(0);”>[展开]</a>

  </div>

  </div>

  样式就省略了, 大家可以自己写, 最后发两个效果图:

豆瓣网的jquery代码实例

  收起时的样子

豆瓣网的jquery代码实例