jquery input选择弹框

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.plugin.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.plugin.css" />

<script type="text/javascript">

    jQuery.fn.selectCity = function(targetId) {

        var _seft = this;

        var targetId = $(targetId);

        this.click(function() {

            var A_top = $(this).offset().top + $(this).outerHeight(true);

            var A_left = $(this).offset().left;

            targetId.bgiframe();

            targetId.show().css({

                "position" : "absolute",

                "top" : A_top + "px",

                "left" : A_left + "px"

            });

        });

        targetId.find("#selectItemClose").click(function() {

            targetId.hide();

        });

        targetId.find("#selectSub :checkbox").click(function() {

            targetId.find(":checkbox").attr("checked", false);

            $(this).attr("checked", true);

            _seft.val($(this).val());

            targetId.hide();

        });

        $(document).click(function(event) {

            if (event.target.id != _seft.selector.substring(1)) {

                targetId.hide();

            }

        });

        targetId.click(function(e) {

            e.stopPropagation();

        });

        return this;

    };

    $(function() {

        $("#address").selectCity("#selectItem");

        $("#address2").selectCity("#selectItem2");

    });

</script>

</head>

<body>

    <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="text" name="address" id="address" size="33"><br>

    <div id="selectItem" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr01" id="cr01" value="北京1" />

                <label for="cr01">北京1</label>

                <input type="checkbox" name="cr02" id="cr02" value="北京2" />

                <label for="cr02">北京2</label>

                <input type="checkbox" name="cr03" id="cr03" value="北京3" />

                <label for="cr03">北京3</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

                <input type="checkbox" name="cr09" id="cr09" value="北京4" />

                <label for="cr09">北京4</label>

            </div>

        </div>

    </div>

<!--

    <input type="text" name="address2" id="address2" size="20">

    <div id="selectItem2" class="selectItemhidden">

        <div id="selectItemAd" class="selectItemtit bgc_ccc">

            <h2 id="selectItemTitle" class="selectItemleft">请选择城市</h2>

            <div id="selectItemClose" class="selectItemright">关闭</div>

        </div>

        <div id="selectItemCount" class="selectItemcont">

            <div id="selectSub">

                <input type="checkbox" name="cr04" id="cr04" value="北京1" />

                <label for="cr04">北京1</label>

                <input type="checkbox" name="cr05" id="cr05" value="北京2" />

                <label for="cr05">北京2</label>

                <input type="checkbox" name="cr06" id="cr06" value="北京3" />

                <label for="cr06">北京3</label>

                <input type="checkbox" name="cr07" id="cr07" value="北京4" />

                <label for="cr07">北京4</label>

            </div>

        </div>

    </div>

 -->

</body>

</html>

jquery.plugin.css

body{font-size:12px;}

#selectItem{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:;}

.selectItemtit{line-height:20px;height:20px;margin:1px;padding-left:12px;}

.bgc_ccc{background:#E88E22;}

.selectItemleft{float:left;margin:0px;padding:0px;font-size:12px;font-weight:bold;color:#fff;}

.selectItemright{float:right;cursor:pointer;color:#fff;}

.selectItemhidden{display:none;}

.selectItemcont{padding:8px;}

/*.selectItemcls{clear:both;font-size:0px;height:0px;overflow:hidden;}*/

/*#selectItem2{background:#FFF;position:absolute;top:0px;left:center;border:1px solid #000;overflow:hidden;width:240px;z-index:1000;}*/

jquery.plugin.js

(function($){

$.fn.bgIframe = $.fn.bgiframe = function(s) {

    // This is only for IE6

    if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {

        s = $.extend({

            top     : 'auto', // auto == .currentStyle.borderTopWidth

            left    : 'auto', // auto == .currentStyle.borderLeftWidth

            width   : 'auto', // auto == offsetWidth

            height  : 'auto', // auto == offsetHeight

            opacity : true,

            src     : 'javascript:false;'

        }, s || {});

        var prop = function(n){return n&&n.constructor==Number?n+'px':n;},

            html = '<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+

                       'style="display:block;position:absolute;z-index:-1;'+

                           (s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+

                           'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+

                           'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+

                           'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+

                           'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+

                    '"/>';

        return this.each(function() {

            if ( $('> iframe.bgiframe', this).length == 0 )

                this.insertBefore( document.createElement(html), this.firstChild );

        });

    }

    return this;

};

})(jQuery);

构建的js

var selectItemhidden = jQuery("<div></div>").addClass("selectItemhidden").attr("id","selectItem");

var selectItemtit = jQuery("<div></div>").addClass("selectItemtit bgc_ccc").attr("id","selectItemAd");

var selectItemleft = jQuery("<h2></h2>").addClass("selectItemleft").attr("id","selectItemTitle");

var selectItemright = jQuery("<div></div>").addClass("selectItemright").attr("id","selectItemClose");

var selectItemcont = jQuery("<div></div>").addClass("selectItemcont").attr("id","selectItemCount");

var selectSub = jQuery("<div></div>").attr("id","selectSub");

var checkbox = jQuery("<input>").attr("type","checkbox").attr("name","cr01").attr("id","cr01").val("北京1");

var label = jQuery("<label>").attr("for","cr01").html("北京");

var title = selectItemtit.append(selectItemleft).append(selectItemright);

var content = selectItemcont.append(selectSub.append(checkbox).append(label));

selectItemhidden.append(title).append(content);

jquery input选择弹框的更多相关文章

jquery 点击弹框
<a href="#" class="big-link" data-reveal-id="myModal" data-animatio ...
jquery点击弹框外层关闭弹框
$(document).bind("click",function(e){ if($( e.target ).closest(".game-cont ...
jquery input 下拉框(模拟select控件)焦点事件
本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...
jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于需要多添加一个属性: ...
H5微信页面开发 IOS系统 input输入框失去焦点，软键盘关闭后，被撑起的页面无法回退到原来正常的位置，导致弹框里的按钮响应区域错位
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
jquery mobile将页面内容当成弹框进行显示
注:必须使用相对应版本的jquery mobile css.不然无法正常显示 <div data-role="page" id="pageone"> ...
jquery EsayUi 里一个小弹框
网站后台大多的数据展示就都用和此插件有着密切的关系: 来用一下这个小弹框吧: 一个Html里面的代码 <link rel='stylesheet' type='text/css' href='c ...

随机推荐

ecshop搜索出现相关商品的效果滑动下拉效果
ecshop搜索栏效果如下所需要的样式我们可以复制到style.css里: /*搜索滑动效果*/ .Menu { position:absolute; top:30px; left:7px; wid ...
java面试每日一题13
题目:有一个分数数列2/1.3/2.5/3.8/5.13/8........求出这个数列的前20项之和.运行结果如下32.660263 public class Page80 { /** * * @p ...
开源数据库连接池proxool
可以根据自己的实际情况,选择不同的配置,可以选择properties.XML.Servlet等配置,官方网站上都有介绍. 1.下载proxool 地址:http://proxool.sourcef ...
python-django 模型model字段类型说明
V=models.CharField(max_length=None<, **options>) #varchar V=models.EmailField(<max_length=7 ...
ROADS
ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11977 Accepted: 4429 Description N ...
nohup & rabbitmq & python
用Python脚本执行rabbitmq的消费 nohup python consumer.py > out.log & 结果郁闷啊,怎么都查看不到输出! 终于找到了答案: 原来pytho ...
Linux的bg和fg命令简单介绍
我们都知道,在 Windows 上面,我们要么让一个程序作为服务在后台一直运行,要么停止这个服务.而不能让程序在前台后台之间切换.而 Linux 提供了 fg 和 bg 命令,让我们轻松调度正在运行的 ...
制作透明色：《CSS3 RGBA》与Opacity样式用法
前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...
C# for和 foreach 的数组遍历比较
刚学习程序,感觉写代码很有意思,所以把自己的感悟写下来啦,第一次写博客,可能是菜鸟中的菜鸟时间久了,相信就会写的很好哦! for和 foreach 的数组遍历比较很简单的程序,不解释啦! u ...
ZooKeeper报错
运行python 出现exception=java.io.IOException: Can't get master address from ZooKeeper; znode data == nul ...

jquery input选择弹框

jquery input选择弹框的更多相关文章

随机推荐

热门专题