發表文章

目前顯示的是有「jQuery」標籤的文章

Ajax上傳文件至MVC的controller

  <!--這一行是假的filebox 用於呈現選取的File --> < input id = "false_fileBox" name = "false_fileBox" placeholder = "點此選擇檔案" type = "text" /> <!--這一行是被隱藏起來的真filebox,用css將opacity(不透明度)設為0,再用margin(外邊距)給調整到與上方的textbox重疊的位置--> < input id = "fileBox" name = "fileBox" onchange = "inFalseFilebox(this,'false_fileBox')" style = "margin-top: -27px; margin-bottom: 8px; width: 100%; opacity: 0;" type = "file" class = "file" /> <!--上傳按鈕,會用他來觸發檔案上傳的事件--> < button type = "button" onclick = "fileUpload('fileBox')" > 上傳 </ button > 紅色這段應該也可以直接使用 <input id= " file " type= " file " > 直接呈現 甚至不需要Onchange就可以呈現目前選取的資料名稱 //第一個是在真的filebox中設定onchange //讓真的filebox接收到檔案時,可以同步把檔案路徑名稱放進假的textbox中 //不然真的filebox被隱藏了,使用者也無法看到自己選擇了哪個檔案。 function inFalseFilebox ( obj,id ) { $( '#' +id).val(obj.value);...

ajax 動態載入html後不能執行其中的js解決方法(後續更新 使用Razor可以執行)

前端 這邊的寫法跟參考的有所差距 原因是帶資料進去不知道為何帶回去之後alert出來的並不是js代碼 而是String 因此我就直接讓他alter出來即可 @* 這邊是在處理上傳資料 *@ <input type="file" id="fileupload" name="fileupload" accept=".xlsx" multiple="multiple" /> <input type="submit" id="fileSubmit" name="fileSubmit" class="btn btn-primary" value="寫入資料庫" /> @if (ViewBag.msg != null) { <alert>     @ViewBag.msg </alert> } <script>     $("#fileSubmit").on("click", function () {         var file = $("#fileupload").val;         if (file == null || file == "") {             alert("無上傳檔案");         } else {             var file = document.getElementById("fileupload").files;             var fileData = new FormData();             for (var i = 0; i < file.length; i++) {                 fileData.append("fi...

jQuery 主題設定

在網頁上讓使用者快速更換成自己想要的風格,假如你很有才的想要自己寫jQuery ui然後自己套的不同種類的風格的話可以使用 <link id=" theme " href =" themes/hot-sneaks/jquery-ui.min.css " rel="stylesheet"> <select  id=" themes "  onchange="javascript: change_theme() ;">     <option value="base">base</option>     <option value="black-tie">black-tie</option>     <option value="blitzer">blitzer</option>     <option value="cupertino">cupertino</option>     <option value="dark-hive">dark-hive</option>   </select> function change_theme() {   var theme=$("# themes "). val() ;   var href ="themes/" + theme + "/jquery-ui.min.css";   $("# theme "). attr (" href ", href );   } 參考 https://stackoverflow.com/questions/3829687/change-the-href-of-a-css-link-via-jquery 這個方法會導致你的select button 同樣的也可以使用DropDownList或者RaidoButton也行。 而上述方法是以htm...

jQuery 環境配置

首先先安裝 https://jqueryui.com/download/ 直接下拉按下DownLoad,解壓縮裡面有 jquery-ui.css 和 jquery-ui.js 至於jquery-ui.min 則是把所有jquery-ui的排版全部拿掉後的版本,兩個是一樣的。 接著去 https://jquery.com/download/ 找到 Download the compressed, production jQuery 3.6.0   後進入後右鍵另存新檔 順帶一提, Download the uncompressed, development jQuery 3.6.0 是有排版的版本,就跟min一樣的道理,然號貌似會因為版本號被掃出弱點,所以可能要像上面的jquery-ui一樣,刪除版本號(以前的版本有版本號) 接著下載完之後塞入專案中,在前端引用的時候就以 <script type="text/javascript" charset="utf-8" src="../Scp/jquery-1.10.2.js"></script> <link rel="stylesheet" href="../Scp/jquery-ui.css" /> 來引用 相關路徑配置請參考 網址內容 參考 https://yhhuang1966.blogspot.com/2013/03/jquery-ui.html

jQuery Button

<a href="#" class="ui-button ui-widget ui-corner-all">Anchor</a> <input type="button" value="Input element type=button" class="ui-button ui-widget ui-corner-all"><button class="ui-button ui-widget ui-corner-all">Button element</button> 適用於三種element,都可以轉換成button樣式 至於有些button可以畫上小圖示則是透過 <a href="#" class="ui-button ui-widget ui-corner-all">Anchor  <span class="ui-icon ui-icon-volume-on"></span></a> <!-- 圖片掛後 --> <input type="button" value="Input element type=button" class="ui-button ui-widget ui-corner-all"> <button class="ui-button ui-widget ui-corner-all"> <span class="ui-icon ui-icon-gear"></span> Button element</button>  <!--  圖片 掛前 --> 全圖種類參考  https://api.jqueryui.com/resources/icons-list.html ----------------------------------------------------------...

各種驗證問題 SQL,ASP.NET MVC,AD

 一般帳號密碼驗證 建立MVC3專案時會自動產生 <add key="ClientValidationEnabled" value="true"/>  這條是用於驗證用的 true代表不回傳Server,要測試Server的回傳值就必須先關閉,把value改為false。 接著,關於驗證順序 Server的驗證順序為 Required  > StringLength  > RegularExpression  MicrosoftMvcVaildation Client端的驗證順序為  Required  > StringLength  > RegularExpression 接著 MVC4的時候,MicrosoftMvcVaildation貌似會消失 其餘方案為 jquery.validate Client端的驗證順序為 Required  > RegularExpression  > StringLength 上面已經有人測試過了,測試的話請 參照 ,記得打開 ClientValidationEnabled,改為true 參照上記載  jquery.validate.js 中的第158行左右記載驗證過程,更改一下順序即可。 參考 https://dotblogs.com.tw/jackhuang/2012/11/11/82754 --------------------------------------------------------------------------------------------------------- AD登入(Windows連線驗證) 上述的做法是需要帳號密碼阿,檢驗長度阿,看有沒有不良字元阿之類的登入方法。 這個方法比較傾向於鎖電腦登入,假如你沒有使用目標電腦登入的話則無法登入。 建立一個帳號是跟該電腦使用者名稱相同的,用於登入。 Session["DnsAndID"] = User.Identity.Name; 取得網域以及UserName 通常是由DNS/ID組成 接著就是開始檢查此ID是否在資料庫內,此方法可以省去打字連線的問題,可以直接透過檢查主機是否在使用者Ta...

jQuery Tabs

< link rel = "stylesheet" href = "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > < link rel = "stylesheet" href = "/resources/demos/style.css" > < script src = "https://code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script > <!-- 引入jQuery --> (type A) //在同一個頁面上進行 $(function(){ $( "somevalues" ).tabs(); }); <div id="somevalues"> <li><a href="#divid-1">TagName-1</a></li> <li><a href="#divid-2">TagName-2</a></li> <li><a href="#divid-3">TagName-3</a></li> <div id="divid-1"> 1 </div> <div id="divid-2"> 2 </div> <div id="divid-3"> 3 </div> </div> (type B) 用C#畫出圖形 aspx $(function(){ ...

Jquery & AJAX

圖片
 是一個JavaScript的函式庫,極大的簡化了JavaScript的流程 $(document).ready(function(){   $("p").click(function(){     $(this).hide();   }); }); "p"處可塞任意元素 p 選取所有<p>的元素 p.infor 選取<p>中所有class為infor的元素 .infor 選取所有class = infor 元素 #infor 選取所有id = infor 元素 ul li:first 選取第一個ul的第一個li元素 ul li:first 選取每一個ul的第一個li元素 [href$='.jpg'] 選取所有帶有jpg結尾的屬性值並且帶有href屬性 a[target='_blank'] 選取所有帶有blank屬性的a元素 div#infor .head 所有 div元素中  id = infor 的 並且class = head的元素 :disabled 所有disabled的元素都將選取 Jquery事件 (document).ready(function(){}); Mouse Events click , dbclick(double - click) , mouseenter , mouseleave mousedown , mouseup , hover , focus Keyboard Events  keypress , keydown , keyup Form Events submit , change , focus , blur Doucunent load , resize , scroll , unload hide(); 可以放 "fast" , " slow" 和數字 是以千分之一秒計時,ex 1000 = 1second 隱藏 toggle(); 同樣可以放 "fast" , " slow" 和數字 可以同時兼顧隱藏跟顯示 fadeIn(); 淡入 可以放 "fast" , " slow" 和數字 是以千分之一秒計時,...