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 ...

随机推荐

greenplum集群安装
一.环境配置 1.地址分配 192.168.1.201 mdw master 192.168.1.202 sdw1 segment1 192.168.1.203 sdw2 segment2 2.创建用 ...
js中RHS与LHS区别
为什么区分RHS与LHS是一件重要的事情? 因为在变量没有声明(在任何作用域都找不到该变量的情况下),这两种查询的行为是不一样的. function foo (a) { console.log(a + ...
使用mysqlbinlog server远程备份binlog的脚本
#注意,备份机到远程mysql服务器需要免密钥登录,此脚本放到计划任务中每五分钟执行一次,避免mysqlbinlog server进程长时间挂掉无人知晓 cat backup_binlog.sh ...
oracle nvl和nvl2的区别
一直用oracle nvl函数,最近发现还有一个nvl2函数: nvl(a,b) 如果a不为null 则返回a,如果a为null则返回b; nvl2(a,b,c) ,如果a不为null 则返回b,如果 ...
SlickGrid example 2: 按想要的风格展示列
先上效果图. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
第十二届浙江省大学生程序设计大赛-Lunch Time 分类：比赛 2015-06-26 14:30 5人阅读评论(0) 收藏
Lunch Time Time Limit: 2 Seconds Memory Limit: 65536 KB The 999th Zhejiang Provincial Collegiate Pro ...
JAVA基础知识之多线程——线程组和未处理异常
线程组 Java中的ThreadGroup类表示线程组,在创建新线程时,可以通过构造函数Thread(group...)来指定线程组. 线程组具有以下特征如果没有显式指定线程组,则新线程属于默认线程 ...
java 导入自定义类
eclipse导入很容易,昨天上课学了一下用记事本写java,导入自定义类,这就麻烦了. 代码贴一下,方便操作: package tom.jiafei; public class SquareEqua ...
SharePoint自动化系列——创建MMS terms
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ PowerShell脚本实现MMS group.termSet.terms的自动化创建: Add- ...
华东交通大学2016年ACM“双基”程序设计竞赛 1003
Problem Description 风雨漂泊异乡路, 浮萍凄清落叶飞. 游子寻根满愁绪,一朝故土热泪归.Hey ecjtuer! 刚刚学习了二叉树的知识,现在来考察一下..给你一个深度为h的满二叉 ...

jquery input选择弹框

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

随机推荐

热门专题