Select Page

使用 jQuery 移動元素(Div)

常常有需求要事後調整前台的畫面,尤其現在前端 javascript 的框架一大堆,只能事後處理,把元素的位置變來變去,我這邊舉利用 div 來代表,如何把元素變換位置,讓排版更簡單且容易些。

先準備有原來的 div

<div id="source">
  ....
</div>

想要把原來的Div移動到目的地的div,id 訂為 dest

<div id="dest">
  ....
</div>

JQuery 程式碼 appendTo(),把 div 移動到目的地 div 的裡面

$("#source").appendTo("#dest");

除了 appendTo() 最常用,還整理幾個常用的寫法,放在下面

$("#source").insertBefore("#dest");
$("#source").insertAfter("#dest");
$("#source").prependTo("#dest");
$("#source").appendTo("#dest");

參考資料

https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element

如何解決 ASP.NET MVC WEB API 遇到 CORS 錯誤

如何解決 ASP.NET MVC WEB API 遇到 CORS 錯誤

要用 ASP.NET MVC 開發 WEB API給大家使用,前端 javascript 工程師,總是會遇到錯誤訊息 Response to preflight request doesn’t pass access control check: It does not have HTTP ok status,這是一個超常見的 CORS (Cross-Origin Resource Sharing) – 跨來源資源共用錯誤訊息,網路上很多解法,但可以用的情境都不太一樣,我這邊提供一個我覺得最簡單請快速的方法給大家。

解決方法是利用 NuGet 先安裝 Cors 套件

先上 NuGet 搜尋 Microsoft.AspNet.Cors , Microsoft.AspNet.WebApi.Cors,並且安裝起來

將 Cors 註冊起來

在 App_Start/WebApiConfig.cs 的 Register function 加入以下的程式碼

config.EnableCors();

會是長成以下的程式碼

        public static void Register(HttpConfiguration config)
        {
            // Web API 設定和服務
            config.EnableCors();

            // Web API 路由
            config.MapHttpAttributeRoutes();

            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }

設定 WebAPI 的CORS 權限

我們可以在 WebApi 的 Class 上面設定,也可以在 Function 上做標記,但要注意的是不能有多個 CORS 繫結,如果你在 web.config 中設定,這邊就不能再做設定,如果你在 class 等級上設定了, function 等級就不能再設定,也是因為這個原因,所以我喜歡在 function 等級設定或是 class 等級上設定,web.config 比較少去做設定,雖然他有不用修改程式碼的好處。

其中設定值的資料參考請看https://docs.microsoft.com/en-us/iis/extensions/cors-module/cors-module-configuration-reference

  • origins,可以設定 (*) ,也可以指定特定網域,看你要對誰開放
  • headers,通常用 (*) 就可以了
  • methods,通常用 (*) 就可以了
    [System.Web.Http.Cors.EnableCors(origins: "https://yourdomain.com", headers: "*", methods: "*")]
    public class ValueController : ApiController
    {
    }

CORS web.config 的設定方法

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <cors enabled="true" failUnlistedOrigins="true">
            <add origin="*" />
            <add origin="https://*.yourdomain.com"
                 allowCredentials="true"
                 maxAge="120"> 
                <allowHeaders allowAllRequestedHeaders="true">
                    <add header="header1" />
                    <add header="header2" />
                </allowHeaders>
                <allowMethods>
                     <add method="DELETE" />
                </allowMethods>
                <exposeHeaders>
                    <add header="header1" />
                    <add header="header2" />
                </exposeHeaders>
            </add>
            <add origin="http://*" allowed="false" />
        </cors>
    </system.webServer>
</configuration>

利用 javascript 以及 jquery 由前端網頁發送 email

// 發送email  
function sendEmail(title,text){
    var email = document.createElement("a");
    email.id = "sendemail";   
    email.href = "mailto:[email protected]?subject="+title+"&body="+ text;
    email.click();
    }

當使用者在網頁中,再連絡表單中填入資訊後,我們通常會寫入後端資料庫,並且發送通知,以方便管理者使用,但沒有資料庫的人,就需要仰賴使用者自己的電子郵件了,為了統一格式方便,我們還是提供聯絡表單,先幫忙使用者把資料正規化一下,然後在協助它們送出資訊給後端的管理者

5種 wordle 應用,讓你玩不停

5種 wordle 應用,讓你玩不停

有鑑於最近大家的一股腦兒的跟風 wordle 這款遊戲,讓我們不得不正視這款猜字或是猜東西的小遊戲如何讓大家瘋迷,並且也想要改善我們的拼字練功坊,看能不能讓它有趣一點,在這之前先說說我看到的5種 wordle 應用。

正統英文版的猜英文 Wordle

這款已經紅到了被紐約時報重金買下來的遊戲版本,已經難到了讓我自我放棄的程度,上要知天文,下要知寶可夢,讓只會中文的我,放棄人生。


日本版本 wordle

這款猜日文遊戲跟英文版本大同小異,但我愛的是它也有 OpenSource ,可以到 Github 上下載 mahjong-hand-guessing-game


中文注音版本 wordle

這款看起來是利用 opensource 去發展的中文注音版本,雖然說是香港人開發的,但很適合台灣人使用(因為學的是注音),一樣是會每天有不同的題庫來考考大家

同場加映,粵語版本的 wordle

麻將版本的 wordle

接下來就不僅僅只有猜字了,開始有人腦洞大開,加入了各種的民族元素,不過開始者是採用了日本麻將,為 14 張牌型,鍵盤上是各種萬、筒、條跟字,共有六次機會猜題機會,比較有趣的是它也有東北風的概念


大逃殺版本的 wordle

大逃殺版本的 wordle ? 為什麼說他是大逃殺版本,因為你同時可以跟最多 99 人一起玩,在時間內,最後只會留下一個人為勝利者,也就是說你不僅只有要猜對字,還要能跟其他人競爭、跟時間賽跑,你每答對一題,就可以對其他人發動攻擊,扣除他們的生命力