Tips:点此可运行HTML源码

jQuery实现菜单点击隐藏(上下左右)

canrun

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>jQuery实现菜单点击隐藏</title>
  6     <script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.6.2.min.js"></script>
  7     <script>
  8     $(document).ready(function () {
  9         //eg.1
 10         $('#menu-1').menuToggle({
 11             'ctrlBtn':'ctrl-btn-1',
 12             'speed':400,
 13             'width':400,
 14         });
 15         //eg.2
 16         $('#menu-2').menuToggle({
 17             'ctrlBtn':'ctrl-btn-2',
 18             'speed':300,
 19             'width':400,
 20             'openText':'<<展开',
 21             'closeText':'关闭>>',
 22         });
 23         //eg.3
 24         $('#menu-3').menuToggle({
 25             'ctrlBtn':'ctrl-btn-3',
 26             'speed':300,
 27             'height':400,
 28             'openText':'向下展开',
 29             'closeText':'关闭',
 30             'type':'height',
 31         });
 32         
 33         //eg.4
 34         $('#menu-4').menuToggle({
 35             'ctrlBtn':'ctrl-btn-4',
 36             'speed':300,
 37             'height':400,
 38             'openText':'向上展开',
 39             'closeText':'关闭',
 40             'type':'height',
 41         });
 42     });
 43     (function($){
 44         $.fn.extend({'menuToggle':
 45             function(options){
 46                 //self变量,用于函数内部调用插件参数
 47                 var self = this;
 48                 //默认参数
 49                 this._default = {
 50                     'ctrlBtn':null,            //关闭&展开按钮id
 51                     'speed':400,            //展开速度
 52                     'width':400,            //展开菜单宽度
 53                     'height':400,            //展开菜单高度
 54                     'openText':'展开>>',    //展开前文本
 55                     'closeText':'<<关闭',    //展开后文本
 56                     'type':'width'            //width表示按宽度伸展,height表示按高度伸展
 57                 };
 58                 //插件初始化函数
 59                 this.init = function(options){
 60                     //配置参数格式有误则提示并返回
 61                     if(typeof options != 'object') {
 62                         self.error('Options is not object Error!');
 63                         return false;
 64                     }
 65                     if(typeof options.ctrlBtn == 'undefined') {
 66                         self.error('Options ctrlBtn should not be empty!');
 67                         return false;
 68                     }
 69                     //存储自定义参数
 70                     self._default.ctrlBtn = options.ctrlBtn;
 71                     if(typeof options.type != 'undefined')         self._default.type = options.type;
 72                     if(typeof options.width != 'undefined')     self._default.width = options.width;
 73                     if(typeof options.height != 'undefined')     self._default.height = options.height;
 74                     if(typeof options.speed != 'undefined')     self._default.speed = options.speed;
 75                     if(typeof options.openText != 'undefined')     self._default.openText = options.openText;
 76                     if(typeof options.closeText != 'undefined') self._default.closeText = options.closeText;
 77                     if(self._default.type == 'width') {
 78                         self._default.expandOpen     = {width: self._default.width};
 79                         self._default.expandClose     = {width: 0};
 80                     }else {
 81                         self._default.expandOpen     = {height: self._default.height};
 82                         self._default.expandClose     = {height: 0};
 83                     }
 84                 };
 85                 this.run = function(){
 86                     $("#"+self._default.ctrlBtn).click(function () {
 87                         if($(this).hasClass('closed')){        //有closed类,表示已关闭,现在展开
 88                             $(this).removeClass('closed').html(self._default.closeText);
 89                             $(self).show().animate(self._default.expandOpen, self._default.speed);
 90                         }else {
 91                             $(this).addClass('closed').html(self._default.openText);
 92                             $(self).animate(self._default.expandClose, self._default.speed,function(){
 93                                 $(this).hide();
 94                             });
 95                         }
 96                     });
 97                 };
 98                 this.error = function(msg){
 99                     //没有错误提示DIV则自动添加
100                     if(!$("#menuToggleErrorTips").size()){
101                         $("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide();
102                         $("#menuToggleErrorTips").css({
103                             position:'absolute',
104                             left: $("body").width()/3,
105                             top: 100,
106                             width:400,
107                             height:200,
108                             'z-index': 9999999,
109                             'border': '1px solid #000',
110                             'background-color': '#ABC',
111                             'color': '#CC0000',
112                             'text-align': 'center'
113                         });
114                     }
115                     //显示错误提示信息
116                     $("#menuToggleErrorTips").show().children('.tips').html(msg);
117                 }
118                 //Init
119                 this.init(options);
120                 this.run();
121             }
122         });
123     })(jQuery);
124     </script>
125     <style type="text/css">
126     /* 公用 */
127     .hide-menu
128     {
129         width:0;
130         height:300px;
131         border:1px solid #333333;
132         background-color:#777788;
133         text-align:center;
134         line-height:400%;
135         font-size:13px;
136         left:0;
137         top:100px;
138         float:left;
139         display:none;
140     }
141     .ctrl-btn{
142         border: 1px solid;
143         float: left;
144         padding: 10px;
145         position: relative;
146         top: 100px;
147         cursor:pointer;
148     }
149     /* 菜单2 */
150     #menu-2{
151         width:400px;
152         top:100px;
153         right:0;
154         float:right;
155         display:block;
156     }
157     #ctrl-btn-2{
158         float:right;
159     }
160     .clr{
161         clear:both;
162     }
163     /* 菜单3 */
164     #menu-3{
165         width:400px;    
166         height:0;
167     }
168     #menu-3-wrapper{
169         top:0;
170         left:300px;
171         position:absolute;
172     }
173     #ctrl-btn-3{
174         clear: both;
175         left: 150px;
176         position: relative;
177         top: 0;
178     }
179     /* 菜单4 */
180     #menu-4{
181         clear: both;
182         width:400px;    
183         height:400px;
184         display:block;
185     }
186     #menu-4-wrapper{
187         bottom:0;
188         left:300px;
189         position:absolute;
190     }
191     #ctrl-btn-4{
192         clear: both;
193         left: 150px;
194         position: relative;
195         top: 0;
196     }
197     </style>
198 </head>
199 
200 <body>
201 <div id="menu-1" class="hide-menu"></div>
202 <div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div>
203 
204 <div id="menu-2" class="hide-menu"></div>
205 <div id="ctrl-btn-2" class="ctrl-btn">关闭>></div>
206 
207 <div id="menu-3-wrapper">
208     <div id="menu-3" class="hide-menu"></div>
209     <div id="ctrl-btn-3" class="ctrl-btn closed">向下展开</div>
210 </div>
211 <div id="menu-4-wrapper">
212     <div id="ctrl-btn-4" class="ctrl-btn">关闭</div>
213     <div id="menu-4" class="hide-menu"></div>
214 </div>
215 <div class="clr"></div>
216 </body>
217 </html>

 

posted @ 2013-07-12 12:36 Zjmainstay 阅读(...) 评论(...) 编辑 收藏
实现请参考《为博客园添加标签云动画