jquery는 선택 드롭다운 상자 미화 특수 효과 코드를 구현합니다.
- PHPz앞으로
- 2016-05-16 15:44:251703검색
이 글은 선택 드롭다운 상자를 아름답게 하기 위한 jquery 구현을 주로 소개합니다. 효과가 간단하고 우아해 도움이 필요한 모든 사람에게 권장됩니다.
선택 드롭다운 상자 미화를 구현하기 위한 jquery 기반의 특수 효과 코드입니다. 사용자가 드롭다운 메뉴의 내용을 선택할 수 있는 매우 실용적인 특수 효과 소스 코드입니다.
모든 사람과 공유되는 선택 드롭다운 상자 미화 특수 효과 코드의 jquery 구현은 다음과 같습니다.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/g.css" type="text/css" rel="stylesheet" />
<link href="css/css.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="searchbox">
<p class="searchZone clearfix">
<form target="_blank">
<fieldset>
<label>
<input type="text" class="text" name="keyword" onblur="if(this.value==''){this.value='请输入关键字';this.style.color='#aaa'}" onfocus="if(this.value=='请输入关键字'){this.value='';this.style.color='#333'}" value="请输入关键字" />
</label>
<p class="left">
<select style="display: none;" name="mySle" id="mySle">
<option selected="selected" value="0">全站搜索</option>
<option value="1">素材搜索</option>
<option value="2">设计欣赏</option>
<option value="3">桌面壁纸</option>
<option value="4">设计教程</option>
</select>
</p>
<label>
<button type="submit">快给我搜一下</button>
</label>
</fieldset>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/selectbox.js"></script>
<script type="text/javascript"> $(document).ready(function() {$('#mySle').selectbox();});</script>
</p>
</p>
</body>
</html>렌더링 실행:
온라인 데모 주소 ：http://demo.jb51.net/js/2015/jquery-select-xlkmh/
더 많은 드롭다운 상자 효과를 원하시면 다음을 수행하세요. jquery/JavaScript 드롭다운 상자 효과 요약을 클릭하세요.
위는 여러분과 공유한 선택 드롭다운 상자 미화 특수 효과 코드의 jQuery 구현입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요.
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제