baraear/laravel-thailand-js

从最受欢迎的帮助用户填写泰国地址的工具，部署到 Laravel 框架。

维护者

详细信息

github.com/HiQStd/laravel-thailand-js

源代码

问题

安装: 62

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 3

分支: 1

公开问题: 0

语言:JavaScript

v1.0.0 2018-01-11 09:27 UTC

MIT f706f4dac35a7333834b334f71f3452e3e91c17c

  • baraear <baraear.woop@gmail.com>

This package is auto-updated.

Last update: 2024-09-17 17:00:45 UTC

README

将最佳泰国地址输入工具与 Laravel 集成，使使用更加方便

Latest Stable Version Latest Unstable Version License Total Downloads StyleCI Scrutinizer

安装

  1. 您可以通过 Composer 安装此包
composer require baraear/laravel-thailand-js
  1. 安装完成后，请将包的服务提供者添加到 config/app.php 文件中
/*
 * Package Service Providers...
 */
Baraear\ThailandJS\ThailandJSServiceProvider::class,
  1. 将包的 Facade 添加到 config/app.php 文件中
/*
 * Package Service Providers...
 */
'aliases' => [
    'ThailandJS' => Baraear\ThailandJS\ThailandJSFacade::class,
]
  1. 更新 autoload.php 文件
composer dump-autoload

配置

  1. 创建包的配置文件
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="config"
  1. 检查 config/thailandjs.php 文件中的配置
<?php

return [
    /*
     * หากคุณใช้ laravel-mix ในการ compile asset files.
     */
    'use-mix' => false,

    'path' => [
        /*
         * ระบุ path ของไฟล์ .js ในกรณีที่คุณไม่ได้ใช้ laravel-mix
         */
        'js' => '/js/laravel-thailand-js',

        /*
         * ระบุ path ของไฟล์ .css ในกรณีที่คุณไม่ได้ใช้ laravel-mix
         */
        'css' => '/css/laravel-thailand-js',
    ],
];

使用

1. 未使用 laravel-mix 的情况
  1. 复制所需的资源文件
php artisan vendor:publish --provider="Baraear\ThailandJS\ThailandJSServiceProvider" --tag="resources"
  1. 在 .blade.php 文件中声明使用 JavaScript 文件和 CSS 文件
// สำหรับประกาศใช้งาน stylesheet ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::styles(); !!}

// สำหรับประกาศใช้งาน javascript ทั้งหมดที่จำเป็นจะต้องใช้งาน
{!! ThailandJS::scripts(); !!}

如果使用 use-mix 功能，则不会产生效果

  1. 声明使用 jquery.Thailand.js 的函数
/**
 * Render ThailandJS JavaScript function.
 *
 * @param array|string $attributes
 * @param string $onLoad
 * @param bool $log
 */
{!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}

/**
 * Render ThailandJS JavaScript search function.
 *
 * @param string $searchable
 * @param string $prepend
 * @param string $onLoad
 * @param bool $log
 */
{!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}

如果未指定包参数，将使用 jquery.Thailand.js 的示例参数

当与 Laravel 框架结合使用时，jquery.Thailand.js 的 index.html 文件示例（输入模式）
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>jquery.Thailand.js</title>
    
    <link rel="stylesheet" href="https://fonts.googleapis.ac.cn/css?family=Kanit">
    {!! ThailandJS::styles(); !!}

</head>
<body>

    <div class="uk-container uk-padding">

        <h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>

        <div id="loader">
            <div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
        </div>

        <form id="demo1" class="demo" style="display:none;" autocomplete="off" uk-grid >

            <div class="uk-width-1-2@m">
                <label class="h2">ตำบล / แขวง</label>
                <input name="district" class="uk-input uk-width-1-1" type="text">
            </div>

            <div class="uk-width-1-2@m">
                <label class="h2">อำเภอ / เขต</label>
                <input name="amphoe" class="uk-input uk-width-1-1" type="text">
            </div>

            <div class="uk-width-1-2@m">
                <label class="h2">จังหวัด</label>
                <input name="province" class="uk-input uk-width-1-1" type="text">
            </div>

            <div class="uk-width-1-2@m">
                <label class="h2">รหัสไปรษณีย์</label>
                <input name="zipcode" class="uk-input uk-width-1-1" type="text">
            </div>

        </form>
        
    </div>
    
    {!! ThailandJS::scripts(); !!}
    {!! ThailandJS::render(['district' => '#demo1 [name="district"]', 'amphoe' => '#demo1 [name="amphoe"]', 'province' => '#demo1 [name="province"]', 'zipcode' => '#demo1 [name="zipcode"]', ], '#loader, .demo', false); !!}
    
</body>
</html>
当与 Laravel 框架结合使用时，jquery.Thailand.js 的 index.html 文件示例（搜索模式）
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>jquery.Thailand.js</title>
    
    <link rel="stylesheet" href="https://fonts.googleapis.ac.cn/css?family=Kanit">
    {!! ThailandJS::styles(); !!}

</head>
<body>

    <div class="uk-container uk-padding">

        <h1>Auto Complete ที่อยู่ อย่างที่มันควรเป็น</h1>

        <div id="loader">
            <div uk-spinner></div> รอสักครู่ กำลังโหลดฐานข้อมูล...
        </div>
        
        <form id="demo2" class="demo" style="display:none;" autocomplete="off">
            <label class="h2">ค้นหาที่อยู่ของคุณ</label>
            <small>ลองกรอกอย่างใดอย่างหนึ่ง ตำบล, อำเภอ, จังหวัด หรือ รหัสไปรษณีย์</small>
            <input name="search" class="uk-input uk-width-1-1" type="text">

            <div id="demo2-output" class="uk-margin"></div>
        </form>
        
    </div>
    
    {!! ThailandJS::scripts(); !!}
    {!! ThailandJS::search('#demo2 [name="search"]', '#demo2-output', '#loader, .demo', false); !!}
    
</body>
</html>
2. 未使用 laravel-mix 的情况

正在开发中...

更改

您可以在 CHANGELOG.md 中检查每个版本的更改。

开发

您可以在 TODO.md 中查看即将添加的新功能。

许可

laravel-thailand-js 包是在 MIT 许可 下提供的开源软件。