betway必威亚洲官网鼠标滑在标题上显示图片,网页上模拟浏览器前进后退功能

最近的一个项目,因为是内嵌客户端的网页,产品经理希望能在页面上,实现浏览器的前进和后退功能,类似浏览器左上角的按钮。
前进和后退是很简单的,通过window.history对象的相关方法,比如go、forward、back即可实现,关键是,如何判断当前是否已经前进(后退)到最前面(后面)一页了呢?
经过一阵思考,最终我使用了cookie来存储用户浏览信息的方式,在cookie中存放一个数字,该数字表示用户当前正在浏览历史记录中的第几页。历史记录的总页数通过history的length属性来获取。
具体实现为:用户每点击一次页面上的跳转链接,都会在cookie中设置一个cur_news_page变量,该变量代表的,即是用户当前正在浏览历史记录中的第几页;用户每次点击前进、后退按钮,都会对这个值进行加减操作;最终通过这个值与history.length的比较,判断是否已经前进(后退)到最前面(后面)一页。
代码如下:
[javascript] 
// @charset “utf-8”; 
// 顶部工具栏 
var Controller_Toolbar = function () { 
    var self = this, 
        _isFirstPage = null, 
        _isLastPage = null, 
        _initSwitchPageEvent = null, 
        _forword = null, 
        _goback = null, 
        _setCount = null, 
        _init = null; 
     
    /**
     * 工具栏事件(前进、后退)
     * 思路:在cookie中存储Integer型变量以确定用户当前浏览的页面位置
     * cur_news_page    :   当前页下标
     */ 
    _initSwitchPageEvent = function () { 
        $(‘.back’).live(‘click’, function () { 
            if (!_isFirstPage()) { 
                _goback(); 
            } 
        }); 
        $(‘.forword’).live(‘click’, function () { 
            if (!_isLastPage()) { 
                _forword(); 
            } 
        }); 
         
        $(‘.btn_left’).click(function () { 
            _setCount(); 
        }); 
        $(‘.btn_right’).click(function () { 
            _setCount(); 
        }); 
        $(‘.highlight_tip > span’).click(function () { 
            if (!$(this).hasClass(‘current’)) { 
                _setCount(); 
            } 
        }); 
         
         
        // 初始样式 
        if (!_isFirstPage()) { 
           
$(‘.back_disabled’).removeClass(‘back_disabled’).addClass(‘back’); 
        }  
        if (!_isLastPage()) { 
           
$(‘.forword_disabled’).removeClass(‘forword_disabled’).addClass(‘forword’); 
        } 
    }; 
     
    /**
     * 计数变量的赋值
     */ 
    _setCount = function () { 
        var totalPage = history.length || 1; 
        Util.Cookies.set(‘cur_news_page’, (parseInt(totalPage) +
1)); 
         
    }; 
     
    /**
     * 是否为第一页
     * @returns {Boolean}
     */ 
    _isFirstPage = function () { 
        var curPage = Util.Cookies.get(‘cur_news_page’), 
        curPage = curPage || 1; 
        if (curPage == 1) { 
            return true; 
        } 
        return false; 
    }; 
     
    /**
     * 是否为最后一页
     * @returns {Boolean}
     */ 
    _isLastPage = function () { 
        var curPage = Util.Cookies.get(‘cur_news_page’); 
        curPage = curPage || 1; 
        var totalPage = history.length || 1; 
        if (curPage == totalPage) { 
            return true; 
        } 
        return false; 
         
    }; 
     
    /**
     * 前进
     */ 
    _forword = function () { 
        var curPage = Util.Cookies.get(‘cur_news_page’); 
        Util.Cookies.set(‘cur_news_page’, (parseInt(curPage) + 1)); 
        history.go(+1); 
         
    }; 
     
    /**
     * 后退
     */ 
    _goback = function () { 
        var curPage = Util.Cookies.get(‘cur_news_page’); 
        Util.Cookies.set(‘cur_news_page’, (parseInt(curPage) – 1)); 
        history.go(-1); 
    }; 
     
    _init = function () { 
        _initSwitchPageEvent(); 
    }; 
     
    _init(); 
}; 
作者:xinsheng2011

如:jsp:
                 <SCRIPT type=text/javascript
src=”js/jquery.tooltip.v.1.1.js”></SCRIPT>
                <SCRIPT type=text/javascript
src=”js/jquery.tooltip.execute.js”></SCRIPT>
                  机型:<a href=”#nogo” class=”with-tooltip”
title=”<img src=’images/plane/${air.aircrafttype}.jpg’/>”
>${air.aircrafttype}</a>
jquery.tooltip.execute.js:
$(document).ready(function(){
 $(“.with-tooltip”).simpletooltip();
});
tooltip.v.1.1.js: www.2cto.com
 /**
*
* simpleTooltip jQuery plugin, by Marius ILIE
* visit for details
*
**/
(function($){ $.fn.simpletooltip = function(){
 return this.each(function() {
  var text = $(this).attr(“title”);
  $(this).attr(“title”, “”);
  if(text != undefined) {
   $(this).hover(function(e){
    var tipX = e.pageX + 12;
    var tipY = e.pageY + 12;
    $(this).attr(“title”, “”);
    $(“body”).append(“<div id=’simpleTooltip’ style=’position:
absolute; z-index: 100; display: none;’>” + text + “</div>”);
    if($.browser.msie) var tipWidth =
$(“#simpleTooltip”).outerWidth(true)
    else var tipWidth = $(“#simpleTooltip”).width()
    $(“#simpleTooltip”).width(tipWidth);
    $(“#simpleTooltip”).css(“left”, tipX).css(“top”,
tipY).fadeIn(“medium”);
   }, function(){
    $(“#simpleTooltip”).remove();
    $(this).attr(“title”, text);
   });
   $(this).mousemove(function(e){
    var tipX = e.pageX + 12;
    var tipY = e.pageY + 12;
    var tipWidth = $(“#simpleTooltip”).outerWidth(true);
    var tipHeight = $(“#simpleTooltip”).outerHeight(true);
    if(tipX + tipWidth > $(window).scrollLeft() + $(window).width())
tipX = e.pageX – tipWidth;
    if($(window).height()+$(window).scrollTop() < tipY + tipHeight)
tipY = e.pageY – tipHeight;
    $(“#simpleTooltip”).css(“left”, tipX).css(“top”,
tipY).fadeIn(“medium”);
   });
  }
 });
}})(jQuery);
 作者:gdn_wolf

betway必威亚洲官网 1
01
Ext.onReady(function () {
002
 
003
    Ext.QuickTips.init();
004
 
005
    function rendervalue(value) {
006
        if (value.replace(/%/g, “”) > 30) {
007
            return  ‘<font color=\”red\”>’ + value +
‘</font>’;
008
        } else if (value.replace(/%/g, “”) < 5) {
009
            return  ‘<font color=\”green\”>’ + value +
‘</font>’;
010
        } else {
011
            return value;
012
        }
013
    }
014
 
015
    var store = new Ext.data.JsonStore({
016
        url:’../pycgi/get_dat.py?table=job_list’,
017
        totalProperty:’totalProperty’,
018
        root:’results’,
019
        baseParams:{startDate:”, endDate:”},
020
        fields:[‘task_id’, ‘user_name’, ‘task_name’, ‘create_time’,
‘finish_time’, ‘finish_flag’, ‘dow_url’, ‘del_cmd’
021
        ],
022
        pruneModifiedRecords:true
023
    });
024
 
025
    var sm = new Ext.grid.CheckboxSelectionModel();
026
 
027
    var cm = new Ext.grid.ColumnModel([
028
        new Ext.grid.RowNumberer(),
029
        sm,
030
        {header:”任务ID”, width:80, dataIndex:’task_id’, editor:new
Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
031
        {header:”用户名”, width:100, dataIndex:’user_name’, editor:new
Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
032
        {header:”任务名”, width:100, dataIndex:’task_name’, editor:new
Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
033
        {header:”创建时间”, width:100, dataIndex:’create_time’,
editor:new Ext.grid.GridEditor(new
Ext.form.TextField({allowBlank:false}))},
034
        {header:”结束时间”, width:100, dataIndex:’finish_time’,
editor:new Ext.grid.GridEditor(new
Ext.form.TextField({allowBlank:false}))},
035
        {header:”结束标志”, width:100, dataIndex:’finish_flag’,
editor:new Ext.grid.GridEditor(new
Ext.form.TextField({allowBlank:false}))},
036
        {header:”下载URL”, width:100, dataIndex:’dow_url’, editor:new
Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))},
037
        {header:”删除命令”, width:100, dataIndex:’del_cmd’, editor:new
Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:false}))}
038
    ]);
039
    var Record = Ext.data.Record.create([
040
        {name:’task_id’, type:’int’},
041
        {name:’user_name’, type:’string’},
042
        {name:’task_name’, type:’string’},
043
        {name:’create_time’, type:’string’},
044
        {name:’finish_time’, type:’string’},
045
        {name:’finish_flag’, type:’int’},
046
        {name:’dow_url’, type:’string’},
047
        {name:’del_cmd’, type:’string’}
048
    ]);
049
 
050
    var grid = new Ext.grid.EditorGridPanel({
051
        store:store,
052
        mode:’remote’,
053
        applyTo:’grid’,
054
        autoScroll:true,
055
        stripeRows:true,
056
        loadMask:true,
057
        frame:true,
058
        viewConfig:{
059
            forceFit:true,
060
            listeners:{
061
                refresh:function (view) {
062
                    var gridcount = 0;
063
                    store.each(function (r) {
064
                        var day = (new Date(r.data.day)).getDay();
065
                        if (day == 0 || day == 6) {
066
                           
grid.getView().getRow(gridcount).style.backgroundColor = ‘#FDEADA’;
067
                        }
068
                        gridcount++;
069
                    });
070
                }
071
            }
072
        },
073
        bbar:new Ext.PagingToolbar({
074
            pageSize:20,
075
            store:store,
076
            displayInfo:true,
077
            displayMsg:”显示第 {0} 条到 {1} 条记录,一共 {2} 条”,
078
            emptyMsg:”没有记录”,
079
            beforePageText:’第’,
080
            afterPageText:’页 共{0}页’,
081
            firstText:’首页’,
082
            prevText:’上一页’,
083
            nextText:’下一页’,
084
            lastText:’尾页’,
085
            refreshText:’刷新’
086
        }),
087
        tbar:[
088
            {
089
                text:’添加一行’,
090
                icon:’../img/add.gif’,
091
                handler:function () {
092
                    var p = new Record({
093
                        task_id:”,
094
                        user_name:”,
095
                        task_name:”,
096
                        create_time:”,
097
                        finish_time:”,
098
                        finish_flag:”,
099
                        dow_url:”,
100
                        del_cmd:”
101
 
102
                    });
103
                    grid.stopEditing();
104
                    store.insert(0, p);
105
                    grid.startEditing(0, 0);
106
                    grid.view.refresh();
107
                }
108
            },
109
            ‘-‘,
110
            {
111
                text:”保存修改/新增”,
112
                icon:’../img/save.png’,
113
                handler:function () {
114
                    var modified = store.modified;
115
                    saveData(modified);
116
                }
117
            },
118
            ‘-‘,
119
            {
120
                text:’删除选择’,
121
                icon:’../img/delete.gif’,
122
                handler:function () {
123
                    if (grid.getSelectionModel().hasSelection()) {
124
                        Ext.Msg.confirm(‘信息’, ‘确定要删除?’, function
(btn) {
125
                            if (btn == ‘yes’) {
126
                                setIds = “”
127
                                var rows =
grid.getSelectionModel().getSelections();//获取所选行数
128
                                for (var i = 0; i < rows.length; i++)
{
129
                                    store.remove(rows[i]);
//执行删除
130
                                    //store.removed.push(rows[i]);
131
                                    setIds +=
rows[i].get(“task_id”);
132
                                    if (i < rows.length – 1) setIds
+= ‘,’;
133
                                }
134
                                setIds = ‘[‘ + setIds + ‘]’
135
 
136
                                grid.view.refresh();
137
                            }
138
                        });
139
                    }
140
                    else {
141
                        Ext.Msg.alert(“错误”,
“没有任何行被选中,无法进行删除操作!”);
142
                    }
143
                }
144
            },
145
            ‘-‘,
146
            {
147
                text:”保存删除”,
148
                icon:’../img/save.png’,
149
                handler:function () {
150
                    //var modified = store.modified;
151
                    delData(setIds);
152
                }
153
            },
154
            ‘-‘,
155
 
156
            ‘按时间范围从’ ,
157
            {
158
                xtype:”datefield”,
159
                format:’Y-m-d’,
160
                id:’startDate’,
161
                allowBlank:false
162
 
163
 
164
            },
165
            ‘ 到 ‘,
166
            {
167
                xtype:”datefield”,
168
                format:’Y-m-d’,
169
                id:’endDate’,
170
                allowBlank:false
171
            },
172
            ‘-‘,
173
            {
174
                text:’查询’,
175
                icon:’../img/search.png’,
176
                listeners:{click:function () {
177
                    if (!Ext.getCmp(‘startDate’).isValid() ||
!Ext.getCmp(‘endDate’).isValid()) {
178
                        Ext.Msg.alert(‘提示’, ‘日期不能为空!’);
179
                    } else if (Ext.getCmp(‘startDate’).value >
Ext.getCmp(‘endDate’).value) {
180
                        Ext.Msg.alert(‘提示’,
‘开始日期不能大于结束日期!’);
181
                    } else if (Ext.getCmp(‘endDate’).value >= new
Date().format(‘Y-m-d’)) {
182
                        Ext.Msg.alert(‘提示’,
‘只能选择今日之前的日期!’);
183
                    } else {
184
 
185
                        store.on(‘beforeload’, function () {
186
                            store.baseParams = {
187
                                start:0,
188
                                limit:20,
189
                               
startDate:Ext.getCmp(‘startDate’).value,
190
                                endDate:Ext.getCmp(‘endDate’).value
191
                            };
192
                        });
193
                        store.load();
194
                    }
195
                }
196
                }
197
            },
198
            ‘-‘,
199
            {
200
                text:’重置’,
201
                icon:’../img/refresh.png’,
202
                tooltip:’清空查询条件’,
203
                handler:function () {
204
                    Ext.getCmp(‘startDate’).reset();
205
                    Ext.getCmp(‘endDate’).reset();
206
                    store.reload({start:0, limit:20});
207
 
208
                }
209
            },
210
            ‘-‘,
211
            {
212
                text:’刷新’,
213
                icon:’../img/refresh.png’,
214
                tooltip:’刷新纪录’,
215
                handler:function () {
216
                    store.removeAll();
217
                    store.reload({start:0, limit:20});
218
                    //store.reload();
219
                }
220
            },
221
            ‘-‘,
222
            {
223
                text:’图表’,
224
                icon:’../img/chart.png’,
225
                tooltip:’显示图表’,
226
                listeners:{
227
                    click:function () {
228
                        //store.sort(‘task_name’, ‘ASC’);
229
                        var chartTabs = new Ext.TabPanel({
230
                            activeTab:0,
231
 
232
                            autoScroll:true,
233
                            autoWidth:true,
234
                            monitorResize:true,
235
                            enableTabScroll:true,
236
 
237
                            items:[
238
                                {
239
                                    title:’taskid’,
240
                                    items:{
241
                                        xtype:’linechart’,
242
                                       
url:’../ext-3.4.0/resources/charts.swf’,
243
                                        store:store,
244
                                        xField:’task_name’,
245
                                        yField:’task_id’,
246
                                        yAxis:new
Ext.chart.NumericAxis({
247
                                            displayName:’task_id’
248
                                        }),
249
                                        tipRenderer:function (chart,
record) {
250
                                            return
record.data.task_id
251
                                                + ‘ in ‘ +
record.data.task_name;
252
                                        }
253
                                    }
254
                                }
255
                            ]
256
                        });
257
                        var chartWindow = new Ext.Window({
258
                            title:’图表’,
259
                            closable:true,
260
                            width:900,
261
                            height:450,
262
                            layout:’fit’,
263
                            items:chartTabs,
264
                            listeners:{
265
                                beforeclose:function () {
266
                                    chartTabs.destroy();
267
                                    chartWindow.hide();
268
                                    store.sort(‘day’, ‘DESC’);
269
                                    return false;
270
                                }
271
                            }
272
                        });
273
                        chartWindow.show();
274
                    }
275
                }
276
            },
277
            ‘-‘,
278
            {
279
                text:’导出到Excel’,
280
                icon:’../img/excel.gif’,
281
 
282
                handler:function () {
283
                    if (!Ext.fly(‘frmDummy’)) {
284
                        var frm = document.createElement(‘form’);
285
                        frm.id = ‘frmDummy’;
286
                        frm.name = id;
287
                        frm.className = ‘x-hidden’;
288
                        document.body.appendChild(frm);
289
                    }
290
                    Ext.Ajax.request({
291
                        url:’../pycgi/py2xls.py’,
292
                        method:’POST’,
293
                        form:Ext.fly(‘frmDummy’),
294
                        isUpload:true,
295
                        params:{ tname:’job_list’, fname:’jobList’}
296
                    });
297
                }
298
            },
299
            ‘-‘
300
 
301
        ],
302
 
303
        sm:sm,
304
        cm:cm
305
    });
306
    store.load({start:0, limit:20});
307
 
308
    function saveData(modified) {
309
        var json = [];
310
        Ext.each(modified, function (item) {
311
            json.push(item.data);
312
        });
313
        if (json.length > 0) {
314
            Ext.Ajax.request({
315
                url:”../pycgi/saveData.py”,
316
                params:{ data:Ext.util.JSON.encode(json) },
317
                method:”POST”,
318
                success:function (response) {//response
319
                    Ext.Msg.alert(‘信息’, response.responseText,
function () {// action.result.msg
320
                        store.reload();
321
                    });
322
                },
323
                failure:function () {
324
                    Ext.Msg.alert(“错误”,
“与后台联系的时候出现了问题”);
325
                }
326
            });
327
        }
328
        else {
329
            Ext.Msg.alert(“警告”, “没有任何需要更新的数据!”);
330
        }
331
    }
332
 
333
 
334
    function delData(setIds) {
335
        if (setIds != “”) {
336
            Ext.Ajax.request({
337
                url:”../pycgi/saveData.py”,
338
                params:{ delId:setIds},
339
                method:”POST”,
340
                success:function (response) {//response
341
                    Ext.Msg.alert(‘信息’, response.responseText,
function () {// action.result.msg
342
                        store.reload();
343
                    });
344
                },
345
                failure:function () {
346
                    Ext.Msg.alert(“错误”,
“与后台联系的时候出现了问题”);
347
                }
348
            });
349
        }
350
        else {
351
            Ext.Msg.alert(“警告”, “没有任何需要del的数据!”);
352
        }
353
    }
354
 
355
    new Ext.Viewport({
356
        layout:’fit’,
357
        items:[grid]
358
    });
359
 
360
});

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图