[原创]茗洋AaronYang的 jquery.myselect.js 我的一次前端突破[上]

 【评论,楼层数为30的倍数的,我送你我自己的博客园的皮肤,该博客参与活动】

 
介绍 myselect 自己原创的js插件
 

这是一个可以可以支持ie6+的所有浏览器的,适应很多场景和需求的一个下拉自定义基于jquery的,轻量级的下拉控件,总大小不到11K,你可以很随意自己改改就可以应用到你的项目中。这里面的代码是我一行一行写的,希望多多支持哦

  1. 适合ie6+浏览器,易使用,代码易懂易学,代码已经优化,上下键,模糊匹配都不卡,反应灵敏,轻量级
  2. 支持模糊匹配,上下键选择,水印效果
  3. 自定义右侧图标
  4. 支持错误友好提示
  5. 支持级联选择,一个页面N个级联,也能正确的获得值
  6. 支持自定义可编辑和不可编辑,不可编辑,全框可单击,可编辑,小三角可单击,并支持文本框聚焦提示选择
  7. 支持一个页面批量下拉框,不会受影响下拉层不会互相重叠
  8. 支持从后台读取数据,然后模糊匹配
  9. 易拓展

 

 

基本使用之前

新建ASP.NET MVC 4 项目

imageimage

因为新建后的项目可以立即使用jQuery了,所以我们的myselect.js中不会动态引入jquery

然后我们直接将jquery.myselect.js包放入Scripts下就可以了

因为这东西我们经常使用,所以我们把js的引用放到Views/shared/_Layout.cshtml页面上

image

mainstyle.css就是一个css通用标准库,如果你有了就不用引用了

删除底部
@Scripts.Render("~/bundles/jquery")

image

接下来,我添加了一个image

接下来进入Gloabal.asax页面,F12这个image

image然后Home修改成MySelect

image接下来,添加Myselect对应的Index视图

 

基本使用 DEMO1

 

@{
    ViewBag.Title = "Index";
}

<h2>Demo1</h2>
<input type="hidden" id="IdentityType" name="IdentityType" value="" /> 
<div class="select_box slw1">
    <input id="cardId" type="text" value="请选择" readonly="true" hid="IdentityType" val='-1' />
    <ul class="display">
        <li value="1">身份证</li>
        <li value="2">护照</li>
    </ul>
</div>&nbsp;
 <input type="button" value="获得值" id="demo1" style="display:inline"/>

<script type="text/javascript">
    MySelect({ Container: ".select_box", maxheight: 200});
    $(function () {
        $("#demo1").click(function () {
            var demo1_val = $.ms.Get("#cardId");
            alert("value="+demo1_val.id+",text="+demo1_val.text)
        })
    }
    );
</script>

注意:div中的class样式由两部分组成,一个selectbox必须,第二个其实是宽度,样式调整。

还有selectbox样式的div中的结构必须是这样的。

讲一下这里的重点DIV那块

这里3部分组成

第一个input隐藏字段,也就是你往后台post的时候,那个对象的value值的地方,

第二个input字段是,就是你现在见到的那个文本框,小三角那个下拉是在jQuery.myselect.js中动态添加进去的

第三个ul就是点击,显示可选值的div

这里重点在于第二个input的 参数的配置和应对各种需求情况

效果图:

Demo1

<input id="cardId" type="text" value="请选择" readonly="true" hid="IdentityType" val='-1' />

value就是默认的水印文本,val就是隐藏的值,hid就是hiddenId,就是隐藏input控件id,方便你选择完成,可以很方便的序列化传到后台Action的参数中,其实hid是个可选属性,不写,可以通过$.ms.Get(jquery的选择器),可以返回一个下拉框value和text的json,也可以获得值,这里的readonly=true的时候,文本框只可以单击,就可以选择值了,如果readonly属性不写就是可编辑了,我们去掉readonly属性

@{
    ViewBag.Title = "Index";
}

<h2>Demo1</h2>
不可编辑的
 <input type="hidden" id="IdentityType" name="IdentityType" value="" />
<div class="select_box slw1">
    <input id="cardId" type="text" value="请选择" readonly="true" hid="IdentityType" val='-1' />
    <ul class="display">
        <li value="1">身份证</li>
        <li value="2">护照</li>
    </ul>
</div>&nbsp;
 <input type="button" value="获得值" id="demo1" style="display:inline"/>
<br />
可编辑的无水印,无提示下拉框
 <input type="hidden" id="IdentityType2" name="IdentityType2" value="" />
<div class="select_box slw1" id="demo1_2">
    <input id="cardId2" type="text" value="请选择"   hid="IdentityType2" val='-1'/>
    <ul class="display" id="ulcardId2">
        <li value="1">身份证</li>
        <li value="2">护照</li>
    </ul>
</div>&nbsp;&nbsp;&nbsp;
 <input type="button" value="获得值" id="demo2" style="display:inline"/>

<script type="text/javascript">
    MySelect({ Container: ".select_box", maxheight: 200, addnew: "新增...", animates: 2 });
    $(function () {
        $("#demo1").click(function () {
            var demo1_val = $.ms.Get("#cardId");
            alert("value="+demo1_val.id+",text="+demo1_val.text)
        })
        $("#demo2").click(function () {
            var demo1_val = $.ms.Get("#cardId2");
            alert("value=" + demo1_val.id + ",text=" + demo1_val.text)
        })
    }
    );
</script>

效果图:不仅看到了可编辑,而且如果加了hid属性,就支持了额外的value值存的地方

可编辑的无水印,无提示下拉框

接下来,我们加上auto=“on” 开启提示

我们加上ulid属性,然后在下面的ul上加上id,就可以支持上下键选择,完美滚动条,鼠标先选择,然后上下键还可以调整

加上hightext=“请选择” 开启水印文本效果。hightext的值是默认显示的value的值做对比的参照文本,所以最好和value一样,一样的话,鼠标选中,水印就会消失

源码:

可编辑的水印文本效果,有提示,支持上下键模糊匹配下拉框

<div class="select_box slw1" id="demo1_3">
    <input id="floors" type="text" value="请选择楼层" hightext="请选择楼层"  auto="on"  val='-1' ulid="ulfloors"/>
    <ul class="display" id="ulfloors">
        <li value="1">我是一楼</li>
        <li value="2">我是二楼</li>
        <li value="3">我是三楼</li>
        <li value="4">我是四楼</li>
        <li value="5">我是五楼</li>
        <li value="6">我是六楼</li>
        <li value="7">我是七楼</li>
        <li value="8">我是八楼</li>
        <li value="9">我是九楼</li>
        <li value="10">阿迷拖佛十楼来也</li>
    </ul>
</div>&nbsp;&nbsp;&nbsp;
 <input type="button" value="获得值" id="demo3" style="display:inline"/>

效果图

3

 

验证红框提示 DEMO2

 

代码当然很简单了

<br />
 <input type="button" value="楼层验证失败提示" id="demo4" style="display:inline"/>

<script type="text/javascript">
    MySelect({ Container: ".select_box", maxheight: 200, addnew: "新增...", animates: 2 });
    $(function () {
        $("#demo1").click(function () {
            var demo1_val = $.ms.Get("#cardId");
            alert("value="+demo1_val.id+",text="+demo1_val.text)
        })
        $("#demo2").click(function () {
            var demo1_val = $.ms.Get("#cardId2");
            alert("value=" + demo1_val.id + ",text=" + demo1_val.text)
        })
        $("#demo3").click(function () {
            var demo1_val = $.ms.Get("#floors");
            alert("value=" + demo1_val.id + ",text=" + demo1_val.text)
        })
        $("#demo4").click(function () {
            $.ms.Wrong("#floors");
        })
 
    }
    );
</script>

 

效果图:

4

 

默认显示的值 DEMO3

场景:你传个id,获得了基本的值,然后下拉框要赋上原来的值

第一种方式:

demo5性别默认女性

<div class="select_box slw1" id="demo1_4">
    <input id="sex" type="text" value="女" val='2'/>
    <ul class="display">
        <li value="1"></li>
        <li value="2"></li>
        <li value="2">保密</li>

    </ul>
</div>&nbsp;&nbsp;&nbsp;
 <input type="button" value="获得值" id="demo5" style="display:inline"/>

效果我就不演示了,原理就是 value就是显示的值,val就是隐藏的值,我们调用Get方法获得值的时候也是依据这个

第二种方式:

使用我封装的Set方法,因为有时候我们需要清空表单,而不是页面一开始你就赋值好了,就是后期赋值,所以我就封装了这个方法,方便使用,就是设置值

   $("#demo6").click(function () {
            $.ms.Set("#sex","3","保密");
        })

效果图

5

 

多个尺寸 DEMO4

image

你只要调整样式slw1,slw2,slw3等,满足不了的,你也可以具体的在myselect.css中扩展

css中的样式也很简单

@charset "utf-8";
.slw1,.slw2,.slw3{ margin-right:2px;_margin-right:0px;}
.slw1{ width:180px;}
.slw2{ width:85px;}
.slw3{ width:115px;}
.slw4{ width:80px;}
.slw5{ width:50px;}
.slw6{ width:65px;}



.select_box { float:left; position:relative;}
.select_box .textbox{ border:1px solid #dedede;width:100%;height:28px;line-height:28px;background:#FFF}
.select_box .slt{cursor:pointer;width:22px;_width:19px;height:28px;line-height:28px;background:#FFF}
.select_box input{color:#888;height:26px;line-height:26px;border:0;display:block;width:60px;text-indent:8px;overflow:hidden;}
.select_box input:focus{outline:none}
.select_box .slt img{
      position:relative;
      top:44%;
      _top:45%;
      right:-5px;
    }

.select_box ul li{display:block;width:100%;text-indent:8px;overflow:hidden;}
.select_box li { padding:5px 0px; width:100%; line-height:1.5; color:#333;}
.select_box ul {width:100%; position:absolute; left:0; top:27px; border:1px solid #dedede;overflow: hidden;display:none; background:#fefefe; z-index:99999;}
.select_box ul li.hover {background:#999;color:#fff;}

.it-on{ border:1px solid #4f9dff; color:#000;}
.it-wo{ border:1px solid #f00; color:#f00;}

it-wo就是验证失败的样式,加个红边框

 

我的现在的jquery.myselect.js已经能支持90%的场景了,也可以拓展成百度搜索条那种效

果,因为当初模仿它写的,现在支持两种展开方式,你可以在

MySelect({ Container: ".select_box", maxheight: 200, addnew: "新增...", animates: 2 });

后面的animate参数中指定1还是2,你可以体验下效果

这里的Container属性,后面是个jQuery选择器,你只要能正确定位到myselect结构的代码那里就行了,比如 #sex    或者 #moneyform div.selectbox[tag=1]都可以

关于动态赋值,你可以赋任何值,下拉框没有的都可以,这里我还没有对文本框中的和下拉框中的值进行验证,是否存在,所以提供了很大的方便性,这也是模仿百度的搜索设计做的,随便输。

这里我还没有篇幅讲解 级联查询,和后台查询绑定的使用,放心吧,我应经封装的很简单使用了。这里也看到了ulid这个属性,和ul加个id的设计,就是为了在一个场景中遇到很多级联,会遇到获值错误的问题。现发布一个给你们体验下。关于省市级联,我已经封装好了jquery.myselect.city.js中,具体使用下次说

 

为了解决级联和多个地方使用不会相互冲突,我先发个效果图给大家看

7

6

这就一个场景混合使用,也没有任何问题,

内容太多了,下次再讲了。自己写这个,也经过了好多次设计和修改,特意拿出来与大家分享一下。

jquery.myselect1.2.js包   下载 已经更新,兼容火狐了,刚才忘了东西

DEMO1 下载,请替换以前的myselect包,使用1.2的

 

写到我这个年龄,我觉的我的时间很多都花在研究上了,所以现在很少能有时间写写博客,干自己爱干的事,这次能写到这里也让我感到很高兴,谢谢你们也看到了这里,我会慢慢写的,谢谢你们的支持.

我不知道我写个是不是个多余,我不是做前端的,但我的前端也不差,我在合肥,刚刚离职,准备创业,所以现在时间比较多吧..

========================================AaronYang.cnblogs.com 茗洋博客==================================================

posted @ 2014-02-28 13:10  AYUI框架  阅读(1964)  评论(11编辑  收藏