基于ASP.NET的JQueryUI控件开发(2) - JQSlider

先上图:

设计思路:

先看JS的Slider怎么用：

$("#slider").slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function(event, ui) {
$("#amount").val('$' + ui.value);
}
});
 

因此设计一个从Panel派生的子类，然后再加上一个隐藏域即可以完成此功能,

控件代码：

Code:

1. public class JQSlider:Panel   
2.  {   
3.      private int min = 0;   
4.      public event EventHandler ValueChanged;//当值改变时事件   
5.      public int Min//最小值   
6.      {   
7.          get { return min; }   
8.          set { min = value; }   
9.      }   
10.   
11.      private int max = 100;   
12.   
13.      public int Max//最大值   
14.      {   
15.          get { return max; }   
16.          set { max = value; }   
17.      }   
18.   
19.      private int value = 0;   
20.   
21.      public int Value//当前值   
22.      {   
23.          get { return this.value; }   
24.          set { this.value = value; }   
25.      }   
26.      private int step = 1;   
27.   
28.      public int Step//步长   
29.      {   
30.          get { return step; }   
31.          set { step = value; }   
32.      }   
33.   
34.      private HiddenField txt;//隐藏域   
35.      public JQSlider()   
36.      {      
37.          txt = new HiddenField();   
38.          this.Controls.Add(txt);               
39.      }   
40.      private bool autoPostBack = false;//自动回调   
41.      public bool AutoPostBack   
42.      {   
43.          get { return autoPostBack; }   
44.          set { autoPostBack = value; }   
45.      }   
46.      protected override void OnLoad(EventArgs e)//重写Load事件   
47.      {   
48.          base.OnLoad(e);   
49.          string val = this.Page.Request[txt.ClientID];//获取隐藏域中的值   
50.          if (!string.IsNullOrEmpty(val))   
51.          {                  
52.              value = int.Parse(val);   
53.          }   
54.          txt.Value = "" + value;   
55.          if (ValueChanged != null&&autoPostBack)//判断是否有事件且自动事件回调   
56.              ValueChanged(this, e);   
57.      }   
58.      public override void RenderEndTag(System.Web.UI.HtmlTextWriter writer)   
59.      {   
60.          string postback = "";   
61.          if (autoPostBack)   
62.          {   
63.              postback = "$('form').submit();";   
64.          }   
65.          base.RenderEndTag(writer);   
66.          //输出JS代码   
67.          writer.Write(string.Format("<script>$(function()|$('#{0}').slider(|value:{1},min:{2},max:{3},step:{4},slide:function(e,u)|$('#{0} :hidden').val(u.value);{5}%%);%);</script>",   
68.              this.ClientID,this.Value,this.Min,this.Max,this.Step,postback).Replace("|","{").Replace("%","}"));   
69.      }   
70.  }   

使用非常简单，在页面中拖放一个JQueryManager和一个JQSlider,可以设置期Min,Max,Value,Step,AutoPostBack属性和ValueChanged事件.

服务端代码如下：

Code:

1. <cc1:JQueryManager ID="JQueryManager1" runat="server" Skins="sunny">  
2.     </cc1:JQueryManager>  
3.        <cc1:JQSlider ID="JQSlider1" runat="server" Width="200px" AutoPostBack="True"    
4.            onvaluechanged="JQSlider1_ValueChanged" Step="5">              
5.        </cc1:JQSlider>  

 

客户生成端代码如下:

Code:

1. <div id="JQSlider1" style="width:200px;">  
2.     <input type="hidden" name="ctl02" id="ctl02" value="25" />              
3.            
4. </div><script>$(function(){$('#JQSlider1').slider({value:25,min:0,max:100,step:5,slide:function(e,u){$('#JQSlider1 :hidden').val(u.value);$('form').submit();}});});</script>  
5.     </div>  

哈哈完工!待续中....