xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > jQuery判别浏览器并动态调节select宽度的法子,基

jQuery判别浏览器并动态调节select宽度的法子,基

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-07-12 13:53

本文实例讲述了jQuery判断浏览器并动态调整select宽度的方法。分享给大家供大家参考,具体如下:

Promise对象是CommonJS工作组为异步编程提供的统一接口,是ECMAScript6中提供了对Promise的原生支持,Promise就是在未来发生的事情,使用Promise可以避免回调函数的层层嵌套,还提供了规范更加容易的对异步操作进行控制。提供了reject,resolve,then和catch等方法。

前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图

<!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>Untitled Page</title> 
  <mce:script src="jquery-1.4.4.js" mce_src="jquery-1.4.4.js" type="text/javascript"></mce:script> 
  <mce:script type="text/javascript"><!-- 
    function userBrowser() { 
      var browserName = navigator.userAgent.toLowerCase(); 
      if (/msie/i.test(browserName) && !/opera/.test(browserName)) { 
        browserName="ie"; 
      } else if (/firefox/i.test(browserName)) { 
        browserName = "firefox"; 
      } else if (/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)) { 
        browserName = "chrome"; 
      } else if (/opera/i.test(browserName)) { 
        browserName = "opera"; 
      } else if (/webkit/i.test(browserName) && !(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))) { 
        browserName = "safari"; 
      } else { 
        browserName = "unknow"; 
      } 
      return browserName; 
    } 
    $(function() { 
      var browser = userBrowser(); 
      if (browser == "ie") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width()   10)   "px"); 
        }); 
      } 
      else if (browser == "firefox") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width()   8)   "px"); 
        }); 
      } 
      else if (browser == "chrome") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width()   6)   "px"); 
        }); 
      } 
      else if (browser == "safari") { 
        $("select").each(function() { 
          $(this).css("width", ($(this).width()   30)   "px"); 
        }); 
      } 
    }); 
// --></mce:script> 
</head> 
<body> 
  <div> 
    <!-- 注: select 在doctype下, 会出现width比同width的text短, ie为6px, ff为4px --> 
    <input id="t1" type="text" style="width: 400px;" /><br /> 
    <select id="s1" style="width: 400px;"> 
      <option>1</option> 
    </select><br /> 
    <textarea id="TextArea1" cols="20" rows="2" style="width: 400px;"> 
  </div>
</body>
</html>

使用PROMISE

图片 1

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

Promise是ES6之后原生的对象,我们只需要实例化Promise对象就可以直接使用。
实例化Promise:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="../js/jquery-1.7.min.js" ></script> 
<style type="text/css">
#provinceDiv{ list-style:none;}
#provinceDiv li{ list-style:none; border-bottom:1px dotted #ccc; width:400px; height:20px;margin-bottom:3px;}
#provinceDiv li span{ display:block; width:60px; height:20px; float:left; line-height:20px; text-align:center; position:relative;}
#provinceDiv li span:hover{ background:#fb0;}
#provinceDiv li span.current{ background:#fb0;}
div.cityDiv{ border:1px solid #ccc; width:auto; width:100px;_width:100px; height:100px;_height:100px;height:auto; background:#eff7ff; display:none; position:absolute; padding:2px;}
div.cityDiv a{ display:block; text-decoration:none; color:#000;}
div.cityDiv a:hover{ background:#fb0;}
</style>
<script type="text/javascript">
$(function () {
var isoncityDiv = false; //是否在cityDiv上,默认为false
$("span").bind("click", function () {
var spanid = $(this).attr("id"); //获取当前spanid
$("span").not("#"   spanid).removeClass("current");
$(this).addClass("current");
$("div.cityDiv").remove(); //立即移除所有动态创建的div
var spanCurrent = $("#"   $(this).attr("id")); //当前点击的sapn对象
var tipDiv = $("<div id='city_"   $(this).attr("id")   "' class='cityDiv'></div>"); //动态创建城市div
tipDiv.html(System_Select_City.GetCity(spanid).value);//后台输出的数据包含城市数据
tipDiv.bind("mouseover", function () {
tipDiv.show();
isoncityDiv = true; //鼠标在其上为true
}).bind("mouseout", function () {
tipDiv.hide();
});
$("body").append(tipDiv); //加入body 
var top = spanCurrent.offset().top; //获取top
var left = spanCurrent.offset().left; //获取left
tipDiv.offset({ top: top   20, left: left   60 });
tipDiv.show(); //获取显示div 
}).bind("mouseout", function () {
var spanCurrent = $("#city_"   $(this).attr("id"));
var a = function () {
if (!isoncityDiv) { //不在 弹出的div上时候 执行
spanCurrent.remove();
}
clearTimeout(int);
};
var int = setTimeout(a, 3000);
});
});
//关闭谈出口
function show(title) {
parent.closeDiv(title);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="provinceDiv">
<li> <a>直辖市</a></li>
<li>
北京
上海
重庆
天津
</li>
<li><a>省区</a></li>
<li>
河北
山西 
内蒙古
辽宁
吉林
黑龙江 
</li>
<li> 
江苏
浙江
安徽
福建
江西
山东 
</li>
<li>
河南
湖北
湖南
广东
广西
海南
</li>
<li> 
四川
贵州
云南
西藏
陕西
甘肃
</li> 
<li> 
青海
宁夏
新疆
台湾
香港
澳门
</li> 
</ul>
</div> 
</form>
</body>
</html> 

希望本文所述对大家jQuery程序设计有所帮助。

var promise = new Promise(function (resolve, reject) {
  console.log('begin do something');
  if (Math.random() * 10.0 > 5) {
    console.log(" run success");
    resolve();
  } else {
    console.log(" run failed");
    reject();

  }
});

以上内容给大家介绍了基于jQuery实现仿51job城市选择功能实例代码,希望对大家有所帮助!

您可能感兴趣的文章:

  • jquery实现动态操作select选中
  • jQuery动态添加删除select项(实现代码)
  • jquery动态加载select下拉框示例代码
  • JQuery动态添加Select的Option元素实现方法
  • jQuery为动态生成的select元素添加事件的方法
  • jquery select动态加载选择(兼容各种浏览器)
  • jquery Ajax实现Select动态添加数据
  • jquery html动态生成select标签出问题的解决方法
  • jQuery动态产生select option下拉列表
  • jQuery实现动态显示select下拉列表数据的方法

这里定义了一个回调方法function(resolve,reject),如果成功了就调用resolve,失败了就会调用reject。
Promise.prototype.then是Promise执行完之后的回调,可以用then方法分别指定resolve和reject的回调。

您可能感兴趣的文章:

  • js实现仿阿里巴巴城市选择框效果实例
  • Ajax实现弹出式无刷新城市选择功能代码

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:jQuery判别浏览器并动态调节select宽度的法子,基

关键词: GD视讯直播