2018年3月27日 星期二

jQuery 事件

資料引用來源:jQuery 事件

jQuery 事件函數
jQuery 事件處理方法是 jQuery 中的核心函數。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
術語由事件“觸發”(或“激發”)經常會被使用。

通常會把 jQuery 代碼放到 <head> 部分的事件處理方法中:

實例:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>
 在上面的例子中,當按鈕的點擊事件被觸發時會調用一個函數:
$("button").click(function() {..some code... } )
 該方法隱藏所有 <p> 元素:
$("p").hide();
單獨文件中的函數
如果您的網站包含許多頁面,並且您希望您的 jQuery 函数易于维護,那麼請把您的 jQuery 函数放到獨立的 .js 文件中。

當我們在教程中演示 jQuery 時,會將函數直接添加到 <head> 部分中。不過,把它們放到一個單獨的文件中會更好,就像這样(通過 src 屬性來引用文件):
實例:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名稱沖突
jQuery 使用 $ 符号作為 jQuery 的簡介方式。

某些其他 JavaScript 庫中的函数(比如 Prototype)同样使用 $ 符號。

jQuery 使用名为 noConflict() 的方法來解決該問題。

var jq=jQuery.noConflict(),幫助您使用自己的名稱(比如 jq)來代替 $ 符號。

jQuery 事件
下面是 jQuery 中事件方法的一些例子:

Event 函數 绑定函數至
$(document).ready(function) 將函數绑定到文檔的就續事件(當文檔完成加載時)
$(selector).click(function) 觸發或将函數绑定到被選元素的點擊事件
$(selector).dblclick(function) 觸發或将函數绑定到被選元素的雙擊事件
$(selector).focus(function) 觸發或将函數绑定到被選元素的獲得焦点事件
$(selector).mouseover(function) 觸發或将函數绑定到被選元素的鼠標懸停事件

方法描述
bind()向匹配元素附加一個或更多事件處理器
blur()觸發、或将函數绑定到指定元素的 blur 事件
change()觸發、或将函數绑定到指定元素的 change 事件
click()觸發、或将函數绑定到指定元素的 click 事件
dblclick()觸發、或将函數绑定到指定元素的 double click 事件
delegate()向匹配元素的當前或未來的子元素附加一個或多個事件處理器
die()移除所有通過 live() 函数添加的事件處理程序。
error()觸發、或将函數绑定到指定元素的 error 事件
event.isDefaultPrevented()返回 event 對象上是否調用了 event.preventDefault()。
event.pageX相對於文檔左邊緣的鼠標位置。
event.pageY相對於文檔上邊緣的鼠標位置。
event.preventDefault()阻止事件的默認動作。
event.result包含由被指定事件觸發的事件處理器返回的最后一個值。
event.target觸發該事件的 DOM 元素。
event.timeStamp該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。
event.type描述事件的類型。
event.which指示按了哪個键或按钮。
focus()觸發、或将函數绑定到指定元素的 focus 事件
keydown()觸發、或将函數绑定到指定元素的 key down 事件
keypress()觸發、或将函數绑定到指定元素的 key press 事件
keyup()觸發、或将函數绑定到指定元素的 key up 事件
live()為當前或未來的匹配元素添加一個或多個事件處理器
load()觸發、或将函數绑定到指定元素的 load 事件
mousedown()觸發、或将函數绑定到指定元素的 mouse down 事件
mouseenter()觸發、或将函數绑定到指定元素的 mouse enter 事件
mouseleave()觸發、或将函數绑定到指定元素的 mouse leave 事件
mousemove()觸發、或将函數绑定到指定元素的 mouse move 事件
mouseout()觸發、或将函數绑定到指定元素的 mouse out 事件
mouseover()觸發、或将函數绑定到指定元素的 mouse over 事件
mouseup()觸發、或将函數绑定到指定元素的 mouse up 事件
one()向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。
ready()文檔就緒事件(當 HTML 文檔就緒可用時)
resize()觸發、或将函數绑定到指定元素的 resize 事件
scroll()觸發、或将函數绑定到指定元素的 scroll 事件
select()觸發、或将函數绑定到指定元素的 select 事件
submit()觸發、或将函數绑定到指定元素的 submit 事件
toggle()綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。
trigger()所有匹配元素的指定事件
triggerHandler()第一個被匹配元素的指定事件
unbind()從匹配元素移除一個被添加的事件處理器
undelegate()從匹配元素移除一個被添加的事件處理器,现在或将来
unload()觸發、或将函數绑定到指定元素的 unload 事件


jQuery 基本用法~選擇器

資料引用來源:jQuery 参考手册
選擇器實例選取
*$("*")所有元素
#id$("#lastname")id="lastname" 的元素
.class$(".intro")所有 class="intro" 的元素
element$("p")所有 <p> 元素
.class.class$(".intro.demo")所有 class="intro" 並且 class="demo" 的元素
:first$("p:first")第一個 <p> 元素
:last$("p:last")最后一個 <p> 元素
:even$("tr:even")所有偶數 <tr> 元素
:odd$("tr:odd")所有奇數 <tr> 元素
:eq(index)$("ul li:eq(3)")列表中的第四個元素(index 從 0 開始)
:gt(no)$("ul li:gt(3)")列出 index 大於 3 的元素
:lt(no)$("ul li:lt(3)")列出 index 小於 3 的元素
:not(selector)$("input:not(:empty)")所有不為空的 input 元素
:header$(":header")所有標题元素 <h1> - <h6>
:animated所有动画元素
:contains(text)$(":contains('W3School')")包含指定字符串的所有元素
:empty$(":empty")無子(元素)節點的所有元素
:hidden$("p:hidden")所有隐藏的 <p> 元素
:visible$("table:visible")所有可見的表格
s1,s2,s3$("th,td,.intro")所有带有匹配選擇的元素
[attribute]$("[href]")所有带有 href 属性的元素
[attribute=value]$("[href='#']")所有 href 属性的值等于 "#" 的元素
[attribute!=value]$("[href!='#']")所有 href 属性的值不等于 "#" 的元素
[attribute$=value]$("[href$='.jpg']")所有 href 属性的值包含以 ".jpg" 结尾的元素
:input$(":input")所有 <input> 元素
:text$(":text")所有 type="text" 的 <input> 元素
:password$(":password")所有 type="password" 的 <input> 元素
:radio$(":radio")所有 type="radio" 的 <input> 元素
:checkbox$(":checkbox")所有 type="checkbox" 的 <input> 元素
:submit$(":submit")所有 type="submit" 的 <input> 元素
:reset$(":reset")所有 type="reset" 的 <input> 元素
:button$(":button")所有 type="button" 的 <input> 元素
:image$(":image")所有 type="image" 的 <input> 元素
:file$(":file")所有 type="file" 的 <input> 元素
:enabled$(":enabled")所有激活的 input 元素
:disabled$(":disabled")所有禁用的 input 元素
:selected$(":selected")所有被選取的 input 元素
:checked$(":checked")所有被選中的 input 元素

jQuery 元素選擇器
jQuery 使用 CSS 選擇器来選取 HTML 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。

jQuery 属性選擇器
jQuery 使用 XPath 表達式来選擇帶有给定屬性的元素。
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 選擇器
jQuery CSS 選擇器可用於改變 HTML 元素的 CSS 屬性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");

$(this)當前 HTML 元素
$("p")所有 <p> 元素
$("p.intro")所有 class="intro" 的 <p> 元素
$(".intro")所有 class="intro" 的元素
$("#intro")id="intro" 的元素
$("ul li:first")每個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")所有帶有以 ".jpg" 结尾的屬性值的 href 屬性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素




2018年3月12日 星期一

設定全頁的字型

            <div class="panel-body">

                <style type="text/css">
                    /*全部設定字體*/
                    body {
                        font-family: 微軟正黑體, 標楷體, 新細明體, verdana, Times New Roman;
                    }
                </style>

2018年3月10日 星期六

HTML5 div 標籤顯示與關閉控制


<div id="TableauViewDiv" class="col-sm-12" align="center" style="display: none">
</div>

<script>
        function TableauView_HideShow() {
            var x = document.getElementById("TableauViewDiv");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

說明:
直接在Div裡控制
關閉:<div id="1" style="displaynone"></div>
顯示:<div id="1" style="displayblock"></div>

在 JavaScript 裡控制
關閉:document.getElementById("TableauViewDiv").style.display = "none";
顯示:document.getElementById("TableauViewDiv").style.display = "block";




JavaScript 等待函示執行完畢,才執行下一個動作

只要在函式裡新增 async: false, 即可


        function PostTicket() {
            var tmp = '';
            $.ajax({
                type: "POST",
                async: false,
                url: "./Default.aspx/Get..........3m",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                //data: JSON.stringify(),                           //資料後傳欄位
                success: function (response) {

                    tmp = JSON.parse(response.d);
                    console.log('PostTicket_OK:' + tmp);
                },
                failure: function (response) {
                    alert(response.status + ' ' + response.statusText);
                },
                error: function (response) {
                    alert(response.status + ' ' + response.statusText);
                }
            });
            return tmp;                                            //回傳 Ticket 值
        }

HTML5 a 標籤 沒有手指的指標出現新增 href 假資訊

如下所示:

<a class="list-group-item" type="button" href="javascript: return false;" onclick="ShowTableauView(\'' + temp_SubMenuName + '\')">' + temp_SubMenuName + '</a>';

如果 iframe 無法內嵌網頁,則另開網頁分頁來顯示

HTML5 裡有使用 iframe 嵌入網頁,但會顯示空白,表示該網頁有判斷不能被別的網頁嵌入
範例如下:
<iframe id="TableauView" width="90%" height="1024" ></iframe>

可以在 script 裡 判斷如果是外部網頁,則開啟新分頁顯示
<script>
function ViewUrl() {
    window.open(SubMenuUrl[i]);
}

ASP.NET 有 Site.Master 主頁時,新增子網頁

ASP.NET 有 Site.Master 主頁時,新增子網頁,有以下幾點要注意:
1.建議由 Default.aspx 複製出一個副本,再改名稱。
.aspx 內第一行要改

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DefaultInt.aspx.cs" Inherits="IR.DefaultInt" %>

.aspx.cs 內的 class 名稱要改
namespace IR
{
    public partial class DefaultInt : Page

如果發生已修改好的網頁不能用,記得更新 bin 檔到遠端 IIS 主機

2018年3月9日 星期五

Add Trusted IP Addresses or Host Names to Tableau Server

打開命令視窗,用admin權限執行

切換到目錄 C:\Program Files\Tableau\Tableau Server\10.5\bin).

輸入下面指令停止 Tableau Server:
tabadmin stop

下一步,輸入下列命令:
tabadmin set wgserver.trusted_hosts "<trusted IP addresses or host names>"

In the command above, <trusted IP addresses> should be a comma-separated list of the IPv4 addresses or host names of your web server(s).

Note:  The values you specify completely overwrite any previous setting. Therefore, you must include the full list of hosts in the set command. (You cannot amend the list of hosts by running the set command repeatedly.)

範例:

tabadmin set wgserver.trusted_hosts "192.168.1.101, 192.168.1.102, 192.168.1.103"

tabadmin set wgserver.trusted_hosts "webserv1, webserv2, webserv3"

Notes:
The comma separated list should be in quotes, with one space after each comma.
The web servers you specify must use static IP addresses, even if you use host names (learn more).

If you have one or more proxy servers between the computer that is requesting the trusted ticket (one of those configured in step 2, above) and Tableau Server, you also need to add them as trusted gateways. See Configure a reverse proxy server for steps.

輸入下面指令變更設定檔的資料:
tabadmin config

最後再輸入下面指令啟動 Tableau Server:
tabadmin start

PS:如果等很久,建議把 Tableau Server 主機重開後再重跑上面步驟就可以了!^_^

cas server 一直圈圈或取得狀態異常

重點: cas server 不能開 VPN,會造成取的來源 dns 異常,會一直轉圈圈或等很久。