Posts Tagged jquery

jquery ajax调用asp.net webservice

十一 19

Posted by 寻道者 in Web方向 | No Comments

jquery ajax调用asp.net webservice就一个难点：当创建好WebService的时候，类的属性[System.Web.Script.Services.ScriptService]是被注释了的，要取消注释，就可以调用了。
如下：

$(function(){
    var cur_url = location.href;
    var title = document.title;
    var host = location.host;
    cur_url = cur_url.replace(location.protocol+'//'+host,'');
    $.ajax({
        type:"POST",
        contentType:"application/json",
        url:"../../../LogAccess.asmx/InsertAccessingLog",
        data:"{pageTitle:'"+title+"',pageIp:'"+host+"',pageUrl:'"+cur_url+"'}",
        dataType:'json',
        success:function(result){
            if(result.d){
		//alert(result.d)
            }
        }
    });
});

Tags: ,

Jquery插件之可输入的select 《EDITABLE SELECT》

十一 14

Posted by 寻道者 in 道 | No Comments

插件名称：jquery-editable-select
下载地址：http://plugins.jquery.com/node/9250

这个插件有个小问题：
１、显示的是option的text值，没有显示value值
２、如果option有value和text，获取不到value值
就是无法获取select option的value值。现将这个插件的源代码进行修改：修改的原来的funtion是

duplicateOptions: function() {
      var context = this;
      var wrapper = $(document.createElement('div'));
      wrapper.addClass('editable-select-options');
      var option_list = $(document.createElement('ul'));
      wrapper.append(option_list);
      var options = this.select.find('option');
      options.each(function() {
        if($(this).attr('selected')) {
          context.text.val($(this).val());
          context.current_value = $(this).val();
        };
        var li = $('<li>'+ $(this).val() +'</li>');
        context.initListItemEvents(li);
        option_list.append(li);
      });
      this.wrapper = wrapper;
      this.checkScroll();
    },

修改为：

duplicateOptions: function() {
      var context = this;
      var wrapper = $(document.createElement('div'));
      wrapper.addClass('editable-select-options');
      var option_list = $(document.createElement('ul'));
      wrapper.append(option_list);
      var options = this.select.find('option');
      options.each(function() {
        if($(this).attr('selected')) {
          context.text.val($(this).text());
          context.current_value = $(this).val();
        };
        var li = $('<li value='+$(this).val()+'>'+ $(this).text() +'</li>');
        context.initListItemEvents(li);
        option_list.append(li);
      });
      this.wrapper = wrapper;
      this.checkScroll();
    },

调用代码为：（可以直接使用）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery插件jquery.editable-select可输入的下拉框</title>
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<script src="jquery.editable-select.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.editable-select.css"/>
</head>
<body>
	<div>
        <label for="name">Names</label>
        <select name="drpPublisher" id="drpPublisher" class="Winstar-input120">
			<option value="0">第一个</option>
			<option value="1">第二个</option>
			<option value="2">第三个</option>
			<option value="3">第四个</option>
		</select>
      </div>
     <input type="text" id="ddd" />
</body>
<script type="text/javascript">
$(function() {
  $('#drpPublisher').editableSelect(
    {
      bg_iframe: true,
      onSelect: function(list_item) {
        // 'this' is a reference to the instance of EditableSelect
        // object, so you have full access to everything there
		alert('List item text: '+ list_item.val());
        $('#ddd').val(this.text.val());
      },
      case_sensitive: false, // If set to true, the user has to type in an exact
                             // match for the item to get highlighted
      items_then_scroll: 10 // If there are more than 10 items, display a scrollbar
    }
  );
});
</script>
</html>

Tags:

pagepeel by webpicasso.de